hexo + next + github配置blog

2020-01-30

字数统计: 12.2k | 阅读时长≈ 50 分钟

安装各种东西

node.js：Node.js官网链接点击下载安装即可。
Git： Git官网链接点击下载安装即可。
deployer-git：命令行里输入npm install hexo-deployer-git --save。
Hexo：
1. 准备好一个用于存放博客文件的文件夹（比如Github），在该文件夹的根目录下运行刚才装完git以后会出现的git-bash.exe（这里其实直接用cmd进入命令行然后进入博客文件夹也可以）；
2. 输入命令npm install -g hexo-cli

这里补充一点：安装的版本很重要，如果hexo和node中某个版本较高，后面配置的时候会冲突，使用hexo -v可以查看版本。我目前使用的版本如下：

hexo: 4.2.0
hexo-cli: 4.2.0
os: Windows_NT 10.0.19043 win32 x64
node: 12.20.0
v8: 7.8.279.23-node.45
uv: 1.40.0
zlib: 1.2.11
brotli: 1.0.9
ares: 1.16.1
modules: 72
nghttp2: 1.41.0
napi: 7
llhttp: 2.1.3
http_parser: 2.9.3
openssl: 1.1.1g
cldr: 37.0
icu: 67.1
tz: 2019c
unicode: 13.0

初始化Hexo

创建Hexo工程：接着刚才那个命令输入hexo init blog，这里会在这个文件夹下新建一个blog文件夹，如果把blog换成其他名字也是可以的。
新建Post：命令行里进入blog文件夹（cd blog），输入hexo new “HelloWorld”，这里会在 /blog/sources/_post/ 目录下生成 HelloWorld.md 文件，可以进去打开编辑内容，在之后想写新博客也是通过这个命令生成文件，或者直接把写好的博客文件放到该目录下。
生成静态文件：命令行里输入hexo generate，也可以简单地写成hexo g。这样就使用 Hexo 引擎将 Markdown 格式的文件解析成可以使用浏览器查看的 HTML 文件，HTML 文件存储在 blog/public 目录下。
运行Hexo服务器：命令行里输入hexo server，也可以简写成hexo s。这时命令行会有一些提示，其中有个地址，一般是http://localhost:4000/ ，在浏览器里打开这个地址，就能看到博客网站是什么样的了。不过这个时候还只是一个本地博客。

安装主题

Hexo 提供了默认主题 landscape，主题的位置在 blog ->themes 文件夹下。主题根据自己喜好可以在网上找到，通过 Git 进行相应的下载。接下来以Next主题为例。

还是在blog文件夹下，命令行里输入git clone https://github.com/theme-next/hexo-theme-next themes/next，这里是用git clone把next主题下载并存放到themes -> next 文件夹里。需要注意的是，git clone这个命令下载起来特别慢，但浏览器直接去github下载的话速度还行，所以也可以直接下载解压改文件夹的名字并放到对应的地方。
修改 /blog/config.yml 文件，将其中的 theme 对应的内容改成 next（比如最初是theme: landscape，现在要换成next主题，就改成theme: next）。如果文件夹的名字不是next，或者用了其他主题等，这里的theme字段改成对应的文件夹名字就行。
接下来可以输入hexo g 和hexo s来查看新的本地博客。

建立Github博客

在Github官网注册账号并登陆，点首页右上角的加号新建一个仓库(Repository)，仓库的名字为用户名.github.io（比如我的是kun-bin.github.io），这里一定要是这个格式，不然之后没法直接访问博客网站。然后其他的都是默认内容，点create repository就可以了。如果仓库名字输入错了，之后可以在github上这个仓库页面的setting选项中修改。
打开 /blog/config.yml文件修改deploy 属性(注意“：”之后有空格 ) 否则配置失败。
1
2
3
4
deploy:
type: git
repository: https://github.com/kun-bin/kun-bin.github.io.git
branch: master
注意这里repository要替换成自己的仓库地址。
初始化本地仓库：在blog文件夹下的命令行输入git init
连接远程仓库：命令行接着输入git remote add origin https://github.com/kun-bin/kun-bin.github.io.git，这里记得把地址改成自己的仓库地址，第一次的时候会要求输入github的账号密码。
发布博客页面：命令行里输入hexo clean && hexo g && hexo d，这等于一次性执行了清空、刷新、部署三个命令，此时在浏览器里已经可以通过用户名.github.io访问博客了，在github的这个仓库里也能看到/blog/public文件夹里的内容。
可选：hexo d只是把public文件夹中的内容（也就是静态网页）传到了github的仓库里，应该还可以建立分支把博客配置文件整个传到github上，不过我没做这一步。

关于next主题的配置

目前在blog文件夹里有一个config.yml文件，我们称之为站点配置文件；而在themes/next文件夹里也有一个config.yml文件，称之为主题配置文件。

基本信息：打开站点配置文件，找到site模块，可以修改博客标题、作者、描述、语言等等信息，

title: 标题
subtitle: 副标题
description: 描述
author: 作者
language: 语言（简体中文是zh-Hans）
timezone: 网站时区（Hexo 默认使用您电脑的时区，不用写）

菜单配置：初始网页只有两个菜单：home和archive，可以打开主题配置文件，找到menu模块，把需要的菜单前面的#删了，并注意把||前面的空格删了，不然可能会点了菜单以后报错（类似Cannot GET /tags/%20/这样的错）。

menu:
  home: /|| home                          //首页
  archives: /archives/|| archive          //归档
  categories: /categories/|| th           //分类
  tags: /tags/|| tags                     //标签
  about: /about/|| user                   //关于
  #schedule: /schedule/|| calendar        //日程表
  #sitemap: /sitemap.xml|| sitemap        //站点地图
  #commonweal: /404/|| heartbeat          //公益404

这里||后面的单词是指菜单对应的图标，可以自己修改。此外，日程表那个模块，因为实际上调用的是谷歌日历，国内显然没法用，所以不建议使用。

