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. 我昨夜梦到 我昨夜梦到 9

    祝贺开售!大大,替换加载动图的动图绝对地址有好看的推荐吗,感谢感谢

    1. Lopwon Lopwon 博主
      @ 我昨夜梦到

      可以使用 Snapic Plus 里的 loading.gif

      1. 我昨夜梦到 我昨夜梦到 9
        @ Lopwon

        谢谢大大,完美解决

  2. 我昨夜梦到 我昨夜梦到 9

    借鉴了各位大大的模板,终于搭建完毕!现在过来申请个snapic-psge网友案例,地址:https://x****.com/snapic.html。谢谢大大分享!

    1. 我昨夜梦到 我昨夜梦到 9
      @ 我昨夜梦到

      打错字了...是Snapic-Page

    2. Lopwon Lopwon 博主
      @ 我昨夜梦到

      已添加,你之前使用的是测试版,我重新给你发了一份正式版,没有太大改变,只修改了一些样式。

      1. 向阳而长 向阳而长 9
        @ Lopwon

        谢谢,收到了。谢谢

  3. Cicada000 Cicada000 2

    想请问下具体怎么具体怎么使用图片外链,没找到相关插件,自己在这方面知识还很浅薄(捂脸

    1. Lopwon Lopwon 博主
      @ Cicada000

      我没有操作过使用图片外链,是有用户在主题版Snapic Plus实现过,单页版Snapic Page刚发布,还没有用户案例,你可以参考主题版的使用文档,尝试按照用户的方法操作研究下。http://www.lopwon.com/snapic-plus.html(页面内搜索“如何让主题支持外链图片”跳至相关内容)

      1. Cicada000 Cicada000 2
        @ Lopwon

        了解了,待会去试试,谢谢您

  4. 向阳而长 向阳而长 9

    大大 最近决定把博客迁回国内,安心备案,现在关站等广西通管局审核,所以展示站就访问不了了

    1. Lopwon Lopwon 博主
      @ 向阳而长

      没事,只要不是长时间无法访问,就会留着链接。

      1. 向阳而长 向阳而长 9
        @ Lopwon

        终于备案好了

        1. Lopwon Lopwon 博主
          @ 向阳而长

          恭喜!

    2. 子午 子午 7
      @ 向阳而长

      我之前的网站一直是备案好的,后来阿里云的前置备案部,通知我说我的博客不是个人主页,让把我的备案号撤掉了。刚买的3年主机浪费了。

  5. laji laji

    就挺无语,对于小白购买了主题,还要自己配置.....

    1. Lopwon Lopwon 博主
      @ laji

      购买须知和使用文档都已经写明白了,如果都不愿去尝试,真挺无语,别人能够正常使用还能拓展优化加入自己的需求。如果喝杯水都不会自己倒,不如打点滴算了。况且没人强迫你购买.....

  6. 枫 3

    您好,能告诉我如何让独立页面变成主页吗,我不太懂这个,找了很久也没有找到方法。谢谢。

    1. Lopwon Lopwon 博主
      @ 枫

      http://t.160.me/28.html

    2. Lopwon Lopwon 博主
      @ 枫

      自定义首页模板:添加@package index后,在后台》设置》阅读》站点首页,设置。

      自定义页面模板:添加@package custom后,在后台》管理》独立页面,编辑独立页面中的“自定义模板”,设置。

      1. 枫 3
        @ Lopwon

        那个...为啥我的跟你们的不一样,没有gif。

        1. Lopwon Lopwon 博主
          @ 枫

          见本页“F使用技巧”第2点。

          1. 枫 3
            @ Lopwon

            已知,谢谢!

  7. 点儿 点儿 3

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

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

    1. Lopwon Lopwon 博主
      @ 点儿

      感谢支持,已添加。

      1. 点儿 点儿 3
        @ Lopwon

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

        1. Lopwon Lopwon 博主
          @ 点儿

          已添加,感谢!

T