Snapic Plus 使用文档

Snapic Plus 使用文档


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

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


主题说明

与旧版主题 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 后,给你提供修复文件,替换源文件即可。

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. 如何建立首页大图?(图示

    1)后台》控制台》外观》设置外观,分别填入电脑和手机端的首图链接和简述。
    
    2)电脑端首图,建议图片尺寸为宽3200,高1800。也就是16:9的比例。对显示效果无要求的,可无视。
    
    3)手机端首图,建议图片尺寸为宽900,高1600。也就是9:16的比例。对显示效果无要求的,可无视。
    
    4)依个人喜好,点选无图、单图或双图的首图类型。
    
    5)使用小技巧,把电脑和手机端需要显示的首图,以附件上传的形式添加到以下新建独立页面(about)中,获取链接即可。
    

B 置顶图文

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

    1)在后台新建独立页面,页面缩略名必须填入 about,乱填无效!
    
    2)上传图片,并把图片插入文章中,才会显示(注意:压缩包版本为v3.0.1的,也可以不用插入文章中),作为前台文章缩略图使用(其他文章的缩略图读取上传附件的第一张图片)。如果你使用的是(https),前台缩略图不显示的话,可以尝试修改文件 functions.php,搜索(http)改为(https)
    
    3)在文本框中输入内容,即在前台输出摘要。注意:摘要不支持超链接显示。
    
  2. 如何隐藏置顶图文?(图示

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

C 单篇相册

  1. 什么是单篇相册?(图示

    1)文章在前台显示的缩略图,源自每篇文章附件中的第一张图片(置顶图文的缩略图读取插入文章中的第一张图片),可以不用把图片插入文章中。如果附件中没有图片,缩略图默认为加载动画的动图 img/loading.gif。
    
    2)如果在同一篇文章中,以附件上传的形式添加了多张图片,则在前台自动生成单篇相册(即摄影中的组图效果),可以不用把图片插入文章中。
    
  2. 如何让单篇相册的左上角显示张数标签?(图示

    1)如果在同一篇文章中,以附件上传的形式添加了多张图片,又需要前台显示图册的张数标签,就需要把附件中的图片都插入文章中,否则不会显示。
    
    2)只有当插入文章中的图片大于等于2张时,才会显示,插入几张就会显示几张的标签(如:上传附件5张,插入文中3张,前台角标显示的是3P)。
    
    3)使用小技巧,如果你的附件中上传了好多张图片,比如99张。如果一张一张插入文章中,会很累人,你可以参考这篇教程修改代码增添功能后,实现一键插入所有附件中的图片到文章中。https://www.ruletree.club/archives/1324/
    
  3. 如何显示文章标题和摘要?(图示

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

D 设置外观

  1. 如何自定义外观?(图示

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

E 图片外链

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

    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 使用技巧

  1. 如何约束长图高度?

    文件夹 css 里 style.css 文件,添加样式
    
    .grid__link {
        max-height: 720px;
        overflow: hidden;
    }
    
  2. 如何模拟无限加载功能?

    后台》设置》阅读》每页文章数目,修改为999或者更大数,使首页不分页。
    
  3. 如何在二级目录下使用 Snapic Plus 主题?

    修改文件 index.php 第91行三处(注意:压缩包版本为v3.0.1的,在第92行),分别为 href 和 src 及 data-original 里的 $this 前,添加 /二级目录文件夹名称/ (注意包含前后两个斜杠)。
    
  4. 如何赋予 Snapic Plus 主题更个性的样式和添加视频功能?

    1)方法一:可以参阅用户“某猫”编写的教程 https://imashen.cn/897
    
    2)方法二:可以参阅用户“天祈”编写的教程 https://www.sakurafly.com/archives/18
    
  5. 如何在文章编辑页显示附件缩略图?

    将下面这段代码块放入 admin/file-upload.php 第25行 </div> 后。
    
    <p><img src="<?php $attachment->attachment->url(); ?>" alt="<?php $attachment->attachment->name(); ?>" class="typecho-attachment-photo" /></p>
    

  1. 哈哈 哈哈

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

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

    1. Lopwon Lopwon博主
      @ 哈哈

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

      1. 哈哈 哈哈
        @ 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 修正版删除了这段代码,用别的方式呈现“关于”页面。

  2. 哈哈 哈哈

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

    1. Lopwon Lopwon博主
      @ 哈哈

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

      1. 哈哈 哈哈
        @ Lopwon

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

  3. sen sen

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

    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

  4. 好好好 好好好

    新版本怎么找不到页面置顶选项?

    1. Lopwon Lopwon博主
      @ 好好好

      新建缩略名为about的独立页面,这是置顶文章。

  5. 七栀 七栀

    可以申请案例吗

    一楼阳光 https://sun.1ioo.com

    1. Lopwon Lopwon博主
      @ 七栀

      已添加,感谢支持。

  6. 好好好 好好好

    建议支持外链图片~

    1. Lopwon Lopwon博主
      @ 好好好

      可以参考本页使用文档提到的图片外链教程实现。

      1. 好好好 好好好
        @ Lopwon

        教程都不适合新版本了~

        1. Lopwon Lopwon博主
          @ 好好好

          新版获取图片的代码没有改变,由于删减部分代码,是行数发生变化,可以适当向前(向上)的十来行查找。

  7. leeyooo leeyooo

    已购买,请问大佬,照片点击放大后,照片的白边可否去除?如何修改设置呢

    1. Lopwon Lopwon博主
      @ leeyooo

      文件fancybox.css搜索#f9f9f9,替换为none

T