Snapic Visual（已停售）

版本型号：Snapic Visual（单页版）
适用程序：Typecho
皮肤类型：页面模板
模板作者：Lopwon
作者博客：Lopwon.com
发布页面：Lopwon.com/snapic-visual.html
许可方式：已停售，功能已添加至 Snapic Plus 相册主题
官方演示：Snapic Visual

模板说明

Snapic Visual 为 Typecho 单页媒体模板，相较于 Snapic Plus 主题和 Snapic page 模板，Snapic Visual 支持外链图片、音频和视频，新增单页留言评论，以满屏切换页面为主，类似时下流行的短视频 APP 界面。

1. 单页版 Snapic Visual 独立运作，不对你现有的主题产生影响，操作简单无需过多配置。

2. 可以单独为每一个媒体添加描述。

3. 理论上，可以建立很多个影像页面。

主要功能

1. 满屏切换。电脑端以滚轮或键盘按键翻页，移动端支持手势上下划屏翻页。

2. 支持外链。图片、音频和视频可以通过附件上传插入，也可以通过插入图片的方式添加。

3. 切换停播。影音类播放时，切换媒体页面或点击关于页面另外的影音后，自动停播上一条影音播放当前影音。

4. 延迟加载。图片具有延时加载功能，增强浏览体验。

5. 留言评论。支持单页留言评论。

6. 图集浏览。在关于页面集中展示图片、音频和视频，可自定义多种显示比例，点击后可查看大图和全屏播放影音。

7. 显示设置。依喜好通过自定义字段，设置外观布局。如：画面比例、展示或隐藏信息等。

功能详解

Snapic Visual 单页媒体模板，可以插入图片、音频和视频，支持添加描述，支持使用外链。模板由三个页面组成，依次为：媒体页面、评论页面、关于页面。其中，依喜好通过自定义字段，设置外观布局。

A 评论

需要说明下，此模板由于使用单页切换的方式展示媒体、评论和关于三个页面，且首屏为媒体页面。故在评论后，直接切换到了媒体页面，没有停留在评论页面，需要重新点击菜单导航的（评论）图标回到刚刚的评论位置。

B 媒体

支持图片后缀：.jpg/.jpeg/.png/.gif/.bmp/.tiff/.webp/.svg/.avif

支持音频后缀：.mp3

支持视频后缀：.mp4/.webm/.ogv（.ogv不支持手机端播放）

C 兼容（重要）

1. 影音的加载速度，有赖于你存储文件的空间带宽和浏览者的网络情况。模板默认设置视频预加载 preload 为 metadata，音频为 none，该属性在不同浏览器下的表现各异，请知悉。

2. 影音的自动播放，鉴于 Video 和 Audio 在各平台（如：电脑端、移动端、微软端、苹果端等）和各环境（如：谷歌浏览器、火狐浏览器、苹果浏览器、微信等）下的兼容性各异，通俗的说是：坑多！所以，模板默认不带有自动播放影音的功能，请知悉。

3. 视频预览图截取自第一帧，同时，在不同浏览器下展示的效果也各异，而音频则不显示封面，请知悉。另外，在微信环境下，视频预览图暂时无法展示，如果有解决方案，后续可能会修正。

4. 模板 Snapic Visual 无插件支持，使用中，建议关闭不需要的插件，以免显示冲突，尤其是自带影音功能的主题。

版本更新

2023年11月01日 发布 Snapic Logs v2.1 修正已知问题。

2023年10月06日 发布 Snapic Visual v2.0 修正已知问题，优化功能代码。

2022年07月30日 发布 Snapic Visual

使用方法

A 部署文件

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

2. 在你的主题里的文件 functions.php 内搜索 themeInit 并在 {…} 内添加以下代码，作用是让模板 Snapic Visual 的评论不分页：

    if (strpos($archive->template, 'Snapic-Visual.php') !== false) {
        Helper::options()->commentsPageBreak = false; // 模板 Snapic Visual 评论不分页
    }

B 配置相册

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

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

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

3. 按以下介绍添加内容。

C 添加内容

请严格按照以下格式要求在“内容文本框”中输入内容，才能在前台正确输出。

1. 简介：在“内容文本框”上方选择性输入你对媒体（独立页面）的介绍，可使用文本链接。

2. 原理：每行内容由 ![]() 组成，每行内容将对应输出前台的一个全屏页信息（媒体页面）和一个方块信息（关于页面）。

3. 格式：![图片描述](图片链接)

4. 重要：以上格式为 Markdown 插入图片的语法，前方必须包含 ! 半角感叹号。

D 使用技巧

1. 待补充……

E 配置模板

一、创建字段（可选项）

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

1. 如果添加字段后，需要取消功能，则把对应的字段删除，或者把字段值留空。

2. 如果添加字段后，发现该字段对应的功能未生效，请先排查在用的博客主题是否也存在相同的字段名称。

3. 在设置名称为 svSetup 的字段，如果填入多个字段值时，使用半角逗号隔开，没有顺序要求。

作用 头像徽标 媒体比例 显示设置 字段名称 svLogo svMode svSetup 字段值格式 图片链接 指定值 指定值 字段值示例 http://snapic.cn/cdn/img/logo_w.png y mark,ycover 说明 填入图片链接则导航和头像显示该图片，反之，导航为房子图标，头像为 Gravatar ，请确保该服务访问顺畅 作用于关于页面媒体比例（宽:高），填入 x 则 3:2 显示，填入 y 则 9:16 显示，填入 z 则 1:1 显示 mark（显示角标）desc（显示摘要）vcover（视频宽度铺满）xcover（图片宽度铺满）ycover（图片高度铺满）