Snapic Page 使用文档

2021-06-26


版本型号:Snapic Page(单页版)
适用程序:Typecho
皮肤类型:页面模板
模板作者:Lopwon
作者博客:Lopwon.com
发布页面:Lopwon.com/snapic.html
官方演示:无
网友案例:向阳而长(失效) #点儿画廊

模板 Snapic Page 已停售,最新版本为 Snapic Page 2022(v2.0.x),请移步至《Snapic Page 2022 使用文档》。


模板说明

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

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

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

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

模板更新

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>

Store

51 条评论

  1. 2

    你好博主,你的相册功能有没有随机图片呈现的??就是不按顺序出现照片,不按上传新旧照片排列出现...而是每次刷新页面所有照片都随机呈现

    1. Lopwon Lopwon 博主
      @ 黄

      正序、倒序和随机,三选其一,简单替换一下文件代码就可以。

  2. 宫廷 2

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

    1. Lopwon Lopwon 博主
      @ 宫廷

      已发送。

  3. s specialfox 1

    已付款

    1. Lopwon Lopwon 博主
      @ specialfox

      已发送。

  4. 依晨 5

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

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

    1. Lopwon Lopwon 博主
      @ 依晨

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

      1. 依晨 5
        @ Lopwon

        好了好了,感谢

  5. 子午 7

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

    1. Lopwon Lopwon 博主
      @ 子午

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

      1. 子午 7
        @ Lopwon

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

        1. Lopwon Lopwon 博主
          @ 子午

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

          1. 子午 7
            @ Lopwon

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

            1. Lopwon Lopwon 博主
              @ 子午

              已发送Lopwon EDC

  6. 依晨 5

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

    1. Lopwon Lopwon 博主
      @ 依晨

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

      1. 依晨 5
        @ Lopwon

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

        1. Lopwon Lopwon 博主
          @ 依晨

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

          1. 依晨 5
            @ Lopwon

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

  7. R RK 5

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

    1. Lopwon Lopwon 博主
      @ RK

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

      1. R RK 5
        @ Lopwon

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

        1. Lopwon Lopwon 博主
          @ RK

          握手

准备下山 准备下山
Snapic Plus v5
使用 Lopwon POP 实现