鉴于我自己的创作欲，准备正式地经营我的博客XD

0xF categories

categories: {
  - Geek tech: 安全弱相关技术
  - Software analysis technology: 软件分析技术
  - CTF_practice：CTF 比赛wp及日常题目
  - CTF_Theory: CTF 中的理论知识
  - IOT: 物联网相关技术
}

0x0 说在前面:

环境：Win11
参考资料：CodeSheep师傅在b站上的视频 & Next官方文档

在配置的过程中经常忘记自己配了什么，导致这篇博客可能不是很全，后续换电脑重配环境时再补充XD

0x1 Hexo初始化一个博客

首先，我们需要在Node.js官网中下载nodejs

其次，在终端输入npm install -g cnpm --registry=https://registry.npm.taobao.org

👆这一步其实可有可无，只不过换到淘宝镜像源以后cnpm的安装速度更快一些

输入cnpm -install -g hexo-cli安装hexo框架，这样hexo就安装好啦XD

建立一个空文件夹，并在命令行按序输入hexo init,这样本地的博客就搭建好啦XD

打开自己的Github，创建一个新仓库，名字为个人名称.github.io

在终端输入cnpm install --save hexo-deployer-git安装部署器

打开站点配置文件，修改Deployment下的配置

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

继续在空文件夹打开终端，输入hexo g和hexo d博客就能部署到远端啦XD

这里我之前是配置过账户和密码的，所以没有弹出配置的问题，当时也是稀里糊涂就弄好了，导致现在不太清楚到底发生了什么，就没办法复盘，等后面换新电脑再说吧XD

0x2 Hexo config & Theme config

我使用的这一个主题👇，这里具体讲讲博客的配置
NexT 使用文档 (iissnan.com)
为了描述方便，在以下说明中：
将hexo init生成的config文件称为站点配置文件
将theme的config文件称为主题配置文件

配置主题
在hexo站点目录中用终端输入👇
1
git clone https://github.com/iissnan/hexo-theme-next themes/next
打开站点配置文件，修改:
1
theme: next

个人偏好-主题配置文件

# Schemes
scheme: Muse
# scheme: Mist
# scheme: Pisces
# scheme: Gemini

站点图像-主题配置文件
修改之前记得在themes\\next\source\images文件夹中保存好你要上传的图像，图像尺寸要符合16x16和32x32

favicon:
  small: /images/favicon-16x16.png
  medium: /images/favicon-32x32.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

社交链接-主题配置文件

# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
social:
  GitHub: https://github.com/HeyGap || fab fa-github

搜索:先在站点目录下安装npm install hexo-generator-searchdb --save

站点配置文件

1 2	local_search: enable: true

主题配置文件：添加

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

引用示例

<blockquote class="blockquote-center">
靡不有初 鲜克有终
<p><p>
<br>《诗经》
</blockquote>

靡不有初鲜克有终

《诗经》

更大更有吸引力的图片来源于<img src="/image-url" class="full-image" />

Bootstrap Callout使用方式

1	{% note class_name %} Content (md partial supported) {% endnote %}

其中，class_name 可以是以下列表中的一个值：

default

primary

success

info

warning

danger

0x3 LaTex配置

我这边pandoc总是出错，于是转用了kramed

终端输入

1 2	cnpm uninstall hexo-renderer-marked --save cnpm install hexo-renderer-kramed --save

主题配置文件

为了加快渲染速度，per_page我选的true，如果嫌麻烦可以直接false

math:
  # Default (true) will load mathjax / katex script on demand.
  # That is it only render those page which has `mathjax: true` in Front-matter.
  # If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.
  per_page: true
  
  # hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.
  mathjax:
    enable: true
    # See: https://mhchem.github.io/MathJax-mhchem/
    mhchem: false

记得在需要渲染的md加入

1	mathjax: true

Test the $X_{n-1}$

不过渲染后就导致写md时多了几个规矩

—-的上下必须各空一格

【公式】KaTeX 使用指南（洛谷特供） - 白色过膝袜 - 洛谷博客 (luogu.com.cn)

0x4 Hexo x Next 美化

动态背景
在站点目录打开git，输入

1	git clone https://github.com/theme-next/theme-next-canvas-nest themes/next/source/lib/canvas-nest

在主题配置文件中加入

canvas_nest: # 网络背景
  enable: true
  onmobile: true # display on mobile or not
  color: '0,0,0' # RGB values, use ',' to separate
  opacity: 0.5 # the opacity of line: 0~1
  zIndex: -1 # z-index property of the background
  count: 150 # the number of lines

记得把其他的动态背景关闭呀，比如

three:
  enable: false
  three_waves: false
  canvas_lines: true
  canvas_sphere: false
canvas_ribbon:
  enable: false

文章结尾
在路径 \themes\next\layout\_macro 中新建 passage-end-tag.swig 文件,并添加以下内容：

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------文章就到这里啦！<i class="fa fa-paw"></i>感谢您的阅读XD-------------</div>
    {% endif %}
</div>

接着打开\themes\next\layout\_macro\post.swig文件，在post-body 之后(END POST BODY)， post-footer 之前添加以下代码:

<div> 
	{% if not is_index %} 
		{% include 'passage-end-tag.swig' %} 
	{% endif %} 
</div>

然后打开主题配置文件，在末尾添加：

1 2	passage_end_tag: enabled: true

贴一个图标库Font Awesome)，主题配置文件里的在线图标基本都要用到它

代码块复制

highlight_theme: night
codeblock:
  border_radius:
  copy_button:
    enable: true
    show_result: true
    # Available values: default | flat | mac
    style: mac

回到顶部与阅读进度

back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: false
  # Scroll percent label in b2t button.
  scrollpercent: true
  
# Reading progress bar
reading_progress:
  enable: true
  # Available values: top | bottom
  position: top
  color: "#7B68EE"
  height: 3px

附一些参考资料XD~

十六进制颜色码_百度百科 (baidu.com)

增加阅读次数/时长和访客数-主题配置文件

busuanzi_count:
  enable: true  #是否开启不蒜子统计功能
  total_visitors: true #是否统计总访客数
  total_visitors_icon: user #访客数图标为人像
  total_views: true #是否同级总访问数
  total_views_icon: eye #访问数图标为眼睛
  post_views: true #是否统计文章访问数
  post_views_icon: eye #访问数图标为眼睛

链接样式
修改文件 themes\next\source\css\_common\components\post\post.styl，在末尾添加如下css样式：

.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #6A5ACD;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

参考文章👇

hexo NexT主题美化总结 | MickeyMiao

深度美化-放着吃灰

如何在Hexo中对文章md文件分类_貌似掉线的博客-CSDN博客
 使用 Hexo Hey 管理你的博客 - 知乎 (zhihu.com)

HeyGap's_Blog

Hexo & Next 博客配置与美化