✏ 一款简洁优雅的 Typecho 主题
作为计算机术语时,VOID 的意思是「无类型」。了解原版 VOID 主题请查看《VOID:现在可以公开的情报》、特色演示《示例页面》以及原 GitHub 仓库 AlanDecode/Typecho-Theme-VOID。本主题结构、使用方式与原主题相同,可以 切换 nightly 分支下载仓库 作为主题使用。
本仓库二次开发起点为原仓库 Commit 4931ecb on Mar 18, 2020,主要针对一些 自用需求 ,请谨慎将本主题投入生产环境。我会及时同步原仓库重要 commit 。另外发布版本图一乐,请不要在意 Release 版本号。如果你使用了本主题且发现 Bug 请提出 issues 帮助改进,谢谢。
相比 AlanDecode 版本,我尝试 新增/调整 了以下功能:
历史更新动态 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
上一个版本的 OwO 表情全部存储于 GitHub 仓库使用 JsDelivr 加速,但是由于仓库同时存储其他文件体积过大 JsDelivr CDN 失效,所以此版本以后的 OwO 依旧存储于主题文件夹 assets/libs/owo/biaoqing 文件夹下。请检查以下文件中表情路径是否正确:
表情包名.container.icon
L227
L237
L247
L257
使用本地文件时,应该使用以下示例
# 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-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]
![](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]
!!!
!!!
需要单独占一行。
主题设置中启用 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。
注音语法:{{文本:zhu yin}}
,会渲染为:文本
注音语法的增强 Markdown 写法已经移除,但 HTML 写法依旧可用
notice 提示块:[notice]提示内容[/notice]
This Is A Fork From AlanDecode/Typecho-Theme-VOID But Show My Contributions.
指引:安装 NodeJS 环境 > clone repo > 安装依赖 > 打包依赖的 JavaScript & CSS > 你构建的主题。以下是我的一些未必有用的提示:
rm -rf node-modules package-lock.json
后再安装依赖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 build
jquery | 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
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。