Snapic Plus 使用文档

2020-03-21

Snapic Plus 使用文档


版本型号:Snapic Plus(主题版)
适用程序:Typecho
皮肤类型:主题模板
主题作者:Lopwon
作者博客:Lopwon.com
发布页面:Lopwon.com/snapic.html
官方演示:无
网友案例:(奇遇云)(你好世界)(梨花镇の画展)(岁月如歌)(一缕阳光)(狮子鹅&影像)

更新说明:主题 Snapic Plus 制作于2020年,v3.0.1 为对应版本号,目前已停售。最新版本为 Snapic Plus 2022(v4.0.2),有较大的升级更新,请移步至《Snapic Plus 2022 使用文档》,之前购买过 Snapic Plus 的小伙伴将免费获取。

以下是 Snapic Plus 使用文档


主题说明

与旧版主题 Snapic Free 相比,新版主题 Snapic Plus 不使用插件,不使用自定义字段,不用填写图片高度,使用全新响应式瀑布流框架,综合网友建议,新增了一些功能,优化了一些样式。

1. 主题 Snapic Plus 适用于图片类博客,使用瀑布流(masonry)的方式延时加载(lazyload)展示图片文章,同时支持图片灯箱(fancybox)效果。

2. 主题 Snapic Plus 删减了大多数功能:没有侧栏,没有留言,没有导航。

3. 分类页 archive 和搜索页沿用首页 index;独立页 page 沿用文章页 post。文章页 post 只支持移动端显示,且未在首页开启链接,仅用于搜索引擎抓取页面。

主要功能
1. 首页大图。可设置显示或隐藏,可选择设置电脑端和手机端独立显示不同的图片,图片可以自定义文字介绍信息。

2. 广告版块。可设置显示或隐藏,默认位置在第八方块(不含置顶方块),如果页面中不足七个方块,则不显示。

3. 单篇相册。首页上,一个方块对应一篇文章,如文章中有多张图片,则以单篇相册的方式展示。点击该方块首图后,显示的是单篇文章内的所有图片集。需要注意的是,只有当插入文章中的图片数量大于等于2张时,首图左上角才会显示张数标签。

4. 置顶图文。可设置显示或隐藏,作用是将某一篇你认为重要的独立页面文章图片置顶,可以作为博客介绍之用等。

5. 可自定义是否显示或隐藏标题、摘要、分类标签和搜索。

主题更新

2022年03月12日 解决使用 Typecho 1.2.0(或开发版)导致的显示错误,感谢用户(humh)的反馈。修复方法:

1. 请将微信付款凭证截图发送至 Lopwon@qq.com 后,给你提供修复文件。

2. 或者在你之前收取文件包的邮件里,通过回复该邮件发送信息索取修复文件。

2020年03月31日 Snapic Plus 已经定版,只做 Bug 修复,不做更新。

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

1. 后台》控制台》外观》设置外观》编辑当前外观》functions.php。

2. 搜索 'image/jpeg'(注意包含单引号),替换为 'image/jpeg' or 'image/png' or 'image/gif' or 'image/bmp'

3. 保存文件,即可。

2020年03月21日 发布正式版 Snapic Plus


使用方法

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

A 首页大图

