博客作业报告
引言
本次基于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链接,不稳定。
1 | # Deployment |
在这里,我们给Github上设置了一个本地公匙,使用repo为git@github.com:GuoTeng-ECNU/GuoTeng-ECNU.github.io.git
来解决。
问题三
用markdown编辑文章时,插入图片使用
这样的格式,在发布到页面时不会显示图片。我们安装hexo-renderer-marked
后,在config里加上下面一段,即可解决。
1 | post_asset_folder: true |
问题四
用markdown编辑文章时,插入公式时无法正常显示,但是markdown格式正确。在这里,需要在主题butterfly的config里设置一些参数,如下:
1 | # MathJax |