LOADING

正在加载

hexo博客的优化

2023/11/29 乱七八糟 hexo

壹 熟悉博客

在优化博客前，首先我们需要熟悉博客的相关参数！

1.1 自定义网站配置

用记事本打开并修改本地仓库目录下_config.yml文件，查看里面的参数：

1.1.1 主要参数的介绍

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
keywords 关键字
author 作者名字
language 网站使用的语言，中文zh-Hans
timezone 网站时区。Hexo 默认使用您电脑的时区，时区列表。比如说America/New_York。
url 网址
root 根目录
permalink 文章链接格式
permalink_defaults 链接默认值
source_dir 源文件夹，内容的存储位置，例如：文章
public_dir 公用文件夹，静态文件的生成位置，例如：主页布局
tag_dir 标签目录
archive_dir 存档目录
category_dir 分类目录
skip_render 复制到原始路径，不进行渲染
new_post_name 新文章的文件件名称，默认：:title.md
default_layout 预设布局，默认：post
external_link 在新标签中打开链接
auto_spacing 在中文和英文之间加入空格，默认：false
titlecase 将标题转换为小写1/大写2 * ，默认：false
external_link.enable 在新标签页中打开外部链接，默认：true
render_drafts 显示草稿，默认：false
post_asset_folder 启用资源文件夹功能，默认：false
filename_case 将文件名转换小写小写1/大写2，默认：0
relative_link 把链接改为与根目录的相对位址，默认：false
index_generator.per_page 每页显示的文章数
index_generator.order_by 发布顺序
date_format 日期格式
time_format 时间格式
per_page 每个页面上显示的文章数 (0 = 关闭分页功能)默认：10
pagination_dir 网址格式，默认：page
theme 主题名称
theme_config 主题配置，覆盖主题默认值
deploy 部署设置
include 包括隐藏文件
exclude 排除文件/文件夹
ignore 忽略文件/文件夹
future 显示未来的文章，默认：true
highlight 代码块的设置，默认：自定义

由于参数过多，只写了一部分，其他可以参考Hexo 官方文档。
注意：titlecase 参数改变后部分主题可能检测不到 Categories 和 Tags 页面。

1.1.2 分类&标签

参数 描述 默认值
default_category 默认分类 uncategorized
category_map 分类别名
tag_map 标签别名 自定义

c66112950a5aa48016bd488150729f73.png

1.2 目录介绍

以hexo-theme-particlex主题为例，进行介绍。

<root>
|---public # 静态网页文件
|---source # 文章（不要和主题文件夹下的source弄混，建议将文章和文章需要的图片等放在该处）
|---themes # 主题
    |---<theme-name>
        |---layout # 布局文件
        |   |---layout.ejs # 网页的基本布局
        |---source # 主题资源文件，里面的内容会生成到静态文件下（区别主目录下的source，该处建议放js/css等该主题特有的修饰文件）

1.3 写作

  • 创建文章

存放网站主文件夹的git终端输入：

$ hexo new [layout] <title>
# layout可选参数，用以指定创建的类型post（文章）/page（文件夹）/draft（草稿），若无指定则默认由配置文件中的default_layout选项决定
# title 必填参数，用以指定文章/文件夹/草稿标题，如果参数值中含有空格，则需要使用双引号包围
# 例如创建hello-world：
# 或
$ hexo new post hello-world
# title就是hello-world，如果不添加layout，默认就是文章post类型。

注意：如果创建带有中文的路径名称时，生成静态页面hexo g可能会报错。解决方法是在git命令行输入git config --global core.autocrlf false即可。
0acb105502a41385529a2a3bd35d89f5.png

还需要说明的是文件夹scaffolds下的post.md文件为创建文章的模板，也就是使用hexo new post xxx创建文件时会以post.md的形式输出。
8800345693ee07b9442e15b6ff04a4a0.png
其实三个文件都是模板，post.md是文章模板，page.md是文件夹模板，draft.md是草稿模板

参数 功能 路径
post 新建文章 /source/_posts/
draft 新建草稿 /source/_drafts/
page 新建页面（标签页，分类页等） /source/
  • 修改文章

创建的文章在source/_posts文件夹下，我试着对hello-world.md进行修改。修改如下：添加标签tags、类别categories等等，对于标签、类别可以在下面加一个 - xxx，来实现多个标签\类别。
bfe86c113fb446e2185ca6a02fc12c6e.png
在主页如果不想显示全文，我们可以用 <!-- more --> 可以控制主页预览内容，后面的内容在显示全文时才出现。
b521bec11b2ef831092dda4983ab6716.png

1.4 文件夹

创建文件夹source下的文件夹或者叫导航：

$ hexo new page <title>
# 例如创建tool：
$ hexo new page tool

