Typecho 高级感相册主题 Snapic Plus

主题简介

Snapic Plus是主题作者在原Snapic主题上增加了一些功能的全新主题，支持外链图片显示，支持视频，是Typecho系统上一款不错的相册主题。整体黑色的配色加上瀑布流布局显得非常高级。

Snapic Plus 2022是Snapic Plus的重制版，v4为对应版本号。此版在Snapic Plus的瀑布流框架和布局的基础上，做了较大的升级更新，主要为：支持使用外链图片；支持显示外链视频；支持留言评论互动等等。

主题特色

主题Snapic Plus 2022通过识别文章中的文本、图片和视频，在前台以瀑布流的方式呈现，其中，主题外观布局、功能设置等具有较强的可定制性（如：自定义显示或启用与否），适合以图片为主的博客使用，可以用于记录自己的生活影像等等。

主题教程

重要：主题 Snapic Plus 2022 独立运作，与主题 Snapic Plus 无关联，Snapic Plus 2022 的所有配置以本页为准。如果停用 Snapic Plus 后，可删除文件夹 SnapicPlus。

A 部署文件

请将主题文件夹 SnapicPlus_2022 上传至目录 usr/themes 中，在后台启用即可。

B 配置页面

一、首屏大图（可选项）。

在首屏随机显示图片，可添加描述，可使用外链（建议使用大于宽 1920px 高 1080px 尺寸的清晰图片，对显示效果无要求的，可无视）。

1. 后台》管理》独立页面》新增，新建独立页面，除以下提到的事项外，其余正常操作即可。

2. 页面缩略名必须填入 topic，乱填无效！

3. 请严格按照以下格式要求在“内容文本框”中输入内容，才能在前台正确输出。

4. 格式：![图片描述](图片链接)