建立菜单对应的页面：还是在blog文件夹下打开命令行，输入hexo new page "categories"，然后在~/blog/source 文件夹中即可看到categories文件夹，打开里面的index.md文件，设置如下（注意：后面要加空格）：
1
2
3
title: categories
date: 2020-01-30 08:54:26
type: "categories"
tags页面也是一样的方式来建立。
主题风格：一共有四个风格可以选择，打开主题配置文件找到Scheme Settings，把想用的风格前面的#去掉，比如我这里用了Mist。
1
2
3
4
5
# Schemes
# scheme: Muse
scheme: Mist
# scheme: Pisces
# scheme: Gemini
侧栏设置：侧栏设置包括：侧栏位置、侧栏显示与否、文章间距、返回顶部按钮等等，打开主题配置文件找到sidebar，按自己的喜好选择，把想要的那一项的#去掉或者false改成true即可。
头像设置：主题配置文件找到avatar，修改avatar后面的路径为自己头像的路径，头像文件要放到themes/next/source/images中，比如头像文件名为header.jpg，就把那一行写成avatar: /images/header.jpg。如果前面有#就去掉#。
添加搜索：
1. 还是blog文件夹的命令行里，输入npm install hexo-generator-searchdb --save。
2. 打开站点配置文件找到Extensions在下面添加
  1
  2
  3
  4
  5
  6
  # 搜索
  search:
  path: search.xml
  field: post
  format: html
  limit: 10000
3. 打开主题配置文件找到Local search，将enable设置为true。
还有很多能配置的，比如侧边栏头像下面有github链接，点击页面出现爱心符号，博客背景动态变化等，可自行搜索。

关于ayer主题的配置

今天（2021.02.26）为了让网页中的公式能稍微好一些，我换了一个新主题ayer。

安装：在博客文件夹的目录下进命令行输入git clone https://github.com/Shen-Yu/hexo-theme-ayer.git themes/ayer，如果因为网络原因等问题导致GitHub没法用，可以改用码云：git clone https://gitee.com/mirrors/ayer.git themes/ayer；
博客配置文件中的主题改成ayer；
进主题配置文件进行自己需要的修改，比如调整logo、友情链接、启用公式等等；
需要注意的是，这个主题的分类（categories）、标签（tags）等文件和next主题稍微不一样，需要改一下，以分类为例，进入...\source\categories文件夹，可以看到一个index.md文件，打开以后无论里面有什么内容，都彻底改成以下的：
1
2
3
4
5
6
"---"(这里的双引号是为了正确显示，实际用的时候没有，最后一行的双引号同理)
title: categories
date: 2020-01-30 08:54:26
type: "categories"
layout: "categories"
"---"
相应地，其他用到的文件夹里的index.md也这样改。
安装好以后进行hexo clean等等操作，就可以看到新主题的博客了，不过可能和我的屏幕尺寸有关，在文章页面中，固定的目录栏有些靠右，以至于目录显示不完整，而浮动的目录栏有些靠左了，会挡住正文，当目录很长时，文章几乎没法看了。这时需要打开主题中对目录栏的配置，\themes\ayer\source-src\css\_partial文件夹中的tocbot.styl文件，第一部分.tocbot的right属性从-28rem改成-25rem，这样固定目录栏就相对偏左一些，能显示完整了；第六部分.is-position-fixed的right属性从6rem改成0，这样浮动目录栏就会贴着右边，从而不挡左边了；
按上面这个操作改完以后发现网页的显示并没有变化，接着打开\themes\ayer\source\dist文件夹中的main.css文件，然后直接搜索-28rem或者tocbot等关键词，找到以后把-28和6改成合适的数值（-25和0），重新部署网站就会发现目录栏变合适了。
经过漫长的使用，忽然发现右边那个目录，在白天模式下，背景是半透明的那种效果，会挡住正文的一些内容，而黑夜模式下背景就透明了，什么也挡不住。经过一番研究，发现想要白天模式也透明背景，就需要修改\themes\ayer\source-src\css\_partial文件夹中的tocbot.styl文件，找.is-position-fixed字段中的background-color，把它的值修改为transparent，接着同样是进\themes\ayer\source\dist文件夹中的main.css文件，先定位到刚才tocbot那里，然后往后很近的位置能看到is-position-fixed字段，修改其中的background的值为transparent，这里不能直接全文检索is-position-fixed，因为有好多这个属性，必须精确修改tocbot的这个属性。保存后重新部署就可以看到效果了。
又是漫长的使用，发现hexo在渲染公式的时候，会把一些符号识别成html标记，然后就没法正确渲染，网上查到的方法都是针对下划线、斜体等，解决方法是安装mathjax并修改转义符配置，但我出问题的是大于号和小于号，查到的方法都没啥用，最终找到一个方法，是在写公式的时候，不直接用尖括号来表示大于小于，而是用tex符号，即\lt表示小于，\gt表示大于，这样就不会出问题了，也不影响本地markdown的渲染。

GitHub风格日历、标签云、分类雷达图的配置

由于next主题的css文件是swig格式，而网上查到的GitHub日历等都是ejs格式的，因此在用next主题时没能成功配置好日历等；改用Ayer主题后，该主题就是ejs格式的，因此现在添加了日历等内容。这一部分所有涉及到的下载链接都是在别人网站里复制的，如果链接失效可以直接在网上搜文件名来下载，也可以在我的GitHub项目中的主题文件里找已经修改和配置好的相关内容。

需要下载配置的文件

下载echarts.min.js，放到主题文件夹中的\source\js文件夹中，
下载matery.css，放到主题文件夹中的\source\css文件夹中。
打开\layout\_partial\head.ejs文件，在head标记中添加一行：

<link rel="stylesheet" type="text/css" href="/css/matery.css">

这一行直接加到<head>的下一行就好，在我的文件里是加到了第10行，如下图：

