Snapic Visual 使用文档

2022-05-02

Snapic Visual 使用文档


版本型号:Snapic Visual(单页版)
适用程序:Typecho
皮肤类型:页面模板
主题作者:Lopwon
作者博客:Lopwon.com
发布页面:Lopwon.com/snapic-visual.html
官方演示:Snapic Visual
网友案例:(留言申请)

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


模板说明

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

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

2. 不使用外部公共JS,无被挂马风险。

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

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

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

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

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

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

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

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

7. 显示设置。依喜好在后台勾选外观呈现方式。如:画面比例、展示或隐藏信息等。

功能详解

Snapic Visual 单页媒体模板,可以插入图片、音频和视频,支持添加描述,支持使用外链。模板由三个页面组成,依次为:媒体页面评论页面关于页面。其中,后台》控制台》外观》设置外观(图示),依喜好可自定义多种外观呈现方式(图示)。

A 评论

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

另外,评论功能针对的是使用该模板的独立页面的全局留言,限于 Typecho 功能,暂时无法对单个媒体进行评论。如果有解决方案,后续可能会新增。

B 媒体

支持图片后缀:.jpg/.png/.gif/.bmp

支持音频后缀:.mp3

支持视频后缀:.mp4/.webm/.ogv(.ogv不支持手机端播放)

C 兼容(重要)

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

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

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

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

5. 如果你的主题把文章编辑器重新定义了,也就是未使用 Typecho 默认编辑器插入链接,会有格式不对而导致不能正常输出内容的情况。此时,只能通过手动修正格式。

版本更新

2022年07月30日 发布 Snapic Visual


使用方法

A 部署文件

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

2. 将压缩包里的文件夹 Code 中的对应代码,复制粘贴到你的主题文件夹里的文件 functions.php 中。为避免操作错误,请按照文件 Readme.txt 中的说明严格部署。

B 配置相册

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

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

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

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

C 添加内容图示

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

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

2. 原理:除以上简介外,以如下格式输入的内容,每行内容将对应输出前台的一个全屏页信息(媒体页面)和一个方块信息(关于页面)。

3. 格式:![媒体描述][媒体序号]

4. 媒体:图片、音频和视频可以通过附件上传插入,也可以通过插入图片的方式添加,只要遵循格式要求即可。

5. 示例:![Photo by Lopwon][4]。其中,每行开头的感叹号 ! 是必须的(也就是要以插入图片的方式插入媒体链接),第一对方括号的 Photo by Lopwon 为媒体描述,第二对方括号的 4 为媒体链接的序号。

6. 重要:① 格式中的感叹号和中括号都为半角的英文符号,非中文。② 最后一行的媒体链接需要给一个“回车”,也就是要给“内容文本框”的最后一行留空一行,否则,最后一个媒体信息在前台无法正常输出。③ 如果你的主题把文章编辑器重新定义了,也就是未使用 Typecho 默认编辑器插入链接,会有格式不对而导致不能正常输出内容的情况。此时,只能通过手动修正格式。

D 使用技巧

1. 待补充……
Store

19 条评论

  1. joshfix joshfix 1

    大概什么时间能制作好呢,想先付款预定。

    1. Lopwon Lopwon 博主
      @ joshfix

      最近在忙别的事情,不确定什么时候能做好。

    2. Lopwon Lopwon 博主
      @ joshfix

      即将制作完成,欢迎协助完善。

    3. Lopwon Lopwon 博主
      @ joshfix

      已发布。

  2. 宫廷 宫廷 2

    快发布了吧,嘿嘿

    1. Lopwon Lopwon 博主
      @ 宫廷

      快了,本月底发布。

    2. Lopwon Lopwon 博主
      @ 宫廷

      已发布。

  3. 又加 又加 8

    刚搭配好,原来设置界面,需要借助本身模板的设置界面,但是并不是所以模板都能合理匹配,我的就是。所以建议做成单独独立的设置方式。

    1. Lopwon Lopwon 博主
      @ 又加

      这个局限于 Typecho 的设定,因为所有模板需要共用一个 functions.php 配置皮肤功能。

      1. 又加 又加 8
        @ Lopwon

        那么完全可以把这些设置移至在创建单页的左下角(自定义字段)位置,毕竟只会创建一个页面。functions.php虽然共用,但多多少少存在差异。能显示设置,但样式并非全都合理。或者 移至“设置-基本设置”

        1. Lopwon Lopwon 博主
          @ 又加

          函数文件 functions.php 可以起到全局设置模板功能,WordPress 或 ZBlog 有着同样的文件起到相似的作用。如果只用模板 Snapic Visual 创建一个页面,倒是可以使用自定义字段实现外观和功能定制。但是,模板 Snapic Visual 设计初衷是为了可以创建多个媒体页面(比如每次旅行所有拍摄的短视频单独创建媒体页面),所以使用 functions.php 全局定义外观和功能比较方便。另外,把功能转移至“设置-基本”里,需要操作博客核心文件,减低了模板的使用便捷性。

          1. 又加 又加 8
            @ Lopwon

            刚发布,或许后期会弥补这些问题吧,只是我现在本身的模板设置问题,导致用不了,就很可惜了。

            1. Lopwon Lopwon 博主
              @ 又加

              没看明白,指的是模板 Snapic Visual 在你的主题下无法正常使用?还是……

              1. 又加 又加 8
                @ Lopwon

                添加代码块,显示和本身模板冲突

                1. Lopwon Lopwon 博主
                  @ 又加

                  这个是预料中的,如果你的主题中已有 themeConfig 或 themeInit ,就按照操作说明的对应情况配置。如果可以,你把 functions.php 发送给我,我协助添加代码块。

  4. 又加 又加 8

    我发给你邮箱

    1. Lopwon Lopwon 博主
      @ 又加

      Lopwon@qq.com

      1. 又加 又加 8
        @ Lopwon

        不行的。会报错。设置外观界面直接打不开。四个代码块,我都测试过的。代码块一是最合适的,但是显示会和原本模板错乱,

      2. 又加 又加 8
        @ Lopwon

        已解决,现在完美显示。感谢感谢

Typecho Store
使用 Lopwon POP 实现
CC BY-NC-ND