Kratos-Rebirth食用说明

是时候写一个文档了!(被打死
如果有什么遗漏的地方欢迎随时向我提出!可以用留言的方式(但有时候邮箱会收不到邮件,比较怨念),或者去Github提一个Issue~
文档会尽可能在两边都保持更新,所以只要我没忘记的话应该是没什么大问题哒(光速逃跑)


环境需求

为了获得更佳的使用体验,建议安装的插件有:

  • hexo-generator-index-pin-top
  • hexo-generator-feed

主题配置

配置文件地址:./kratos-rebirth/_config.yml

- Global 全局配置

  • site_analytics: 站点统计代码,这一行代码会被插入到页脚(./kratos-rebirth/layout/_partial/footer.ejs, 第74行)以提供站点统计数据。如果没有使用相关的代码,可以留空,有需要的话也可以自行修改。

  • hoster: 网站托管服务提供者,这个是出于感恩性的可选添加内容,这一个链接会被插入到页脚(./kratos-rebirth/layout/_partial/footer.ejs, 第52行)

  • site_logo: 网站的LOGO图片文件,请注意与后面核心JS的设置保持一致

  • snow: (true/false)站点下雪特效开关,控制是否在页脚(没错又是我第61~66行)载入下雪相关的代码

- Top Menu 顶部导航栏相关

  • 分为menulabel两个模块,控制页首(./kratos-rebirth/layout/_partial/head.ejs, 第40~55行)的顶部导航栏内容。
    menu模块提供导航到的页面位置,label模块提供导航选项卡的显示内容。
    请注意menu项与label项需要一一对应,否则可能会出现无法正常显示的情况。
    配置样例随主题附带,可以参考使用。

  • 现已加入二级菜单支持,配置格式为:

1
2
3
4
5
6
7
8
9
10
11
12
13
menu:
二级菜单:
submenu: true
菜单项1: 地址1
菜单项2: 地址2
...

label:
二级菜单:
submenu: 菜单显示内容
菜单项1: 菜单项1显示内容
菜单项2: 菜单项2显示内容
...

请注意关键词submenu不可被改变,其他内容在保证一一对应的情况下可以自定义。
具体可以参照主题自带的样例配置。

额外提示:二级菜单功能可能会和旧版本的部分函数发生冲突,如果出现意外报错的话可以考虑检查一下是否存在更新的Hexo版本,或者去Github提一个Issue
此处附上目前开发使用的环境(package.json文件):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"scripts": {
"build": "hexo generate",
"clean": "hexo clean",
"deploy": "hexo deploy",
"server": "hexo server"
},
"hexo": {
"version": "4.2.0"
},
"dependencies": {
"hexo": "^4.2.0",
"hexo-generator-archive": "^1.0.0",
"hexo-generator-category": "^1.0.0",
"hexo-generator-feed": "^2.2.0",
"hexo-generator-index": "^1.0.0",
"hexo-generator-index-pin-top": "^0.2.2",
"hexo-generator-sitemap": "^2.0.0",
"hexo-generator-tag": "^1.0.0",
"hexo-renderer-ejs": "^1.0.0",
"hexo-renderer-marked": "^2.0.0",
"hexo-renderer-stylus": "^1.1.0",
"hexo-server": "^1.0.0"
}
}
  • qqg_link: 控制是否在页脚(./kratos-rebirth/layout/_partial/footer.ejs, 第23~31行)显示QQ群的加入按钮。如果显示的话,这里可以指定加群的链接。无需显示的话请留空(而不是删除这个设置项),相关的代码会自行处理结构生成关系。

  • contact: 联系方式相关,控制是否在页脚(./kratos-rebirth/layout/_partial/footer.ejs, 第42~48行)显示各种联系方式的按钮
    如果要启用的话,请输入相关联系方式的代码(邮箱请使用mailto:[email protected]这样的格式);无需显示的内容请留空。

- Post Page 文章页面相关

  • show_cc: (true/false)控制文章页面(./kratos-rebirth/layout/post.ejs, 第19~23行)是否显示CreativeCommon知识共享协议相关的提示内容w

  • donate: (true/false)控制文章页面(第27~29行)是否显示捐助的二维码按钮,二维码链接可以在站点的JS里进行修改(详见下文)

  • share: (true/false)控制文章页面(第30~33行)是否显示分享链接的按钮

  • comments: (disqus/disqusjs/false)是想要使用原生的disqus呢,还是试着配置一下disqusjs来提升使用体验呢?如果不想开启评论的话,那就还是设置为false吧~

