Snapic Just 640px 使用文档

版本型号：Snapic Just 640px
适用程序：Typecho
皮肤类型：主题
主题作者：Lopwon
作者博客：Lopwon.com
发布页面：Lopwon.com/attachment/3955/
许可方式：CC BY-NC-SA
官方演示：Snapic Just 640px ^*

* 演示站为 v1.4.0 开发版，当前可下载为 v1.3.0 正式版。

主题说明

主题 Snapic Just 640px 适用于博客记事与阅读。具有无感翻页、无感翻篇功能；摒弃传统首页的方式，主题开页即展示文章全文或标题列表，不仅对页面元素做规整收纳、删繁就简，将其归置于索引滑窗中，按需唤出，让浏览博客日志更纯粹；还可自选内容区宽度，可创建文内多图集，还有一些彩蛋小功能。详见《Typecho 记事阅读主题 Snapic Just 640px》介绍。

提示：Snapic Just 640px 主题，仅包含基础的博客功能，你可以通过 Lopwon 制作的免费插件增强博客功能，也可以使用 Lopwon Hub 插件扩展其他需求。

主题 Snapic Just 640px 制作由来，浏览。

主题更新

Snapic Just 640px v1.4.0（制作中）

    · 新增：首页焦点模式；
    · 修正：已知问题；
    · 优化：一些样式；

2025年04月18日 发布 Snapic Just 640px v1.3.0

    · 调整：优化无感翻页翻篇功能（在提示消失后才能触发翻页翻篇，避免连续滚动滑动误触发）；
    · 新增：视频灯箱、框架灯箱、内联灯箱等灯箱功能；
    · 新增：对自定义的羞羞图进行模糊处理；
    · 新增：界面背景色可选默认、豆绿、桃粉色，且刷新无闪屏现象；
    · 新增：首页可自选文章模式、列表模式，及自动切换模式；
    · 新增：备份主题设置功能；
    · 新增：文章章节列表功能；
    · 新增：自定义索引滑窗中 Pages 项的打开方式；
    · 新增：代码高亮功能；
    · 修正：已知问题；
    · 优化：一些样式；

2025年04月12日 发布 Snapic Just 640px v1.2.1

    · 新增：自定义索引滑窗中 Links 项的打开方式；
    · 修正：当心绪内容无文字，仅包含图像或表情时，心绪提示使用 [图像/表情心绪] 作为摘要，避免无内容输出；
    · 修正：已知问题；
    · 优化：一些样式；

2025年04月04日 发布 Snapic Just 640px v1.2.0

    · 新增：心绪功能。
    · 新增：心绪可用表情图标。
    · 修正：已知问题；
    · 优化：一些样式，替换 css 伪类 :has 提升兼容性；

2025年04月01日 发布 Snapic Just 640px v1.1.0

    · 新增：文内图集可使用独立的灯箱翻图；
    · 新增：索引页 Pages 项可使用图标；
    · 新增：评论功能；
    · 修正：已知问题；
    · 优化：一些样式；

2025年03月21日 发布 Snapic Just 640px

使用方法

A 部署文件

请将主题文件夹 SnapicJust640px 上传至目录 usr/themes 中，在后台启用即可。

B 配置页面

一、创建「索引」页面（可选项）。

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

2. 页面缩略名必须填入 catalog，乱填无效！

3. 此编辑页面右侧的“高级选项”，在“公开度”选择“隐藏”。

4. 提示：该页面用于（索引）图标唤出滑窗时 Fetch 数据使用，不提供给浏览者直接访问，文章公开度”请选择“隐藏”。

二、创建「心绪」页面（可选项）。

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

2. 页面缩略名必须填入 mood，乱填无效！

3. 此编辑页面右侧的“高级选项”，请勾选“权限控制”的“允许评论”。

4. 选择性启用 for Snapic Just 640px 插件，作用是：

    · 限制浏览者在心绪 mood 页面创建父级评论，只允许回复博主的心绪；

    · 博主心绪内容中的图片使用延迟加载和灯箱看图功能；

    · 博主在登录状态下，在心绪 mood 页面可以使用表情包功能；

5. 鉴于以上，建议启用插件，如下：

    · 将压缩包里的文件夹 forSnapicJust640px 及其内部的所有文件，上传至目录 usr/plugins 中。

    · 后台》控制台》插件，找到 fot Snapic Just 640px 并启用。

6. 提示：插件功能仅作用于心绪 mood 页面，且为 v1.2.0 及以上版本的功能。

C 文章内容

一、给文内图片添加「描述」（可选项）。

在文章编辑器中插入图片后，使用字符 ·（中文输入状态下的 ~ 键）为前缀标记的图片描述，将在图片下方显示。

    1) Markdown 语法插入图片时

    ![·有前缀的图片描述会显示](图片链接)
    ![无前缀的图片描述不显示](图片链接)

    2) 使用编辑器功能按键插入图片时

    [·有前缀的图片描述会显示][1]
    [无前缀的图片描述不显示][2]

    [1]: 图片链接
    [2]: 图片链接

