效果：

二次开发版

搭建完成后，个人觉得还可以魔改一下，变得更好看些，所以我就改了以下方面：

1. Pjax支持
2. Aplayer音乐播放器
3. 随机背景+自动切换（来自于群里的小康大佬👉 小康大佬博客）

效果👇

预览地址👉 https://blog.dmx.best
大家可以进去听听歌什么的吧，因为加上了pjax，随意切换文章音乐都不会断！

修改随机背景

选好图片替换下列链接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<script> (function() {
  var t = [
  "https://cdn.jsdelivr.net/gh/a2396837/CDN@latest/images/2020/08/04/cfbg1.webp",
  "https://cdn.jsdelivr.net/gh/a2396837/CDN@latest/images/2020/08/04/zZxPjB9Z.webp",
  "https://cdn.jsdelivr.net/gh/a2396837/CDN@latest/images/2020/08/04/7vdoYEP4.webp",
  "https://cdn.jsdelivr.net/gh/a2396837/CDN@latest/images/2020/08/04/InXUuuL1.webp",
  "https://cdn.jsdelivr.net/gh/a2396837/CDN@latest/images/2020/08/04/OIkchljg.webp",
  "https://cdn.jsdelivr.net/gh/a2396837/CDN@latest/images/2020/08/04/8cYATHya.webp",
  "https://cdn.jsdelivr.net/gh/a2396837/CDN@latest/images/2020/08/04/HSGYlHNj.webp",
  "https://cdn.jsdelivr.net/gh/a2396837/CDN@latest/images/2020/08/04/cfbg6.webp",
  "https://cdn.jsdelivr.net/gh/a2396837/CDN@latest/images/2020/08/04/EupdGLc2.webp"
  ];
  window.$("#bg").backstretch(t, {
    duration: 1e4,
    alignY: 0,
    transition: "fade",
    transitionDuration: 1e3
  })
})()
</script>

修改音乐歌单

1
2
3
4
5
6

<meting-js
  server="netease"
  type="playlist"
  id="60198"
  fixed="true">
</meting-js>

因为这里填的服务商是网易云server="netease"，所以把你的网易云歌单ID填入 id="" 中

想换成QQ音乐?或者更多自定义?
请前往Meting文档：👉 https://github.com/metowolf/Meting

搭建教程，项目的 README.md已经说得很清楚了，我就照搬过来啦

如何部署

首先在 Cloudflare 控制面板创建一个新的 workers

将 workers.js（或者 workers-sakurafrp.js） 的内容根据自己情况修改，然后替换 Cloudflare 在线编辑器的默认代码。

点击 Save and deploy 保存。

如何编写文章

首先创建一个 Github 项目，名字随意，然后将这个项目 clone 到本地。

1
2
3

# 示例
git clone https://github.com/kasuganosoras/cloudflare-worker-blog
cd cloudflare-worker-blog/

进入项目文件夹，新建一个 posts 文件夹

1

mkdir posts/

在里面编写文章，内容一般用 .md 后缀即可，例如 helloworld.md

写完之后回到项目根目录（就是上级目录），然后新建一个 list.json

1

touch list.json

编辑 list.json，在里面写入以下内容

1
2
3
4
5
6
7

[
  {
    "title":"文章名称",
    "time":"发布时间",
    "file":"posts/helloworld.md（或者其他名字）"
  }
]

如果你有多篇文章就这样写：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

[
  {
    "title":"文章1",
    "time":"2019-06-01",
    "file":"posts/1.md"
  },
  {
    "title":"文章2",
    "time":"2019-06-03",
    "file":"posts/2.md"
  },
  {
    "title":"文章3",
    "time":"2019-06-07",
    "file":"posts/3.md"
  } <--注意json格式，最后一篇文章的这里不需要逗号
]

一切就绪后，使用 git push 命令将代码推送到仓库上。

然后修改你的 workers，设置 github_base 为你的仓库名称，例如 kasuganosoras/cloudflare-worker-blog

现在访问你的 Workers 即可看到文章。

• 第一步，先把 hexo 根目录下的 package.json 的 "hexo": "^4.2.1", 改为 "hexo": "^5.0.0",

• 然后在 hexo 根目录下执行 npm update

问题出现：

1
2

hexo npm ERR! A complete log of this run can be found in: 
npm ERR! C:\Users\閽熷▉濞乗AppData\Roaming\npm-cache\_logs\2020-07-29T07_50_32_577Z-debug.log

• 发现是淘宝镜像源的问题，马上切换回npm原源

1

npm config set registry https://registry.npmjs.org

• 检查是否切换成原源

1

npm info underscore

接着在 hexo 根目录执行

1

npm update

提示成功：

hexo version 查看 hexo 版本

hexo问题

当你成功升级 hexo 5.0.0 后，进行下一步时，会出现这样的 报错 警告

1
2
3

INFO  Validating config
WARN  Deprecated config detected: "use_date_for_updated" is deprecated, please use "updated_option" instead. See https://hexo.io/docs/configuration for more details.