- Disqus 评论相关

- DisqusJS 评论相关

这里使用了DisqusJS这个项目,具体的参数配置相关的可以参考原始文档,这里提供的说明仅供参考w

- APlayer 音乐播放器相关(页面左下角)

  • enabled: (true/false)用音乐来点缀全新的体验吧!这里可以选择是否开启aplayer播放器哦~

  • playlist: APlayer播放使用的歌单地址,可以使用公开的API服务,或是搭建自己使用的后端。
    我提供了一个后端API的样例,目前本站点使用的就是这个,可以去Github获取。

  • order: (list/random)音乐播放的顺序,我个人比较喜欢的是random模式,这样就能避免每次访问博客时,都是从第一首音乐开始播放的尴尬清情况。

- Widgets 侧边栏与挂件

  • sidebar: (left/right/none)是否启用侧边栏与小工具
    若设置为left则会显示在页首2(./kratos-rebirth/layout/_partial/header.ejs, 第13~21行)
    若设置为right则会显示在页脚(./kratos-rebirth/layout/_partial/footer.ejs, 第1~9行)

  • widgets: 启用的小部件,默认全部启用,不喜欢的就删掉吧w

  • avataUri: 头像的图片地址链接,例如我用的是gravatar的API

- Code Highlight Themes 代码高亮主题

  • highlight_theme: 主题,五选一(normal | night | night eighties | night blue | night bright),控制代码高亮时候使用的配色

主JavaScript配置

配置文件地址:./kratos-rebirth/source/js/kratosr.js

已经将所有的配置项集中到文件顶端,方便修改

  • kr.thome 站点根目录,由于这里的JS并没有连接到站点配置用的yml文件,因此此处的站点根目录请手动输入。例如站点放置在example.com/dir/下的话,此项的内容就应填写为/dir/。如果直接放置在根目录下,请留/

  • kr.ctime 站点的创建时间。该项与页脚的运行时间有直接关联,建议按照样例格式进行书写,以免出现莫名其妙的报错。

  • kr.donate 捐助按钮上显示的文字,建议不要太长以免溢出,如果不显示捐助按钮的话就不用去管它啦~

  • kr.scan 二维码小窗口上的小标题,如果不显示捐助按钮的话也不用去管它啦~

  • kr.alipay 支付宝二维码的文件地址

  • kr.wechat 微信支付二维码的文件地址

  • kr.copy_notify 一个比较恶意的复制提示,不点确认的话会卡住复制操作,内容暂时不会被放入剪贴板

  • kr.copy_notify_text 复制提示的文本

  • kr.site_logo 站点的Logo文件地址,请注意与上文主配置项的内容保持一致

  • kr.enable_site_leave_event 是否启用站点失焦事件(只是为了卖萌,有可能会影响到历史记录,请谨慎开启)

  • kr.site_logo_leave 离开时候的站点图标文件

  • kr.site_title_leave 离开时候站点标题的追加内容

  • kr.site_title_return 返回时候站点标题的追加内容


文章页面

配置路径:顶部,文章信息区 (Front-Matter)

  • pic: 可以指定这篇文章是否使用自定义的缩略图名称(在文章资源文件夹内),而不是使用随机化的图标

  • top: (true/false)重要的文章,把它们置顶吧!会在首页优先显示哦~
    补充:请记得安装hexo-generator-index-pin-top插件,否则分页时可能会出现分页置顶的情况。

  • edit: 写完之后又改了改?没问题,把时间告诉我吧!会在文章右下角有显示w


模板与特定页面

参见项目Kratos-Rebirth-Specified-Pages


关于Hexo书写的小技巧

Hexo使用了MarkDown,但是在一些细节的处理上有很棒的技巧哦~

  1. 文章概要
    可以将文章开头的一段作为概要显示在首页主题部分,方法就是在需要分割的地方加入<!-- more -->即可w

  2. 图片资源
    Hexo有为每篇文章生成一个资源文件夹,可以将图片资源以{% asset_img 文件名 备注 %}的格式插入文章