redchillypowder / Typecho-Theme-VOID

🐒 猴子打字机原理的产物

Typecho Theme VOID 3.3.0

✏ 一款简洁优雅的 Typecho 主题

作为计算机术语时，VOID 的意思是「无类型」。

特性

演示站点：熊猫小A的博客，介绍文章：VOID：现在可以公开的情报。

• 响应式设计
• PJAX 无刷新体验
• AJAX 评论
• 前台管理评论（删除、待审、标为垃圾）
• 前台无跳转登陆（兼容 PJAX）
• 自动夜间模式
• 优秀的可读性
• 衬线、非衬线两种文字风格
• 代码高亮（浅色暗色两种风格，随主题切换）
• Mac 风格代码块（可开启或关闭）
• 代码行号
• 站点样式设置面板（日夜转换、字体、字号）
• MathJax 公式
• 表情解析（文章、评论可用）
• 图片排版（可用作相册）
• 图片懒加载
• 灵活的头图设置
• 文章目录解析
• 完整的结构化数据支持
• 够用的后台设置与丰富的高级设置

结合附带的配套专用插件，还有更多功能：

• 浏览量统计
• 文章点赞
• 文章字数统计
• 评论投票与自动折叠
• 访客互动展示

以及其他很多细节，总之用起来还算舒服。我建立了一个示例页面，在这里你可以看到 VOID 对常用写作元素的支持以及一些特色功能演示：示例页面。

开始使用

1. 下载主题：发布版，注意是下载 VOID-x.x.x.zip 这个压缩包，而不是 Source code
2. 解压
3. 将主题文件夹下的 VOID 文件夹上传至站点 /usr/themes 目录下
4. 后台启用主题
5. 将配套插件文件夹下的 VOID 文件夹上传至站点 /usr/plugins 目录下
6. 后台启用插件

• 可选：将主题 assets 文件夹下的 VOIDCacheRule.js 复制一份到站点根目录，并在主题设置中启用 Service Worker 缓存。
• 可选：主题文件夹下 advanceSetting.sample.json 中有一些高级设置，可以看看。

开发版主题可以在这里获取：开发版。注意，不保证开发版有更新更多的功能。而且开发版变动频繁，若无必要请使用发布版主题。

常见问题（请务必仔细阅读）

如何开启文章点赞？

文章点赞功能依赖配套插件，请上传至插件目录并启用。插件一般会随主题包发布，开发版主题请前往 https://github.com/AlanDecode/VOID-Plugin 获取。

如何开启文章浏览量统计？

文章浏览量统计功能依赖配套插件，请上传至插件目录并启用。插件一般会随主题包发布，开发版主题请前往 https://github.com/AlanDecode/VOID-Plugin 获取。

如何开启文章字数统计？

文章字数统计功能依赖配套插件，请上传至插件目录并启用。插件一般会随主题包发布，开发版主题请前往 https://github.com/AlanDecode/VOID-Plugin 获取。

下载安装后样式不对？

仓库中的是未压缩的源代码，包含大量实际使用中不需要的文件，并且可能无法直接使用。请一定通过这两个链接下载主题：发布版 | 开发版。注意其中发布版是下载 VOID-x.x.x.zip 这个压缩包，而不是 Source code。

添加归档页面

新建独立页面，自定义模板选择 Archives，内容留空。

添加友情链接

新建独立页面，然后如此书写：