GitHub风格日历

下载post-calendar.ejs，放到\layout\_widget文件夹中，如果没有这个文件夹就自己新建一个。
打开post-calendar.ejs文件，看第7行的内容是否为<script type="text/javascript" src="/js/echarts.min.js"></script>，如果不是则改成这样。

在打算添加文章日历的地方，输入以下这行代码

<%- partial('_widget/post-calendar') %>

例如我要加到归档页面（archive），就打开\layout\archive.ejs文件，进行添加。不过Ayer主题的这个文件里就下面这行内容：

<%- partial('_partial/archive', {pagination: config.archive, index: true}) %>

如果直接在这一行前面或者后面添加日历代码，显示效果会不太好，而且会被左边的侧栏挡住，因此找到\layout\_partial\archive.ejs文件，在添加日历代码的时候可以多尝试几个位置，看哪个合适。我打算把日历放到“归档”这两个字的下面，文章列表的上面，于是整个文件的内容如下：

<section class="outer">
  <% if (theme.ads && theme.ads.length != 0){ %>
  <%- partial('ads') %>
  <% } %>
  <% if (theme.broadcast.enable && pagination == 2){ %>
  <%- partial('_partial/broadcast') %>
  <% } %>
  <article class="articles">
    <%
    var title = '';
    if (page.category) title = page.category;
    if (page.tag) title = "#" + "&nbsp" + page.tag;
    if (page.archive) {
      if (page.year) title = page.year + (page.month ? '/' + page.month : '');
      else title = __('archive_a');
    }
    %>
    <% if (pagination !== 2){ %>
    <h1 class="page-type-title"><%- title %></h1>
    <% } %>
    <% if (pagination == 2){ %>
    <% page.posts.each(function(post){ %>
    <%- partial('article', {post: post, index: true}) %>
    <% }) %>
  </article>
  <% } else { %>
  <% var last; %>
  <% page.posts.each(function(post, i){ %>
  <% var year = post.date.year(); %>
  <% if (last != year){ %>
  <% if (last != null){ %>
  </div>
  </div>
  <% } %>
  <% last = year; %>
  <%- partial('_widget/post-calendar') %>
  <div class="archives-wrap">
    <div class="archive-year-wrap">
      <a href="<%- url_for(config.archive_dir + '/' + year) %>" class="archive-year"><%= year %></a>
    </div>
    <div class="archives">
      <% } %>
      <%- partial('archive-post', {post: post, even: i % 2 == 0}) %>
      <% }) %>
      <% if (page.posts.length){ %>
    </div>
  </div>
  <% } %>
  <% } %>

  <% if (page.total > 1){ %>
  <nav class="page-nav">
    <%
        var prev_text = theme.nav_text.page_prev;
        var next_text = theme.nav_text.page_next
      %>
    <%- paginator({
        prev_text: prev_text,
        next_text: next_text
      }) %>
  </nav>
  <% } %>
</section>

最后呈现的效果如下：

标签云

下载tag-cloud.ejs，放到\layout\_widget文件夹中，如果没有这个文件夹就自己新建一个。
打开tag-cloud.ejs，和前面那个日历一样，检查是否有<script type="text/javascript" src="<%- theme.jsDelivr.url %><%- theme.libs.js.echarts %>"></script>，如果有则替换为<script type="text/javascript" src="/js/echarts.min.js"></script>。如果没有就忽略。
在需要添加标签云的地方，输入代码：<%- partial('_widget/tag-cloud') %>
例如我要将这个添加到原本的标签页面，则找到\layout\tags.ejs文件，添加标签云代码。需要注意的是，Ayer主题本身会在这个页面自动生成标签，因此需要把tags.ejs文件中原本的标签内容那行去掉，整个文件改成了以下内容：
1
2
3
4
5
6
<section class="outer">
<% if (site.tags.length){ %>
<h1 class="page-type-title"><%= __('tags') %></h1>
<%- partial('_widget/tag-cloud') %>
<% } %>
</section>
此外，标签云本身的标题和Ayer主题中的标题会重复显示，而我更喜欢Ayer本身那个标题，所以编辑了tag-cloud.ejs文件，把第25行的<i class="fas fa-tags"></i>  <%= __('postTagTitle') %>中的postTagTitle改成了空格，之所以没直接去掉这一行，是因为觉得空一行好看一些。
整体效果如图，和Ayer主题本身的标签相比，要好看一些。标签的颜色也可以在tag-cloud.ejs文件中自行修改。

分类雷达图

下载category-radar.ejs，放到\layout\_widget文件夹中，如果没有这个文件夹就自己新建一个。
依旧是检查替换<script type="text/javascript" src="/js/echarts.min.js"></script>，如果没有就忽略。
在需要添加分类雷达图的地方，输入代码：<%- partial('_widget/category-radar') %>

例如我要添加到原本的分类（category）页面，就找到\layout\categories.ejs，这里我不打算去掉原本的分类内容，因此不删除原本的代码，直接添加雷达图代码，修改后的文件整体如下：

<section class="outer">
  <% if (site.categories.length){ %>
    <h1 class="page-type-title"><%= __('categories') %></h1>
    <div class="categories-box">
      <%- list_categories() %>
    </div>
  <% } %>
  <%- partial('_widget/category-radar') %>
</section>

如果觉得这个雷达图和主题格格不入，想给它加个边框，则可以在刚才的categories.ejs文件最开头的地方粘贴以下代码：

<style type="text/css">
        #contentss {
        position: relative;
        width: 800px;
        height: 1200px;
        max-height: 1200px;
        margin-bottom: 15px;
        margin-top: 15px;
        text-align: center;
        border: 0;
        border-radius: 10px;
        color: rgba(0, 0, 0, .87);
        background: #fff 50%;
        background-size: cover;
        box-shadow: 0 15px 35px rgba(50, 50, 93, .1), 0 5px 15px rgba(0, 0, 0, .07);
        margin:0 auto;
        }