二、在文内添加「图集」（可选项）。

在文章编辑器中使用 [fotos][/fotos] 包裹多张图片时，这些图片以图集的方式呈现。注意：[fotos][/fotos] 内禁止有空行，否则，会被 Typecho 自带的 AutoP 自动拆分为 <p></p> 段落，输出不如预期的内容。提示：可以在同一篇文章中，同时使用多个 [fotos][/fotos] 创建多个图集。

    1) Markdown 语法插入图片时

    [fotos]
    ![·有前缀的图片描述会显示](图片链接)
    ![无前缀的图片描述不显示](图片链接)
    [/fotos]

    2) 使用编辑器功能按键插入图片时

    [fotos]
    [·有前缀的图片描述会显示][1]
    [无前缀的图片描述不显示][2]
    [/fotos]

    [1]: 图片链接
    [2]: 图片链接

三、创建「相册」（可选项）。

依照以上（在文内添加「图集」）的方式，可以在文章（或独立页）创建只包含图片的文章，即是相册。理论上，相册数量不限。

四、在文内添加「代码高亮」（可选项）。

使用连续三个 ``` 反引号 + 语言（如：html）开始，并以另外连续三个 ``` 反引号结束，如下：

```html

默认支持语言：css / js / php / markdown / html
反引号为：英文输入状态下的 ~ 键

```

提示：代码高亮，为 v1.3.0 及以上版本的功能。

五、在文内使用「文章章节」（可选项）。

在文内插入格式 <!--part 章节描述--> 即可自动生成文章章节列表，可快速定位到文内锚点：

    这里是文章内容 A

    <!--part 这里是章节 B 描述-->

    这里是文章内容 B

    <!--part 这里是章节 C 描述-->

    这里是文章内容 C

说明：相对于常见的通过识别文内 h2 h3 等标题标签创建文章章节的方式，作者 Lopwon 使用了 Html 注释划分章节，好处是，不需要对每个章节绞尽脑汁的起标题，因为 Html 注释不会在文内渲染显示，也不会因为章节标题的存在，而破坏了文章的版式结构。

当然：文章章节，也可以作为类似标签卡片的功能，只不过是将标签卡由横向排列变为了纵向排列，以此，可以创建诸如时间轴、建站历程等文章或单页内容，演示：

    http://snapic.cn/t/just640px/index.php/changelog.html

注意：文章章节，只在左侧空白区域的宽度足够时，显示。

提示：文章章节，为 v1.3.0 及以上版本的功能。    

D 设置外观

后台》控制台》外观》设置外观，依喜好设置即可。

E 使用技巧

如何更换浏览器标签页的小图标？

替换 img 文件夹的 favicon.ico 和 AppIcon.png 两张图标即可。

如何显示索引滑窗中 Pages 项的小图标？

假设独立页（单页）的 cid = 2 那么请将诸如 cid-2.png 的图标放至 SnapicJust640px/img 文件夹中，即可。

提示：仅支持 png 格式的图片，且为 v1.1.0 及以上版本的功能。

如何给羞羞图做模糊化处理？

此灵感来自 Quora 对色情、暴力、血腥等图片的模糊化处理，如下：

1. 在插入图片后，在自定义图片描述时，只要包含字符（羞）则该图片初始做模糊化处理，当点击图片时，即可查看原图；

2. 演示（页面第二张图像）：

    http://snapic.cn/t/just640px/index.php/archives/8/

如何使用 Glightbox 扩展功能？

主题 Snapic Just 640px 使用 Glightbox 灯箱系统展示图像，同时，也支持显示视频、内联、框架等，演示：

    http://snapic.cn/t/just640px/index.php/archives/12/

如何优雅的对文章图文进行排版？

1. 文中（单图）宽度（大于）文本宽度，即图片左右各超出文本左右的 0.5em 宽度；

2. 文中（图集）宽度（等于）文本宽度，即图集左右与文本左右，对齐；

3. 鉴于以上，请勿将（单图）与（图集）挨在一起，否则（单图）和（图集）的左右并不对齐，建议使用（单图 + 文本）或（图集 + 文本）的方式，也可以搭配分割线，将关联度高的图文进行分割，如：

    这里是单图 A

    这里是针对单图 A 的文本

    这里是分割线

    这里是单图 B

    这里是针对单图 B 的文本    

    这里是分割线

    这里是图集 C

    这里是针对图集 C 的文本内容

如何显示页脚的备案信息？

备案信息，主题默认通过（索引）滑窗 Links 项，使用自定义链接添加，如果需要在页脚展示备案信息，如下：

打开 foot.php 文件，找到 <footer hidden> 容器，将 _e('') 内部信息修改后，移除 <footer hidden> 中的 hidden 标签，即可。