83c05564dcfb20707d16009933cd3d72.png
ebe5f1233d7bc6ae23c96762a89834eb.png
然后在themes\particlex下的_config.yml文件的menu参数下添加一个tool选项：
b51615e5e76f3b489aa1fbfbb762ff2e.png
运行hexo s显示出来的是默认的.md页面：
6223cc4c984805559e5473ac05d5c4e6.png
当然这样并不是我们需要的，我们可以对其页面进行修饰，在themes\particlex\layout添加一个tool.ejs：
703430cbdad54ddfb5978f5163192d0c.png
接着在tool.ejs内添加自己设置的页面格式布局，可以参考当前目录下的其他.ejs文件：
6b3ee277d5ea3c45c09ea028c4996903.png
然后就是跳转到该链接下，修改themes\particlex\layout下的layout.ejs文件：
0237116737aaf5fa0663451de4d15646.png
需要跳转判断当前的页面是什么页面才能到对应的.ejs文件下，而且这里修改的是.ejs文件的前面那段文件名，修改完后执行hexo clean && hexo g && hexo s就可以访问了！
aeb619adf9f5df64508a6b820adade10.png

1.5 主题

这是我们重点需要修改的东西，为了能达到自己喜欢的布局结构，你需要在这里进行各种配置哦，对博客的美化，还有修改成为自己独特风格的博客。

Hexo提供给我们许多模板主题，请查看Hexo主题官网下载自己喜欢的主题（https://hexo.io/themes/）。

贰 更换主题

2.1 安装主题

当我们不想使用原主题时，可以在百度或者github搜索hexo主题，找到你喜欢的主题，得到其github地址。如例子：https://github.com/korilin/hexo-theme-particle
c5815580007abe00f1b47254fae35704.png
在刚刚的Git终端输入git clone + 你找到的主题的git地址 + themes/主题名，来下载该主题，你下载的主题都会保存在themes文件夹内。如例子：使用git clone https://github.com/korilin/hexo-theme-particle.git themes/particle下载particle主题：
f6cce6a55555208d022378c0b2b5d6da.png
用记事本打开并修改本地仓库目录下_config.yml文件，将里面的theme: 后面接的主题修改为你下载的主题的文件名。如例子文件名是particle，所以theme: particle：
36a969eb8ab7c8adc12c078d7bbf7f36.png
运行命令测试：

$ hexo clean
$ hexo g
$ hexo s

34192d9336a0d8c6b1d7ffced2914ea3.png

2.2 主题配置

对于主题的配置，可以根据主题下的README.md文件进行配置。
2f4fdf7303aa625d44d7be87c05b4f06.png
例如主题https://github.com/korilin/hexo-theme-particle，基本上其他主题也是这些配置。
b84a550d287689bd0f2fc09a1561d8bc.png
详细的配置自己摸索吧！说白了就是html\javascript\css的配置！

2.3 重新提交部署

把配置部署完后，就可以重新提交部署了！执行这三个命令

hexo clean
hexo g
hexo d -g

出现这个界面说明成功部署：
4a8043185ca24af7d2dfe29c69a52551.png
访问用户名.github.io，出现以下界面说明成功：
258180ed10ef4bfba50afcc3d9ed15c2.png

叁 好用的功能

以主题https://github.com/korilin/hexo-theme-particle为例。

3.1 点击特效

对于点击特效的设置，我们可以百度一些感觉不错的点击特效，在主题的布局上加对应代码，例如下面这个特效，可以直接在layout.ejs（这里这个文件只是针对particle主题的，其他主题原理差不多）追加以下代码：

<script>
    let body = document.getElementsByTagName('body')[0];
    body.addEventListener('click', (e) => {
        let contentArr = ['✊','😘','😍','😊','😭','😡','😋','👍','🐷','😱','💷','💵','×','🆗','№','⭐','🌙','♥','💴','☀','🐎','🐂','🐏','√'];
        let randomNum = function (n) {
            return Math.floor(Math.random() * n)
        }
        let span = document.createElement('span');
        span.innerHTML = `${contentArr[randomNum(contentArr.length)]}`;
        span.style.color = `rgb(${randomNum(256)},${randomNum(256)},${randomNum(256)})`;
        span.style.position = 'absolute';
        span.style.top = `${e.pageY}px`;
        span.style.left = `${e.pageX}px`;
        span.style.transition = 'all 1s ease';
        span.style.zIndex = 20000;
        body.appendChild(span)
        setTimeout(()=>{
            span.style.top = span.offsetTop - 100 + 'px';
            span.style.opacity = 0;
            setTimeout(()=>{span.remove()},700)
        },0)
    })
</script>

605ba89f2702e8b54e84dc3027fbac76.png

3.2 流星背景

和点击特效一样，在layout.ejs追加以下代码：

<canvas id="background" style="position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:-1"></canvas>
<script src="/js/background.js"></script>

5441aedb6c3fe2d8513f933c0e0c8f26.png
89439e4cc7aa81929a41782bfd4b22fc.png
对于background.js，可以在这里下载：background.js

3.3 看板娘

首先在这里将Live2D模型Clone到本地，选择一个喜❤️欢的模型（注意必须是 Cubism3 版本的，在 live2d_3 文件夹下）复制到\themes\particle\source\model
f80e33197f4becf824063632e5c1d992.png

接着需要在layout.ejs的<head>追加以下代码：

