简述

因为想总结一下博客的搭建过程，但是忘记都改了什么地方，所以干脆直接重新搭建一次好了

基本安装

首先我们要在设备上安装nodejs，我这里使用的是termux环境，其他linux环境和windows环境应该大同小异，执行以下命令以安装基础包：

pkg install nodejs

然后安装hexo，这里是hexo官方的安装方法

npm install hexo-cli -g
hexo init blog #blog只是一个名字，可以改成自己想要的
cd blog
npm install
hexo server #启动hexo博客

主题安装

这里安装了freemind-bithack这个主题，后面我们会改动这个主题，使其更加实用
安装命令：

cd blog/theme #进入博客的theme目录
git clone https://github.com/Ares-X/hexo-theme-freemind.bithack
mv hexo-theme-freemind.bithack freemind.bithack #将名字改为freemind.bithack
npm install hexo-tag-bootstrap --save
npm install hexo-generator-search --save

接下来我们启用这个主题，执行以下命令：

hexo new page categories #创建分类页面
nano source/categories/index.md 
#修改页面下的index.md，在头部加入一行
layout: categories #与页面名称相同
mv index.md index.html #将md后缀改为html

类似的还有tags和about页面，也是按照相同的方法修改
然后在hexo根目录修改（下划线）config.yml，将其中的theme一项改为freemind.bithack
然后将主题目录里的（下划线）config.yml移动到根目录并且改名：

cp themes/freemind.bithack/_config.yml ./_config.freemind.bithack.yml

hexo clean && hexo g && hexo s 本地启动就可以看效果了

主题修改

这个主题虽然还算不错，但是还有很多问题，并且有一些功能需要我们自己加上去

分级分类

这个主题最麻烦的就是分级分类，本来hexo是支持分级分类的，但是这个主题不知道为什么把分级分类给关了，这里需要我们手动修改一些文件来实现
首先我们先修改侧边栏的分类，进入主题目录，找到layout/（下划线）widget/category.ejs这个文件，将其后缀加上.bak备份，然后创建同名文件（不要bak），写入以下内容：

<% if (site.categories.length){ %>
<div class="widget tag">
  <h3 class="title"><%= __('categories') %></h3>
     <%- list_categories(site.categories) %> 
</div>
<% } %>

这样侧边栏就有分级目录了，我们再来修改layout/categories.ejs这个文件，同样我们先备份，然后找到row page这一类，将其内容改成上面的，即修改成这样：

<div class="row page">

        <% if (theme.widgets.length) { %>
            <div class="col-md-9">
        <% } else { %>
            <div class="col-md-12">
        <% } %>

        <div id="top_search"></div>

<% if (site.categories.length){ %>
<div class="widget tag">
  <h3 class="title"><%= __('categories') %></h3>
     <%- list_categories(site.categories) %>
</div>
<% } %>
</div>

然后先备份后改动（下划线）partical/post/category.ejs文件，在li标签处修改，如下：

<li>
    <%- cats.join(' ') %>
<% if (site.categories.length){ %>
<div class="widget tag">
  <h3 class="title"><%= __('All Categories') %></h3>
     <%- list_categories(site.categories) %>
</div>
<% } %>
  </li>

保存启动hexo即可
注意：还有一种分级目录的js代码，这里也给出

<% if (theme.widgets.length) { %>
	    <div class="col-md-9">
	<% } else { %>
	    <div class="col-md-12">
	<% } %>

	<div id="top_search"></div>

     <% if (site.categories.length){ %>
        <div class="category-block">
                <h3 class="asidetitle"><%= __('categories') %></h3>
                        <%- list_categories(site.categories) %>
        </div>
<% } %>

加密博客

有时一些文章涉及到src，src涉及到某些公司，为了保密等原因，需要为博客加密，hexo很好地支持这个功能，只需要安装一个模块就好了：

npm install --save hexo-blog-encrypt

模块安装好之后我们只要在头部添加password就可以给单篇文章加密，比如：

title: example
password: password

其他给多篇文章加密的方法这里不在赘述，可以参考：https://xsin.gitee.io/2019/01/11/hexo-blog-encrypt/
可能会出现输了密码没反应的情况，查阅资料得知，这是因为该模块对http的支持不好，导致在内网环境下无法使用，同时，因为浏览器无条件信任http所以使用回环地址访问是可以的，这个问题不需要担心，只要上传到github后使用https就迎刃而解了。详见这篇文章：https://d0n9x1n.dev/post/619/

