起因

在某一网站上看到有评论提到了Hexo, 遂谷歌之, 之后就发现了这个. 从零开始学习一款软件确实不容易, 故记录一下. 在此之前没有学过YAML, pug 等, 只认识一点点YAML. 会一些HTML但是Hexo用不上.

遇到的问题

文件生成内容不一致

在使用Github Actions 自动化部署网站, 自动化的没有问题, 但是本地出了问题了, md文件中的图片渲染出来两个地方路径不一致:
两边内容的对比
两边使用相同的nodejs版本, 在本地同样重头开始init博客, install renderer 和 安装插件, 还是没能消除这个问题, 唯一不同的而且有影响的大概就是操作系统了, 一边是Windows, 一边是 Ubuntu.
最后打开node_modules文件夹找到node_modules\hexo-renderer-marked\lib\renderer.js 顺着代码往下找终于找到问题所在了:
定位到问题代码
node_modules\hexo-util\lib\url_for.js中, 从config中解构了一个root对象,但配置文件里没有root这一项, 大约是后期处理的时候加入的. 就在第40行(图中39行系误写)中md文件中的路径发生变化.
故解决办法是在node_modules\hexo-renderer-marked\lib\renderer.js中将href = url_for.call(hexo, href);注释掉.不在url_for.js中修改是因为该模块有其它代码引用, 修改后可能引起其它问题.

反转了, 发现需要配置一下才能用url_for

配置文件

博客配置文件

位置

Hexo_Root/_config.yml

配置项目

Site

这里配置博客网站的标题,详细描写,关键词,作者名字,时区等。
keywords和description会出现在网页的meta标签中。

URL

这里配置网站的网址,permalink是生成网页的路径,默认以年/月/日/标题.md

Directory

这里配置各个资源文件夹的路径

Writing

基本上不用改, 也可按需求定制.

Home page setting

这里在上线之后需要配置path, 如果博客不在根目录的话.

Extension

theme标签设置主题

主题配置文件

位置

Hexo_Root/themes/主题名/_config.yml
可以将配置文件复制到Hexo_Root并更名为_config.主题名.yml. 好处在于更新主题时不会覆盖掉已经配置好的文件.

配置项目

配置顶层导航栏, 并可以配置二级导航栏.

subtitle

这里是配置主页title下的小字, 可以开启打字效果

Code Blocks

配置代码的样式.

social settings

配置在作者栏Widget底部的联系方式

Math

数学… 可以加载LaTeX公式

Image

配置网站图标, 头像, 各个地方的banner图, 是否显示文章封面以及位置等等,

post meta

配置缩略显示的文章的标签显示与否.

toc

侧边栏Widget中的目录的样式.

post_copyright

文章结尾部分的版权声明

reward

打赏! 可配置链接和二维码图片.

post_edit

可以在线修改文章?, nice啊.

related_post

相关文章.

comments

评论系统, 外挂一个第三方的评论.

index_top_img_height

这里设置主页的图片高度, 如果觉得全屏有点大的话.

canvas_xxxx

动态背景效果配置

aside

这是侧边Widget的配置

card_author

作者信息

card_announcement

公告信息

medium 是白底, fancybox是黑底

字数统计

npm install hexo-wordcount --save

其它插件

视频播放器

hexo-tag-dplayer

项目地址

hexo-tag-dplayer

安装

npm install hexo-tag-dplayer --save

使用

{% dplayer key=value ... %}
key can be

dplayer options:
    'autoplay', 'loop', 'screenshot', 'hotkey', 'mutex', 'dmunlimited' : bool options, use "yes" "y" "true" "1" "on" or just without value to enable
    'preload', 'theme', 'lang', 'logo', 'url', 'pic', 'thumbnails', 'vidtype', 'suburl', 'subtype', 'subbottom', 'subcolor', 'subcolor', 'id', 'api', 'token', 'addition', 'dmuser' : string arguments
    'volume', 'maximum' : number arguments
container options:
    'width', 'height' : string, used in container element style
other:
    'code' : value of this key will be append to script tag

arguments to DPlayer options mapping:

{
    container: "you needn't set this",
    autoplay: 'autoplay',
    theme: 'theme',
    loop: 'loop',
    lang: 'lang',
    screenshot: 'screenshot',
    hotkey: 'hotkey',
    preload: 'preload',
    logo: 'logo',
    volume: 'volume',
    mutex: 'mutex',
    video: {
        url: 'url',
        pic: 'pic',
        thumbnails: 'thumbnails',
        type: 'vidtype',
    },
    subtitle: {
        url: 'suburl',
        type: 'subtype',
        fontSize: 'subsize',
        bottom: 'subbottom',
        color: 'subcolor',
    },
    danmaku: {
        id: 'id',
        api: 'api',
        token: 'token',
        maximum: 'maximum',
        addition: ['addition'],
        user: 'dmuser',
        unlimited: 'dmunlimited',
    },
    icons: 'icons',
    contextmenu: 'menu',
}

Customization

You can modify variables scriptDir(default: “/assets/js/” ) and styleDir(default: “/assets/css/”) in index.js according to your blog’s directory structure.

or just use _config.yml configuration:

# on _config.yml of hexo-site
hexo-tag-dplayer:
  js_path: /path/to/your/default/path
  css_path: /sth
  default: #default tag argument 
    id: somedefid # equals to setting id=somedefid in all {%dplayer%} tags
    api: https://api.prprpr.me/dplayer/
    #and other options...

themes\butterfly\source\css\index.styl文件中, 按照Material Design更改了文字和背景的颜色, 增加了一些组件的透明度, 使画面更加和谐自然.

Q.E.D.


工作中, 欢迎打扰