✏ 一款简洁优雅的 Typecho 主题
作为计算机术语时，VOID 的意思是「无类型」。了解原版 VOID 主题请查看《VOID：现在可以公开的情报》、原 GitHub 仓库 AlanDecode/Typecho-Theme-VOID。本主题结构、使用方式与原主题相同，可以 切换 nightly 分支下载仓库 作为主题使用。
本仓库二次开发起点为原仓库 Commit 4931ecb on Mar 18, 2020，主要针对一些 自用需求 ，请谨慎将本主题投入生产环境。我会及时同步原仓库重要 commit 。另外发布版本图一乐，请不要在意 Release 版本号。如果你使用了本主题且发现 Bug 请提出 issues 帮助改进，谢谢。
原始特性
- 响应式设计
- PJAX 无刷新体验
- AJAX 评论
- 前台无跳转登陆（兼容 PJAX）
- 自动夜间模式
- 优秀的可读性
- 衬线、非衬线两种文字风格
- 代码高亮（浅色暗色两种风格，随主题切换）
- Mac 风格代码块（可开启或关闭）
- 代码行号
- 站点样式设置面板（日夜转换、字体、字号）
- MathJax 公式
- 表情解析（文章、评论可用）
- 图片排版（可用作相册）
- 图片懒加载
- 灵活的头图设置
- 文章目录解析
- 完整的结构化数据支持
- 够用的后台设置与丰富的高级设置
插件功能
- 浏览量统计
- 文章点赞
- 文章字数统计
- 评论投票与自动折叠
- 访客互动展示
相比 AlanDecode 版本，我尝试 新增/调整 了以下功能：
- 新增：MermaidJS v8.5.0 支持，丰富的图表写作体验
- 新增：Artalk v1.0.6 支持，简洁的自托管评论系统
- 新增：InstantPage v3.0 支持，据说用它体验更佳
- 新增：Progressive Web Apps 支持，现在可以更方便的启用 PWA
- 新增：GitHub & QQ 账号快速评论，参考 Krait 博文 实现更方便的评论
- 新增：静态资源单独 CDN 配置，将静态文件上传至 CDN 分离加速
- 新增：主题设置数据备份，参考 QQdie 博文 实现高级设置再也不用反复设置辣
- 新增：网页 HTML 压缩，一个默认不开启的可有可无的功能
- 新增：独立页面模板，方便起见还是写点独立页面模板放着吧
- 新增：OwO 表情扩展，除了蛆音娘还有一些 QQ 表情
- 调整：Console 统一样式输出版权，写的不是很优雅但
求求你们不要在我的控制台拉五颜六色的屎了 - 调整：MathJax 升级，v3.x 版本重构暂时无法兼容只升级至最新 v2.7.8
- 调整：友情链接解析格式，还是加上链接描述比较舒服
- 调整：文章目录，即使设置了目录也默认不展开目录
- 调整：社交分享图标，现在赞赏和社交图标在文章末尾两边站
- 调整：返回顶部按钮，现在小屏幕也可以一键到达顶部
- 调整：一言，弃用功能重新回归
- 调整：Pjax，修复了子评论错误显示为上一条评论和博主标志显示的问题
- 调整：样式，主题色彩、非单栏首页 banner 固定为满屏、单栏首页新样式、首页回归圆角卡片、友情链接和追番卡片圆角、夜间样式、部分字体灰度显示等
- 插件：集成 PandaBangumi 和 ExSearch 功能
- 修复：时间轴显示未发布文章 commit fb8b7e6
历史更新动态 change-log.md
下载安装后样式不对？
仓库中的是未压缩的源代码，包含大量实际使用中不需要的文件，并且可能无法直接使用。请一定通过这两个链接下载主题：发布版 | 开发版。注意其中发布版是下载 VOID-x.x.x.zip 这个压缩包，而不是 Source code，发布版压缩包中包含了当前最新的主题文件和插件文件。
如果不是上面的问题，请检查你的 CDN 地址配置结尾是否含 / 如果含有请删去。
如果不介意 Bug 可以直接从命令行安装主题：
cd /path/to/wwwroot/usr/themes
git clone https://github.com/monsterxcn/Typecho-Theme-VOID.git -b nightly ./VOID
# 如使用国内服务器拉取代码太慢可使用码云仓库极速克隆
# git clone https://gitee.com/monsterxcn/Typecho-Theme-VOID.git -b nightly ./VOID
chmod -R 777 VOID/*
# 后续小版本更新主题可以直接运行：
cd /path/to/wwwroot/usr/themes/VOID
# 拉取失败可尝试撤销所有本地修改
# git reset --hard HEAD
git pull origin nightly为什么页面空白？
- 首先检查是否有插件重复引入了 JQuery，若有，在插件设置页面关闭。
- 另外，推荐使用 PHP 7.0 及以上版本搭配 MySQL 数据库。PHP 5.6 或者更低版本以及其它数据库可能出现未知问题（并且我不会去修复）。
为什么表情包 404？
上一个版本的 OwO 表情全部存储于 GitHub 仓库使用 JsDelivr 加速，但是由于仓库同时存储其他文件体积过大 JsDelivr CDN 失效，所以此版本以后的 OwO 依旧存储于主题文件夹 assets/libs/owo/biaoqing 文件夹下。请检查以下文件中表情路径是否正确：
- assets\libs\owo\owo.json
表情包名.container.icon - libs\Contents.php
L227L237L247L257
使用本地文件时，应该使用以下示例
# assets\libs\owo\owo.json
{
"泡泡": {
"type": "image",
"container": [
{
"icon": "<img class=\"biaoqing\" data-src=\"/usr/themes/VOID/assets/libs/owo/biaoqing/paopao/E591B5E591B5_2x.png\">",
"data": "::(呵呵)",
"text": "呵呵"
}
]
}
}
# libs\Contents.php
/**
* 阿鲁表情回调函数
*
* @return string
*/
private static function parseAruBiaoqingCallback($match)
{
return '<img class="biaoqing" src="/usr/themes/VOID/assets/libs/owo/biaoqing/aru/'. str_replace('%', '', urlencode($match[1])) . '_2x.png">';
}
默认的静态资源 CDN 设置对 OwO 表情无法生效，需要 自行修改 这两个文件进行。如果你不明白怎么修改请忽略。另外主题 biaoqing 文件夹中还包含很多主题未启用的表情包，喜欢折腾可以自行搭配自己喜欢的表情包组。
如何开启即时搜索？
即时搜索功能依赖配套插件，请上传插件并启用。注意第一次保存插件设置后按照提示重建索引。前往 https://github.com/monsterxcn/Typecho-Plugin-VOID 获取插件。
如何开启追番展示？
追番展示功能依赖配套插件，请上传插件并启用。注意按照插件提示填写 Bangumi 用户 ID 并选择解析方式。前往 https://github.com/monsterxcn/Typecho-Plugin-VOID 获取插件。
如何开启 Artalk 评论？
Artalk 是一款简洁有趣的可拓展自托管评论系统，需要配合 Artalk 的后端程序（如 Artalk-API-PHP ）使用，请在开启评论前搭建好自己的后端程序。
新建文章或页面，在自定义字段中填入 artalk 和你的 Artalk 后端 /public 文件夹可访问地址即可开启 Artalk 评论，快来尝试这款有趣的评论系统吧。
友情链接排版
新建独立页面，然后如此书写：
[links]
[(熊猫小 A )+(熊猫小 A 的博客)](https://www.imalan.cn)+(https://secure.gravatar.com/avatar/1741a6eef5c824899e347e4afcbaa75d?s=200&r=G&d=)
[(名称)+(描述)](链接)+(图标)
[/links]
文章中、独立页面中都可以通过该语法插入类似的展示块。在某些 Typecho 版本中 HTML 会被转义后输出，请使用 !!! 包裹以上代码，例如：
!!!
[links]
···
[/links]
!!!
!!! 需要单独占一行。
图集排版
在文章中，使用 [photos][/photos] 包起来的图片可显示在同一行。例如：
[photos]
[/photos]
[photos]
[/photos]
在某些 Typecho 版本中 HTML 会被转义后输出，请使用 !!! 包裹以上代码，例如：
!!!
[photos]
···
[/photos]
!!!
!!! 需要单独占一行。
Mermaid 图表排版
主题设置中启用 MermaidJS 后在文章中，使用 [mermaid][/mermaid] 包起来的代码可显示为相应图表。例如：
[mermaid]
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
[/mermaid]
[mermaid]
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
[/mermaid]
在某些 Typecho 版本中 HTML 会被转义后输出，请使用 !!! 包裹以上代码，例如：
!!!
[mermaid]
···
[/mermaid]
!!!
!!! 需要单独占一行。
MermaidJS 按照页面从上向下的顺序依次渲染图表，请务必保证前面的 Mermaid 图表语法格式正确，否则后面的图表无法显示。此外，使用实验性 Mermaid 图表（比如 Git 图）可能导致渲染异常，这不是主题的问题，请检查你的图表语法和 MermaidJS 版本是否兼容。本主题使用的 MermaidJS 为 8.5.0 版本，包含了 Class diagram，Git graph，Entity Relationship Diagram 等图表的实验性兼容。更多关于 MermaidJS 的问题请先参考 官方文档 检查，然后欢迎提出 issue 帮助主题更好的兼容 MermaidJS。
其他增强的 Markdown 语法
-
注音语法：
{{文本:zhu yin}}，会渲染为：文本注音语法的增强 Markdown 写法已经移除，但 HTML 写法依旧可用
-
notice 提示块：
[notice]提示内容[/notice]
You are on your own.
This Is A Fork From AlanDecode/Typecho-Theme-VOID But Show My Contributions.
指引：安装 NodeJS 环境 > clone repo > 安装依赖 > 打包依赖的 JavaScript & CSS > 你构建的主题。以下是我的一些未必有用的提示：
- 关于安装 node-sass 出错请参考《 安装 node-sass 的正确姿势 - Issue #28 - lmk123/blog 》
- 如果需要你可以尝试将 nodejs 升级至 latest 版本
- 如果需要你可以尝试在主题仓库根目录下执行
rm -rf node-modules package-lock.json后再安装依赖 - 如果你对自己的更改很满意或者有很妙的修改想法，欢迎提出 Pull Request 或 Issues
git clone https://github.com/monsterxcn/Typecho-Theme-VOID ./VOID && cd ./VOID
# 安装依赖
npm install -g gulp
npm install
# 打包依赖的 JS 和 CSS
gulp dev
# 构建主题，生成的主题位于 ./build 目录下
gulp build
# 主题的样式是用 SCSS 写的
# 使用喜欢的方式编译 SCSS，或者使用这个
gulp sass
# 监听 SCSS 更改然后实时编译。
# 尽请添加自己想要的功能，满意后就提交代码。然后：
gulp buildjquery | prism | MathJax-src | fancybox | bigfoot | OwO | jquery-pjax | yue.css | tocbot | pangu.js | social | headroom.js | hypher | Artalk | mermaid
RAW | Mirages | Handsome | Card | Casper | Typlog
如果本项目对你有所帮助，请考虑捐助 AlanDecode
MIT © AlanDecode
GLWT © monsterxcn