</style>

然后下面的雷达图代码修改为：

1
2
3

<div id="contentss">
<%- partial('_widget/category-radar') %></div>`或者`<%- partial('_widget/post-calendar') %>
</div>

边框的大小样式颜色等等可以自行修改。不过Ayer主题不加边框就挺合适了，因此我没加。

整体效果如下（这个截图是一开始没注意，把雷达图加到了标签页面，但是不影响雷达图的展示；此外，很显然分类名字过长就会显示不完整，这应该和雷达图的大小有关，懒得改了）：

如何发布新的博客

在blog文件夹的命令行里输入hexo new "标题"，然后进入/blog/sources/_post/找到对应的markdown文件就可以开始写了，也可以直接在这个文件夹下新建一个markdown文件，然后添加对应的文件头。写博客的时候根据需求在文件头里填写tags和categories的信息，然后hexo会自动建立好tags和categories的内容并给文章分类。

文件头信息如下编写：
1
2
3
4
5
6
---
title:
date:
tags:
categories:
---
写好以后保存，然后还是blog文件夹的命令行，输入hexo clean && hexo g && hexo d，就发布成功了。
如果一个文章想设置多个标签，那么在编写文件头信息的时候，要按下面的方式写：
1
2
3
4
5

tags:
- tag1
- tag2
...
这里tags: 后面一定要换行，下面的-后面注意有空格。

一些后续问题

今天（2020.03.16）突然发现当博客内容多起来以后，首页会有翻页，而翻页图标显示是乱的，查了一下发现要改/Blog/themes/next/layout/_partials/pagination.swig这个文件，内容整体替换成下面的：

{%- if page.prev or page.next %}
 <nav class="pagination">
{{
  paginator({
    prev_text: '<i class="fa fa-angle-left" aria-label="'+__('accessibility.prev_page')+'"></i>',
    next_text: '<i class="fa fa-angle-right" aria-label="'+__('accessibility.next_page')+'"></i>',
    mid_size: 1,
    escape: false
  })
}}
 </nav>
{%- endif %}

SSH登录配置

每次hexo d的时候都要输入用户名和密码会很麻烦，所以今天做了一下这个。

首先进入博客目录比如C:\Users\LiKun\Documents\GitHub\blog，在这个目录下右键然后打开git bash，如果右键没这个选项那就去开始菜单之类的地方打开git bash然后一点点切目录；
输入ls -al ~/.ssh检查目前是否有已经生成过的密钥文件，这个命令会输出.ssh里的文件，如果其中有id_rsa.pub或者id_dsa.pub，那就直接看第五步，如果这俩都没有就继续第三步；
输入ssh-keygen -t rsa -C "your_email@example.com"，这里注意把自己的邮箱替换进去，看到提示Enter file in which to save the key (/c/Users/you/.ssh/id_rsa):时，直接按回车；
然后会要求输入密码，这个密码要记住，在第一次使用该ssh密钥时系统会要求输入它，也就是说后面会用，不过这里有个坑；
输入clip < ~/.ssh/id_rsa.pub，即可把密钥内容复制到剪贴板，或者自己进.ssh找到密钥文件复制也行；
浏览器打开Github页面，右上角头像那里的下拉菜单有个Settings，点开以后左边找到SSH and GPG keys，点开以后右边的界面会列出目前所有的密钥，如果之前没做过那这里是空的；
SSH Keys那里点New SSH Key，名字随便设置，密钥部分粘贴第五步复制的那个，然后保存；
接下来回博客目录，找到_config.yml，也就是站点配置文件，把最下面deploy属性中的repository:内容修改成git@github.com:你的name/你的username.github.io.git的样子，比如：
1
2
3
4
deploy:
type: git
repository: git@github.com:likun1208/likun1208.github.io.git
branch: master
这里有的地方也把repository:写成repo:，应该都行。
然后命令行里hexo d，会要求输入之前第四步里的那个密码；
我本来以为，第四步那个密码是输入一次之后就不用再输入的，然而尝试几次以后发现是每次都要输入，查了很多网页，有说配置ssh的config文件，有说修改host，总之都不太对，最终才发现，这一切都是因为第四步设置了密码，如果第四步不设置密码，一路按回车，就没有任何问题了！ssh似乎没提供修改密码的方式，所以就需要重新输入ssh-keygen -t rsa -C "your_email@example.com"，生成新的密钥文件并复制，然后去github的settings那里删旧密钥加新密钥，其他配置不用改动。

分支同步

今天研究了一下把博客所有文件上传到github仓库的一个分支，这样可以在多个电脑上同步写博客而不需要用U盘来回复制。首先，如果前面没有自己定义分支的名字，那么我们的网站内容是存放在master分支的，在这一步，我们会新建一个hexo分支，来存放博客文件（指主题文件和博客markdown文件等）。具体来说，当我们需要在多个电脑之间迁移博客时，会受影响的文件如下：

文件（夹）	说明
scaffolds/	博客文章的模版
source/	所有博客文章，以及about、tags、categories等page
themes/	网站的主题
.gitignore	在push时需要忽略的文件和文件夹
_config.yml	站点配置文件
package.json	依赖包的名称和版本号