<script src="https://cdn.staticfile.org/pixi.js/4.6.1/pixi.min.js"></script>

3b82c9bee90cccbccd9610e4e1f23f9b.png

然后再在layout.ejs的<body>追加以下代码：

<div id="L2dCanvas" style="position: relative;"></div>
<script src="/js/live2d.min.js"></script>
<script src="/css/live2d.css"></script>
<script>
    var v = new Viewer({
        width: 240,
        height: 325,
        right: "0",
        bottom: "0",
        basePath: "/model",
        role: "这里是模型名",
        mobile: true,
    });
</script>

c8979e111db464701216f4e1b03eb8cd.png
41d01f81463233d0d8a3a22de284fcd1.png
对于live2d.min.js、live2d.css和模型model，可以在这里下载：

3.4 音乐播放器

和点击特效一样，在layout.ejs追加以下代码：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
<script src="/js/APlayer.min.js"></script>
<div id="aplayer" class="aplayer" data-id="3027446018" data-server="netease" data-type="playlist" data-autoplay="true" data-fixed="true" data-listfolded="true" data-order="random" data-theme="#F58EA8"></div>
<script src="/js/Meting.min.js"></script>

6e713275fdb655e81e857240c365f329.png
586805f282eb2a351d6914cb2f9e5d03.png
对于APlayer.min.js、Meting.min.js，可以在这里下载：

3.5 网站运行时间的设置

和点击特效一样，不过为了将该特效居中在页面最下面，我们可以在footer.ejs追加以下代码：

<div>
    <!-- 网站运行时间的设置 -->
    <span id="timeDate">载入天数...</span>
    <span id="times">载入时分秒...</span>
    <script>
        var now = new Date();
        function createtime() {
            var grt= new Date("01/10/2020 00:00:00");//此处修改你的建站时间或者网站上线时间
            now.setTime(now.getTime()+250);
            days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
            hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
            if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
            mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
            seconds = (now - grt ) / 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 = "本站已安全运行 "+dnum+" 天 ";
            document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
        }
    setInterval("createtime()",250);
    </script>
</div>

347f8ea8c7cc745f23c12a6c859fa0d7.png
df6fa535288e7205067d8d6659cbe8be.png

3.6 视频播放器

直接追加代码：

<div class="video-play">
    <video class="video-iframe" controlslist="nodownload" poster="<%- theme.video_background %>" controls>
        <source src="/video/risingwaves.mp4" type="video/mp4">
    </video>
    <!-- allowfullscreen是全屏播放 -->
    <!-- <iframe class="video-iframe" src="/a.mp4" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
    </iframe> -->
</div>

肆 好用的插件

4.1 全网站字数统计

安装插件npm install hexo-wordcount --save，接着和网站运行时间的设置一样，在footer.ejs追加以下代码：

<div class="theme-info">
    <div class="powered-by"></div>
    <span class="post-count">博客全站共<%= totalcount(site) %>字字</span>
</div>

526e59c03269dc36161dfa6ec25b0114.png
0b6876881b16c9bb7a8561d1701786cb.png

4.1 hexo文章后台管理

安装hexo-myadmin的插件

npm install --save hexo-myadmin

996cf65fae890e061c12e60086c04442.png
启动服务

hexo s

测试登录，网页输入localhost:4000/admin，自动跳转到下图显示页面即安装成功！
8b7cebbc72c329f0a8f0c3cc53195b62.png

由于是英文，我们可以修改node_modules\hexo-myadmin\dist\index-eaa6e6fa36.js文件的英文单词就行：
8743e024bb1a33bd1061094066a99011.png
直接附上我修改后的：index-eaa6e6fa36.js

安装完后，安全性还是有点低的，所以我们可以修改一些配置：

  • 设置密码保护

在_config.yml文件中添加：

admin:
    # 登录的用户名
    username: 你自己设置登录名
    # 登录的密码，需要去获取bcrypt安全密钥地址是这个：https://bcrypt-generator.com/
    password_hash: 你想设置密码生成的bcrypt bcrypt哈希值
    # 用于使 cookie 安全，尽可能复杂
    secret: dasdafdrvfsvsafdsf42343rddsa

fe2248920da4fe5fae06228ab7055af2.png
93bb72445c86d79f571927fc6ae3d9c3.png
设置并放置好之后，重新hexo s或hexo server操作，然后会进入登录页面，这里的密码是未加密前的密码！
d489da817fe6a2ff2ae3a5ff279d0cee.png

  • 修改admin等关键路径

平时我们使用sofa可以通过admin等关键字搜索到我们的后台，我们可以修改后台路径，即修改node_modules\hexo-myadmin\server下的index.js，需要修改的字段为下图的admin：
263e09e5f855a9807ce3886ea6372552.png
当然我们还可以修改主页index.html和登录页面login.html的名字，修改后名字后记得修改代码里的页面名字：
48a4a4f22c7ead36a7402f95b7343fb0.png
794939c1f84215128598509b7debebcd.png

伍 参考

avatar
小C&天天

修学储能 先博后渊

kyrieee tonyd0g ruyueattention

今日诗句