版本型号：Snapic Plus v5
适用程序：Typecho
皮肤类型：主题模板
模板作者：Lopwon
作者博客：Lopwon.com
发布页面：Lopwon.com/snapic.html
官方演示：Snapic.cn *
网友案例：Snapic Case
协议须知：协议 / 须知
我要购买：65元/域名，价格为单个授权域名下使用主题的费用，版本 v5.0.1
我要升级：#前往升级
* 演示站为 v5.1.0 开发版，个别功能（如：点赞喜欢、置顶文章、灯箱滚轮翻图等）尚未在 v5.0.1 正式版放出，请知悉！
重要提示：勿留 Gmail 邮箱，会被退信。
主题说明
Snapic Plus 是 Typecho 相册主题，适用于展示摄影、设计、绘画等图像作品，以视频 / 音频为辅，v5 为最新版本号。
详见《#Typecho 相册主题 Snapic Plus》介绍。
主题更新
2024年05月01日 发布 Snapic Plus v5.0.1
修正已知问题，新增对 webp 格式图片创建缩略图资源的功能。
2024年04月25日 发布 Snapic Plus v5 升级更新明细见 这里，过往版本见 这里。
使用方法
敬告 任何对主题文件的变动，都可能导致其无法正常运行！
重要：
· 主题 Snapic Plus v5 独立运作，与旧版主题无关联，主题 Snapic Plus v5 的所有配置以本页为准。
· 如果停用旧版主题后，可以删除文件夹 SnapicPlus 或 SnapicPlus_2022
提示：
· 主题 Snapic Plus v5 的大部分功能，可以选择性使用，基本也只需要一次性的设置。
· 以下信息量较大，根据需要搜索关键词挑选阅读。
A 部署文件
请将主题文件夹 SnapicPlus_v5 上传至目录 usr/themes 中，在后台启用即可。
B 配置页面
〇、知识（必读项）。
1. 插入图片、文本链接，可以使用编辑器自带的功能按键，也可以使用 Markdown 语法：
1) 插入图片 Markdown 语法：
2) 插入文本链接 Markdown 语法：
[文本内容](文本链接)
3) 二者区别：一个前面带 ! 一个不带
2. 重要：插入媒体时，请使用与插入图片相同的编辑器自带的功能按键，或 Markdown 语法：
1) 插入媒体 Markdown 语法：
2) 此方法仅限 Snapic Plus 主题使用。
3. 在 Typecho 中，文章、独立页（或称单页）、附件、分类、标签、用户、评论，都有各自的标识和编码：
1) 文章、独立页（单页）、附件，使用标识 cid
2) 分类、标签，使用标识 mid
3) 用户，使用标识 uid
4) 评论，使用标识 coid
5) 进入各自的编辑页面，在「地址栏」的链接末端，通常能找到对应的编码，形式如：cid=888 / mid=666 / uid=1 / coid=333 等。
4. 本页中，提到的页面缩略名指的是什么？
1) 后台》设置》永久链接，确保「独立页面路径」中，只包含 {slug} 如默认的 /{slug}.html
2) 进入独立页面的编辑页，在「标题栏」下方的链接处，待填写的即是：页面缩略名。
5. 因 Typecho 有 AutoP 机制，在「内容文本框」中使用 html 标签和属性自定义文本样式或结构时，需要注意：
1) 可以使用内联元素，如 <span> <a> <b> <i> <sup> <sub> 等。
2) 禁止使用块级元素，如 <div> <p> <h1> <li> 等，否则会被拆分为 <p></p> 段落，导致无法如预想的输出内容。
3) 具体是哪些会被作为段落的 html 标签，哪些又是没有段落能力的 html 标签，详见文件 var\Utils\AutoP.php（请自行研究）
一、首屏（可选项）。
1. 后台》管理》独立页面》新增，新建独立页面，除以下提到的事项外，其余正常操作即可。
2. 页面缩略名必须填入 topic，乱填无效！
3. 请严格按照以下（图文块）格式要求在「内容文本框」中输入内容，才能在前台正确输出。
以上是插入图片，这里是图片介绍，以下必须使用编辑器插入分割线的按键，插入分割线作为结尾；
否则，在插入多张图片时，图片介绍无法正确匹配对应的图片。
----------
4. 以上是在（首屏）中插入单张图片和图片介绍的基础格式，以下是示例：
这里是图片介绍，可以选择性输入，可以使用编辑器插入链接的按键，插入文本链接，也可以使用格式 [文本内容](文本链接) 插入文本链接。
----------
这里是图片介绍，可以使用 <span style="这里是 css 样式">文本内容</span> 自定义文本内容的样式，如：位置、字体、大小、颜色等。
----------
5. 在完成新增（首屏）页面后，返回该页面的编辑页，在自定义字段区域，可用拓展功能，其中，首屏来源的（文章）操作如下：
1) 后台》管理》标签，新增标签，该标签将用于标记需要呈现在（首屏）的文章。
2) 其中，标签名称自定义（如：首屏推荐），在标记文章时，要使用该标签。标签缩略名，必须填入 digg，乱填无效！
3) 给需要呈现在（首屏）的文章，添加在上一步新增的标签（如：首屏推荐）。
二、关于格子（可选项）。
1. 后台》管理》独立页面》新增，新建独立页面，除以下提到的事项外，其余正常操作即可。
2. 页面缩略名必须填入 about，乱填无效！
3. 在「内容文本框」中输入内容，无格式要求，其中，如果内容中包含多张图片时，前台则随机显示其中一张。
4. 选择性使用摘要分割线 <!--more--> 分割内容：
摘要分割线之前的内容，将在前台的（关于）格子里，直接显示。
<!--more-->
摘要分割线之后的内容，以及之前的内容，将在前台的（关于）格子里，通过点击 more 在滑窗（或新窗口）中，全部显示。
5. 在完成新增（关于）页面后，返回该页面的编辑页，在自定义字段区域，可用拓展功能，其中，竖线后的内容部分，在使用 HTML 标签和属性时，需注意如下：
· 可以使用内联元素，如 <span> <a> <b> <i> <sup> <sub> 等。
· 禁止使用块级元素，如 <div> <p> <h1> <li> 等。
· 标记换行请用 br 和 / 间带有空格的换行符 <br />
· 添加文本链接，请用 <a href="链接">文本内容</a>
· 添加邮箱链接，请用 <a href="mailto:邮箱">文本内容</a>
· 定义文本样式，请用 <span style="这里是 css 样式">文本内容</span>
三、节气（可选项）。
1. 后台》管理》独立页面》新增，新建独立页面，除以下提到的事项外，其余正常操作即可。
2. 页面缩略名必须填入 24ST 或 24st，乱填无效！
3. 在「内容文本框」中输入内容，无格式要求。
4. 在完成新增（节气）页面后，返回该页面的编辑页，在自定义字段区域，可用拓展功能。
5. 注意：此编辑页面右侧的「附件」里，请在节气日的时候，上传当天拍摄的照片（不需要插入「内容文本框」中）。
6. 重要：节气签卡功能，需要服务器 PHP 环境的 Exif 扩展支持。
四、地图（可选项）。
1. 后台》管理》独立页面》新增，新建独立页面，除以下提到的事项外，其余正常操作即可。
2. 页面缩略名必须填入 map，乱填无效！
3. 在「内容文本框」中，插入一张图片，作为菜单滑窗中，地图的封面输出。
4. 在完成新增（地图）页面后，返回该页面的编辑页，在自定义字段区域，可用拓展功能。
5. 展示：使用自定义字段 point 添加拍摄坐标点的所有文章，都会在该地图页面显示。
6. 重要：拓展功能的（图片图标）请勿使用过大的数值，否则，在打开地图页面时，会同时加载这些图片量，可能会导致卡顿。
7. 提示：选择性自定义地图样式，
1) 在操作以下（四、地图接口）后，进入百度地图开放平台（https://lbsyun.baidu.com/）的「控制台」。
2) 特色服务平台》个性化地图》新建，根据喜好自定义地图，发布样式后将获取样式（ID）。
五、画廊（可选项）。
1. 后台》管理》独立页面》新增，新建独立页面，除以下提到的事项外，其余正常操作即可。
2. 自定义模板，请选择 Gallery for Snapic Plus
3. 在「内容文本框」中，插入图片，选择性输入你对画廊的介绍，支持使用纯文本、插入链接等。
4. 在完成新增（画廊）页面后，返回该页面的编辑页，在自定义字段区域，可用拓展功能。
5. 提示：理论上，可以建立很多个全屏画廊。
C 配置主题
一、设置外观（可选项）。
后台》控制台》外观》设置外观，依喜好设置即可。
二、异常提示（说明项）。
在制作主题 Snapic Plus v5 时，加入了一些逻辑判断的功能，用于在主题使用中的操作提示，遇到时，按照步骤进行即可。
三、链接拓展（可选项）。
1. 使用格式（名称|链接）自定义链接，如：
Instagram|https://www.instagram.com
2. 以上输出带有链接 https://www.instagram.com 的文本内容 Instagram 即：文本链接。
3. 当名称部分（如以上的 Instagram）与文件夹 img/link 中图标（instagram.svg）的文件名（instagram）匹配时，则输出图标链接。
4. 重要：仅限使用 svg 和 png 格式图标。
1) 是 svg 格式时，输出黑色或白色图标，适合用做 SNS 图标，建议添加黑色的 svg 格式图标。
2) 是 png 格式时，输出原色图标，适合用作友链图标，建议添加 100×100px 方形 png 格式图标。
5. 提示：文件夹 img/link 中已内置常用的 SNS 图标。
四、引入字体（可选项）。
1. 引入字体，仅限全字体文件，即包含所有中文、西文、其他字符等内容的单个文件。
2. 提示：使用引入字体功能时，也需要先加载该字体文件。
3. 如需对局部的指定文本独立使用自定义的字体，详见以下（E、使用技巧）介绍。
五、地图接口（可选项）。
1. 访问百度地图开放平台（https://lbsyun.baidu.com/）注册后登陆「控制台」。
2. 应用管理》我的应用》创建应用，需要实名认证！
3. 除「应用类型」选择「浏览器端」外，其他可以默认。
4. 完成创建后，会生成一串 API 秘钥（AK）。
六、图片描述（可选项）。
1. 当使用编辑器插入图片的按键，在「内容文本框」中插入图片时，会自动添加格式为：
![请输入图片描述][4]
2. 当使用 Markdown 语法，在「内容文本框」中插入图片时，格式为：
3. 将以上的「请输入图片描述」或「图片描述」重新编辑，即可在图片灯箱中显示自定义的图片描述。
4. 提示：节气的图片描述，需在图片编辑页中添加，如下：
1) 在节气编辑页面右侧的「附件」里，上传图片后，点击图片附件的「编辑」（铅笔状图标），进入图片信息的编辑页面；
2) 在右侧的「描述」里，自定义图片描述，提交修改即可。
D 发布文章
一、文章格子（必选项）。
1. 后台》管理》文章》新增，新建文章，除以下提到的事项外，其余正常操作即可。
2. 瀑布流中的每个（文章）格子对应一篇文章，分为：
1) 单图文章。即文章中，有一张图片，选择性输入文本介绍。
2) 组图文章。即文章中，有多张图片，选择性输入文本介绍。
3) 媒体文章。即文章中，有一条媒体（视频 / 音频），选择性输入文本介绍，其中：
· 当媒体文章中有图片，则作为媒体的封面，多张图片则随机一张；没有图片，视频则默认以第一帧作为封面（注：微信端不支持）。
· 建议使用与视频比例尺寸一致的图片（如：视频截图），对显示效果无要求的，可无视。
4) 文本文章。即文章中，仅有纯文本，没有图片也没有媒体。
3. 在「内容文本框」中输入内容，注意事项：
1) 无论图片或媒体，都需要插入「内容文本框」中，无格式要求，如：
· 可以使用编辑器插入图片的按键，插入图片或媒体。
· 可以使用格式  插入图片或媒体。
4. 选择性使用摘要分割线 <!--more--> 分割内容：
摘要分割线之前的内容，将在前台的（文章）格子里，直接显示。
<!--more-->
摘要分割线之后的内容，以及之前的内容，将在前台的（文章）格子里，通过点击 more 在滑窗（或新窗口）中，全部显示。
二、（可选项）。
1. 在「标签栏」创建格式如（地点 北京）的标签时，即中间使用空格隔开，则标签「北京」会归类到「地点」的类别下。
2. 示例：
菲林 柯达
菲林 富士
3. 那么，在搜索滑窗中的标签云里，标签「柯达」和「富士」会归类到「菲林」的类别下。
4. 重要：当在「标签栏」创建格式如（作者 Lopwon）的标签时，即以「作者」二字作为类别时，标签「Lopwon」除了会归类到「作者」的类别下之外，还会以「Lopwon」首字「L」或自定义图标作为头像展示。
5. 示例：
作者 Lopwon
作者 立云
6. 那么，在搜索滑窗中的标签云里，标签「Lopwon」和「立云」会归类到「作者」的类别下，同时：
1) 如果主题设置外观里启用了（显示作者），那么，
· 文章标题左侧和文章图片灯箱，会以「Lopwon」首字「L」或自定义图标作为头像展示，作为该作者归档页入口。
2) 如果主题设置外观里启用了（共享协议），那么，
· （文章格子）中的图片区域，以及文章页的图片区域，点击右键时，将显示（by Lopwon）和（by 立云）的特定版权信息。
7. 其中，当标签的 mid 与文件夹 img/avatar 中图标的（数字）文件名匹配时，则输出图标头像，示例：
1) 假设以上标签（作者 Lopwon）的 mid 为 2
2) 当文件夹 img/avatar 中存在图标 2.png 时，则输出图标头像，反之以「Lopwon」首字「L」输出。
3) 图标头像，建议使用小尺寸，如 100px 宽高的 png 图片。
8. 重要：支持主流格式图标，建议使用 100×100px 方形 png 格式图标。
9. 提示：如果博客中旧有的标签，是使用空格创建的，如（Mr Lopwon），那么，该标签也会被拆分为，标签「Lopwon」归类在「Mr」的类别下，此时，可以将（Mr Lopwon）改为（Mr-Lopwon）或（MrLopwon），即取消空格，统一放入标签云的（其他）类别中。
三、内容模块（可选项）。
1. 通过编辑器工具栏前方的拓展按键（P T L C）插入内容模块（面板、签条、排版、多栏），演示如下：
http://snapic.cn/968.html
2. 其中，四种内容模块（面板、签条、排版、多栏）除了名称不同外，插入格式和使用方法相同，需要注意如下：
· 需保持原有结构，模块各个标签之间、内容部分之间，禁止有空行；
· 可以使用内联元素，如 <span> <a> <b> <i> <sup> <sub> 等。
· 禁止使用块级元素，如 <div> <p> <h1> <li> 等。
· 标记换行请用 br 和 / 间带有空格的换行符 <br />
3. 以（面板 P）为例，其他内容模块同理。当点击拓展按键（P）后，在「内容文本框」中会插入以下内容模块：
[panels]
[panel title="面板标题"]
面板内容（勿留空行，请用 <br /> 标记换行）
[/panel]
[/panels]
4. 以上是（面板 P）的单组内容模块的基础格式，以下是为做说明而添加了注释，方便理解：
[panels] <!--这里是外层标签开始，注意是带有 s -->
[panel title="面板标题"] <!--这里是子模块标签开始，注意是没有 s -->
面板内容（勿留空行，请用 <br /> 标记换行）
[/panel] <!--这里是子模块标签结束，注意是带有 / 且没有 s -->
[/panels] <!--这里是外层标签结束，注意是带有 / 和 s -->
5. 在每组（面板 P）外层标签的内部，可以创建多条子模块，以下是示例：
[panels]
[panel title="面板标题一"]
面板内容一 <br />
标记换行请用 <br />
[/panel]
[panel title="面板标题二"]
面板内容二 <br />
<span style="font-size:1.4em;">使用内联元素 span 和 style 自定义文本样式</span> <br />
[/panel]
[panel title="面板标题三"]
面板内容三 <br />
也可以使用编辑器自带的功能按键，插入图片 <br />
[/panel]
[/panels]
6. 提示：内容模块可以组合使用，对文章内容进行丰富的布局，实例如下（请自行研究）：
http://snapic.cn/979.html
7. 重要：如果使用的是第三方的编辑器，那么，内容模块功能有可能无法挂载，可尝试如下操作（请自行研究）：
1) 搜索文件 functions.php 找到 wmd-button-row
2) 将 wmd-button-row 替换为你在用编辑器的容器 id
四、拍摄路线（可选项）。
1. 当在文章中使用自定义字段 point 添加拍摄坐标点后，还想展示拍摄路线时，如下：
2. 继续在文章中添加自定义字段，字段名称填入 line 字段值填入一组（经度,纬度）：
116.418963,39.894569
116.418217,39.907258
116.409145,39.906982
116.406072,39.906497
116.402587,39.906483
116.398275,39.906719
116.398042,39.909168
3. 提示：每行一条（经度,纬度）坐标，最终将显示为连接各个坐标点的折线。
E 使用技巧
Q：如何显示浏览器标签页的小图标？
1. 在 Typecho 根目录，放 favicon.ico 和 AppIcon.png 两张图标即可。
Q：如何增强用户浏览的体验度？
1. 除了用户的网络情况（如：网速）外，合理的优化图片和媒体资源，可以大大增强用户浏览的体验度，建议如下：
1) 使用 jpg 格式的图片，尺寸宽度控制在 1000px 以内，文件大小控制在 300kb 左右为宜。
2) 使用 mp4 格式的视频，通过适当的比特率压缩，将时长 1 分钟的视频，文件大小控制在 10mb 以内为宜。
3) 使用专为图片和媒体资源存储的解决方案（如：图床），这类服务通常会有较大的资源访问带宽，以保障资源的加载速度。
2. 需要注意的是：如果博客使用 https 加密协议时，图片和媒体资源的链接也请务必使用 https 协议（勿使用 http）。
Q：为什么图片或媒体不显示？
1. 需要先自查图片或媒体的链接是否正确，是 http 还是 https 或是使用了防盗链设置的链接。
2. 如果获取图片和媒体资源存在跨域问题，请自行设置存储资源的服务器 CORS 规则，请咨询你的服务提供商。
Q：为什么图片不显示 Exif 信息？
1. 首先，需要确保已经开启主题设置里的 Exif 任意一项，并确保图片包含 Exif 数据。
2. 其次，如果图片是通过博客文章编辑页面的（附件）功能上传，且未使用任何插件对图片做过编辑（如：加水印、转格式等），那么，在图片（注意是原始图片，非缩略图）加载完成时，自然会正常显示 Exif 数据，如果仍不显示，建议先去买张彩票，中奖概率颇高。
3. 再次，如果图片是存储在其他服务器（如：图床），那么就会存在跨域访问资源的问题，若图片 Exif 数据不显示，先通过浏览器控制台查看是否有与 CORS 相关的错误提示，如果有，请自行设置存储资源的服务器 CORS 规则，请咨询你的服务提供商，如果没有与 CORS 相关的提示，再提交使用反馈。
4. 重要：请勿通过任何插件对图片做编辑（如：加水印、转格式等），如此将大概率地导致 Exif 数据被清除，请使用 Adobe PS/LR 等专业图像编辑软件操作，以保留 Exif 数据。
5. 如果所展示的图片，大部分没有 Exif 数据（如：不是摄影作品的图片），或对显示 Exif 数据没有特别强烈的需求，那么，建议关闭显示 Exif 数据，尤其是在开启（缩略封面）时，因为获取 Exif 数据需要同时加载原始图，这就达不到提高加载速度的目的了，如果对存储资源的服务器性能有自信，请随意。
Q：为什么生成的缩略小图是白底图？
1. 请自查存储资源的服务器，防盗链设置。
Q：为什么通过后台的附件重新上传替换图片后，前台瀑布流的图片没有变化，依然是旧的图片？
1. 当在主题设置外观里，启用了（缩略封面）后，前台瀑布流显示的是缓存在文件夹 thumbs 的缩略图。
2. 此时，可以通过（重制缩略）的方式更新瀑布流中的缩略图。
3. 或找到文件夹 thumbs 中对应的缩略图，删除，通过访问图片所在的瀑布流页面，进而更新缩略图。
Q：什么时候需要自定义文章摘要？
1. Typecho 默认输出的文章摘要，源自文章前面部分，且过滤掉特殊字符后的文本，有时候，这些文本并不能体现该篇文章的内容。
2. 此时，可以选择性添加自定义字段 desc 重新编辑输出更具有针对性的文章摘要。
Q：如何隐藏菜单滑窗中的分类、单页？
1. 隐藏分类：后台》控制台》外观》设置外观，在（隐藏分类）项设置，即可。
2. 隐藏单页：后台》管理》独立页面，进入要隐藏单页的对应编辑页，高级选项》公开度》隐藏，即可。
Q：为什么有些图片在手机上显示的方向是正确的，但是使用 Typecho 上传图片后，方向却旋转了呢？
1. 大多数拍摄设备（如：相机、手机）在保存图像时，会记录拍摄时的方向 Orientation 字段信息，以便后续的软件（如：图像查看器）或设备（如：手机）可以根据这个信息，在不修改图像 Exif 数据的前提下，也能以正确地方向显示图像。
2. 例如，在使用手机横向拍摄时，假设为（图片A），那么图片 A 的方向 Orientation 值会记录为：顺时针或逆时针旋转 90 度。当在手机上查看图片 A 时，手机会依据方向 Orientation 值，对图片的显示方向进行纠正，但不会对方向 Orientation 值本身进行修改。
3. 在通过 Typecho 上传图片 A 时，当服务器 PHP 环境中的图像处理库（如：GD 或 Imagick）刚好未启用或未设置，就会导致图片 A 依然保留初始的 Orientation 值显示（而通常情况下，大部分的服务器是能够使用图像处理库正确处理图像的方向 Orientation 值的）。
4. 在通过 Typecho 上传图片 A 时，如果遇到图片方向显示不正确时，可以在上传图片前，使用软件（如：Photoshop ACR）先对图片的显示方向进行纠正，也就是以正确的方向重新保存图片。
Q：如何对局部的指定文本独立使用自定义的字体？
1. 中文字体文件，通常包含所有的中文、西文、其他字符等内容，称为全字体，文件都比较大。
2. 假设只需要对局部的指定文本（如：首屏标题）四个汉字，独立使用自定义的字体时，创建字体子集文件是更好的方案。
3. 这样的字体子集文件仅包含（首屏标题）四个汉字的字体属性，文件相对很小，如下操作：
1) 将指定文本（如：首屏标题）四个汉字，使用在线「中文转 Unicode 编码」工具，转换为如下编码。
\u9996\u5c4f\u6807\u9898
2) 将以上 Unicode 编码改为使用半角逗号隔开的方式，备用。
u9996,u5c4f,u6807,u9898
3) 访问 https://transfonter.org/
4) 上传（Add fonts）全字体文件，除以下提到的事项外，其余默认或自行研究。
· 字体格式（Formats）默认即可，考虑到不同浏览器的兼容性，也可以全选。
· 编码范围（Unicode ranges）输入以上备用的编码。
· 字体目录（Fonts directory）输入存储字体子集文件的文件夹名称，如 myfont
· 点击转换（Convert）并下载（Download）文件包。
5) 将下载的文件包内，文件夹（如 myfont）上传至主题文件夹 fonts 中。
6) 打开文件包内的 stylesheet.css 文件，修正字体子集文件的相对路径。
· 在所有文件夹名称（如 myfont）的前面添加 ../fonts/
· 即 ../fonts/myfont/文件名.扩展名
7) 将以上修正相对路径后的 @font-face {...} 样式代码，复制。
· 粘贴至主题 css/snapic.font.face.css 文件中。
· 继续将添加的自定义字体，应用到指定的类名下，参见文件内注释（请自行研究）。
8) 实例：在文章编辑页「内容文本框」中，使用内联元素定义（首屏标题）四个汉字。
· 如 <span class="className">首屏标题</span>
· 注 className 与在 snapic.font.face.css 文件中，所添加的类名保持一致。
F 使用反馈
请使用文字，结合截图，尽可能的把问题描述详细些，#前往提交 敬告 任何对主题文件的变动，都可能导致其无法正常运行！
你好，我挺喜欢这个相册主题，它有亮色主题吗（白色），我个人不是很喜欢黑色
有暗调、亮调、自定义三种样式。
你好，我想升级最新V5版本
详见文档介绍。
没有理解，是没有内测名额了吗
已完成一轮内测，已开放升级。
现在可以获取新版主题了么
详见文档介绍。
原先就在用之前主题的老用户，升级新主题有没可以授权多个域名使用
已邮件回复。
你好V4版本可以发我最新V5么7686****@qq.com
详见文档介绍。