Snapic Page 2022 使用文档

2022年09月30日

版本型号：Snapic Page 2022
适用程序：Typecho
皮肤类型：页面模板
模板作者：Lopwon
作者博客：Lopwon.com
发布页面：Lopwon.com/snapic.html
许可方式：付费使用
官方演示：Fuji Z1，天空篇，影像篇，曲奇猫

我要购买：35元/人
协议须知：协议 / 须知

付款时别忘了留下邮箱收取文件包，勿留 Gmail 邮箱。

模板说明

Snapic Page 2022 是 Snapic Page 的重制版，v2 为对应版本号。此版在 Snapic Page 的瀑布流框架和布局的基础上，做了一些升级更新，主要为：优化功能代码；优化样式代码；新增模板设置等等，详见以下（模板更新）。

主要功能

模板 Snapic Page 2022 不用改变自己现有的博客主题，也能通过建立独立页面，拥有相册的功能。其中，模板外观布局、功能设置等具有简单的可定制性（如：自定义显示或启用与否），可以用于记录自己的生活影像等等。

模板 Snapic Page 2022 通过识别文章（附件中的图片），在前台以瀑布流的方式呈现，支持单篇页面不断新增照片，并且可以单独为每一张图片添加描述。理论上，可以建立很多个单页相册（如：官方演示里的四个相册同使用 Snapic Page 2022 创建）。

当使用模板 Snapic Page 2022 创建了多个单页相册后，可以选择性使用插件 for Snapic Page 将这些相册在指定位置归档显示（见本页文末）。

模板更新

2025年06月13日 发布 Snapic Page 2022（v2.4），适配 Typecho 1.3.0 rc 版。

2024年08月28日 发布 Snapic Page 2022（v2.3），优化瀑布流布局。

2024年08月06日 发布 Snapic Page 2022（v2.2），优化功能代码；删减平滑滚动。

2023年10月06日 发布 Snapic Page 2022（v2.1），优化功能代码，新增相册归档插件。

2022年09月30日 发布 Snapic Page 2022（v2.0），新增模板设置；新增平滑滚动；优化功能代码；优化样式代码；优化外观细节。

2021年06月26日 发布 Snapic Page

使用方法

A 部署文件

1. 将压缩包里的文件夹 Snapic 及其内部的所有文件，和文件 Snapic-Page.php 上传至目录 usr/themes 中的你的主题文件夹里。

2. 重要：如果之前有使用 Snapic Page 模板，直接覆盖原文件即可。

B 配置页面

一、创建相册（必选项）

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

1. 此编辑页面左侧的“内容文本框”里，选择性输入你对相册的介绍，支持使用纯文本、插入链接等。

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

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

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

二、添加描述（可选项）

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

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

三、新增图片（可选项）

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

四、图片外链（说明项）

模板 Snapic Page 2022 需要将图片以附件的形式上传。如果使用图床，需要自己通过插件并修改模板代码实现，请自行研究。

C 使用技巧

1. 除了模板默认的窄栏（四栏）和宽栏（三栏）外，如何新增自定义的栏数（如：五栏）？在模板文件 Snapic-Page.php 的 <head> 和 </head> 之间的适当位置，新增如下代码：


    <?php if (strpos($this->fields->snapic, '自定义字段值') !== false): ?>
    <style>
    .grid .grid__item,
    .grid .grid__sizer {
        width: calc((100% / 3) - 10px);
        margin: 5px;
    }    
    @media screen and (max-width: 960px) {    
        .grid .grid__item,
        .grid .grid__sizer {
            width: calc((100% / 2) - 10px);
            margin: 5px;
        }
    }
    @media screen and (max-width: 480px) {
        .grid .grid__item,
        .grid .grid__sizer {
            width: calc((100% / 1) - 10px);
            margin: 5px;
        }
    }
    </style>
    <?php endif; ?>

① 以上代码的作用是，使用自定义字段值设置图片瀑布流，在指定显示宽度（默认、480px~960px、0px~480px）的格子大小。
② 请将以上代码中的（自定义字段值）替换为随意英文字母（如：sex），避免和模板的自定义字段值（wide,radius,overlay,padding,gallery,autoplay）重复。
③ 请将以上代码中的 (100% / 3) 修改为 (100% / 5) 即：在默认显示宽度下，五栏显示。其他显示宽度的设置类似。
④ 使用时，在自定义字段名称 snapic 里，填入以上自己新增的自定义字段值（如：sex）即可。
⑤ 注意：这个自己新增的自定义字段值（如：sex），请勿与模板已有的宽栏字段值（wide）同时使用。

D 配置模板

一、创建字段（可选项）

通过使用对应的自定义字段值，可以改变模板的布局和功能。打开你创建的相册（独立页面），按以下介绍依喜好设置即可。

1. 添加自定义字段，字段名称填入 snapic，乱填无效！

2. 字段值填入以下表格（字段值）栏中的任意一个，如果填入多个字段值时，使用半角逗号或空格分开，没有顺序要求。

3. 字段值示例：radius,padding 或 overlay autoplay gallery

作用宽栏模式格子圆角灯箱透感灯箱线框灯箱翻图自动播放字段值 wide radius overlay padding gallery autoplay 说明作用于每个格子。使用后，每个格子的宽度相对更宽。作用于每个格子。使用后，每个格子的圆角比较明显。作用于图片灯箱。使用后，灯箱的遮罩层具有透明感。作用于图片灯箱。使用后，可以隐藏灯箱的图片线框。作用于图片灯箱。使用后，开启灯箱的图片翻图功能。作用于图片灯箱。使用后，开启灯箱的自动播放功能。