代码高亮

我们可以修改（下划线）config.yml文件来选取prism这个更好看的代码高亮方式，修改示例如下：

syntax_highlighter: prismjs
#highlight.js
highlight:
  enable: false
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: true
  preprocess: true
  line_number: true
  tab_replace: ''

个性化

修改（下划线）config.yml以及主题的yml配置可以使得个性化，这里只讲一些重要的配置，请将以下给出的地方修改好：

# Pagination
## Set per_page to 0 to disable pagination
per_page: 0
pagination_dir: page

接入Github Pages

这个因为比较麻烦，就只写一点点注意事项了：
1.执行命令：npm install hexo-deployer-git --save
2.修改（下划线）config.yml：

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: git@github.com:hustler0000/hustler0000.github.io.git
  branch: main

其他

1.评论可以使用gitalk
2.浏览量统计可以使用不蒜子
因为博客还没有很多人看所以就不设以上两项了
3.像主题目录下的post目录里面，有很多可以修改使得博客更美观的地方，css也是，以后有机会再慢慢研究
4.可以修改（下划线）config.freemind.bithack.yml（主题配置文件）来使得没有配置的页面重定向，避免不必要的错误：
5.有空可以设置一下TOC目录，以及研究TOC相关内容

menu:
  - title: Archives
    url: archives
    intro: "All the articles."
    # icon: "fa fa-archive"
  - title: Categories
    url: categories
    intro: "All the categories."
    # icon: "fa fa-folder"
  - title: Tags
    url: tags
    intro: "All the tags."
    # icon: "fa fa-tags"
  - title: About
    url: about
    intro: "About me."
    # icon: "fa fa-user"
  - title: RSS
    url: archives           #这里就让没有配置的RSS界面跳转到archives了
    intro: "Subscribe me."
    # icon: "fa fa-user"

写作技巧

文件头格式

---
title: 文章标题
date: 2023-01-01 01:01:00 #日期和时间，需要写两位
tags: [笔记,编程语言] #标签
categories:
- 编程语言     #有几种写法，像这种写法只会把文章分类到
- C          #“编程语言——C”这一个分级分类下

categories:
- [M1,s1]    #这样会将文章同时分类到M1——s1
-[M2,s2]    #和M2——s2两个分级分类目录下

password: password #如需加密单篇文章，可以这样设置密码
---

插入视频

插入视频也很简单，直接插入一个html语句即可：

<video src='/videos/flying.mp4' type='video/mp4' controls='controls'  width='100%' height='100%'>
</video>

#视频应存在/source/videos目录下，html认为source目录即为根目录，width和height参数可以控制视频窗口的大小，其他参数可以自己尝试

插入文件下载

同样的，插入文件下载也非常简单：

<a href="/files/firmware.apj">你想要显示的名字</a>

#同上文件应放在/source/files目录下，html认为source目录即为根目录

插入表格

这里给出一个表格示例并解释：

|器件|pixhawk接口1|pixhawk接口2|         #这一行是表头，可以写想要的项
|:---:|:---:|:---:|                   #这一行规定了表格的形式，这里即全部居中
|蜂鸣器|buzzer|——|                     #从这一行开始都是表格内容
|安全开关|switch|——|
|GPS|GPS|I2C|
|6pin线数传（连接机载电脑）|telem 2|——|
|电流计|power|——|

插入图片

这里给出一个示例：

![](/images/spcapture/cap1.JPG)
# 这里引用了images目录下的spcapture目录下的一张图片
# 因为如果将所有图片都存在images目录下会很不方便
# 于是采用了为每篇文章创建一个文件夹，并且将图片放入相应文件夹的方案

写一个简单的目录

说是一个目录，其实就是在文章的开头写超链接，点击跳转到文章的标题

[超链接的名字](####标题和对应的井号)

# 注意标题和井号之间不要隔开

踩坑总结

1.正文内容如果有太多类似百分号这些符号，建议使用代码块括起来，不然会引发错误
2.修改重要的文件时记得备份
3.博客只有你想不到没有做不到

2024的第一篇文章:)
有好多偷懒的地方:(

本博客采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议(CC BY-NC-SA 4.0) 发布.

Prev Home Next

从零开始的hexo博客搭建

简述