在github网站上找到自己的博客项目，新建hexo分支，并设置为主分支；
在本地博客文件夹里打开git bash，输入git clone git@github.com:用户名/用户名.github.io.git，把hexo分支复制到本地，这里的用户名请自行替换；
在博客文件夹里找到.gitignore文件，如果没有这个文件就自己新建一下，注意这个文件开头就是.，整个名字就是.gitignore，然后打开它里面写入以下内容，表示同步的时候忽略这些文件：
1
2
3
4
5
6
7
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
注意，如果你之前克隆过theme中的主题文件，那么应该把主题文件中的.git文件夹删掉，因为git不能嵌套上传，最好是显示隐藏文件，检查一下有没有，否则上传的时候会出错，导致你的主题文件无法上传，这样你的配置在别的电脑上就用不了了；
然后在git bash里输入以下命令，即可完成hexo分支的上传：
1
2
3
git add .
git commit –m "add branch"
git push
这里的add branch可以改成其他内容，表示这次上传的说明注释；
到此就完成了上传，这样换电脑以后，按照前面的内容把git和hexo以及其他相关东西都安装配置好以后，通过git把这个项目文件下载到本地，就又可以编辑博客了；
如果多个电脑同时在写博客，时不时需要同步博客内容，就不需要git clone下载整个文件，只需要git pull把远程文件同步到本地即可；
总结一下就是，每次写博客之前，首先git pull把github上的博客内容下载到本地；写完新的内容，首先进行hexo clean, hexo g, hexo d把内容渲染成网页并发布，接着git add ., git commit -m "description", git push把新增和修改的内容也上传到github，这样就可以实现白天在实验室写，晚上回宿舍写的操作了；
以上操作也可以通过github的桌面版程序来完成，还挺方便。

新版live2d

前面的内容提到了hexo本身可以安装插件并设置live2d的开关，打开以后加载对应模型就能显示了，但是在实际使用的过程中，我发现它支持的是旧版本的live2d，无法显示新版本的，因此研究一番试图加载新版本的。

首先简单说明一下，目前市面上的live2d模型有3个版本，最古老的是2.0版本，它只能用旧版的live2d cubism生成（官网没有对应的版本了），其次是3.0版本，它能用目前所有版本的Live2D Cubism软件生成，最新的是4.0版本，能用最新的live2d cubisim制作。虽然可以用同一个软件制作，但是3.0和4.0是不同的，差别在于sdk版本。它们在live2d的模型配置文件（.model.json）中的version都是3，然而用live2d cubism viewer打开查看moc3文件的信息就能发现sdk版本的差异了，这也导致网页渲染的时候要用不同的东西。

3.0版本的处理

在查找资料的过程中，我首先找到的是众多3.0版本的资料，对比一番可以发现虽然大家原理和代码语法都差不多，但这个是集大成作，它的行数最少，使用起来很简单，只需要找到主题文件夹中layout目录下的layout.ejs文件（index.ejs应该也可以），然后在最后的</body>前面添加以下几行代码：

<!-- Live2DCubismCore -->
<script src="https://fastly.jsdelivr.net/gh/Weidows-projects/live2d-moc3/dist/live2dcubismcore.min.js"></script>
<!-- Include Pixi. -->
<script src="https://fastly.jsdelivr.net/gh/Weidows-projects/live2d-moc3/dist/pixi.min.js"></script>
<script src="https://fastly.jsdelivr.net/gh/Weidows-projects/live2d-moc3/dist/live2d.min.js"></script>

<script>addEventListener("DOMContentLoaded",function(){let models=[{left:"0px",bottom:"0px",basePath:"https://fastly.jsdelivr.net/gh/likun1208/Live2d_modules@gh-pages/assets",role:"test05261",background:"",opacity:1,mobile:false,},];new Live2dLoader(models)});</script>

代码中前3行是加载live2d相关的js文件，第四行是加载模型文件，这一步需要把自己要用的模型上传到GitHub，或者用别人Github中已有的文件。具体来说，需要在Github上建立一个仓库用来存模型文件，然后把模型文件放到仓库中，模型文件夹的名字与模型的model3.json文件的名字一定要保持一致，比如我这里的模型文件夹是gongzi，那么里面的文件一定是gongzi.model3.json，其他文件名不重要。

最后在js代码中，basePath设置为如上述代码所示的"https://fastly.jsdelivr.net/gh/likun1208/Live2d_modules@gh-pages/assets"，因为我的模型是在仓库的assets文件夹中，如果直接放仓库里就不要加assets了，前面的gh-pages是分支名，没分支可以不加，再往前的Live2d_modules是仓库名，likun1208是用户名，https://fastly.jsdelivr.net/gh/是cdn加速，不详细介绍了。总之把basePath按这个方式设置好以后，再把role设置成模型文件夹的名字，也就是我这里的gongzi，必要的步骤就完成了，其他可设置的一系列参数在前面提到的参考文档中可以看到。

在把这些准备好以后，要记得把hexo本身的那个live2d关掉，不然两个都会出现。最后部署博客页面就能看到模型了。

4.0版本的处理

但是很可惜我想用的模型是4.0版本的，前面那段js会报错，在发现自己重做3.0版本模型特别艰难之后，我走上了寻找4.0解决方案的道路，并查到了这个项目，它能自动识别模型版本并用对应的方式渲染，哪个版本都兼容，还可以放多个模型来回切换，这非常好。

需要注意的是，如果模型中有expression等字段，它是无法解析的，虽然不影响模型显示，但是对应的表情动作都不会生效。所支持的字段可以查看项目中给的模型例子然后照着写。

具体在hexo博客中的使用，首先需要把项目文件整个都下载好，把其中的dist和model这两个文件夹复制到主题文件夹中的source文件夹下，把其中的waifu-tips.js和waifu-tips.json这两个文件复制到前述source文件夹中的js文件夹下，现在的文件目录如下（没提到的文件未列出）：

- blog
    -themes
        -ayer(主题文件夹)
            -source
                - dist
                - model
                - js
                    waifu-tips.js
                    waifu-tips.json

文件都放好以后，打开waifu-tips.js，在前面有一行'modelUrl': 'model', // 存放模型的文件夹路径，末尾不需要斜杠，把这一行修改为'modelUrl': '/model', // 存放模型的文件夹路径，末尾不需要斜杠（在model前面加/，不然网站解析的时候就不是绝对路径了）；打开前面提到过的主题文件夹中layout目录下的layout.ejs文件，在最后的</body>前面加下列内容：