解决方法

打开根目录下的 _config.yml 找到 use_date_for_updated: false ，改为：

• updated_option: 'date': 使用 date 作为 updated 的值。可被用于 Git 工作流之中，因为使用 Git 管理站点时，文件的最后修改日期常常会发生改变

• updated_option: 'mtime': 使用文件的最后修改时间。这是从 Hexo 3.0.0 开始的默认行为。

• updated_option: 'empty': 直接删除 updated。使用这一选项可能会导致大部分主题和插件无法正常工作。

详细请查看 https://hexo.io/docs/configuration

另一种方法（hexo版本以及依赖）

npm-check检查更新

1
2

npm install -g npm-check
npm-check

npm-upgrade更新

1
2

npm install -g npm-upgrade
npm-upgrade

这时候会有一个选择菜单式的持续输出供你选择依赖包的更新与否，如下：

你需要一路回车即可安装

再查看hexo文件夹下面的 package.json 文件的 dependencies 属性,可以看到hexo的版本和依赖包已经更新了

图片，就是5月31号那天，从南宁前往天津的航班上拍的。
家里离南宁机场有100多公里，一个非常疼爱儿子的父亲，害怕儿子搭机场大巴晕车，每一次都会拜托亲戚，用他们的车来送儿子到机场。有时候我也在想，我究竟有什么价值，值得爸妈那么多的疼爱，我用的一切东西，都是相对来说最好的。还记得第一次来天津上大学那会，我说搭火车去天津要40个小时，爸爸就露出非常惊讶的表情，马上就让我看飞机票。我找了一下，说飞机5个小时，不过机票1000多呢。爸爸就笑了笑，微笑着说多少钱就多少钱呗，没关系。但是我知道，这1000多元，可是他们好几天的工资！

来到学校后，才发现有人没来，我被学校坑了，所谓的返校其实是自愿的，qswl😡。
一来一回，又要花费大把银子。不过来都来了，正好把之前落下的学习补回来，工作量还是很大的，但是我并没有后悔，因为我把时间花在了我最喜欢做的事情上。这几个月，自学前端，成功写出了一个 hexo 主题，说实话，当时写出来的时候，那种成就感，简直就像是要飞上天的感觉。
唯一不满的就是没能掌握 javascript ，不然主题还能更棒！所以今年的第二个目标就是利用暑假再自学 javascript 让主题上升一个层次。

到今天为止，blank 主题已经提交了35次了，我也会一直优化代码，更新迭代！ 如果你喜欢我的主题，不妨送个⭐

Checkbox & Radio,富文本按钮,Folding修改移植于 Volantis 主题

Note

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

{% note success %}
success
{% endnote %}

{% note primary %}
primary
{% endnote %}

{% note default %}
default
{% endnote %}

{% note danger %}
danger
{% endnote %}

{% note warning %}
warning
{% endnote %}

{% note info %}
info
{% endnote %}

{% note light %}
light
{% endnote %}

效果：

已知问题

有时文章内容过多，hexo 就会出现 note 标签渲染不成功问题
解决方法：直接使用 div标签

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

<div class="note note-success">
    success
  </div>

<div class="note note-primary">
    primary
  </div>

<div class="note note-default">
    default
  </div>

<div class="note note-danger">
    danger
  </div>

<div class="note note-warning">
    warning
  </div>

<div class="note note-info">
    info
  </div>

<div class="note note-light">
    light
  </div>

便签

写法为：

1
2
3
4
5
6
7

<p class="note note-success">标签note-success</p>
<p class="note note-primary">标签note-primary</p>
<p class="note note-default">标签note-default</p>
<p class="note note-danger">标签note-danger</p>
<p class="note note-warning">标签note-warning</p>
<p class="note note-info">标签note-info</p>
<p class="note note-light">标签note-light</p>

效果：

标签note-success

标签note-primary

标签note-default

标签note-danger

标签note-warning

标签note-info

标签note-light

小tag标签

小 tag 标签是从 小康博客 哪里扒来的

写法：

1
2
3
4
5
6
7
8
9
10
11

<p class='div-border green'>绿色</p>
<p class='div-border red'>红色</p>
<p class='div-border yellow'>黄色</p>
<p class='div-border grey'>灰色</p>
<p class='div-border blue'>蓝色</p>

<span class="inline-tag red">红色小标签</span>
<span class="inline-tag green">绿色小标签</span>
<span class="inline-tag blue">蓝色小标签</span>
<span class="inline-tag yellow">黄色小标签</span>
<span class="inline-tag grey">灰色小标签</span>

效果：

绿色

红色

黄色

灰色

蓝色

红色小标签
绿色小标签
蓝色小标签
黄色小标签
灰色小标签

参数说明： <p class='div-border [颜色|方向加粗]'>你的文字</p>

（不写颜色默认为灰色）。当然了你也可以设置某个边框加粗。例如

