为了把班里的截图导到网站上，就用gitee搞个非公开的博客，用的hexo。

在一开始没啥问题，但是在部署的时候遇到 ERROR Deployer not found: git 的错误

经过调查之后 才知道 需要运行下这个指令才行

npm install hexo-deployer-git --save

然后就可以部署了

1
hexo cl && hexo g && hexo d

访问但无法加载css文件

再次研究，发现

1
2
url: https://drluo.gitee.io/grade2019class22/
root: /

root: / 后面应该加上grade2019class22/

即：root: /grade2019class22/

修改后，恢复正常。

访问但是无法加载文章图片

这里我不怎么想改了，F12查看图片获取路径为
https://drluo.gitee.io/images/cover/Dailysummary.png
这波我直接选择在图片路径前加上/grade2019class22
顺便把所用theme的_config.yml中的favicon也改为了
favicon: /grade2019class22/favicon.ico

获取dplayer插件
1
npm install dplayer --save
取waterfall插件
1
npm install waterfall --save

flex-block主题相关设置

变动

关于 waterfall 标签，在更新主题后，会导致以前的视频不能正常播放，需要进行如下修改:

1
2
3
4
5
<!-- 旧版写法 -->
{% dplayer https://qiniu.miiiku.xyz/video/%E7%BE%8E.mp4 https://qiniu.miiiku.xyz/video/%E7%BE%8E.mp4?vframe/jpg/offset/10 %} 

<!-- 新版写法 需要指定属性名 -->
{% dplayer url="https://qiniu.miiiku.xyz/video/%E7%BE%8E.mp4" cover="https://qiniu.miiiku.xyz/video/%E7%BE%8E.mp4?vframe/jpg/offset/10" %}

可自定义的相关页面

目前可以扩展的页面菜单有:

type value name
categories /categories 分类
tags /tags 标签
links /links 友链
messages /messages 留言板

如何添加:

🌰 添加友链页面

1
hexo new page links

找到新建的页面并修改Front-matter，添加如下内容

1
type: links

修改_config.yml配置菜单，找到menu选项添加如下内容

1
links: /links

添加其他自定义页面，如关于页面

1
hexo new page about

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
2
3
4
5
6
7
8
---
title: {{ title }}
subtitle:
date: {{ date }}
categories:
tags:
cover:
---

page.md

1
2
3
4
5
6
7
---
title: {{ title }}
subtitle:
date: {{ date }}
cover:
type:
---

自定义数据

友链数据

在目录的source/_data下新建一个links.yml

一行一条数据，格式如下:

1
- { "name" : "", "describe" : "", "link" : "", "cover" : "" }

SEO优化相关

查找并修改Hexo下的_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
# Site

# <meta name="description" content=[config.description]>
description: 

# <meta name="keywords" content=[config.keywords]>
keywords: 

# <meta name="author" content=[config.author]>
author: 

# <meta name="copyright" content=[config.copyright]>
copyright:

配置项:

代码高亮

hexo默认提供了highlightjs代码高亮，如何开启？

查找并修改Hexo下的_config.yml

1
2
3
4
5
6
7
highlight:
  enable: true
  line_number: true
  auto_detect: true
  tab_replace:
  hljs: true
  theme: androidstudio

其中enable为开启代码高亮，hljs设置为hljs为class，theme为highlight代码高亮主题，不设置默认为default

具体的主题可以在https://highlightjs.org/查看

长标题

进入flex-block配置文件_config.yml找到large_legnth

1
2
3
4
5
6
# large cover
# long: [article, link]
# short: [category, tag]
large_legnth:
  long: 20
  short: 5

long: 作用于文章和友链卡片

short: 作用于分类和标签卡片

设置Card封面的大小，如 long: 20 表示如果文章标题长度大于20，文章卡片显示为长文章

如果启用了友链，则会判断友链名称和友链描述两个字段长度

aplayer

进入flex-block配置文件_config.yml找到aplayer

aplayer歌词模式默认使用第三种（文件格式）

1
2
3
4
5
6
7
8
9
# aplayer 视频播放
# docs: https://aplayer.js.org/#/
aplayer:
  enable: true
  theme: "#b7daff"
  autoplay: false
  loop: false
  mutex: true
  lrcType: 3

详情查看https://aplayer.js.org/

dplayer

进入flex-block配置文件_config.yml找到dplayer

1
2
3
4
5
6
7
8
# dplayer 视频播放
# docs: http://dplayer.js.org/
dplayer:
  enable: true
  theme: "#b7daff"
  autoplay: false
  loop: false
  mutex: true

详情查看http://dplayer.js.org/

zoom 图片预览

进入flex-block配置文件_config.yml找到zoom

1
2
3
4
# zoom 图片预览
# docs: https://github.com/miiiku/zoom
# Specific configuration information go to `layout/plug-in/zoom.ejs`
zoom: true

详情查看https://github.com/miiiku/zoom

waterfall 瀑布流

进入flex-block配置文件_config.yml找到waterfall

1
2
3
4
# waterfall 瀑布流
# docs: https://github.com/miiiku/waterfall
# Specific configuration information go to `layout/plug-in/waterfall.ejs`
waterfall: true

如果要进行详细的配置，请找到并编辑layout/plug-in/waterfall.ejs

详情查看https://github.com/miiiku/waterfall

Valine评论

进入flex-block配置文件_config.yml找到valine

1
2
3
4
5
6
7
8
9
10
11
12
13
# valine 评论
# docs: https://valine.js.org
# You can get your appid and appkey from https://leancloud.cn
# 这里appId和appKey一定一定要改成自己的，没有的话去https://leancloud.cn这个网站注册创建一个
valine:
  enable: true
  appId: # your appid
  appKey: # your appkey
  avatar: mm
  placeholder: 随便说点什么叭～
  notify: false
  visitor: false
  pageSize: 10

如果想给某一页面/文章取消评论，在md文件的front-matter中增加comments: false

详情查看https://valine.js.org/configuration.html

disqus评论

进入flex-block配置文件_config.yml找到disqus

1
2
3
4
5
6
7
8
# disqus 评论
# docs: https://disqus.com/
# website 网站到昵称
# error 加载失败的提示语
disqus:
  enable: true
  website: # your website
  error: 如果你看不到评论，那么就真的看不到评论 w(゜Д゜)w

一言（当前版本好像弃用了）

进入flex-block配置文件_config.yml找到hitokoto

1
2
3
4
5
6
# 一言
# docs: https://hitokoto.cn/api
# type: [a, b, c, d, e, f, g]
hitokoto:
  enable: false
  type: a

详情查看https://hitokoto.cn/api

内建标签

插入音频 aplayer

更多参数可参考https://aplayer.js.org/#/home?id=options中audio的属性

1
2
<!-- url 必填  -->
{% aplayer name="アイロニ" artist="鹿乃" url="https://qiniu.miiiku.xyz/public/music/鹿乃 - アイロニ.mp3" lrc="https://qiniu.miiiku.xyz/public/music/鹿乃 - アイロニ.lrc" cover="https://qiniu.miiiku.xyz/public/music/鹿乃 - アイロニ.jpg" %}

注意: 需要开启aplayer插件才能正常使用本内置标签

插入视频 dplayer

1
2
<!-- url 必填 cover(封面) 可选 subtitle(字幕) 可选 -->
{% dplayer url="https://qiniu.miiiku.xyz/video/%E7%BE%8E.mp4" cover="https://qiniu.miiiku.xyz/video/%E7%BE%8E.mp4?vframe/jpg/offset/10" %}

注意: 需要开启dplayer插件才能正常使用本内置标签

插入瀑布流 waterfall

如需要修改大小 添加参数size="max"

1
2
3
4
{% waterfall size="max" %}
![imgname](imgsrc)
...
{% endwaterfall %}

更多参数可参考https://github.com/miiiku/waterfall#options 原参数的驼峰命名改为横线连接

🌰: 如设置布局为水平布局，每个元素的类名为item-image

1
2
3
4
{% waterfall direction=h item-class=item-image %}
![imgname](imgsrc)
...
{% endwaterfall %}

注意: 需要开启waterfall插件才能正常使用本内置标签

水平居中 center

使center标签内的内容水平居中

1
2
3
{% center %}
...
{% endcenter %}

插入书签 bookmark

1
2
<!-- link 地址(必填) title? 标题 cover? 封面 -->
{% bookmark title="我在这里" link="https://miiiku.xyz" cover="https://qiniu.miiiku.xyz/attach/2019/03/15529735091219953_175322076_H800.jpg" %}

插入图片 image

如需要修改大小 添加参数size="max"

1
2
<!-- src 地址(必填) title? 描述 size? 大小 -->
{% image src="https://qiniu.miiiku.xyz/attach/2019/03/15529735091219953_175322076_H800.jpg" title="hello world" size="max" %}

其他

favicon

替换掉主题文件下的source/favicon.ico

1
logo:

高度不超过50，宽度不超过200为最佳

1
banner:

宽图为最佳

统计

1
2
3
4
5
6
7
google_analytics: 

gauges_analytics: 

baidu_analytics: 

tencent_analytics:

接入常用网站统计第三方

social icon 社交图标

添加常用到一些社交图标

header_enable 首页导航栏是否显示社交图标

footer_enable 底部导航栏是否显示社交图标

如需要修改图标显示顺序，只需要移动icons下的列表顺序即可

1
2
3
4
5
6
7
8
9
10
11
12
13
social_icon:
  header_enable: false
  footer_enable: false
  icons:
    - { type: email,      value: }
    - { type: github,     value: }
    - { type: google+,    value: }
    - { type: ins,        value: }
    - { type: twitter,    value: }
    - { type: youtube,    value: }
    - { type: weibo,      value: }
    - { type: cloudmusic, value: }
    - { type: zhihu,      value: }

最后

有什么不懂的，欢迎加群询问哦！

洛玖の小窝