VOID-方方正正的Typecho极简主题

VOID主题的一些基本设置

特性

介绍文章：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

添加归档页面

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

添加友情链接

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

<div class="board-list link-list"><a target="_blank" href="https://www.imalan.cn" class="board-item link-item"><div class="board-thumb" data-thumb="https://secure.gravatar.com/avatar/1741a6eef5c824899e347e4afcbaa75d?s=200&r=G&d="></div><div class="board-title">熊猫小A</div></a><a target="_blank" href="https://blog.imalan.cn" class="board-item link-item"><div class="board-thumb" data-thumb="https://secure.gravatar.com/avatar/1741a6eef5c824899e347e4afcbaa75d?s=64&r=G&d="></div><div class="board-title">熊猫小A的博客</div></a></div>

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

!!!
<div class="board-list link-list">···</div>
!!!

!!! 需要单独占一行。

图片排版

在文章中，使用 [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 提示块：

  提示内容

页面空白

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

更新

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

某些版本由于改用幅度较大需要重启主题与插件，请参见对应版本的发布日志。

高级设置

// 这是一份高级配置示例文件
// 你可以挑选其中某些设置，填写到主题后台「超高级」设置框中

// 填写的内容必须符合 JSON 格式，因此你必须 去掉 以 // 打头的所有注释！！！

{
    // 自定义左上角显示的站点名
    "name" : "A Panda.",

    // 为站点标题设置自定义字体，
    "brandFont": {
        "src": " ",  //填写字体文件链接，例如 "https://my.com/font.ttf"
        "style": "normal",  // 字体样式，例如 normal, italic...
        "weight": "normal"  // 字重，例如 normal, bold, 300, 400...
    },

    // 桌面端头图高度，数值为高度占屏幕高度的百分比
    "desktopBannerHeight" : 30,

    // 移动端头图高度，数值为高度占屏幕高度的百分比
    "mobileBannerHeight" : 30,

    // 导航栏模式，随滚动显隐(0)，固定(1)，不固定(2)
    "headerMode": 1,

    // 移动端导航栏模式，同上。不设置时默认与 headerMode 一致
    "headerModeMobile": 0,

    // 文章字号。当用户在前端自己设置后，该选项会被覆盖。默认为 18px。
    // 1: 14px, 2: 16px, 3: 18px, 4: 20px, 5: 22px
    "defaultFontSize": 3,

    // 对代码启用 Fira Code 字体。Fira Code 字体有漂亮的 ligature 特性
    // 由 Google Fonts 提供支持，可能延长页面加载时间
    "useFiraCodeFont": false,

    // 在图片下方显示图题
    "parseFigcaption": true,

    // 社交 ID，用于生成分享链接
    "twitterId": "AlanDecode",
    "weiboId" : "古早日剧成瘾患者",

    // 评论折叠阈值
    // 例如设置为 [5, 1.5] 表示点踩者大于 5 人，且点踩者达到点赞者 1.5 倍时折叠评论
    "commentFoldThreshold": [5, 1.5],

    "commentNotification": "请不要水评论",

    // 夜间模式时间段
    "darkModeTime" : {
        "start": 22.5,  // 晚 22 点 30 分开始
        "end": 7.0      // 直到早 6 点 59 分
    },

    // 当操作系统为深色主题时主题颜色自动切换，仅在 macOS 10.14.4 及以上版本的 Safari 中可用
    "followSystemColorScheme" : true, 

    // 大图集
    "largePhotoSet": true,

    // 模糊懒加载。通过提供小缩略图，以实现渐变加载效果。目前支持又拍云与七牛云 CDN。
    // 其中又拍云请把图片处理间隔符设置为 !
    "bluredLazyload": false,
    "CDNType": {
        "static.imalan.cn": "UPYUN" // UPYUN, QINIU
    },

    // Mac 风格代码块
    "macStyleCodeBlock": true,

    // 代码块行号支持
    "lineNumbers": true,

    // 自定义添加社交链接
    "link" : [
        {
            "name": "GitHub",
            "icon": "github",
            "href": "https:\/\/github.com\/AlanDecode",
            "target": "_blank"
        },
        {
            "name": "微博",
            "icon": "weibo",
            "href": "https:\/\/weibo.com\/5245109677",
            "target": "_blank"
        },
        {
            "name": "Twitter",
            "icon": "twitter",
            "href": "https://twitter.com/AlanDecode",
            "target": "_blank"
        },
        {
            "name": "QQ",
            "icon": "qq",
            "href": "https://shang.qq.com/wpa/qunwpa?idkey=4ed2406c1d84b70c319c8ee79752d1704702b770aa0da405ca0f274e4d4db5f8",
            "target": "_blank"
        }
    ],

    // 自定义添加导航栏下拉列表
    "nav" : [
        {
            "name" : "捉迷藏",
            "items" : [
                {
                    "link" : "http:\/\/t.me\/imalanblog",
                    "title" : "Telegram 群",
                    "target" : "_self"
                },
                {
                    "link" : "https:\/\/shang.qq.com\/wpa\/qunwpa?idkey=4ed2406c1d84b70c319c8ee79752d1704702b770aa0da405ca0f274e4d4db5f8",
                    "title" : "QQ 群组",
                    "target" : "_blank"
                },
                {
                    "link" : "https:\/\/weibo.com\/5245109677",
                    "title" : "新浪微博"
                }, 
                {
                    "link" : "https:\/\/twitter.com\/AlanDecode",
                    "title" : "Twitter"
                },
                {
                    "link" : "https:\/\/github.com\/AlanDecode",
                    "title" : "GitHub"
                }
            ]
        },
        {
            "name" : "秘密花园",
            "items" : [
                {
                    "link" : "https:\/\/www.imalan.cn",
                    "title" : "引导页"
                },
                {
                    "link" : "https:\/\/api.imalan.cn",
                    "title" : "熊猫 API"
                }
            ]
        }
    ]
}