5. 示例：![Photo by Lopwon](http://cdn.snapic.cn/img/logo.png)。其中，每行开头的感叹号 ! 有无均可，第一对中括号的 Photo by Lopwon 为图片描述，第二对括号的 http://cdn.snapic.cn/img/logo.png 为图片链接。

6. 重要：格式由一对中括号 [] 和一对括号 () 组成，都是半角括号，不是中文全角括号。

二、首个格子（可选项）。

在最前方展示博客介绍和返回首页使用，相当于（关于）页面，每页都有。

1. 后台》管理》独立页面》新增，新建独立页面，除以下提到的事项外，其余正常操作即可。

2. 页面缩略名必须填入 about，乱填无效！

3. 在“内容文本框”中输入内容，无格式要求，支持使用纯文本、插入链接和图片（可使用外链图片）等。其中，如果有多张图片时，前台则随机显示其中一张。

4. 注意：图片需要插入“内容文本框”中，无格式要求。其中，只支持直链图片，后缀为（.jpg/.png/.gif/.bmp）。

三、文章格子（必选项）。

每个格子对应一篇文章，文章格子分为：单图文章、组图文章、视频文章和文本文章（无图片无视频）。四种文章类型都支持使用文本，其中，如果在文本内容中插入了文本链接，这些文本链接在格子里只输出摘要（无链接），在文章页面或评论弹窗里才显示文本链接。

1. 单图文章。文章中有一张图片，可使用外链图片，选择性输入文本介绍。

2. 组图文章。文章中有多张图片，可使用外链图片，选择性输入文本介绍。在后台》控制台》外观》设置外观，勾选（随机封面）后，可开启前台随机显示其中一张作为封面，点击后进入组图相册。

3. 视频文章。文章中有一条视频，可使用外链视频，选择性输入文本介绍。如果文章中有图片，将作为视频的封面；如果又是多张图片，将随机显示其中一张作为视频的封面；没有图片时，则默认以视频的第一帧作为封面。建议使用与视频比例一致的图片尺寸（如：视频截图），对显示效果无要求的，可无视。

4. 文本文章。文章中仅有纯文本，无图片也无视频。

5. 注意事项。无论图片或视频，都需要插入“内容文本框”中，无格式要求（如：可以用插入图片的方式插入视频）。其中，只支持直链图片或直链视频，图片后缀为（.jpg/.png/.gif/.bmp），视频后缀为（.mp4/.webm/.ogv）。

四、自定代码（可选项）。

独立存在的格子，启用后将在每页的第七个格子处显示，可录入文本，可插入代码，可做广告位等。

例，插入在新窗口打开的链接：
    <p style="height:50px;font-size:1.2em;line-height:50px;">
        <a href="http://snapic.cn/" target="new">主题 Snapic Pllus 2022 演示</a>
    </p>

C 配置主题

一、设置外观（可选项）。

后台》控制台》外观》设置外观，依喜好设置即可。

1. 加载动图。瀑布流需要在图片加载完成后获取该图片的高度，进而重新布局，在此之前是由占位图（加载动图）临时决定每个格子的高度。如果占位图（加载动图）的比例与实际图片相同（或相近），将大大减轻瀑布流重新布局时格子的漂移。例：所有图片的比例普遍为 3:2 时，占位图（加载动图）的比例为 3:2 时最理想；如果图片的比例五花八门，占位图（加载动图）的比例可以折中为 1:1 的比例。注：以上提到的是（比例）非（尺寸），即如果图片尺寸为（高 800px 宽 800px）时，比例则是（1:1），这时的占位图（加载动图）的比例如果设置为（1:1）时，尺寸可以是（高 300px 宽 300px）或（高 400px 宽 400px）或其他，当然，也需要考虑文件大小，小文件有利于快速显示占位图（加载动图）。若觉麻烦，主题后台设置的（加载动图）项，默认即可。

2. 头像服务。以下是 Gravatar 国内源镜像链接（访问链接，如果显示头像则有效可用）：
    https://cdn.v2ex.com/gravatar/
    https://sdn.geekzu.org/avatar/
    https://gravatar.loli.net/avatar/
    https://cdn.sep.cc/avatar/

二、异常提示（说明项）。

在制作主题 Snapic Plus 2022 时，加入了一些逻辑判断的功能，用于在主题使用中的操作提示，遇到时，按照步骤进行即可。

三、兼容问题（说明项）。

鉴于各平台（如：电脑端、移动端、微软端、苹果端等）和各环境（如：谷歌浏览器、火狐浏览器、苹果浏览器、微信等）的特性各异，主题少部分功能或外观可能存在概率性地兼容问题，请知悉：

1. 图片。Exif 数据需要在图片加载完成后方能读取信息，只支持 jpg 或 tiff 格式且有 Exif 数据的图片，如果图片量过多或者网络不顺畅时，有可能出现无法显示的情况。

2. 视频。在微信环境下，视频不显示自身的静态第一帧作为封面，可以通过在文章中插入图片（如：视频截图）充当视频封面。

3. 滚动。有部分浏览器，过于倔强，对主题的丝滑滚动功能支持不佳，如：Mozilla Firefox

4. 错位。主题在 Apple 设备上，可能存在某些外观细节显示不良的情况，尤其是使用了 position: fixed 的地方（如：组图相册弹窗等）。由于作者没有 Apple 设备进行真机测试调整，所以，这些外观异常暂时无法修正，从用户的反馈来看，对使用影响并不算大，毕竟不是功能异常，而是在外观显示上。此时，可以尝试在主题设置里关闭（小图预览）功能。如果有小伙伴能协助处理这些小缺陷，可获赠作者制作的其他单页模板（款式待定）。

5. 音乐。主题 audio 标签只输出视频格式，所以，在使用音乐插件时，请使用歌单功能，勿使用直链 .mp3 功能。感谢网友（雾长安）的反馈。

D 使用技巧

1. 如何增强用户浏览的体验度？除了用户的网络情况（如：网速）外，合理的优化图片和视频的尺寸和大小，以及使用支持较大带宽的服务器（如：图床）存储图片和视频，可以大大增强用户浏览的体验度。建议如下优化：

① 使用 jpg 格式的图片，尺寸宽度控制在 1000px 以内，文件大小控制在 300kb 左右为宜。
② 使用 mp4 格式的视频，使用适当的比特率压缩，时长 1 分钟的视频，文件大小控制在 10mb 以内为宜。
③ 使用专为媒体文件存储的解决方案，这类服务通常会有较大的资源访问带宽，以保障图片和视频的加载速度。需要注意的是：如果博客使用 https 加密协议时，图片和视频资源的链接也请务必使用 https 协议（勿使用 http）。

2. 如何自定义主题颜色样式？在后台》控制台》外观》设置外观，点选（自定样式）并按需编辑文件 SnapicPlus_2022/css/snapic.diy.css 即可，配色方案可参考 https://www.colorhexa.com/ 或 https://colorhunt.co/

3. 为什么图片或视频不显示？需要先自查图片或视频的链接是否正确，是 http 还是 https 或是使用了防盗链设置的链接，或是非直链的图片和视频链接。

4. 如何把附件里的所有图片一键插入文章中？可参考这篇教程 https://www.ruletree.club/archives/1324/ 请自行研究实现。

5. 为什么评论作者链接无效？由于主题使用弹窗方式加载评论框架，为避免在弹窗内直接打开外部链接，所以，主题默认设置不启用评论作者的链接。如果想开启此功能，需按照以下步骤操作：

① 打开主题文件 functions.php 搜索 Helper::options()->commentsShowUrl = false; 将 false 替换为 true
② 打开博客文件 var/Widget/Base/Comments.php 第 272 行，将 '>' 替换为 ' target="new">'
③ 以上替换注意有单引号，如果博客程序版本为 1.1-17.10.30 时，文件 Comments.php 的路径是 var/Widget/Abstract/Comments.php 在第 376 行，替换方式同上。

一些不错的演示站：
https://lion.gooose.eu.org/
https://photo.caodan.io
https://www.yunhe.plus/
https://somepic.cn/
http://snapic.cn/
https://xn--7dvx0bg0a.xn--6qq986b3xl/
https://cansnow.cn/
http://image.mcoo.cc/