Snapic Page 使用文档

Snapic Page 使用文档


版本型号:Snapic Page(单页版)
适用程序:Typecho
皮肤类型:页面模板
主题作者:Lopwon
作者博客:Lopwon.com
发布页面:Lopwon.com/snapic.html
官方演示:Fuji Z1
网友案例:向阳而长点儿画廊Go solo to top(留言申请)

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


功能说明

与主题版 Snapic Plus 相比,单页版 Snapic Page 不用改变自己现有的博客主题,也能通过建立独立页面,拥有相册的功能,支持单篇页面不断新增照片。综合网友建议,新增了一些功能,优化了一些样式。

1. 单页版 Snapic Page 适用于图片类相册,使用瀑布流(masonry)的方式延时加载(lazyload)展示图片集,同时支持图片灯箱(fancybox)效果。

2. 不使用外部公共JS,无被挂马风险。

3. 可以单独为每一张图片添加描述。

4. 理论上,可以建立很多个单页相册。

模板更新

2021年07月11日 Snapic Page 已经定版,只做 Bug 修复,不做更新。

2021年06月26日 发布正式版 Snapic Page


使用方法

A 部署文件

1. 将压缩包里的文件夹 Snapic 及其内部的所有文件,和文件 Snapic-Page.php 上传至目录 usr/themes 中的你的主题文件夹里。如:你的主题文件夹是 default,那么就上传至 usr/themes/default 里。

2. 将压缩包里的文件 Readme.txt 中的代码,复制粘贴到你的主题文件夹里的文件 functions.php 中。为避免操作错误,请将代码粘贴至最末端。

B 配置相册

后台》管理》独立页面》新增,新建独立页面,除以下提到的事项外,其余正常操作即可。

1. 此编辑页面左侧的“内容文本框”里,选择性输入你对相册的介绍,将以摘要的形式展示在前台的置顶处。注意:摘要不支持超链接显示。

2. 此编辑页面右侧的“自定义模板”里,请选择“Snapic Page”。

3. 此编辑页面右侧的“附件”里,请上传你需要展示的图片,不需要插入“内容文本框”中。

4. 此编辑页面右侧的“高级选项”,在“公开度”选择“隐藏”后,可将此相册(独立页面)的标题不展示在某些主题的分类菜单里。

C 添加描述

1. 方法一:在以上提到的编辑页面右侧的“附件”里,上传你需要展示的图片后,依次点击每个图片附件的“编辑”(铅笔状图标),进入图片信息的编辑页面,在右侧的“描述”里,输入你对这张图片的介绍,提交修改即可。

2. 方法二:后台》管理》文件,也可以从这里进入图片信息的编辑页面,给每张图片添加描述。

D 新增图片

后台》管理》独立页面,打开你需要新增图片的相册(独立页面),继续在“附件”里上传图片即可。最新上传的图片将展示在前台的最前面。

E 图片外链

单页版 Snapic Page 相册,需要将图片以附件的形式上传。如果使用图床,需要自己通过插件并修改主题代码实现,请参考以下建议自行研究。

1)方法一:可以参阅用户“点儿”编写的教程 https://www.dianr.cn/80.html

F 使用技巧

1. 如何打开翻图功能?见文件 Snapic-Page.php 里的注释。

2. 如何替换加载动图?见文件 Snapic-Page.php 里的注释。

3. 如何在二级目录下的博客使用 Snapic Page 单页版相册?
修改文件 Snapic-Page.php 第67行两处,分别为 href 和 data-original 里的 $this 前,添加 /二级目录文件夹名称/ (注意包含前后两个斜杠)。