<div id="waifu">
    <div id="waifu-message"></div>
    <div class="waifu-tool">
        <span class="icon-next"></span>
        <span class="icon-home"></span>
        <span class="icon-message"></span>
        <span class="icon-camera"></span>
        <span class="icon-volumeup"></span>
        <span class="icon-volumedown"></span>
        <span class="icon-about"></span>
        <span class="icon-cross"></span>
    </div>
    <canvas id="live2d2" style="top:150px"></canvas>
    <canvas id="live2d4" style="top:150px"></canvas>
</div>
<!--    src 中改为你存放的路径    -->
<script src="/dist/live2d_bundle.js"></script>
<script async type="module" src="/js/waifu-tips.js"></script>

关于waifu-tips.js中模型列表等各类内容的配置直接参考项目说明即可。

需要注意的是，这里<canvas id="live2d2" style="top:150px"></canvas>和它下一行的内容中，style=top:150px是我自己加的，正常模型不需要加这个。我加它的原因是要用的达达利亚模型画布比模型本身大一圈，自己没法修改，只能调整模型位置让它贴到页面边缘。不确定如果换个尺寸的显示屏，这里会不会又出问题，总之姑且先这样了。

接下来重新部署网站，就能看到模型了。

鼠标穿透问题

在用了很久以后，我发现模型总是会挡住页面的可点击内容，比如目录、文章标题等，估计是因为用的模型尺寸大一圈，有很高一片空白区域。这有些影响使用，于是想试着把模型改成可以鼠标穿透点击的效果。经过各种尝试，目前发现的一个解决方案确实有效，但是会导致无法显示模型的工具栏（有切换模型和回到首页等功能），也就是说只能固定显示一个模型，操作方法如下：打开waifu-tips.js，找到如下代码块：

const waifuStyle = `
#waifu {
${live2d_settings.waifuEdgeSide}px;
position:fixed;
bottom:0;
z-index:998;
font-size:0
}

在最后一行font-size:0末尾加个分号，然后增加一行：pointer-events: none，修改后的代码如下：

const waifuStyle = `
#waifu {
${live2d_settings.waifuEdgeSide}px;
position:fixed;
bottom:0;
z-index:998;
font-size:0;
pointer-events: none
}

这实际上就是把整个模型改成了不响应鼠标事件的效果，自然就能让鼠标点击穿透到页面的其他链接，但也同时导致工具栏无法响应。目前还没找到其他既能显示工具栏又能鼠标穿透的方法，先这样吧。

添加待办清单

今天（2023年10月18日）一时兴起，想在博客里添加个ToDo List，找到一个参考链接，是直接写了个html放到对应的位置，并设置不渲染这个html。虽然这不是我想要的效果，但也勉强能用，于是记录一下整个操作过程：

首先新建对应的菜单，这一步参照前面的内容，在主题配置文件中的menu字段加一行即可；

