Snapic Page 使用文档

2021-06-26

Snapic Page 使用文档


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

更新说明:模板 Snapic Page 制作于2021年,v1.0 为对应版本号,目前已停售。最新版本为 Snapic Page 2022(v2.0),做了一些升级更新,请移步至《Snapic Page 2022 使用文档》,之前购买过 Snapic Page 的小伙伴将免费获取。

以下是 Snapic Page 使用文档


模板说明

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

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

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

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

4. 理论上,可以建立很多个单页相册(如:官方演示里的三个相册同使用 Snapic Page 创建)。


模板更新

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. 如何把相册嵌入其他文章页中?详见 http://www.lopwon.com/2252.html

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

    .snapic-about img {
        width: 100%;
    }

6. 如何在文章编辑页显示附件缩略图?
将下面这段代码块放入 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 使用文档

51 条评论

  1. L L 1

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

    1. Lopwon Lopwon 博主
      @ L

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

  2. RK RK 4

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

    1. Lopwon Lopwon 博主
      @ RK

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

      1. RK RK 4
        @ Lopwon

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

        1. Lopwon Lopwon 博主
          @ RK

          握手

  3. 依晨 依晨 5

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

    1. Lopwon Lopwon 博主
      @ 依晨

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

      1. 依晨 依晨 5
        @ Lopwon

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

        1. Lopwon Lopwon 博主
          @ 依晨

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

          1. 依晨 依晨 5
            @ Lopwon

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

  4. 子午 子午 7

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

    1. Lopwon Lopwon 博主
      @ 子午

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

      1. 子午 子午 7
        @ Lopwon

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

        1. Lopwon Lopwon 博主
          @ 子午

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

          1. 子午 子午 7
            @ Lopwon

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

            1. Lopwon Lopwon 博主
              @ 子午

              已发送Lopwon EDC

  5. 依晨 依晨 5

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

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

    1. Lopwon Lopwon 博主
      @ 依晨

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

      1. 依晨 依晨 5
        @ Lopwon

        好了好了,感谢

  6. specialfox specialfox 1

    已付款

    1. Lopwon Lopwon 博主
      @ specialfox

      已发送。

  7. 宫廷 宫廷 2

    我已经付款了,什么时候发货

    1. Lopwon Lopwon 博主
      @ 宫廷

      已发送。

T