StoneのBLOG

生活这种事情，从来都是自我陶醉

0%

Hexo+Next博客修缮笔记

发表于 分类于
记录Blog的维护，以备自己随时查找。

经过多次的环境变迁，为了能让博客环境迁移更无脑一些，多在这里写下更新的步骤。

Overview

关于博客内容书写

  • 2020/11/20 : 对新建文章的模板进行了修改
  • 2021/02/19 : 把博客的配置及源文件上传到了Github仓库分支方便多台PC整理博客
  • 2021/03/21 : 对新电脑上的博客重新配置遇到了好多问题
  • 2022/05/29 : 更改博客字体
  • 2024/11/15 : 更新工作流内容

代码部分

果然UE4中的有些代码不会给你高亮，看起来就很不舒服，有时间填一下坑。

格式书写备忘

记不住全部的书写方式啊，主要还是记录的频率太低，经常会忘掉，把可能经常会用到的一些格式记录在这里。

文字添加颜色

写法：

1
<span style="color: red">这里是想要变色的文字</span>

效果：
这里是想要变色的文字

内容折叠

写法：

1
2
3
4
<details><summary>缩略内容</summary>

(上面空一行)这里是想要展开的实际内容。
</details>

1
2
3
4
5
// 这里的mark默认的颜色是黄色，我查了一下修改这个颜色要修改css文件，我不会，所以放弃
<details><summary><mark>缩略内容</mark></summary>

(上面空一行)这里是想要展开的实际内容。带mark
</details>

效果：

缩略内容

这里是想要展开的实际内容。

缩略内容

这里是想要展开的实际内容。带mark

添加Table

写法：

1
2
3
4
| Row1 | Row2 | Row3 |
| ---- | ---- | ---- |
| Str1 | Str2 | Str3 |
| Str4 | Str5 | Str6 |

1
2
3
4
5
6
7
8
| Left align | Right align | Center align |
|:-----------|------------:|:------------:|
| This       | This        | This         |
| column     | column      | column       |
| will       | will        | will         |
| be         | be          | be           |
| left       | right       | center       |
| aligned    | aligned     | aligned      |

效果：

Row1 Row2 Row3
Str1 Str2 Str3
Str4 Str5 Str6
Left align Right align Center align
This This This
column column column
will will will
be be be
left right center
aligned aligned aligned

图片

写法：

1
2
3
![替代文字](图片链接 "图片标题")

![替代文字](图片链接)

网址链接

写法：

1
2
3
4
5
// 会打开新的Tab页面（比较推荐）
<a href="目标网址" target="_blank">表示文字</a>

//
[表示文字](目标网址)

注释掉内容

1
<!-- 要注释掉的内容 -->

目录索引

简单搜了一下但是没有什么比较满意的方案，还得是使用HTML的方式，但是我对html的语法真的只是一知半解。
我用了这种方式，MarkdownPreview没有问题，但是在分发到网站上之后，Post的右边文章目录那里段落标题会出现两遍… 懒得调查了…

使用前提是定义好要索引的标题:

1
<h1 id="loc_段落标题ID">段落标题</h1>

将段落标题加入到目录索引

1
[段落标题](@loc_段落标题ID) // 这里要@上面定义的ID

关于博客构建

博客构建过程中遇到的问题

博客工作流

开发分支:

分支名称 说明
SourceBranch 博客内容的源码分支。所有文章的修改都会提交到这个分支上
master 博客发布用的分支，使用发布命令自定上传，更新会有延迟

操作流程：

  1. git pull origin SourceBranch 更新源码分支内容，如果本地环境是最新则可以跳过
  2. 添加或者修改 _post 下的博文源码，并保存
  3. hexo d -g -m "comment" 更新并发布最新的博客内容（推荐加上浅显易懂的注释）到master分支
  4. git push origin SourceBranch 将博文内容上传到云上保存

博文压缩

我之前貌似有整过这个叫做gulp的东西。而且连gulpfile.js这个文件也存在。

因为用起来麻烦就忘了。

执行

hexo g && gulp

就会压缩public中的静态资源文件。

定义新建文章的模板

因为每次都要手动添加新的项目，心血来潮找了找有没有修改新建文章模板的方法

修改code代码块自定义样式