其次新建菜单对应的文件夹，也是参照前面内容，文件夹里只放一个index.html，其中的内容如下：

	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ToDo List</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <style>
        body{
            margin:0;background-color:#fafafa;font:14px 'Helvetica Neue',Helvetica,Arial,sans-serif}
        h2{margin:0;font-size:12px}
        a{color:#000;text-decoration:none}
        input{outline:0}
        button{margin:0;padding:0;border:0;background:0;font-size:100%;vertical-align:baseline;font-family:inherit;font-weight:inherit;color:inherit;outline:0}
        ul{padding:0;margin:0;list-style:none}
        .page-top{width:100%;height:40px;background-color:#db4c3f}
        .page-content{width:50%;margin:0 auto}
        .page-content h2{line-height:40px;font-size:18px;color:#fff}
        .main{width:50%;margin:0 auto;box-sizing:border-box}
        .task-input{width:99%;height:30px;outline:0;border:1px solid #ccc}
        .task-count{display:flex;margin:10px 0}
        .task-count li{padding-left:10px;flex:1;color:#dd4b39}
        .task-count li:nth-child(1){padding:5px 0 0 10px}
        .action{text-align:center;display:flex}
        .action a{margin:0 10px;flex:1;padding:5px 0;color:#777}
        .action a:nth-child(3){margin-right:0}
        .active{border-bottom: 2px solid #629A9C}
        .tasks{background-color:#fff}.no-task-tip{padding:10px 0 10px 10px;display:block;border-bottom:1px solid #ededed;color:#777}.big-title{color:#222}.todo-list{margin:0;padding:0;list-style:none}
        .todo-list li{
            position:relative;
            font-size:16px;
            border-left: 5px solid #629A9C;
            box-shadow: 0 1px 2px rgba(0,0,0,0.07);
            margin-bottom: 16px;
        }
        .todo-list li:hover{background-color:#fafafa}
        .todo-list li.editing{border-bottom:0;padding:0;}
        .todo-list li.editing .edit{display:block;padding:13px 17px 12px 17px;margin:0 0 0 43px}
        .todo-list li.editing .view{display:none}
        .toggle{
            text-align:center;
            width:16px;
            height:16px;
            position:absolute;
            top:2px;
            left: 15px;
            bottom:0;
            margin:auto 0;
            cursor: pointer;
        }
        .todo-list li label{
            white-space:pre-line;
            word-break:break-all;
            padding:15px 60px 15px 15px;
            margin-left:45px;
            display:block;
            line-height:1.2;
            transition:color .4s
        }
        .todo-list li.completed label{
            color:#d9d9d9;
            text-decoration:line-through
        }
        .todo-list li .destroy{
            display:none;
            text-align:center;
            width:16px;
            height:16px;
            position:absolute;
            top:0;
            right:15px;
            bottom:10px;
            margin:auto 0;
            cursor: pointer;
            font-size:28px;
            color:#cc9a9a;
            transition:color .2s ease-out
        }
        .todo-list li .destroy:hover{color:#af5b5e}
        .todo-list li .destroy:after{content:'×'}
        .todo-list li:hover .destroy{display:block}
        .todo-list li .edit{display:none}
        .todo-list li.editing:last-child{margin-bottom:-1px}
    </style>
</head>
<body>
<div class="page-top">
    <div class="page-content">
        <h2>任务计划列表</h2>
    </div>
</div>
<div class="main">
    <h3 class="big-title">添加任务：</h3>
    <input
            placeholder="例如：吃饭睡觉打豆豆；  提示：+回车即可添加任务，双击列表标题即可编辑"
            class="task-input"
            type="text"
          v-on:keyup.enter="enterFn"
            v-model="todo"
    />
    <ul class="task-count">
        <li>{{unComplete}}个任务未完成</li>
        <li class="action">
            <a :class="{active:visibility!=='unCompleted'&&visibility!=='completed'}" href="#all">所有任务</a>
            <a :class="{active:visibility==='unCompleted'}" href="#unCompleted">未完成的任务</a>
            <a :class="{active:visibility==='completed'}" href="#completed">完成的任务</a>
        </li>
    </ul>
    <h3 class="big-title">任务列表：</h3>
    <div class="tasks">

        <span class="no-task-tip" v-show="!list.length">还没有添加任何任务</span>
        <ul class="todo-list" v-show="list.length">
            <li class="todo"
                v-for="item in filterData"
                v-bind:class="{completed:item.isComplete,editing:item===edtorTodos}"
            >
                <div class="view">
                    <input class="toggle"
                          type="checkbox"
                          v-model="item.isComplete"
                    />
                    <label @dblclick="edtorTodo(item)">{{item.title}}</label>
                    <button
                            class="destroy"
                            @click="delFn(item)"
                    ></button>
                </div>
                <input
                        class="edit"
                        type="text"
                        v-focus="edtorTodos===item"
                        v-model="item.title"
                        @blur="edtoEnd(item)"
                        @keyup.enter="edtoEnd(item)"
                        @keyup.esc="cancelEdit(item)"
                />
            </li>
        </ul>
    </div>
</div>
<script>
    //存取localStorage中的数据
var store = {
    save(key,value){
        window.localStorage.setItem(key,JSON.stringify(value));
    },
    fetch(key){
    return JSON.parse(window.localStorage.getItem(key))||[];
    }
}
//list取出所有的值
var list = store.fetch("storeData");

var vm = new Vue({
    el:".main",
    data:{
        list,
        todo:'',
        edtorTodos:'',//记录正在编辑的数据,
        beforeTitle:"",//记录正在编辑的数据的title
        visibility:"all"//通过这个属性值的变化对数据进行筛选
    },
    watch:{
        //下面的这种方法是浅监控
      /*list:function(){//监控list这个属性，当这个属性对应的值发生变化就会执行函数
          store.save("storeData",this.list);
      }*/
      //下面的是深度监控
        list:{
            handler:function(){
                store.save("storeData",this.list);
            },
            deep:true
        }

    },
    methods:{
        enterFn(ev){//添加任务
            //向list中添加一项任务
            //事件处理函数中的this指向的是当前这个根实例
            if(this.todo==""){return;}
                this.list.push({
                    title:this.todo,
                    isComplete:false
                });
                this.todo = "";
        },
        delFn(item){//删除任务
            var index = this.list.indexOf(item);
            this.list.splice(index,1)
        },
        edtorTodo(item){//编辑任务
            //编辑任务的时候记录编辑之前的值
            this.beforeTitle = item.title;
            this.edtorTodos = item;
        },
        edtoEnd(item){//编辑完成
            this.edtorTodos="";
            // this.cancelEdit = this.edtorTodos;
        },
        cancelEdit(item){//取消编辑
            item.title = this.beforeTitle;
            this.beforeTitle = '';
            this.edtorTodos='';
        }
    },
    directives:{
        "focus":{
            update(el,binding){
                if(binding.value){
                    el.focus();
                }
            }
        }
    },
    computed:{
        unComplete(){
        return  this.list.filter(item=>{
                return !item.isComplete
            }).length
        },
        filterData(){
            //过滤的时候有三种情况 all completed unCompleted
            var filter = {
                all:function(list){
                    return list;
                },
                completed:function(list){
                    return list.filter(item=>{
                        return item.isComplete;
                    })
                },
                unCompleted:function(list){
                    return list.filter(item=>{
                        return !item.isComplete;
                    })
                }
            }
            //如果找到了过滤函数，就返回过滤后的数据，如果没有找到就返回所有的数据
            return filter[this.visibility]?filter[this.visibility](list):list;
        }

    }
});
function hashFn(){
    var hash = window.location.hash.slice(1);
    vm.visibility = hash;
}
hashFn();
window.addEventListener('hashchange',hashFn);
</script>
</body>
</html>

接着在博客配置文件中，找到skip_render字段，冒号后面加入这个清单网页的地址，例如todo\*.html；
最后clean+g+d就完成了。

这个方法做出来的网页，是把添加的内容浏览器缓存了，也就是说，如果其他人打开我的博客添加了自己的内容，那么也只有添加者能看到，同样我添加的内容别人也看不到，甚至换个浏览器或者清缓存也会丢失内容。而且也没找到方法把它嵌入到我的主题里，这使得它和其他页面相比，非常不统一。此外，如果需要从这个待办页面返回博客，还得在代码里添加跳转博客地址的链接，例如<h2 bref=链接>返回博客</h2>。

鉴于这个网页外观和操作方式我都不太满意，也没找到更合适的方法，而且日常大多数时候会用跨平台软件来记录待办事项，最终决定去掉这个功能了。

添加相册

输入hexo new page photos新建相册的页面，并注意在主题配置文件里添加对应的侧边栏；

进入photos文件夹，修改其中的index.md如下：

---
title: Gallery

albums: [["imgurl", "imgcaption"], ["imgurl", "imgcaption"]]
---

然后把要添加的图片放到photos文件夹中，并把index.md文件夹中的imgurl和imgcaption修改成图像的路径和标题，路径要注意带上级文件夹，和后缀名，例如我的路径就是photos/ff14-伊修加德.png。
部署后就能看到照片了，之后再加新的照片就也是复制进来，然后打开index.md文件，在albums的方括号里添加新的链接和标题。

目前是在ayer主题下添加的评论，用了Valine，设置流程如下：

注册leancloud，需要填邮箱、密码等信息，注册完之后回首页，进入控制台，创建应用，选免费的开发版；
创建好应用后，进入应用—>设置—>应用凭证，可以看到AppID和AppKey；
打开ayer的主题配置文件，拉到最下面，找到leancloud字段，把它下面的enable设置为true，app id和app key分别设置成上一步页面中看到的ID和Key；
在leancloud下面有valine字段，把enable设置为true，avatar和placeholder分别表示评论头像和评论区的提示语，可以根据喜好修改，不改也行；
保存后重新生成网站就好了。

修改主页

因为这个博客被作为个人主页了，感觉页面跳转后直接出首页的文章列表不太合适，出个主页更好一些，所以研究了一下怎么让博客地址直接跳转到简历的页面。

打开博客配置文件_config.yml，找到其中的index_generator字段，该字段下原本的path内容是空的，现在填一个空文件夹，例如：
1
2
3
4
index_generator:
path: '/homepage/'
per_page: 10
order_by: -date
注意这里不需要真的去新建一个文件夹，只需要保证这个名字是博客目录中没出现过的就可以，以及注意文件夹名称首尾的斜杠也不能丢。
打开source文件夹，新建一个index.md，这个文件中存放要作为主页的内容即可，比如我就把简历的内容直接复制过来了。注意这里必须叫index这个名字，不能改别的。
正常编译再打开就能发现主页变了。
我希望改进的是：现在显示的markdown页面也没法搞照片等美化效果，而且原本的首页我也挺喜欢，更希望保留博客首页的同时，能打开后先出现简历，以及最好可以搞成html网页的方式。
思考了一下，觉得应该这么做，首先搞清楚原本的主页是怎么生成的，然后让主题配置文件里的home对应到这个主页的文件，再修改hexo的主页为简历页面，这样就好了，不过目前还没想到具体怎么实现。

关于GitHub改名后博客需要修改的内容

GitHub上找到该仓库，修改仓库名。
博客配置文件（\blog\_config.yml）中所有涉及地址等内容的都需要修改为新的博客名。
所有本地仓库的.git文件夹中找到config文件，修改其中的url信息（即存本地博客的和存图的等等都需要改）。
如果主题的一些js中有用到自己仓库的文件，那么也需要修改相应的存放路径。

用其他仓库的page放博客

因为主页的页面想搞成单纯的个人介绍，和博客分割一下，所以需要把博客放到新的仓库。流程如下：

GitHub新建仓库，名字是blog。
可以看到新仓库的ssh对应的url应该是git@github.com:kunlii/blog.git，因此在本地找到博客的_config.yml以及.git中的config，修改这两个文件中涉及ssh登录的url为新的内容。
博客配置文件_config.yml中，前面url那里如下修改，注意root要改成/blog，不然页面之间的跳转会出错。
1
2
url: https://kunlii.github.io/blog
root: /blog/
主题配置文件_config.yml中，“网站图标和侧边栏logo”和“封面配置”这两部分涉及的网站logo以及封面图的链接需要改成/blog/images/ayer.png以及/blog/images/cover1.png，这里很奇怪，其他图标等都不需要改，只有这俩图得改。补充一下，favicon也得改。
本地先分别hexo d以及git push，主要是前者，把我们的网页传到这个仓库中。
进入仓库的settings页面，在左侧边栏找到Pages，在右边修改Build and deployment部分：
1. Source中选择Deploy from a branch，这里如果选GitHub action，则可以搞在线编译部署，不过有点麻烦，以后再研究吧。
2. Branch选master/root，这里因为本地博客编译后的文件是传master分支的，如果传了别的分支则改成对应的分支。
3. Custom domain那里设置一下希望用的域名，比如kunlii.github.io/blog/，保存后，就可以用这个域名访问博客了。
经过很长时间的使用，我才忽然发现改了以后的博客没加载日历、标签云和雷达图等，检索和询问claude之后，意识到是js文件的引用路径出了问题，它没识别到根路径变了，于是加载js文件的路径就错了，漏掉了/blog/，claude给出了好几种解决方案，经过对比我发现还是直接一步到位指定路径比较靠谱，目前找到的主题文件夹中需要修改的如下：
1. /layout/_partial/head.ejs中确认以下这句是加了根路径的：<link rel="stylesheet" type="text/css" href="/blog/css/matery.css">；
2. /layout/_widget/post-calendar.ejs中确认以下这句是加了根路径的：<script type="text/javascript" src="/blog/js/echarts.min.js"></script>；
3. /layout/_widget/tag-cloud.ejs中同样确认echarts.min.js，这个文件中如果没这句话就忽略这条；
4. /layout/_widget/category-radar.ejs中同样确认echarts.min.js，这个文件中如果没这句话就忽略这条；
5. 注意，虽然category-radar、post-calendar和tag-cloud这三个文件在其他各页面也有相似的路径，但是改了echarts之后，不用管其他，日历、标签云和雷达图已经能正常显示了；
6. /layout/layout.ejs中拉到最下面，修改与live2d相关的两个路径，修改后的内容：<script src="/blog/dist/live2d_bundle.js"></script>和<script async type="module" src="/blog/js/waifu-tips.js"></script>
7. \source\js\waifu-tips.js中的const live2d_settings里面，'modelUrl'改为'/blog/model'，'tipsMessage'改为`’/blog/js/waifu-tips.json’
8. \source\model\gongzi\gongzi.model3.json