Snapic Plus 2022 使用文档

2022-09-20


版本型号:Snapic Plus 2022
适用程序:Typecho
皮肤类型:主题模板
模板作者:Lopwon
作者博客:Lopwon.com
发布页面:Lopwon.com/snapic.html
官方演示:Snapic.cn v5 版
网友案例:留言申请
#狮子鹅&影像 #Hello ~ 小雨点 #Snow-Z 的作品集 #桢桢日记 #今天长这样

我要购买:Lopwon.com/snapic.html


主题说明

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


主要功能

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


主题更新

2023年05月19日 发布 Snapic Plus 2022(v4.0.3),感谢网友(Rumosky 和 Sivir)的反馈,升级更新明细如下:

1. 修正只勾选(随机封面)+(开指示器),而没有勾选(小图预览)时,组图弹窗只显示一张的问题。

2022年09月27日 发布 Snapic Plus 2022(v4.0.2),升级更新明细如下:

1. 新增组图弹窗小图预览开关 2. 优化组图弹窗按键显示方式。

2022年09月23日 发布 Snapic Plus 2022(v4.0.1),感谢网友(ajiao)的建议。升级更新明细如下:

1. 新增文章页展示方式,有弹窗和新窗口方式可选 2. 新增文本文章摘要与其他文章摘要同步隐藏功能 3. 新增自定义评论头像服务源地址,避免访问受阻 4. 修正文章页不显示共享协议的问题 5. 优化弹窗大小

2022年09月22日 发布 Snapic Plus 2022(v4.0)。升级更新明细如下:

优化项。1. 优化功能代码 2. 优化样式代码 3. 优化后台设置 4. 优化外观细节

新增项。01. 首屏大图,新增随机显示功能 02. 图片来源,新增图片外链功能 03. 照片信息,新增显示 Exif 功能 04. 图片灯箱,新增更多自定设置 05. 组图封面,新增组图随机封面 06. 展示文章,新增显示文章内容 07. 文章互动,新增文章评论功能 08. 关于版块,新增插入链接功能 09. 视频版块,新增显示视频功能 10. 视频封面,新增视频随机封面 11. 视频播放,新增自动停播功能 12. 页脚版块,新增公安备案功能 13. 鼠标右键,新增显示共享协议 14. 列数可选,新增自定义瀑布流 15. 图片圆角,新增可调图片圆角 16. 外观可选,新增亮调暗调外观 17. 平滑滚动,新增页面平滑滚动 18. 逻辑判断,新增显示异常提示 19. 按需加载,新增脚本按需加载 20. 数据备份,新增主题备份功能

2022年03月12日 解决 Snapic Plus 适配至 Typecho 1.2.0(或开发版)。

2020年03月30日 解决 Snapic Plus 单篇相册无法读取附件除 jpg 以外的图片格式。

2020年03月21日 发布 Snapic Plus


使用方法
重要:主题 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. 如何以缩略图的方式加载瀑布流,当点击缩略图后,再显示原图?详见教程 https://www.zhangyin.net/750.html 感谢网友(掌印)的分享。

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

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

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

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

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

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

① 打开主题文件 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 行,替换方式同上。
Store

