博客搭建

记录我是如何搭建本博客的一些关键过程。

Hexo

环境准备

参考

安装 node ，检测安装成功：

1
2
node --version
npm --version

安装 hexo ：

1
npm install -g hexo-cli # -g 全局安装

在某个新建文件夹里：

1
2
3
hexo init 博客名
cd 博客名
npm install

创建一篇文章：(删除暴力删就行，修改也是)

1
hexo new '文章标题'

那么文章就在 /source/_posts/ 下，进行编辑即可

保存，生成静态网页：

1
hexo g #generate

本地启动：

1
hexo s #server

部署到 github ，先创建名为 用户名.github.io 的代码仓库，然后在项目 _config.yml 进行配置：

大概需要在代码仓库 setting 里开一下 page 选项

1
2
3
4
5
deploy:
  type: git
  repo:
    github: git@github.com:lr580/lr580.github.io
  branch: master

安装插件：(参见帖子回复 这里)

1
npm install hexo-deployer-git --save

运行指令进行 commit 操作：

1
hexo g -d #deploy

在 20 分钟内按理来说 github 会进行更新。

进行一些全局修改：

1
2
3
4
5
6
7
8
url: https://lr580.github.io/project #你的根目录变成了project；可以删掉project，那就少一层
title: lr580's blog
subtitle: ''
description: 'QwQ'
keywords:
author: lr580
language: zh
timezone: ''

主题安装

以 miho 为例。主题网页在 这里

按照 README.md 指示进行安装和配置即可

一般来说，需要：

1
git clone 主题github代码仓库 themes/主题名字

如：(建议用git的ssh协议，不要用https协议)

1
$ git clone git@github.com:WongMinHo/hexo-theme-miho.git themes/miho

修改全局 _config.yml ，如：

1
theme: miho

然后进到 themes/主题名字/_config.yml ，望文生义地修改对应东西即可。

主题调教

miho

主题下载在这里

友链图标

使用的是 awesome font ，只要是 这个网站 能找到的名字都可以扔进去

加载可能需要时间，所以首次加载可能会发现图裂，刷新几次就好了

修改目录排版

找到 source/css/_partial/article.styl ，在 .post-toc-wrap 下面加上 overflow-y: scroll 即可（为了美观，可以同时改一些别的属性，比如 width, max-height 之类的）

比如修改为：(仅展示修改了的代码)

1
2
3
4
5
6
7
.post-toc-pos
  left: calc(47% - 660px)

.post-toc-wrap
  overflow-y: scroll //这行是最关键的，其他都是细节修改
  width: 220px
  max-height: 500px

LaTeX支持

综合参考 这里 和 这里 ，记得每篇帖子都要加上开头那个地方 mathjax: true

如果预览测试看不到数学公式，考虑清理浏览器缓存如 ctrl+f5

图片支持

使用图床。例如 sm.ms

也可以不用，方法是：_config.yml 开启：

1
post_asset_folder: true

在这之后，每个帖子会在同目录下生成一个与帖子同名的目录(没有就自行创建)，所有 Markdown 格式的图片的路径根目录都在该目录下。

为了适应 typora 配置，可以在其内部再新建一个名为 img 的目录，然后把图片放到里面。实现本地和网上都能预览。

只需要网上能预览的话，以帖子 标题名ab 为例，在 _posts/标题名ab/c.png，则直接打 [](c.png) 这样的路径即可。

也可以用支持缩放的 img html 标签如：<img src="image-20221102125457754.png" alt="image-20221102125457754.png" style="zoom:100%;" />，路径同理。如果上面不行可以用这种办法或将能行。

显然是支持中文路径的。特殊符号和空格没有测试过。

代码块支持

全局配置 _config.yml ：

1
2
3
4
5
6
highlight:
  enable: true
  line_number: true
  auto_detect: true
  tab_replace: ' '
  wrap: true

如果没有反应，可以重新编译试试：

1
2
3
hexo cl #hexo clean
hexo g
hexo s

具体的代码块配置望文生义即可，比如行号。而 auto_detect 是指没有标明代码块代码时自动检测，关了也行。

评论支持

使用 gitalk 。

参考文献： issue错误解决 副代码 主代码 错误解决2

不使用 gitment 是因为我没折腾成功。不使用其他是因为其他评论插件好像本来就死的差不多了，因为众所周知的原因，匿名交流是被限制的