提示：备案信息为 v1.1.0 及以上版本的功能。

如何自定义翻页翻篇的灵敏度？

1. 搜索 foot.php 文件，找到两处 navigation 函数，如下操作：

    navigation(true, 5, 1); // 第 1 个参数为 true 的，保持不变，第 2 个参数为电脑端鼠标滚轮阀值，第 3 个参数为移动端手势滑动阀值
   
    navigation(false, 5, 1); // 第 1 个参数为 false 的，保持不变，第 2 个参数为电脑端鼠标滚轮阀值，第 3 个参数为移动端手势滑动阀值

2. 电脑端鼠标滚轮阀值：滚动滚轮一小格为 1，通常滚动一次约为 5 小格，根据需要自定义数值。

3. 移动端手势滑动阀值：滑动一次即为 1，根据需要自定义数值。

如何发布心绪？

1. 在按照以上（创建「心绪」页面）操作，且以博主身份登录博客后，打开心绪 mood 页面，正常操作发布评论即可。

2. 其中，评论框一侧的图像，来自心绪 mood 页面在后台所上传的最新一张图片附件，点击可快捷的将该图像插入评论框中。

2. 如需手动插入单张或多张图像，使用以下格式即可，插件 for Snapic Just 640px 会自动转换为支持延迟加载和灯箱看图的格式：

    <img src="图像一链接">

    <img src="图像二链接">    

    使用空行可对图文内容进行舒适的排版。

提示：心绪为 v1.2.0 及以上版本的功能。

如何新增心绪表情包？

1. 将包含表情图标的文件夹（如 myEmoji ）放入插件 for Snapic Just 640px 的 mood 文件夹内，即可。

2. 重要：表情图标支持 .png .jpg .jpeg .gif .webp .svg 格式的图片，且文件名仅限使用包含：大小写字母、数字、短横线、下划线。

3. 提示：表情包为 v1.2.0 及以上版本的功能。

如何使用主题的备份配置功能？

1. 主题 Snapic Just 640px 使用 Cookie 存储配置（不涉及数据库），在不清空浏览器缓存的前提下，有效期为一个月。

2. 当点击（备份配置）且停用主题后，在再次启用主题时，会自动从浏览器 Cookie 中获取配置，并恢复。

3. 提示：备份配置为 v1.3.0 及以上版本的功能。

如何自定义签名的字体和样式？

1. 主题默认的签名字体 Caveat 仅支持全英文字母，如需对中文字符使用自定义字体，可前往 Google Fonts 配置。

2. 点击 https://fonts.google.com 页面中的 Filters 筛选，在 Preview 预览框输入需要使用的中文字符（如：立云图志）。

3. 在 Language 语言栏选择 Chinese(Simplified) 中文简体。

4. 在筛选结果中，点选需要使用的字体，进入该字体详情页。

5. 点击字体详情页面右上角 Get font 进入下载页面后，点击 Download all 下载字体文件包。

6. 文件包文件 *.ttf 包含所有的中文字符，文件都比较大，接下来需要从 *.ttf 文件中提取签名字符（如：立云图志）：

7. 将签名字符（如：立云图志）四个汉字，使用在线「中文转 Unicode 编码」工具，转换为如下编码。

    \u7acb\u4e91\u56fe\u5fd7

8. 将以上 Unicode 编码改为使用半角逗号隔开的方式，备用。

    u7acb,u4e91,u56fe,u5fd7

9. 访问 https://transfonter.org 上传（Add fonts）文件 *.ttf 后，除以下提到的事项外，其余默认或自行研究。

    · 字体格式（Formats）默认即可，考虑到不同浏览器的兼容性，也可以全选。
    · 编码范围（Unicode ranges）输入以上备用的编码。
    · 字体目录（Fonts directory）输入存储字体文件的文件夹名称，如 myfont
    · 点击转换（Convert）并下载（Download）文件包。

10. 将下载的文件包内，文件夹（如 myfont）上传至主题文件夹 font 中。

11. 打开文件包内的 stylesheet.css 文件，修正字体文件的相对路径。

    · 在所有文件夹名称（如 myfont）的前面添加 ../font/
    · 即 ../font/myfont/文件名.扩展名

12. 将以上修正相对路径后的 @font-face {...} 样式代码，复制。粘贴至 css/snapic.just640px.front.css 文件中，如 @font-face 的下面，并如下操作。

    · 在 snapic.just640px.front.css 找到包含 font-family 的类 .sign span:first-child a
    · 将 font-family 的默认值 'Caveat' 替换为以上所粘贴的 @font-face 中的 font-family 的值。
    · 通过调整 margin-left margin-top font-size 三个参数，适配签名样式。

特别鸣谢

主题 Snapic Just 640px 使用以下开源项目，及在 ChatGPT DeepSeek Grok 协助下，完善功能：

GLightbox Plyr Microtip Prism Google Fonts: Caveat OpenMoji