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"
                }
            ]
        }
    ]
}