[links]
[熊猫小A](https://www.imalan.cn)+(https://secure.gravatar.com/avatar/1741a6eef5c824899e347e4afcbaa75d?s=200&r=G&d=)
[熊猫小A的博客](https://blog.imalan.cn)+(https://secure.gravatar.com/avatar/1741a6eef5c824899e347e4afcbaa75d?s=64&r=G&d=)
[/links]

文章中、独立页面中都可以通过该语法插入类似的展示块。在某些 Typecho 版本中 HTML 会被转义后输出，请使用 !!! 包裹以上代码，例如：

!!!
[links]
···
[/links]
!!!

!!! 需要单独占一行。

图片排版

在文章中，使用 [photos][/photos] 包起来的图片可显示在同一行。例如：

[photos]
![](https://cdn.imalan.cn/img/post/2018-10-26/IMG_0073.jpeg)
![](https://cdn.imalan.cn/img/post/2018-10-26/IMG_0053.jpeg)
[/photos]

[photos]
![](https://cdn.imalan.cn/img/post/2018-10-26/IMG_0039.jpeg)
![](https://cdn.imalan.cn/img/post/2018-10-26/IMG_0051.jpeg)
![](https://cdn.imalan.cn/img/post/2018-10-26/IMG_0005.jpeg)
[/photos]

在某些 Typecho 版本中 HTML 会被转义后输出，请使用 !!! 包裹以上代码，例如：

!!!
[photos]
···
[/photos]
!!!

!!! 需要单独占一行。

增强的 Markdown 语法

• 注音语法：{{文本:zhu yin}}，会渲染为：文本 (zhu yin)
• notice 提示块：[notice]提示内容[/notice]

页面空白

• 首先检查是否有插件重复引入了 JQuery，若有，在插件设置页面关闭。
• 另外，推荐使用 PHP 7.0 及以上版本搭配 MySQL 数据库。PHP 5.6 或者更低版本可能出现未知问题（并且我不会去修复）。

更新

同开始使用，区别是你可以直接覆盖主题文件，不禁用主题，这样你的主题设置就不会丢失。

开发与自定义

首先注意：我不保证提供任何自定义修改相关的指导与帮助。You are on your own.

展开详情

如果你有不错的想法，可以定制自己的版本。首先你需要准备好 NodeJS 环境，然后 clone 这个 repo：

git clone https://github.com/AlanDecode/Typecho-Theme-VOID ./VOID && cd ./VOID

安装依赖：

npm install -g gulp
npm install

用以下命令打包依赖的 JS 和 CSS：

gulp dev

主题的样式是用 SCSS 写的，你可以使用自己喜欢的方式编译 SCSS，或者使用：

gulp sass

监听 SCSS 更改然后实时编译。尽请添加自己想要的功能，满意后就提交代码。然后：

gulp build

构建你的主题，生成的主题位于 ./build 目录下。如果你对自己的更改很满意，欢迎提出 Pull Request。

更新日志

🍰 2019-09-13 Version 3.3.0

该版本依赖 VOID 插件 1.10 及以上版本，请先禁用原插件，上传新插件后重新启用

• 新增：[配合插件]评论投票
• 新增：[配合插件]访客互动展示（后台 - 管理 - 互动）
• 新增：[配合插件]评论归属地展示（后台 - 管理 - 评论）
• 新增：[高级设置]代码块使用 Fira Code 字体，支持 ligature 特性
• 新增：后台更新提示
• 优化：图片懒加载。现在首页、友链均支持懒加载
• 优化：某些屏幕下排版效果
• 调整：代码高亮库更换为 Prism.js
• 调整：提示块样式
• 调整：现在关闭评论时可显示历史评论
• 修复：在一定宽度下照片集导致页面浮动
• 移除：RSS 原图保护
• 移除：前台评论管理
• 其他细节优化

注意，3.3.0 版本主题依赖 1.10 及以上版本插件，请先禁用原插件，上传新版插件后重新启用。

从 2.2 版本起，主题部分功能需要配套插件支持，例如文章点赞、浏览量统计、字数统计等。请先卸载原来的 Likes、TePostViews 插件，否则数据会出现错误！TePostViews 插件卸载前请设置为卸载后保留数据，以防丢失浏览数据。

更多：change-log.md

鸣谢

开源项目

JQuery | PrismJS | MathJax | fancyBox | bigfoot.js | OwO | pjax | yue.css | tocbot | pangu.js | social | Headroom.js | jquery.scrollTo | hypher

其他

RAW | Mirages | handsome | Card | Casper | Typlog

捐助

如果本项目对你有所帮助，请考虑捐助我

License

MIT © AlanDecode