博客作业报告

引言

本次基于Hexo和Github Page搭建了一个静态个人博客，这个博客主要用于分享我个人的一些论文阅读笔记（以及一些配置教程）。

页面展示

总结与反思

选择框架

本文选择Hexo作为搭建博客的框架，原因有以下几点：

1、Hexo比较流行，网上相关的教程比较多，博客页面的主题也比较多。

2、Hexo可以在本地测试页面，并只需在本地上使用命令行即可将博客部署在Github Page上，部署起来很方便。

3、Hexo相关的插件可以用npm管理，十分方便。

页面设计

本文使用Hexo主题butterfly来进行页面布局设计。实际上，选择Hexo主题可以更快地实现页面布局设计。

在选择Hexo主题的时候，发现了以下问题：

1、一些Hexo主题已经很久没更新了，不适配最新的Hexo框架（即Hexo7），就算可以调整来适配最新的Hexo，也会遇到很多问题，比如Hexo主题Suka。

2、一些Hexo主题的文档比较简陋，上手时会遇到一些困难，比如Hexo主题Snark。

本次选择主题butterfly，有以下原因：

1、这个主题具备博客的基础功能，比如分类、时间线排列、归档、标签等功能。

2、这个主题在2024年4月刚更新过，说明这个主题还有人维护，支持最新的Hexo版本。

3、这个主题支持中文，还支持阅读模式和夜间模式。

4、这个主题支持插入公式并渲染公式。

当然，这个主题还有些特性，本次作业没有用到，比如搜索系统。另外，还可以对config进行其他调整，使得页面元素更加丰富。

功能实现

本次博客主要实现了以下几个功能：

1、日间模式与夜间模式的切换

2、阅读模式

3、对文章打标签，并通过标签来找到文章

4、对文章进行分类

5、在发布时间上对文章进行排序

6、二维码分享文章

7、发送邮件到个人邮箱的按钮

8、跳转到个人Github首页的按钮

9、插入公式并渲染公式

技术选择

本次使用的框架为Hexo，使用的包管理器为npm。

可以使用npm简单地安装Hexo框架及其相关插件。

在文章内容编辑上，采用比较流行的markdown语言。

同时，使用Github Page来在公网上发布博客。

遇到的问题

问题一

主题安装运行后打不开页面。在按照文档安装suka时，观察发现Terminal处出现大量的语法报错，只好换另一个主题butterfly了。

问题二

在部署到Github时报错，搜索发现需要安装hexo-deployer-git插件。

还有在部署时在repo使用https链接，不稳定。

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

在这里，我们给Github上设置了一个本地公匙，使用repo为git@github.com:GuoTeng-ECNU/GuoTeng-ECNU.github.io.git来解决。

问题三

用markdown编辑文章时，插入图片使用![](xxx.jpg)这样的格式，在发布到页面时不会显示图片。我们安装hexo-renderer-marked后，在config里加上下面一段，即可解决。

post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

问题四

用markdown编辑文章时，插入公式时无法正常显示，但是markdown格式正确。在这里，需要在主题butterfly的config里设置一些参数，如下：

# MathJax
mathjax:
  enable: true
  per_page: true

# KaTeX
katex:
  enable: true
  per_page: true
  hide_scrollbar: true