如何建立首页大图?(图示

1. 后台》控制台》外观》设置外观,分别填入电脑和手机端的首图链接和简述。

2. 电脑端首图,建议图片尺寸为宽3200,高1800。也就是16:9的比例。对显示效果无要求的,可无视。

3. 手机端首图,建议图片尺寸为宽900,高1600。也就是9:16的比例。对显示效果无要求的,可无视。

4. 依个人喜好,点选无图、单图或双图的首图类型。

5 .使用小技巧,把电脑和手机端需要显示的首图,以附件上传的形式添加到以下新建独立页面(about)中,获取链接即可。

B 置顶图文

如何建立置顶图文?(图示

1. 在后台新建独立页面,页面缩略名必须填入 about,乱填无效!

2. 上传图片,并把图片插入文章中,才会显示(注意:压缩包版本为v3.0.1的,也可以不用插入文章中),作为前台文章缩略图使用(其他文章的缩略图读取上传附件的第一张图片)。如果你使用的是(https),前台缩略图不显示的话,可以尝试修改文件 functions.php,搜索(http)改为(https)

3. 在文本框中输入内容,即在前台输出摘要。注意:摘要不支持超链接显示。

如何隐藏置顶图文?(图示

1. 在编辑页面,点开右侧的“高级选项”,在“公开度”选择“隐藏”即可(注意:压缩包版本为v3.0.1的,请在后台》控制台》外观》设置外观,勾选“显示关于”。而在编辑页面使用高级选项》公开度》隐藏,将不再生效)。

C 单篇相册

什么是单篇相册?(图示

1. 文章在前台显示的缩略图,源自每篇文章附件中的第一张图片(置顶图文的缩略图读取插入文章中的第一张图片),可以不用把图片插入文章中。如果附件中没有图片,缩略图默认为加载动画的动图 img/loading.gif。

2. 如果在同一篇文章中,以附件上传的形式添加了多张图片,则在前台自动生成单篇相册(即摄影中的组图效果),可以不用把图片插入文章中。

如何让单篇相册的左上角显示张数标签?(图示

1. 如果在同一篇文章中,以附件上传的形式添加了多张图片,又需要前台显示图册的张数标签,就需要把附件中的图片都插入文章中,否则不会显示。

2. 只有当插入文章中的图片大于等于2张时,才会显示,插入几张就会显示几张的标签(如:上传附件5张,插入文中3张,前台角标显示的是3P)。

3. 使用小技巧,如果你的附件中上传了好多张图片,比如99张。如果一张一张插入文章中,会很累人,你可以参考这篇教程修改代码增添功能后,实现一键插入所有附件中的图片到文章中。https://www.ruletree.club/archives/1324/

如何显示文章标题和摘要?(图示

1. 按照发布文章的正常方式操作即可,标题栏输入标题,文本框输入内容。

D 设置外观

如何自定义外观?(图示

1. 后台》控制台》外观》设置外观,依喜好设置即可。

E 图片外链

如何让主题支持外链图片?

1. 本主题,暂时不支持外链图片,也就是图片必须以附件上传的形式添加。如果使用图床,需要自己通过插件并修改主题代码实现,请参考以下建议自行研究。

2. 方法一:可以联系用户“阿凯”,他已在 Snapic Plus 的主题上实现使用外链图片的功能,邮箱 caodanv@gmail.com

3. 方法二:可以参阅用户“掌印豪杰”编写的教程 http://zhangyin.org/post/242.html

4. 方法三:可以参阅用户“海不眠”编写的教程 https://wcnmb.cn/8.html(原网址已无效 https://catiz.cn/139.html)

5. 方法四:可以参阅用户“天祈”编写的教程 https://www.sakurafly.com/archives/18

F 使用技巧

如何约束长图高度?

文件夹 css 里 style.css 文件,添加样式

    .grid__link {
        max-height: 720px;
        overflow: hidden;
    }

如何模拟无限加载功能?

后台》设置》阅读》每页文章数目,修改为999或者更大数,使首页不分页。

如何在二级目录下使用 Snapic Plus 主题?

修改文件 index.php 第91行三处(注意:压缩包版本为v3.0.1的,在第92行),分别为 href 和 src 及 data-original 里的 $this 前,添加 /二级目录文件夹名称/ (注意包含前后两个斜杠)。

如何赋予 Snapic Plus 主题更个性的样式和添加视频功能?

1. 方法一:可以参阅用户“某猫”编写的教程 https://imashen.cn/897

2. 方法二:可以参阅用户“天祈”编写的教程 https://www.sakurafly.com/archives/18

如何在文章编辑页显示附件缩略图?

将下面这段代码块放入 admin/file-upload.php 第25行 </div> 后。

<p><img src="<?php $attachment->attachment->url(); ?>" alt="<?php $attachment->attachment->name(); ?>" class="typecho-attachment-photo" /></p>

8P Snapic Plus 使用文档

Snapic Plus 使用文档

1P Snapic Page 使用文档

Snapic Page 使用文档

2P Lopwon Footprint 使用文档

Lopwon Footprint 使用文档

4P Lopwon EDC 使用文档

Lopwon EDC 使用文档

7P Snapic CMS 使用文档

Snapic CMS 使用文档

26P 商店

商店

9P Snapic Mora 使用文档

Snapic Mora 使用文档

16P Snapic Paper 使用文档

Snapic Paper 使用文档

1P Lopwon ATF 使用文档

Lopwon ATF 使用文档

3P Lopwon Link Pro 使用文档

Lopwon Link Pro 使用文档

4P Snapic Nojs 使用文档

Snapic Nojs 使用文档

2P Lopwon Bio 使用文档

Lopwon Bio 使用文档

3P Snapic MPA 使用文档

Snapic MPA 使用文档

4P Snapic Grid 使用文档

Snapic Grid 使用文档

7P Snapic Visual 使用文档

Snapic Visual 使用文档

10P Lopwon Link 使用文档

Lopwon Link 使用文档

1P 给Typecho博客添加文章页相册功能

给Typecho博客添加文章页相册功能

3P Snapic Photos 使用文档

Snapic Photos 使用文档

5P Snapic Logs 使用文档

Snapic Logs 使用文档

3P Lopwon Lukas 使用文档

Lopwon Lukas 使用文档

3P Lopwon Exif 使用文档

Lopwon Exif 使用文档

1P Lopwon CC 使用文档

Lopwon CC 使用文档

1P Lopwon Timeline 使用文档

Lopwon Timeline 使用文档

4P Lopwon Timeline Pro 使用文档

Lopwon Timeline Pro 使用文档

1P Lopwon Here 使用文档

Lopwon Here 使用文档

3P Snapic Plus 2022 使用文档

Snapic Plus 2022 使用文档

1P Snapic Page 2022 使用文档

Snapic Page 2022 使用文档

249 条评论

  1. sen sen 1

    按照教程修改视频支持,均不成功。代码行数也和教程里不同,没有视频支持相册总觉得不完善,可以麻烦发我一个和教程相同的主题版本么,或者帮忙改好视频功能再发一版?

    1. Lopwon Lopwon 博主
      @ sen

      主题不支持视频功能,用户是自行修改实现,基于博客版本1.1(17.10.30)和主题版本v3.0。你收到的是v3.0.1版本的主题,虽然删减优化了部分代码,但是获取附件图片的代码没有改变。用户编写的教程里提到的行数,可以适当往前(向上)查找,大概有十来行左右。然后博客版本1.2.0的HyperDown.php文件位置已经由旧版1.1(17.10.30)的/var/HyperDown.php变更到了/var/Utils/HyperDown.php

  2. 哈哈 哈哈 8

    大佬,我也终于折腾的差不多了,看看能成为你的案例吗
    https://lion.gooose.eu.org

    1. Lopwon Lopwon 博主
      @ 哈哈

      改造的不错嘛,视频的话,建议添加一段JS,可以在一个视频播放时,点击另一个视频后,第一个视频自动暂停,查看snapic.cn网页源代码,搜索video,大概在900行处,有12行的JS,不知道会不会和你的音频播放有冲突。已添加案例。

      1. 哈哈 哈哈 8
        @ Lopwon

        多谢大佬指点,我来研究一下

  3. 哈哈 哈哈 8

    大佬,我找到了这段12行JS

    但是,我不知道应该添加在哪里,是哪个文件呢

    1. Lopwon Lopwon 博主
      @ 哈哈

      页脚任意处。我添加在index.php末端。

      1. 哈哈 哈哈 8
        @ Lopwon

        成功啦,我用两个视频测试了一下啊,不加这段代码确实两个视频会一起播放,加了之后另一个就会暂停,同时和我的背景音频也不冲突,多谢大佬!
        我之前用开发版的Typecho,替换了大佬发我的v3.0.1的两个文件,视频添加总是会出错,所以就用回了老版本没有问题。
        我参照 https://www.sakurafly.com/archives/18这个里面的步骤来的,发现只有一个步骤
        functions.php文件51行修改为:preg_match_all("/(https:\/\/)[^>]*?.(png|jpg|gif|jpeg|bmp|mp4)/i", $final['text'], $thumbUrl);”
        这行代码在新替换的文件里已经没有了,所以我想是不是这里有点问题

        1. Lopwon Lopwon 博主
          @ 哈哈

          是的,这段代码是获取文章中首张缩略图,Typecho 1.2.0 安装后有显示错误,所以 Snapic Plus 修正版删除了这段代码,用别的方式呈现“关于”页面。

T