Typecho 高级感相册主题 Snapic Plus

主题简介

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

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

Typecho 高级感相册主题 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 行,替换方式同上。
阅读全文
资源下载
下载价格免费
如果您想全面提升自己,可以考虑升级VIP,即可免费下载全站资源。客服QQ:100089758
只发精品!只发精品!拒绝标题党、滥竽充数,浪费时间=谋财害命!【点此查看VIP项目汇总】凡是本站会员专属项目开通VIP后即可免费下载【点此开通】加入VIP免费下载全站价值超10万以上精选项目课程,一网尽收!小小投入,大大回报!💰💰💰
🔺本站仅提供资源收集与展示,内容的真实性与有效性请自行甄别,本站不承担相关责任!
显示验证码
没有账号?注册  忘记密码?

社交账号快速登录