4. 如何让相册介绍支持超链接?
搜索文件 Snapic-Page.php 第52行,将 excerpt(255, '......') 替换为 content() 后,可以在后台该相册(独立页面)的编辑页面左侧的“内容文本框”里,按照正常操作插入超链接。需要注意的是,修改后,前台输出的相册介绍是正文内容,所以请勿在“内容文本框”里输入太多文本内容,也不要插入图片。如果执意要在“内容文本框”中插图图片,建议一张即可,同时需要在 css 中添加如下样式,以约束图片的宽度:
.snapic-about img {
    width: 100%;
}

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. specialfox specialfox

    已付款

    1. Lopwon Lopwon博主
      @ specialfox

      已发送。

  2. 依晨 依晨

    博主,你好,为什么我的首页介绍离图片上下边距这么大啊。

    图片链接:https://s1.a***.com/2022/04/12/LedtLn.jpg

    1. Lopwon Lopwon博主
      @ 依晨

      相册读取附件里的图片,不用把图片插入文本框中。

      1. 依晨 依晨
        @ Lopwon

        好了好了,感谢

  3. 子午 子午

    这个怎么使用其他已经发布的文章照片里的图片呀?重复上传图片有点浪费啊

    1. Lopwon Lopwon博主
      @ 子午

      这个是单页版相册Snapic Page,你所说的需求应该是另一款主题版相册Snapic Plus

      1. 子午 子午
        @ Lopwon

        不需要主题哈,就单页面就行了。内容编辑框要是能用来输出图片地址就好了。左上角的介绍完全可以在文件里改一下就行了。

        1. Lopwon Lopwon博主
          @ 子午

          如果图片数量比较多,使用内容编辑框输出图片还是比较麻烦的,不如通过附件输出,详见另一单页版Lopwon EDC,这款是使用内容编辑框输出图片,但是需要按照格式录入信息,比较适合图片少的情况。

          1. 子午 子午
            @ Lopwon

            买了,等发送。样子不适合相册。

            1. Lopwon Lopwon博主
              @ 子午

              已发送Lopwon EDC

  4. 依晨 依晨

    你好,我看了那个外链的教程,代码也改了,但就是不显示,只要我用外链他就不显示图片了

    1. Lopwon Lopwon博主
      @ 依晨

      图片链接不对,你要使用自己的图床地址,你现在是把教程作者的图床地址用上了,还是他为了保密用省略号代替的链接。

      1. 依晨 依晨
        @ Lopwon

        那是改用我博客的地址还是我第三方外链的地址

        1. Lopwon Lopwon博主
          @ 依晨

          你要咨询下教程作者,我没有使用图床实测过,没办法提建议。

          1. 依晨 依晨
            @ Lopwon

            可以了,我自己调试好了,麻烦你了

  5. RK RK

    申请加入展示,主题很好看,感谢大佬通过邮件帮忙耐心解决问题,赞!
    站名:go solo to top
    地址:https://goso****.top/index.php/photo.html

    1. Lopwon Lopwon博主
      @ RK

      感谢支持,已添加。看到你的街拍照片里有我去过的熟悉的地方。

      1. RK RK
        @ Lopwon

        是的,你一些街拍里的地方我每天经过,说不定见过呢

        1. Lopwon Lopwon博主
          @ RK

          握手

  6. L L

    你好,因为我用的是Quark模板,本身没有functions.php,请问要怎么添加

    1. Lopwon Lopwon博主
      @ L

      只支持Typecho博客程序的,如果是的话,可以自己新增functions.php。方法是WIN系统右键新建TXT文档,把后缀为txt的文档重命名为functions.php,把代码粘贴保存即可。

  7. 点儿 点儿

    申请加入展示区域
    https://www.d****.cn/jpg.html

    感谢!Lopwon 作者的大力支持,完成图床储存方案搭建,稍后发出相关更改说明,以便更多人使用图床。
    同时再次感谢各位博主的认真解答,谢谢每一次的邮件都认真答复。

    1. Lopwon Lopwon博主
      @ 点儿

      感谢支持,已添加。

      1. 点儿 点儿
        @ Lopwon

        大佬 ,搭配图床存储思路性操作教程已发,请查阅。
        https://www.d****.cn/80.html

        1. Lopwon Lopwon博主
          @ 点儿

          已添加,感谢!

T