主题简介
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 行,替换方式同上。
🔺本站仅提供资源收集与展示,内容的真实性与有效性请自行甄别,本站不承担相关责任!