\themes\next\source\css\_custom\custom.styl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Custom styles.
code {
    color: #ff7600;
    background: #fbf7f8;
    margin: 2px;
}
// 大代码块的自定义样式
.highlight, pre {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
}
.highlight, code, pre {
    border: 1px solid #d6d6d6;
}

我加入了上面的代码，原先是什么都没有的…

看了下效果，嗯，感觉什么都没变。

寝るか

博客转移（物理意义上）

将自己的博客的内容转移到新的电脑遇见了不少的问题，在这里稍作记录。

首先是如何使用双分支管理博客的源文件和生成的静态网页文件。SourceBranch用来管理博客的源文件，master则用来上传博客的静态文件。

平常的工作流程一般是先pull origin SourceBranch，嘛如果有在两个电脑上进行更新的话。先对源文件及source/_post文件夹下面的源文件进行博文的添加和书写。其次是hexo d -g -m "comment"对源文件进行镜头网页的生成和网页部署，即生成网页并推送到Github上。最后则是将本地的SourceBranch的内容改动commit结束。

前提是自己的部署Deploy文件会默认将部署推送到远程的master的分支上。

然后就是这个过程中遇到的大坑。首先是Window上需要运行Hexo的环境构建，Hexo的运行需要NodeJs，但是过高的版本Hexo并不支持。我自己选的版本是nodejs.v12.14版本。太新的版本没有办法将本地生成的网页部署到（推送）远程。安装完后基本上用到的命令就是npm install安装所有的node_module(注意要在博客的根目录，也就是这个文件夹所在的目录),npm install hexo-cli -g（Hexo不好用的时候重新安装Hexo）。

其次是主题的版本，我用的next的主题但是又不能随便找一个网上的主题，只好沿用自己之前的主题，把之前的电脑的主题文件整个文件夹压缩转移到了新电脑，然后运行hexo clean重新配置生成网页，才解决了网页里出现了不知道是哪国语言的尴尬问题。

删除文章

需要删除文章的时候先执行：

1
hexo clean

然后删掉Source下的源文件md,然后重新生成部署。

更新记录

  • 2021/05/05 前来更新

对于上面的问题，由于这之前遇到了博客界面格式没有了的问题，迫不得已逐个解决了。首先是上面的next主题文件的语言问题，主要是中文的解析没对上的原因。具体的解决问题的操作的是去next主题的language文件夹中找到自己在博客的整体_config.yml文件中设置的语言是否存在。

我上面网页中出现了不知道哪国语言的问题，经过查看之后发现,_config.yml文件中设置的语言是zh-Hans,而主题中的语言没有这个，解决方案是把其中的zh-CN.yml重命名为zh-Hans.yml，文字的问题就解决了。

参考文章：

然后就是格式的问题，我在本地运行的环境(hexo s)中博客的格式都会完美的显示，但是部署到Github之后格式就没有了，尝试了很多，最后是从CSS文件找不到路径的问题找到了答案。

原因则是网页的URL设置有些问题：

1
2
3
4
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://stonelzp.github.io
root: /

修改之后的结果。

参考链接:

  • 2021/06/01 更新

博客换了电脑之后，主题虽然没变但是好多设定都丢了，包含我用的很顺手的本地搜索。实在是太常用了，没有的话很困扰，就前来解决了。

需要检查的有两处：

  1. hexo-generator-search插件是否安装
  2. 本地搜索是否开启

第一个直接搜命令使用npm安装就好。

1
$ npm install hexo-generator-search --save

第二个去主题的配置文件找到local_search条目

1
2
3
# Local search
local_search:
  enable: true

  • 2022/05/29 更新

平常看博文感觉自己的文字有些太大了，就想试着尝试修改一下字体的设置，顺便改了字体的格式。

直接去Next的主题的_config.yml下开启:

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
# Global font settings used for all elements inside <body>.
global:
  external: true
  family: Noto Serif SC
  size: 14px

# Font settings for site title (.site-title).
title:
  external: true
  family:
  size:

# Font settings for headlines (<h1> to <h6>).
headings:
  external: true
  family:
  size:

# Font settings for posts (.post-body).
posts:
  external: true
  family:

# Font settings for <code> and code blocks.
codes:
  external: true
  family: Roboto Mono

修改结束后，使用hexo clean && hexo g && hexo s命令重新生成项目，顺便本地检查一下。

参考资料：