起因
在某一网站上看到有评论提到了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. 好处在于更新主题时不会覆盖掉已经配置好的文件.
配置项目
menu
配置顶层导航栏, 并可以配置二级导航栏.
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
公告信息
Lightbox (圖片大圖查看模式)
medium 是白底, fancybox是黑底
字数统计
npm install hexo-wordcount --save
其它插件
视频播放器
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更改了文字和背景的颜色, 增加了一些组件的透明度, 使画面更加和谐自然.
评论区