118 条评论

  1. M Miao 4

    后期会更新首页文章随机排序吗

    1. Lopwon Lopwon 博主
      @ Miao

      可能吧。

      1. M Miao 4
        @ Lopwon

        能更新到fancybox3吗,移动端不能左右滑动来查看图片

        1. Lopwon Lopwon 博主
          @ Miao

          高版本 Fancybox 需要商用授权,没有在主题中使用,可以自己研究添加。

          1. M Miao 4
            @ Lopwon

            能不能发送一份未压缩的源码

            1. Lopwon Lopwon 博主
              @ Miao

              找工具格式化代码。

          2. M Miao 4
            @ Lopwon

            主题源代码压缩成一行了,看着实在头大呢

  2. 掌印博客 2

    后台设置备案号打勾后保存不生效,打勾还是未打勾的。

    1. Lopwon Lopwon 博主
      @ 掌印博客

      如果在文件 functions.php 里删减或新增过函数,可以尝试重新启用主题,但是请勿使用主题还原设置,因为在备份的主题设置中,依然保留删减过的函数设置和未保留新增的函数设置。

    2. Lopwon Lopwon 博主
      @ 掌印博客

      如果自己修改过主题代码,请自查下,我这里测试源代码没发现你提到的情况。

  3. 目的地-Destination 52

    老哥,遇到一个问题。我用的mac,浏览器是火狐和chrome,如果发布视频,火狐既没有封面,点击也不能播放。chrome是正常的。
    另外,视频后缀是否区分大小写?好像.MP4 这样,两个浏览器都不能播放?我现在不确定是mac问题还是浏览器问题。

    1. Lopwon Lopwon 博主
      @ 目的地-Destination

      关于视频封面,详见使用文档;后缀需要区分大小写。

      1. 目的地-Destination 52
        @ Lopwon

        恩,现在是小写。chrome可以播放,封面正常。火狐既没有封面也不能播放

        1. Lopwon Lopwon 博主
          @ 目的地-Destination

          我这里使用火狐播放正常,关于视频封面,详见使用文档。

  4. 目的地-Destination 52

    话说,如果首页大图可以直接获取所有文章内的图就好了,可以随机播放。不过每个图大小不一,有横的有竖的。倒是麻烦了点。现在我直接用了站外的随机API。哈哈哈

    1. Lopwon Lopwon 博主
      @ 目的地-Destination

      这个是可以实现的,在其他模板里使用过,也是考虑到图片的版式不同,所以没有添加到 Snapic Plus 中。

      1. 目的地-Destination 52
        @ Lopwon

        老哥的服务器是什么配置方便透露嘛。如果照片视频都放在自己服务器上的话,一般的带宽估计不行吧。加载就得等很久了。除非用对象存储好一些

  5. 目的地-Destination 52

    提问:如果其他博客订阅了feed,点击进入后,是文章详情页。而这个页面,除了评论和图片,没有任何其他按钮了。想去首页看看其他的,还得手动改网址。 这不算bug,老哥下次可以优化上去,加个能回到首页的导航或者按钮。

    1. Lopwon Lopwon 博主
      @ 目的地-Destination

      Snapic Plus 是相册主题,如果用过初版就能感受到,这个主题仅做相册展示,现在看到的评论、搜索、标签、以及文章弹窗,都是在大家强烈要求下,才新增的,为了不影响最初的想法(只做相册展示),才在新增这些功能的同时,加上了开启和关闭的功能选项,让老用户选择性使用,要不真的就变成了博客主题,而不是原来的相册主题了。

      1. 目的地-Destination 52
        @ Lopwon

        哈哈,好的。了解了。

        1. Lopwon Lopwon 博主
          @ 目的地-Destination

          你提到的文章页没有返回首页的链接,是因为文章页在首页是以弹窗的方式打开,如果在弹窗内打开其他页面,就尴尬了。

          1. 目的地-Destination 52
            @ Lopwon

            恩恩,我F12看到了。点击评论或者标题,打开就是文章页的链接,只不过是弹窗的样子。所以说,如果真要加个回到首页的按钮,还得判断是首页弹窗的,还是外部打开的。

  6. 岁月如歌 9

    大佬您好,我那个站点域名 somepic.cn 不打算继续使用啦,您可以把我那个“网友案例”中撤下来~~~给您添麻烦啦

    1. Lopwon Lopwon 博主
      @ 岁月如歌

      已更新。

  7. 汲墨Carlo. 3

    您好,已经收到了您发送至邮箱的模板了,十分感谢!
    想请教关于https://today.demochen.com/及https://somepic.cn/ 这两个网友案例中的分类是插件实现的吗?
    还是在模板基础上进行的修改?

    1. Lopwon Lopwon 博主
      @ 汲墨Carlo.

      是这两位博主自己通过修改代码实现的,可以向他们请教下。

准备下山 准备下山
Snapic Plus v5
使用 Lopwon POP 实现