<p class='div-border green left right'>绿色</p>

绿色

Checkbox & Radio

写法为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Checkbox & Radio

{% checkbox 纯文本测试 %}
{% checkbox checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
{% checkbox red, 支持自定义颜色 %}
{% checkbox green checked, 绿色 + 默认选中 %}
{% checkbox yellow checked, 黄色 + 默认选中 %}
{% checkbox cyan checked, 青色 + 默认选中 %}
{% checkbox blue checked, 蓝色 + 默认选中 %}
{% checkbox plus green checked, 增加 %}
{% checkbox minus yellow checked, 减少 %}
{% checkbox times red checked, 叉 %}


{% radio 纯文本测试 %}
{% radio checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
{% radio red, 支持自定义颜色 %}
{% radio green, 绿色 %}
{% radio yellow, 黄色 %}
{% radio cyan, 青色 %}
{% radio blue, 蓝色 %}

效果：

富文本按钮

写法为:

1
2
3
4
5
6
7
8
9
10

富文本按钮

{% btns circle grid5 %}
{% cell DmxZ, https://dmx.pub, https://cdn.jsdelivr.net/gh/a2396837/CDN@latest/images/avatar.png %}
{% endbtns %}

{% btns rounded grid5 %}
{% cell 下载源码, https://github.com/a2396837/hexo-theme-blank/, fas fa-download %}
{% cell 查看文档, https://github.com/a2396837/hexo-theme-blank/#hexo-theme-blank, fas fa-book-open %}
{% endbtns %}

效果：

DmxZ

Folding

写法为:

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
29
30
31
32
33
34
35
36
37

{% folding 查看图片测试 %}

![](https://cdn.jsdelivr.net/gh/a2396837/CDN@latest/images/avatar.png)

{% endfolding %}

{% folding cyan open, 查看默认打开的折叠框 %}

这是一个默认打开的折叠框。

{% endfolding %}

{% folding green, 查看代码测试 %}

{% endfolding %}

{% folding yellow, 查看列表测试 %}

- haha
- hehe

{% endfolding %}

{% folding red, 查看嵌套测试 %}

{% folding blue, 查看嵌套测试2 %}

{% folding 查看嵌套测试3 %}

hahaha <span><img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/emoji/tieba/%E6%BB%91%E7%A8%BD.png' style='height:24px'></span>

{% endfolding %}

{% endfolding %}

{% endfolding %}

效果：

导航栏菜单

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

# 顶部菜单  
# 如果不需要显示某项,可以用'#'注释掉
menu:
  search: /search/ || fas fa-search-plus || rgb(3 169 244)
  home: / || fab fa-fort-awesome || rgb(255 107 107)
  archive: /archives/ || fas fa-archive || rgb(10 189 227)
  tag: /tags/ || fas fa-hashtag || rgb(254 202 87)
  categories: /categories || far fa-folder-open || rgb(29 209 161)
  about: /about/ || fab fa-grav || rgb(154 106 247)
  guestbook: /guestbook/ || fab fa-telegram || hsl(205deg 100% 50%)
  friends: /link/ || fab fa-weixin || hsl(152deg 73% 45%)
  说说: /shuoshuo/ || fas fa-coffee ||#31c7c1

从最后一栏可以看出，可以自定义图标的颜色了
颜色支持 rgb hsl # 三种格式
可以根据你想要的颜色修改即可

首页 Title 或者 Avatar

打开主题设置

1
2
3
4

# 首页显示Avatar或者Title
logo:
  method: 1
  avatar: 

1. 如果 method: 1 ，则显示 hexo 根目录 _config.yml 的 title: xxx
2. 如果 method: 2，则显示头像Avatar，把图片链接填入 avatar: 后面

• 标题（Title）模式

• 头像（Avatar）模式

座右铭&社交图标

1
2
3
4
5
6
7
8
9
10
11

subtitle_social: 
  method: 3
  subtitle:
    motto: Do what you love,love what you do.
    font-size: 1.25em
    font-color: "#84ccc9"

  social:
    Github:
      icon: iconfont icon-GitHub
      url: https://github.com/a2396837

1. 如果 method: 1 只显示 subtitle
2. 如果 method: 2 同时显示 subtitle和social
3. 如果 method: 3 只显示 social

• subtitle部分，可以在 motto 改成你喜欢的文字，还可以修改字体大小，字体颜色

• social部分，支持 fontawesome iconfont

1
2
3
4
5
6
7

social:
  Github:
    icon: fab fa-github
    url: https://github.com/a2396837
  Email:
    icon: fa fa-envelope
    url: mailto:894049579@qq.com

• （缺点）fontawesome 的图片都是单色的，所以更建议使用 iconfont 的图标

图片懒加载

打开主题设置（默认打开）

1
2
3
4
5

# Lazyload (图片懒加载)
lazyload:
  enable: true
  image: /img/loading.gif
  script: https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js

文章置顶

• 卸载默认排序插件

1

npm uninstall hexo-generator-index --save

• 安装插件 hexo-generator-index-pin-top 或者 hexo-generator-indexed（推荐）

安装： hexo-generator-index-pin-top

1

npm install hexo-generator-index-pin-top --save

安装：hexo-generator-indexed （推荐）

1

npm install hexo-generator-indexed

• 如果你使用 hexo-generator-index-pin-top ，在需要置顶的文章的Front-matter中加上top即可：

1
2
3
4
5

title: 
tags:
top: true   +加上这个
date: 2020-04-28 12:01:56
categories:

• 如果你使用 hexo-generator-indexed ，在需要置顶的文章的Front-matter中加上sticky即可：

1
2
3
4
5

title: 
tags:
sticky: 1   支持多文章置顶，数字越大，置顶的优先级越大
date: 2020-04-28 12:01:56
categories:

文章的meta设置

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

# 文章的相关信息
post_meta:
  page:
    date: true                    # 主页是否显示日期
    categories: true             # 主页是否显示分类
    wordcount: true             # 主页是否显示字数统计
    min2read: true             # 主页是否显示阅读时长
  post:
    date: true                # 文章页是否显示日期
    categories: true         # 文章页是否显示字分类
    wordcount: true         # 文章页是否显示字数统计
    min2read: true         # 文章页是否显示阅读时长

首页文章隐藏

• 首页文章隐藏功能，需要 hexo-generator-indexed 插件

1

npm install hexo-generator-indexed

• 在文章的 Front-matter 中增加一个 hide 参数用来隐藏。

1
2
3
4

---
title: example
hide: true
---

文章目录

主题自带了一个很简单的目录
可以在

1
2
3

# 文章目录
toc:
  enable: true

把它关掉，或者在文章 Front-matter 把它关掉

1
2
3
4
5
6
7

---
title: Hello World
comments: false
date: 2019-8-25 15:23:36
abbrlink: 16107
toc: false   +加上这个
---

文章自动摘要

打开主题设置

1
2
3
4

# 文章自动摘要
auto_excerpt:
  enable: true
  length: 350

文章默认显示全文，如果只想显示摘要，可以使用以下方法只显示摘要

评论系统

目前-截至时间2021/1/5

增加了Waline评论系统

所以支持的评论是:

• Valine

• Waline

用法: 打开主题设置.yml

1
2
3

使用valine
valine:
  enable: true

或者

1
2
3

使用Waline
waline:
  enable: true

全局字体设置

如果你想要谷歌字体替换默认的全局字体，可以在配置文件中添加

1
2
3

fonts:
  font_link:
  font-family:

例如，之前我觉得这个主题配上思源宋体很好看，所以我设置成这样

1
2
3

fonts:
  font_link: https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;700&display=swap
  font-family: Noto Serif SC, serif, sans-serif

虽然谷歌字体服务器已经在中国，但是路线不同，难免解析到美国，日本的服务器，网站速度难免会拖慢，所以更建议用默认字体。

百度&谷歌分析

在 _config.yml ，添加获取的代码即可

1
2
3
4

#谷歌分析
google_analytics: xxxxxx
#百度分析
baidu_analytics: xxxxxx

百度自动推送

在 config.yml ,开启即可

1
2
3

#百度自动推送
baidu_push:
  enable: true

如果您觉得SEO还不够，您可以安装 sitemap 插件

• 执行以下代码

1
2

npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

• 在博客目录的 config.yml 最下面新增

1
2
3
4
5

# 自动生成sitemap
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml

fancybox

主题 _config.yml 处开启

1
2
3

# fancybox
fancybox:
  enable: true

代码高亮

如果你的blank主题版本在 V1.85前，则代码高亮方法如下

hexo-theme-blank,支持所有 highlightjs 的主题样式
由于 hexo 内置的 highlight 代码行号有些问题，所以我另外引进的代码行号，必须在hexo根目录的 _config.yml 进行关闭：

• 打开hexo根目录的 _config.yml ，找到 highlight 部分，改成下面：

1
2
3
4
5
6
7

highlight:
  enable: true
  line_number: false
  auto_detect: true
  tab_replace: ''
  wrap: false
  hljs: true

• 寻找你喜欢的代码高亮

https://highlightjs.org/

• 找到对应的 css 的CDN

https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.0.3/build/styles/

• 复制粘贴到主题目录下的 _config.yml 相应位置

highlight 用法

• 如果你只想高亮 短代码，类似这样

你可以用

1
2

``短代码``

• 如果你想要高亮 长代码

把2个点改成3个就行

如果你的blank主题版本在 V1.85后，则代码高亮方法如下

新版本，把highlightjs的 js和 highlightjs-line-numbers （行号）的 js 给去掉了，使用 hexo 内置的highlight的js

用法：

• 进入根目录下的 _config.yml ，把 hljs: false

1
2
3
4
5
6
7

highlight:
  enable: true
  line_number: true
  auto_detect: true
  tab_replace: ''
  wrap: true
  hljs: false  把这个给关了

• 进入highlightjs官网https://highlightjs.org/ ，挑选你喜欢的样式

• 主题自带了 highlightjs 的94种样式，所以你只需要修改这个位置的的名称

可以从图片看出，现在的样式是 atom-one-light ，你也可以换成别的样式，比如 vs,github,tomorrow……

• 当把 - /css/partial/highlight/atom-one-light.css # highlight代码高亮样式 删掉后，没有代码高亮，如图

MathJax支持

Supported by LuminousXLB

在主题目录下的_config.yml，把 MathJax 打开即可

1
2
3
4

#MathJax
mathjax:
  enable: true
  script: https://cdn.jsdelivr.net/npm/mathjax@3.0.1/es5/tex-mml-chtml.js

mermaid流程图

1
2
3
4
5

# mermaid
mermaid:
  enable: true
  theme: default   #可选 default/forest/dark/neutral
  script: https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js

使用 mermaid 标籤可以绘製 Flowchart（流程图）、Sequence diagram（时序图 ）、Class Diagram（类别图）、State Diagram（状态图）、Gantt（甘特图）和 Pie Chart（圆形图），具体可以查看 mermaid 文档

使用方法

1
2
3

{% mermaid %}
内容
{% endmermaid %}

• 例如：

1
2
3
4
5
6
7
8

{% mermaid %}
graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[Car]
{% endmermaid %}

预加载

可根据需求打开或者关闭

1
2
3
4
5

# https://instant.page/
# prefetch (预加载)
instantpage:
  enable: true
  script: https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js

侧边栏全局音乐播放器

• 在主题配置文件打开（默认关闭）

1
2

audio:
  enable: false  (false 改 true)

• 在source\_data目录下创建audio.yml

• 在 这个网站找到你喜欢的音乐的链接,图片,其他信息

• 按这个格式写入audio.yml

1
2
3
4

- title: '歌名'
  artist: '歌手'
  mp3: '歌的链接'
  cover: '歌曲图片'

• 示例

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
29
30
31
32
33
34

- title: 'Old Chinese song'
  artist: 'Kitti Kuremanee'
  mp3: 'https://music.163.com/song/media/outer/url?id=1625433.mp3'
  cover: 'https://p3.music.126.net/UWSKMO96-nqAn-l1BGX9SQ==/893902953435039.jpg'

- title: '所念皆星河'
  artist: 'CMJ'
  mp3: 'https://music.163.com/song/media/outer/url?id=1384026889.mp3'
  cover: 'https://p4.music.126.net/M34HFzLO2xhDLuX_zEALKA==/109951164291347934.jpg'

- title: '圆'
  artist: 'AGA'
  mp3: 'https://music.163.com/song/media/outer/url?id=406475388.mp3'
  cover: 'https://p2.music.126.net/UIE3T_txKzd6e8PORxmpCQ==/109951163412959613.jpg'

- title: '高山低谷'
  artist: '林奕匡'
  mp3: 'https://music.163.com/song/media/outer/url?id=28457932.mp3'
  cover: 'https://p1.music.126.net/-Ghh732Mw5P7SroEr954qA==/6011030069358994.jpg'

- title: '高山低谷'
  artist: '林奕匡'
  mp3: 'https://music.163.com/song/media/outer/url?id=36569474.mp3'
  cover: 'https://p1.music.126.net/-Ghh732Mw5P7SroEr954qA==/6011030069358994.jpg'

- title: '一双手'
  artist: '林奕匡'
  mp3: 'https://music.163.com/song/media/outer/url?id=28457932.mp3'
  cover: 'https://p1.music.126.net/npCOwk1Gcc6N8UwxctfXSA==/18345351509637971.jpg'

- title: '云烟成雨'
  artist: '房东的猫'
  mp3: 'https://music.163.com/song/media/outer/url?id=513360721.mp3'
  cover: 'https://p1.music.126.net/DSTg1dR7yKsyGq4IK3NL8A==/109951163046050093.jpg'

安装

• 在hexo根目录

1

git clone https://github.com/dewjohn/hexo-theme-blank.git themes/blank

• 修改站点配置文件 _config.yml ，把主题改为 blank

平滑升级

为了主题的平滑升级, blank 使用了 data files 特性。

推荐把主题默认的配置文件 _config.yml 复制到 Hexo 工作目录下的 source/_data/blank.yml，如果 source/_data 的目录不存在那就创建一个。

标签页

1. 前往你的 Hexo 博客的根目录
2. 输入 hexo new page tags
3. 你会找到 source/tags/index.md 这个文件
4. 修改这个文件：

1
2
3
4
5
6

---
title: 标签
date: 2020-04-04 13:15:29
type: 'tags'
comments: false
---

分类

1. 前往你的 Hexo 博客的根目录
2. 输入 hexo new page categories
3. 你会找到 source/categories/index.md 这个文件
4. 修改这个文件：

1
2
3
4
5
6

---
title: 分类
date: 2020-04-06 12:44:34
type: 'categories'
comments: false
---

归档页

1. 前往你的 Hexo 博客的根目录
2. 输入 hexo new page archives
3. 你会找到 source/archives/index.md 这个文件
4. 修改这个文件：

1
2
3
4
5
6

---
title: 归档
date: 2020-04-05 12:06:45
type: 'archives'
comments: false
---

创建友情链接页面

1. 前往你的 Hexo 博客的根目录
2. 输入 hexo new page link
3. 你会找到 source/link/index.md 这个文件
4. 修改这个文件：

1
2
3
4
5

---
title: 友情链接
date: 2020-04-27 13:16:03
type: link
---

5. 在 source\_data 下创建 links.yml ,依照下面格式写入友情链接

• 例如（乱序）：

1
2
3
4
5
6
7
8
9

- name: DmxZ
  link: https://dmx.pub/
  avatar: https://dmx.pub/img/avatar.png
  info: 欢迎来到 DmxZ 的自留地！
  
- name: DmxZ
  link: https://dmx.pub/
  avatar: https://dmx.pub/img/avatar.png
  info: 欢迎来到 DmxZ 的自留地！

• 更推荐的写法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

1:
  name: DmxZ
  link: https://dmx.pub
  avatar: https://dmx.pub/img/avatar.png
  info:  欢迎来到 DmxZ 的自留地！

2:
  name: DmxZ
  link: https://dmx.pub
  avatar: https://dmx.pub/img/avatar.png
  info:  欢迎来到 DmxZ 的自留地！

3:
  name: DmxZ
  link: https://dmx.pub
  avatar: https://dmx.pub/img/avatar.png
  info:  欢迎来到 DmxZ 的自留地！

404页面

主题自带一个很简单的 404 页面 ，如图

如果不想要这个样式，可以在主题配置文件中把它关掉

1
2
3
4

# 一个内置的简单404页面
page_404:
  enable: false
  subtitle: 'Oops! Page not found.'

，然后把你的 404.html 放在主题目录 themes/blank/source 下

本地搜索

• 你需要安装 hexo-generator-search 根据它的文档去做相应配置

• 把下面的代码放在根目录下的 _config.yml

1
2
3
4

search:
  path: search.xml
  field: post
  content: true

• 在主题配置文件中把 local_search: enable: true

开始写作

推荐的 Front-matter 设置

1
2
3
4
5
6
7
8
9
10

---
title: {{ title }}
date: {{ date }}
comments: false
auto_excerpt: true
toc: true
tags:
categories: 
description: 
---

致谢

本人代码小白，所以在制作这个主题，参考了下列几位大佬的主题，非常感谢！

1. hexo
2. hojun
3. CaiCai
4. Next
5. fexo
6. royce
7. butterfly

补充

1. 写作不易，请给我一个免费的Star⭐
2. 如果觉得主题有什么补充,请协助我改进！
3. 如果在安装主题过程有什么问题，欢迎提 Issues!
4. 协助我开发主题:可以Fork一份,改好后，可以向我发起 Pr

可以在下图看出，手机端的体验非常不好，仅仅只能看文章😡

因此，这个版本就是要去掉那个小小的下拉导航菜单，加上固定在网站顶部的响应式菜单，如图：

电脑端：

手机端，也有下拉菜单栏：

此外呢，这个版本还更新了 fontawesome V5 的图标，顶部的导航菜单还加上了颜色，这样子主页不会太单调了，可以给人一种眼前一亮的 feeling!😁

如果你正在使用我的主题或者其他已经支持 V5 的主题，请到这个网站来挑选自己的 V5 图标

https://fontawesome.com/icons?d=gallery&m=free

预览地址

demo : https://dmxz.me

电脑端效果图

手机端效果图

文档说明

图标采用的是 iconfont
用法自己百度
这里我就简单说说：

1. fork一份我的github仓库，然后修改html文件
2. 去 iconfont 把自己喜欢的 icon 添加到项目，然后生成 js
3. 把生成的js复制粘贴到html相应位置
4. 更改 icon
5. 比如我的图标是 icon-HOMEMESSAGE

1
2
3
4
5
6
7
8
9
10

<a href="https://dmx.pub" target="_blank" rel="noopener noreferrer">
           <div class="box">
               <div class="icon">
                   <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-HOMEMESSAGE"></use>    
                   </svg>
               </div>
              <p>主页</p>
           </div>
   </a>

下载地址

老规矩，如果你想拿走，请给我一个 Star ⭐ 尊重作者劳动成果！

✨下载：github

DIY

背景渐变 （建议删掉彩带）

打开 css/style.css
删掉：

1
2
3
4
5
6
7
8
9

body{
    width: 100%;
    height: 100vh;
    /*//弹性盒子布局方式*/
    display: flex;
    /*容器内元素居中*/
    justify-content: center;
    align-items:center ;
}

改为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

body{
    width: 100%;
    height: 100vh;
    /*//弹性盒子布局方式*/
    display: flex;
    /*容器内元素居中*/
    justify-content: center;
    align-items:center ;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    transition: box-shadow .2s ease-out;
}
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

打字特效

需要一点点html+css基础
把以下代码复制在 </body> 之前

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div class="typed">
  <span id="typed" style="white-space: pre-wrap;line-height: 30px;font-size: 20px;"></span>

  <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11/lib/typed.min.js"></script>
  <script type="text/javascript">
      var options = {
          strings: [
              '欢迎来到 DmxZ 的自留地！ \nWelcome to DmxZ private plot！ ^3000',

          ],
          typeSpeed: 70,   //打印速度
          startDelay: 2000, //开始之前的延迟300毫秒
          loop: true,      //是否循环
          backSpeed: 50,
          showCursor: false
      };
      var typed = new Typed('#typed', options);
  </script>
</div>

更多信息，请参考 typed.js 文档

https://github.com/mattboldt/typed.js

因为考虑到手机屏幕大小问题，所以就不让打字在手机端显示了，在 style.css ,最下面加上：

1
2
3
4
5

@media screen and (max-width: 1200px) {
    .typed {
        display: none;
    }
}

更多 DIY 博主正在探索中

废话少说，开搞！

Ps. 如果你是 .swig 模板，我觉得reuixiy 的这篇文章 《往 NexT 主题的归档页面加入 12 生肖》 写得更好，更适合你。如果还不懂， 《 hexo 给 next 模版归档页面年份后面增加十二生肖图标》，这篇文章你也可以参考下。

接下来，下面所有的代码都是基于 .ejs 模板，（如果你是 .pug模板，麻烦把代码转成.pug格式应该也可以）😥

新建脚本

在你主题的 themes\某某主题\scripts，创建 year.js
把下面代码填入year.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

hexo.extend.helper.register('getAnimalIcon', function (year) {
    var index = parseInt(year) % 12;
    var icon = {
        0: 'symbolic-animals icon-monkey',
        1: 'symbolic-animals icon-rooster',
        2: 'symbolic-animals icon-dog',
        3: 'symbolic-animals icon-pig',
        4: 'symbolic-animals icon-rat',
        5: 'symbolic-animals icon-ox',
        6: 'symbolic-animals icon-tiger',
        7: 'symbolic-animals icon-rabbit',
        8: 'symbolic-animals icon-dragon',
        9: 'symbolic-animals icon-snake',
        10: 'symbolic-animals icon-horse',
        11: 'symbolic-animals icon-goat',
    }
    return icon[index]
});

下载字体文件 :

Github
把3个文件放在你的主题 source/fonts里面，如果没有fonts文件夹，请自行创建。

找到你主题的 CSS文件，通常在 source/css/ ，加入以下代码：

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
29
30
31

@font-face {
  font-family: 'chinese-zodiac';
  font-display: swap;
  src: url('../fonts/chinese-zodiac.eot');
  src: url('../fonts/chinese-zodiac.eot') format('embedded-opentype'),
       url('../fonts/chinese-zodiac.woff2') format('woff2'),
       url('../fonts/chinese-zodiac.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
.symbolic-animals {
  display: inline-block;
  font: normal normal normal 14px/1 chinese-zodiac;
  font-size: larger;
  float: right;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-dragon:before { content: '\e806'; }
.icon-tiger:before { content: '\e809'; }
.icon-pig:before { content: '\e810'; }
.icon-horse:before { content: '\e813'; }
.icon-rat:before { content: '\e816'; }
.icon-goat:before { content: '\e818'; }
.icon-snake:before { content: '\e820'; }
.icon-ox:before { content: '\e822'; }
.icon-dog:before { content: '\e825'; }
.icon-rabbit:before { content: '\e826'; }
.icon-monkey:before { content: '\e829'; }
.icon-rooster:before { content: '\e82f'; }

在归档页面年份旁边引用

打开你的 archives.ejs 模板，hexo 主题的归档页面大多有年份，因此你仅需要，找到定义年份的div标签，在其后加入 ：
<i class="<%- getAnimalIcon(cur_year) %>"></i>，就大功告成了！

举个栗子：
我写的主题 定义年份是这样子的:

1
2
3

<div class="years">
   <h1><%- cur_year %> </h1>
 </div>

因此我仅需要在 <%- cur_year %> ,的后面加入就行了：

1
2
3

<div class="years">
   <h1><%- cur_year %> <i class="<%- getAnimalIcon(cur_year) %>"></i></h1>
 </div>

效果图

整体效果可以 看这个网站。由于还是代码小白，所以写得很乱，特别是CSS的位置😢，我自己有时候都不知道在哪里。现在还在不断优化当中。目前感觉主题完成度已经达到 95% 了把，剩下的都是一些美化，比如代码块啊，一些页面啊什么的。。。。。。

这是首页

这是 config.yml

主题支持

1. 置顶效果
2. valine评论
3. 谷歌字体
4. 夜间模式
5. 待解锁

下载地址

https://github.com/a2396837/hexo-theme-blank

致谢

本人代码小白，所以在制作这个主题，参考了下列几位大佬的主题，非常感谢！

1. hexo ——#感谢hexo提供的主题开发文档(虽然有点简陋)
2. hojun ——#学习了hexo主题开发
3. CaiCai ——#模仿主页样式
4. Next ——#参考部分代码
5. fexo ——#参考部分代码
6. royce ——#提供暗黑模式，友链部分
7. butterfly ——#字体参考
8. zeit ——#托管平台
9. netlify ——#托管平台

说起来各位访客朋友不信，我其实玩了有两三年 Hexo 博客了，一直在读书，也没什么时间写博客，所以博客访问量实在惨淡，日均 10ip ，写这个主题，说实话，不是我三分热度。 因为我用过了 Next，butterfly，说实话，真的是香啊，主题作者开发的模板就是好看，非常的精美，靓丽。但是，写着写着我觉得我有点偏离写博客的初衷了，就拿今年 1月份我刚接触 butterfly 主题来说，自从我用了 butterfly 这个主题，我花了我绝大多数上网时间来修改这个主题。刚开始，我非常享受这个过程，感觉好好玩。但当我没东西改的时候，我望着博客首页，我有点不知道该干嘛。我把博客真正的用途忘记了，我应该把时间花在我的学习上，然后如果有好玩的，好看的或者经验分享，我会把它发到博客上，让陌生的来客看一看，我觉得这才是博客真正的初衷。。。

这个主题是由 Farbox 驱动的，与 Hexo 差不多，也是静态博客程序，不过相对 Hexo，Hugo，显得非常小众。
找到 github 源码库，下载，发现不是 ejs 而是 pug 渲染的，顿时脑壳疼 😭😭

对于我这种前端渣渣来说，pug实在不懂，不过好在css还是一样，因此在解决框架问题后，就是普通的CSS问题了。

首页

移植到 hexo 上是这样的:

全图

文章页面

标签

归档

部分代码

结束语

折腾了差不多一个星期了，其实就周六周日有时间敲代码，本以为一个星期就能搞定。。。还是我太年轻了，写完框架，还要写单页，比如什么归档页面，分类页面，标签页面。还要做好每一个页面的CSS。这个星期，过得真的是水啊，物理，高数，英语，每一节网课都在划水，一直在心里面想怎么把主题写得更好一点 😫😫😫 ，不过该还了总要还，等做好了这个主题，要开始自学模式了，哈哈 😁😁。

说一下未来的计划吧:

• 适配手机
• 代码高亮 #2020.4.14完成
• 增加夜间模式 #2020.4.15完成
• 增加主题设置
• 增加文章页分享按钮
• 美化页面(分类，归档，标签，关于，友链)
• SEO优化

（以上排名部分先后，谁先实现全凭博主心情😁）

• 适配手机
• 美化界面
• 点赞红心特效
• 增加其他类型歌单
• 增加换页功能(换页切换歌单)
• 思考中ing……

预览

下载地址

Github

DEMO:

1

https://dmx.best

制作过程

1. 写出基本框架
2. 引入css/js

展示

demo: dmx.best

用到的JS:

1. APlayer—Github
2. MetingJs—Github
3. ribbon—Github

特征✨:

1. 完全静态，可部署在Githb/coding
2. 歌单形式无需一首一首添加，只需歌单链接（网易云，QQ音乐，酷狗，百度，小米）

下载源码

Github

未来更新

• 适配手机
• 美化界面
• 点赞红心特效
• 增加其他类型歌单
• 增加换页功能(换页切换歌单)
• 思考中ing……

下面随便打开一个网站，就可以免费获取一个教育版邮箱：

http://onedrive.readmail.net/
https://t.odmail.cn/
http://od.obagg.com/
http://xkx.me/

注意事项: 保存好账号，记得不要关闭网址，下一步查收验证码还要用到

注册office

打开网站https://signup.microsoft.com/signup?sku=student,填入上一步骤获得的邮箱

回到获取邮箱的网址，你就发现收到了验证码。

点击注册按钮后, 跳转到设置用户名，密码，验证码的页面，输入临时邮箱中获取到的验证码，点击开始。

点击开始后，会提示你邀请更多人，点击跳过
点击跳过后，会进入到Office 365主页面,这时打开onedrive可能还在设置中，打不开，刷新一下或者注销重新登陆，就可以正常使用5T的Onedrive了

成功上车

Quick Start

Create a new post

1

$ hexo new "My New Post"

More info: Writing

Run server

1

$ hexo server

More info: Server

Generate static files

1

$ hexo generate

More info: Generating

Deploy to remote sites

1

$ hexo deploy

More info: Deployment