部署博客那些事
为了把班里的截图导到网站上,就用gitee搞个非公开的博客,用的hexo。
在一开始没啥问题,但是在部署的时候遇到 ERROR Deployer not found: git 的错误
经过调查之后 才知道 需要运行下这个指令才行
npm install hexo-deployer-git --save
然后就可以部署了
1 |
|
访问但无法加载css文件
再次研究,发现
1 |
|
root: /
后面应该加上grade2019class22/
即:root: /grade2019class22/
修改后,恢复正常。
访问但是无法加载文章图片
这里我不怎么想改了,F12查看图片获取路径为
https://drluo.gitee.io/images/cover/Dailysummary.png
这波我直接选择在图片路径前加上/grade2019class22
顺便把所用theme的_config.yml
中的favicon
也改为了
favicon: /grade2019class22/favicon.ico
获取dplayer插件
1 |
|
取waterfall插件
1 |
|
flex-block主题相关设置
变动
关于 waterfall 标签,在更新主题后,会导致以前的视频不能正常播放,需要进行如下修改:
1 |
|
可自定义的相关页面
目前可以扩展的页面菜单有:
type | value | name |
---|---|---|
categories | /categories | 分类 |
tags | /tags | 标签 |
links | /links | 友链 |
messages | /messages | 留言板 |
如何添加:
🌰 添加友链页面
1 |
|
找到新建的页面并修改Front-matter
,添加如下内容
1 |
|
修改_config.yml
配置菜单,找到menu
选项添加如下内容
1 |
|
添加其他自定义页面,如关于
页面
1 |
|
Front-matter
相关
除开以有的字段,目前有效的相关属性
key | layout | desc |
---|---|---|
subtitle | post,page,draft | 小标题,文章或页面的小标题,文章缺省值为文章的发布时间 |
categories | post,draft | 分类,文章的分类 |
cover | post,page,draft | 封面,文章或页面的封面,banner图 |
type | page | 页面类型,取值详见可自定义的相关页面 |
建议复制以下代码替换scaffolds/
下默认的模版
post.md,draft.md
1 |
|
page.md
1 |
|
自定义数据
友链数据
在目录的source/_data
下新建一个links.yml
一行一条数据,格式如下:
1 |
|
SEO优化相关
查找并修改Hexo
下的_config.yml
1 |
|
配置项:
代码高亮
hexo默认提供了highlightjs代码高亮,如何开启?
查找并修改Hexo
下的_config.yml
1 |
|
其中enable
为开启代码高亮,hljs
设置为hljs为class,theme
为highlight代码高亮主题,不设置默认为default
具体的主题可以在https://highlightjs.org/查看
长标题
进入flex-block
配置文件_config.yml
找到large_legnth
1 |
|
long: 作用于文章
和友链
卡片
short: 作用于分类
和标签
卡片
设置Card封面的大小,如 long: 20
表示如果文章标题长度大于20,文章卡片显示为长文章
如果启用了友链,则会判断友链名称
和友链描述
两个字段长度
aplayer
进入flex-block
配置文件_config.yml
找到aplayer
aplayer
歌词模式默认使用第三种(文件格式)
1 |
|
dplayer
进入flex-block
配置文件_config.yml
找到dplayer
1 |
|
zoom 图片预览
进入flex-block
配置文件_config.yml
找到zoom
1 |
|
详情查看https://github.com/miiiku/zoom
waterfall 瀑布流
进入flex-block
配置文件_config.yml
找到waterfall
1 |
|
如果要进行详细的配置,请找到并编辑layout/plug-in/waterfall.ejs
详情查看https://github.com/miiiku/waterfall
Valine评论
进入flex-block
配置文件_config.yml
找到valine
1 |
|
如果想给某一页面/文章取消评论,在md
文件的front-matter
中增加comments: false
详情查看https://valine.js.org/configuration.html
disqus评论
进入flex-block
配置文件_config.yml
找到disqus
1 |
|
一言(当前版本好像弃用了)
进入flex-block
配置文件_config.yml
找到hitokoto
1 |
|
内建标签
插入音频 aplayer
更多参数可参考https://aplayer.js.org/#/home?id=options中audio
的属性
1 |
|
注意: 需要开启aplayer
插件才能正常使用本内置标签
插入视频 dplayer
1 |
|
注意: 需要开启dplayer
插件才能正常使用本内置标签
插入瀑布流 waterfall
如需要修改大小 添加参数size="max"
1 |
|
更多参数可参考https://github.com/miiiku/waterfall#options 原参数的驼峰命名
改为横线连接
🌰: 如设置布局为水平布局
,每个元素的类名为item-image
1 |
|
注意: 需要开启waterfall
插件才能正常使用本内置标签
水平居中 center
使center标签内的内容水平居中
1 |
|
插入书签 bookmark
1 |
|
插入图片 image
如需要修改大小 添加参数size="max"
1 |
|
其他
favicon
替换掉主题文件下的source/favicon.ico
logo
1 |
|
高度不超过50,宽度不超过200为最佳
banner
1 |
|
宽图为最佳
统计
1 |
|
接入常用网站统计第三方
social icon 社交图标
添加常用到一些社交图标
header_enable
首页导航栏是否显示社交图标
footer_enable
底部导航栏是否显示社交图标
如需要修改图标显示顺序,只需要移动icons
下的列表顺序即可
1 |
|