可能需要安装，如：(大概是这么个指令，也有可能不用)

1
npm i gitalk --save

然后去注册一个 github oauth 在这里

其中 Homepage URL 是完整博客地址，如 https://lr580.github.io/ ， Authorization callback URL ，如果不是自己买域名的话，即用 github 给的那个的话，填跟上面一样就行了。（如果是自己买域名的话自行百度，我没有细看），然后其他随便填

然后创建后会得到 Client ID 和 Client secrets，先记下来。

然后动手创建一个 gitalk 页面。找到自己的主题(如果本来就有就不用创建了)，在 layout 文件夹下，找到帖子渲染对应的源码 (我的是 layout/_partial/article.ejs )，然后找到一个合适的位置(自己肉眼观察代码推断)，看到是页尾，就加上：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<div id="gitalk-container"></div> <!--评论区实际地方-->
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<script type="text/javascript">
    var id = md5(window.location.pathname) //怕太长了
    var gitalk = new Gitalk({
        clientID: '<%= theme.gitalk.ClientID %>',
        clientSecret: '<%= theme.gitalk.ClientSecret %>',
        id: id,
        repo: '<%= theme.gitalk.repo %>',
        owner: '<%= theme.gitalk.owner %>',
        admin: ['<%= theme.gitalk.admin %>'], 
        labels: '<%= theme.gitalk.labels %>'.split(',').filter(l => l),
        perPage: <%=  theme.gitalk.perPage %>,
     pagerDirection: '<%= theme.gitalk.pagerDirection %>',
     createIssueManually: <%=  theme.gitalk.createIssueManually %>,
     distractionFreeMode: <%=  theme.gitalk.distractionFreeMode %>,
    })
    gitalk.render('gitalk-container')
 //document.write(id) //调试输出
</script>

当然根据需要，也可以嵌套在 if 里，如：

1
2
3
<% } else if (theme.gitalk.enable) { %>
 放刚刚的东西
<% }%>

然后去到主题的 _config.yml ，添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
gitalk:
  enable: true
  ClientID: 6e8ca84614e8d6de868c #上文获得的ID
  ClientSecret: bd819bxxxx #上文获得的secret
  repo: lr580.github.io #代码仓库
  owner: lr580
  adminUser: lr580
  labels: # issue 的标签
    - gitalk
  perPage: 15 # 每页展示条数
  pagerDirection: last # 排序方式是从旧到新（first）还是从新到旧（last）
  createIssueManually: false #如果当前页面没有相应的 isssue ，且登录的用户属于 admin，则会自动创建 issue。如果设置为 true，则显示一个初始化页面，创建 issue 需要点击 init 按钮。
  distractionFreeMode: false #是否启用快捷键(cmd|ctrl + enter) 提交评论.
  language: zh-CN

配好之后，重新生成页面即可：

1
2
hexo g
hexo s

对代码仓库，要开启 issue (默认是开的)，其实直接用论坛代码仓库就好了。注意 issue 不能是 close 的，不然不能作评论。原理上一篇 issue 对应一个帖子的评论区。每条 issue 里的回复就是帖子的一条回复。

注意，自己的 labels 是啥，那么新建 issue 就要加这个 labels (上文是 gitalk) ，且再加上 id ，即新建一个有两个 label (分别是：gitalk 和 md5 加密的玩意)的，这样创建一个 open issue 就等于手动开启了一个帖子的评论区。

帖子调教

多个tags

参考

需要用 latex 无序列表格式隔开。单个无所谓。如：

1
2
3
4
tags: 
 - md
 - 香农先修班
 - 算法

也可以用 tags: [标签1, 标签2, ... , 标签n ]

其他

帖子开头的标题：

1
2
3
4
5
---
title: 部署与二次开发SCNUOJ
date: 2023-09-02 17:00:07
tags: [分享,心得,香农先修班]
---

如果与帖子的文件名不一样，文件名用作 URL，帖子标题用作首页显示和正文显示。

日期以 date 为准，更新帖子不影响日期。

最后更新： 2023年12月21日 14:55

原始链接： https://lr580.github.io/2022/05/12/%E5%BB%BA%E7%AB%99%E8%BF%87%E7%A8%8B%E8%AE%B0%E5%BD%95/