Hexo博客的安装与配置

# 安装 Hexo 的必要环境

  • # Node.js 的安装

    Node.js 安装包下载地址为：

    https://nodejs.org/en/

  • # Git 的安装

    Git 安装包下载地址为：

    https://git-scm.com/

  • # 检查 Node.js 和 Git 是否安装成功

    找到我们的 Git Bash 并打开

    输入： node -v 和 npm -v ，如果正确显示版本号，则表示环境安装成功了

# 利用 npm 来安装 cnpm

由于国内的镜像源速度较慢，所以我们利用 npm 来安装 cnpm ，在命令行中输入

npm install -g cnpm --registry=https://registry.npm.taobao.org

检查 cnpm 安装是否成功，在命令行中输入 cnpm 或者 cnpm -v

# 利用 cnpm 来安装 Hexo

在命令行中输入 cnpm install -g hexo-cli 安装 Hexo

验证 Hexo 安装是否成功，在命令行中输入 hexo -v

# 初始化 Hexo 博客

创建一个文件夹作为博客目录

在对应的根目录文件夹下启动 Git Bash， 命令行窗口命令行中输入 hexo init 来初始化 Hexo 博客

显示 “INFO Start blogging with Hexo!”，即为初始化成功

启动 Hexo 博客，在命令行中输入 hexo s ，进行本地部署

在浏览器地址栏输入 localhost:4000 ，即可进入 Hexo 博客的主界面！

在命令行中输入 hexo g 打包成静态文件，在命令行中输入 hexo clean 清除缓存，一般更新网站前运行

# 安装 fluid 主题

  1. 获取主题最新版本

    方式一：

    ​ 推荐通过 npm 直接安装，进入博客目录执行命令 npm install --save hexo-theme-fluid

    方式二：

    ​ 下载 解压到 themes 目录，并将解压出的文件夹重命名为 fluid

    然后在博客目录下创建 _config.fluid.yml ，将主题的 _config.yml 内容复制进去。

  2. 指定主题

    如下修改 Hexo 博客目录中的 _config.yml ：

    1
    2
    theme: fluid  # 指定主题
    language: zh-CN  # 指定语言，会影响主题显示的语言，按需修改

  3. 创建关于页

    首次使用主题的「关于页」需要手动创建：

    1
    hexo new page about

    创建成功后，编辑博客目录下 /source/about/index.md ，添加 layout 属性。

    修改后的文件示例如下：

    1
    2
    3
    4
    5
    6
    ---
    title: about
    layout: about
    ---

    这里写关于页的正文，支持 Markdown, HTML

  4. 更新主题

    适用于通过 Npm 安装的主题。

    在博客目录下执行命令：

    1
    npm update --save hexo-theme-fluid

    适用于通过 Release 压缩包安装主题，且没有自行修改任何代码的情况。

    1. 先将原文件夹重命名为别的名称，例如 fluid-bkp ，用于升级失败进行回退；
    2. 按照安装步骤，重新下载最新 release 版本 并解压重命名为 fluid ；
    3. 如果某些配置发生了变化（改名或弃用），release 的说明里会特别提示，同步修改原配置文件即可

# 添加樱花飘落背景

在主题文件夹下的 layout\layout.ejs 中添加：

1
<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/sakura.js"></script>

# 添加底部网站运行时长

在主题目录下创建 source/js/duration.js ，内容如下：

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
!(function() {
  /** 计时起始时间，自行修改 **/
  var start = new Date("2023/01/01 00:00:00");

  function update() {
    var now = new Date();
    now.setTime(now.getTime()+250);
    days = (now - start) / 1000 / 60 / 60 / 24;
    dnum = Math.floor(days);
    hours = (now - start) / 1000 / 60 / 60 - (24 * dnum);
    hnum = Math.floor(hours);
    if(String(hnum).length === 1 ){
      hnum = "0" + hnum;
    }
    minutes = (now - start) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
    mnum = Math.floor(minutes);
    if(String(mnum).length === 1 ){
      mnum = "0" + mnum;
    }
    seconds = (now - start) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
    snum = Math.round(seconds);
    if(String(snum).length === 1 ){
      snum = "0" + snum;
    }
    document.getElementById("timeDate").innerHTML = "本站安全运行&nbsp"+dnum+"&nbsp天";
    document.getElementById("times").innerHTML = hnum + "&nbsp小时&nbsp" + mnum + "&nbsp分&nbsp" + snum + "&nbsp秒";
  }

  update();
  setInterval(update, 1000);
})();

在主题配置文件 _config.landscape.yml 中的 footer: content 添加：

1
2
3
4
5
6
7
8
9
footer:
  content: '
	#原有内容
    <div style="font-size: 1rem">
      <span id="timeDate">载入天数...</span>
      <span id="times">载入时分秒...</span>
      <script src="/js/duration.js"></script>
    </div>
  '

# 添加底部滚动字体

在主题目录下创建 source/js/scroll.js ，内容如下：

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
38
39
var binft = function (r) {
  function t() {
	return b[Math.floor(Math.random() * b.length)]
  }
  function e() {
	return String.fromCharCode(94 * Math.random() + 33)
  }
  function n(r) {
	for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {
	  var l = document.createElement("span");
	  l.textContent = e(), l.style.color = t(), n.appendChild(l)
	}
	return n
  }
  function i() {
	var t = o[c.skillI];
	c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d)
  }
  var l = "",
  o = ["几亩薄田难养家, 生活所迫闯天下。","尝尽人间万般苦, 换来两鬓染霜花。","辗转漂泊几十秋, 饮尽风霜志为酬。","满腹心酸无人诉, 唯有老酒慰我喉。","本是后山人, 偶做堂前客。","醉舞经阁半卷书, 坐井说天阔。","大志戏功名, 海斗量福祸。","论到囊中羞涩时, 怒指乾坤错。"].map(function (r) {
  return r + ""
  }),
  a = 2,
  g = 1,
  s = 5,
  d = 75,
  b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"],
  c = {
	text: "",
	prefixP: -s,
	skillI: 0,
	skillP: 0,
	direction: "forward",
	delay: a,
	step: g
  };
  i()
  };
  binft(document.getElementById('binft'));

在主题配置文件 _config.landscape.yml 中的 footer: content 添加：

1
2
3
4
5
6
7
footer:
  content: '
	#原有内容
    <div id="binft">
      <script src="/js/scroll.js"></script>
    </div>
  '

# 添加 Hexo 实时预览

更改配置文件不支持实时更新

在博客目录下执行命令：

1
npm install hexo-browsersync --save