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
博主，我于2023年购买的主题，怎么才能获取2024最新的主题文件包？
你似乎使用的是 Snapic Plus 不是 Snapic Page 前往这里提交信息 https://wj.qq.com/s2/14329611/f629/
博主，我于2022年4月够买了Snapic Page，现在能否免费更新到2022这个版本呢？
已发送。
有修改Snapic Page 2022支持图片外链的教程吗？
有网友出过教程，但是不记得在哪里了。
参考了一下以前的教程，用图床实现了，很丝滑，非常感谢博主。https://can****.cn/ai.html
谢谢支持，原来博主 Snow 同时购买了 Snapic 的主题和模板呀，都已全部添加案例链接，摄影作品很棒。
感谢博主，我目前遇到了一个情况解决不了了，特来向博主情况。我现在每个单页（相册）里面传的照片数据都至少一千个起，但现在的页面每次加载都是全部图片数据都加装出来（其中图片是可以懒加载的），想请教一下，能否设置为随着滚轮滑动，每次加载几十条记录吗？
模板已经是使用图片延迟加载了呀，只有图片处在指定的范围内才会加载，如果想自定义延时加载的属性，在模板 Snapic_Page.php 里搜索第二个 lazyload，函数体里的参数即是，lazyload 还有其他参数，但要考虑与瀑布流 masonry 的兼容。
不好意思博主，可能我表述错了，图片已经延迟加载了，比如我这页传了1000张图片，程序会把1000条记录都检索出来（其中文字表述都加载了，图片未加载），即使是这样，在页面处理瀑布流时，也会很慢。所以想着能否几十条的这样加载。
嗯，是我理解有误，你想要的是（无限加载）功能，就是滑动到页面底部时才加载之后的内容，这个只能自己研究了，网络搜下。
邮件已发送，静等
已发送。
已收到并安装，请教博主，现在页面上最多是4列，怎么设置能变成5列呢
找到了，在styel.css里 >_
不建议修改 style.css 里的设置，可以在 index.php 里新增一段代码，也就是除了默认的四栏和三栏，新增自定义的五栏。稍等我更新下使用文档。
错了，是模板文件 Snapic-Page.php 里新增，不是 index.php
已更新文档，见（使用技巧）。
收到博主，我好好研究研究。还有博主，发现了一个问题，我这边点击图片后，能显示这个图片，但图片下面没有描述文字，可我已经给这张图片写了描述。在网页上没有class为fancybox-title fancybox-title-float-wrap的节点，您看是我那里没有设置到吗
已经找到原因。在按照博主给的使用技巧中的代码调整显示列数时候（我将列数自定义字段为：columnsNum），然后在对应位置加入代码为if (strpos($this->fields->snapic, 'columnsNum') !== false)，但我发现给到的其他的自定义字段wide、radius、overlay、padding、gallery、autoplay也都没有起作用，我修改为：if (strpos($this->fields, 'columnsNum') !== false)，就都可以了，图片描述也能正确显示了，可能我最开始没有理解对。希望能帮到其他博主。
对其他的字段也是这样修改的：if (strpos($this->fields, 'wide') !== false)，if (strpos($this->fields, 'radius') !== false)。。。。。就是把->snapic去掉就可以了。
哈哈，我才发现使用文档中（使用技巧）写错了，是新增自定义字段（值）不是字段（名称），已更正。
模板默认设置是，开启灯箱翻图（gallery）后才显示图片描述。