Snapic Page 2022 使用文档

2022-09-30

Snapic Page 2022 使用文档


版本型号:Snapic Page 2022
适用程序:Typecho
皮肤类型:页面模板
主题作者:Lopwon
作者博客:Lopwon.com
发布页面:Lopwon.com/snapic.html
官方演示:Fuji Z1天空篇影像篇曲奇·猫
网友案例:(Go solo to top)(留言申请)

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

重要提示:之前购买过 Snapic Page 的小伙伴将免费获取 Snapic Page 2022

1. 请将之前购买 Snapic Page 的微信付款凭证截图发送至 Lopwon@qq.com 后,给你提供 Snapic Page 2022 文件包。

2. 或者在你之前收取 Snapic Page 文件包的邮件里,通过回复该邮件发送信息索取 Snapic Page 2022 文件包。

模板说明

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


主要功能

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

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


模板更新

2022年09月30日 发布 Snapic Page 2022(v2.0),升级更新明细如下:

优化项。1. 优化功能代码 2. 优化样式代码 3. 优化外观细节

新增项。1. 新增模板设置 2. 新增平滑滚动

2021年06月26日 发布 Snapic Page


使用方法

A 部署文件

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

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

说明

  • 作用于每个格子。使用后,每个格子的宽度相对更宽。
  • 作用于每个格子。使用后,每个格子的圆角比较明显。
  • 作用于图片灯箱。使用后,灯箱的遮罩层具有透明感。
  • 作用于图片灯箱。使用后,可以隐藏灯箱的图片线框。
  • 作用于图片灯箱。使用后,开启灯箱的图片翻图功能。
  • 作用于图片灯箱。使用后,开启灯箱的自动播放功能。
Store

16 条评论

  1. 点儿 点儿 17

    邮件已发送,静等

    1. Lopwon Lopwon 博主
      @ 点儿

      已发送。

      1. 海格 海格 8
        @ Lopwon

        已收到并安装,请教博主,现在页面上最多是4列,怎么设置能变成5列呢

        1. 海格 海格 8
          @ 海格

          找到了,在styel.css里 >_

          1. Lopwon Lopwon 博主
            @ 海格

            不建议修改 style.css 里的设置,可以在 index.php 里新增一段代码,也就是除了默认的四栏和三栏,新增自定义的五栏。稍等我更新下使用文档。

          2. Lopwon Lopwon 博主
            @ 海格

            错了,是模板文件 Snapic-Page.php 里新增,不是 index.php

        2. Lopwon Lopwon 博主
          @ 海格

          已更新文档,见(使用技巧)。

          1. 海格 海格 8
            @ Lopwon

            收到博主,我好好研究研究。还有博主,发现了一个问题,我这边点击图片后,能显示这个图片,但图片下面没有描述文字,可我已经给这张图片写了描述。在网页上没有class为fancybox-title fancybox-title-float-wrap的节点,您看是我那里没有设置到吗

            1. 海格 海格 8
              @ 海格

              已经找到原因。在按照博主给的使用技巧中的代码调整显示列数时候(我将列数自定义字段为:columnsNum),然后在对应位置加入代码为if (strpos($this->fields->snapic, 'columnsNum') !== false),但我发现给到的其他的自定义字段wide、radius、overlay、padding、gallery、autoplay也都没有起作用,我修改为:if (strpos($this->fields, 'columnsNum') !== false),就都可以了,图片描述也能正确显示了,可能我最开始没有理解对。希望能帮到其他博主。

              1. 海格 海格 8
                @ 海格

                对其他的字段也是这样修改的:if (strpos($this->fields, 'wide') !== false),if (strpos($this->fields, 'radius') !== false)。。。。。就是把->snapic去掉就可以了。

              2. Lopwon Lopwon 博主
                @ 海格

                哈哈,我才发现使用文档中(使用技巧)写错了,是新增自定义字段(值)不是字段(名称),已更正。

            2. Lopwon Lopwon 博主
              @ 海格

              模板默认设置是,开启灯箱翻图(gallery)后才显示图片描述。

  2. 海格 海格 8

    感谢博主,我目前遇到了一个情况解决不了了,特来向博主情况。我现在每个单页(相册)里面传的照片数据都至少一千个起,但现在的页面每次加载都是全部图片数据都加装出来(其中图片是可以懒加载的),想请教一下,能否设置为随着滚轮滑动,每次加载几十条记录吗?

    1. Lopwon Lopwon 博主
      @ 海格

      模板已经是使用图片延迟加载了呀,只有图片处在指定的范围内才会加载,如果想自定义延时加载的属性,在模板 Snapic_Page.php 里搜索第二个 lazyload,函数体里的参数即是,lazyload 还有其他参数,但要考虑与瀑布流 masonry 的兼容。

      1. 海格 海格 8
        @ Lopwon

        不好意思博主,可能我表述错了,图片已经延迟加载了,比如我这页传了1000张图片,程序会把1000条记录都检索出来(其中文字表述都加载了,图片未加载),即使是这样,在页面处理瀑布流时,也会很慢。所以想着能否几十条的这样加载。

        1. Lopwon Lopwon 博主
          @ 海格

          嗯,是我理解有误,你想要的是(无限加载)功能,就是滑动到页面底部时才加载之后的内容,这个只能自己研究了,网络搜下。

Lopwon Festive 元宵节代码已上线

Powered by Lopwon POP