Snapic Page 2022 使用文档
版本型号：Snapic Page 2022
适用程序：Typecho
皮肤类型：页面模板
模板作者：Lopwon
作者博客：Lopwon.com
发布页面：Lopwon.com/snapic.html
许可方式：付费使用
官方演示：Fuji Z1，天空篇，影像篇，曲奇猫
付款时别忘了留下邮箱收取文件包，勿留 Gmail 邮箱。
模板说明
Snapic Page 2022 是 Snapic Page 的重制版，v2 为对应版本号。此版在 Snapic Page 的瀑布流框架和布局的基础上，做了一些升级更新，主要为：优化功能代码；优化样式代码；新增模板设置等等，详见以下（模板更新）。
主要功能
模板 Snapic Page 2022 不用改变自己现有的博客主题，也能通过建立独立页面，拥有相册的功能。其中，模板外观布局、功能设置等具有简单的可定制性（如：自定义显示或启用与否），可以用于记录自己的生活影像等等。
模板 Snapic Page 2022 通过识别文章（附件中的图片），在前台以瀑布流的方式呈现，支持单篇页面不断新增照片，并且可以单独为每一张图片添加描述。理论上，可以建立很多个单页相册（如：官方演示里的四个相册同使用 Snapic Page 2022 创建）。
当使用模板 Snapic Page 2022 创建了多个单页相册后，可以选择性使用插件 for Snapic Page 将这些相册在指定位置归档显示（见本页文末）。
模板更新
2025年06月13日 发布 Snapic Page 2022（v2.4），适配 Typecho 1.3.0 rc 版。
2024年08月28日 发布 Snapic Page 2022（v2.3），优化瀑布流布局。
2024年08月06日 发布 Snapic Page 2022（v2.2），优化功能代码；删减平滑滚动。
2023年10月06日 发布 Snapic Page 2022（v2.1），优化功能代码，新增相册归档插件。
2022年09月30日 发布 Snapic Page 2022（v2.0），新增模板设置；新增平滑滚动；优化功能代码；优化样式代码；优化外观细节。
2021年06月26日 发布 Snapic Page
使用方法
A 部署文件
1. 将压缩包里的文件夹 Snapic 及其内部的所有文件，和文件 Snapic-Page.php 上传至目录 usr/themes 中的你的主题文件夹里。
2. 重要：如果之前有使用 Snapic Page 模板，直接覆盖原文件即可。
B 配置页面
一、创建相册（必选项）
后台》管理》独立页面》新增，新建独立页面，除以下提到的事项外，其余正常操作即可。
1. 此编辑页面左侧的“内容文本框”里，选择性输入你对相册的介绍，支持使用纯文本、插入链接等。
2. 此编辑页面右侧的“自定义模板”里，请选择“Snapic Page”。
3. 此编辑页面右侧的“附件”里，请上传你需要展示的图片，不需要插入“内容文本框”中。
4. 此编辑页面右侧的“高级选项”，在“公开度”选择“隐藏”后，可将此相册（独立页面）的标题不展示在某些主题的分类菜单里。
二、添加描述（可选项）
1. 方法一：在以上提到的编辑页面右侧的“附件”里，上传你需要展示的图片后，依次点击每个图片附件的“编辑”（铅笔状图标），进入图片信息的编辑页面，在右侧的“描述”里，输入你对这张图片的介绍，提交修改即可。
2. 方法二：后台》管理》文件，也可以从这里进入图片信息的编辑页面，给每张图片添加描述。
三、新增图片（可选项）
后台》管理》独立页面，打开你需要新增图片的相册（独立页面），继续在“附件”里上传图片即可。最新上传的图片将展示在前台的最前面。
四、图片外链（说明项）
模板 Snapic Page 2022 需要将图片以附件的形式上传。如果使用图床，需要自己通过插件并修改模板代码实现，请自行研究。
C 使用技巧
1. 除了模板默认的窄栏（四栏）和宽栏（三栏）外，如何新增自定义的栏数（如：五栏）？在模板文件 Snapic-Page.php 的 <head> 和 </head> 之间的适当位置，新增如下代码：
<?php if (strpos($this->fields->snapic, '自定义字段值') !== false): ?>
<style>
.grid .grid__item,
.grid .grid__sizer {
width: calc((100% / 3) - 10px);
margin: 5px;
}
@media screen and (max-width: 960px) {
.grid .grid__item,
.grid .grid__sizer {
width: calc((100% / 2) - 10px);
margin: 5px;
}
}
@media screen and (max-width: 480px) {
.grid .grid__item,
.grid .grid__sizer {
width: calc((100% / 1) - 10px);
margin: 5px;
}
}
</style>
<?php endif; ?>
① 以上代码的作用是，使用自定义字段值设置图片瀑布流，在指定显示宽度（默认、480px~960px、0px~480px）的格子大小。
② 请将以上代码中的（自定义字段值）替换为随意英文字母（如：sex），避免和模板的自定义字段值（wide,radius,overlay,padding,gallery,autoplay）重复。
③ 请将以上代码中的 (100% / 3) 修改为 (100% / 5) 即：在默认显示宽度下，五栏显示。其他显示宽度的设置类似。
④ 使用时，在自定义字段名称 snapic 里，填入以上自己新增的自定义字段值（如：sex）即可。
⑤ 注意：这个自己新增的自定义字段值（如：sex），请勿与模板已有的宽栏字段值（wide）同时使用。
D 配置模板
一、创建字段（可选项）
通过使用对应的自定义字段值，可以改变模板的布局和功能。打开你创建的相册（独立页面），按以下介绍依喜好设置即可。
1. 添加自定义字段，字段名称填入 snapic，乱填无效！
2. 字段值填入以下表格（字段值）栏中的任意一个，如果填入多个字段值时，使用半角逗号或空格分开，没有顺序要求。
3. 字段值示例：radius,padding 或 overlay autoplay gallery
申请加入展示区域
https://www.****.cn/jpg.html
感谢！Lopwon 作者的大力支持，完成图床储存方案搭建，稍后发出相关更改说明，以便更多人使用图床。
同时再次感谢各位博主的认真解答，谢谢每一次的邮件都认真答复。
感谢支持，已添加。
大佬 ，搭配图床存储思路性操作教程已发，请查阅。
https://www.****.cn/80.html
已添加，感谢！
您好，能告诉我如何让独立页面变成主页吗，我不太懂这个，找了很久也没有找到方法。谢谢。
http://t.****.me/28.html
自定义首页模板：添加@package index后，在后台》设置》阅读》站点首页，设置。
自定义页面模板：添加@package custom后，在后台》管理》独立页面，编辑独立页面中的“自定义模板”，设置。
那个...为啥我的跟你们的不一样，没有gif。
见本页“F使用技巧”第2点。
已知，谢谢！
大大 最近决定把博客迁回国内，安心备案，现在关站等广西通管局审核，所以展示站就访问不了了
没事，只要不是长时间无法访问，就会留着链接。
终于备案好了
恭喜！
我之前的网站一直是备案好的，后来阿里云的前置备案部，通知我说我的博客不是个人主页，让把我的备案号撤掉了。刚买的3年主机浪费了。
想请问下具体怎么具体怎么使用图片外链，没找到相关插件，自己在这方面知识还很浅薄（捂脸
我没有操作过使用图片外链，是有用户在主题版Snapic Plus实现过，单页版Snapic Page刚发布，还没有用户案例，你可以参考主题版的使用文档，尝试按照用户的方法操作研究下。http://www.lopwon.com/snapic-plus.html（页面内搜索“如何让主题支持外链图片”跳至相关内容）
了解了，待会去试试，谢谢您
借鉴了各位大大的模板，终于搭建完毕！现在过来申请个snapic-psge网友案例，地址：https://****.com/snapic.html。谢谢大大分享！
打错字了...是Snapic-Page
已添加，你之前使用的是测试版，我重新给你发了一份正式版，没有太大改变，只修改了一些样式。
谢谢，收到了。谢谢
祝贺开售！大大，替换加载动图的动图绝对地址有好看的推荐吗，感谢感谢
可以使用 Snapic Plus 里的 loading.gif
谢谢大大，完美解决