数据科学与工程学院暑期夏令营实践项目报告

上机实践名称：基于 GitHub 的博客网站	上机实践日期：2023.7.13
姓名：陈沁文	学号：10205501409

一、实验目的

选择一个你喜欢的博客（最好从主题样式开始选择）推荐在 Jekyll 和 Hexo 之间选取。
注册 github 并使用 github 的代码仓库以及 pages 功能。
选取对应框架的教程文档，跟随教程完成部署并且填充内容。

二、实验环境

Hexo

三、实验过程

选择了Hexo作为基础博客框架的实现，其次选择了fluid主题作为博客页面布局的基本设计，之后在此基础上进行了一些布局的优化和功能的丰富，以及美观上的调整。

博客框架及其选取原因

第一次使用博客，选取Hexo作为框架搭建。原因是Hexo是一个快速、简洁且高效的博客框架，基于 Node.js开发，使用 Markdown 解析文章，并生成静态页面，非常方便，且页面可直接存在GitHub Pages。

博客主题及其选取原因

博客主题选取fluid,这是因为他的页面布局设计简洁优雅，有助于使用者专注于博客写作，且提供大量定制化配置项，更具个性化。此外，该主题的文档写得非常地详细，查起来非常容易，上手快，适用于第一次上手写博客的小白。

博客样式设计及其美学考量

在fluid主题上做了些修改和完善。

导航栏category添加下拉菜单

原先需要切换到分类页面后才可以看到所有分类，于是在导航栏category处添加下拉菜单，显示所有当前分类，再直接选择某一分类，更为快捷方便。

在主题配置文件中修改如下内容

menu:
    - { key: "category", link: "/categories/", icon: "iconfont icon-category-fill",
	submenu: [
        { key: 'Blockchain', link: "/categories/Blockchain" },
        { key: 'Nonsense', link: "/categories/Nonsense" },
        { key: '实验报告', link: "/categories/实验报告" }
      ] }

效果如图

添加评论功能

安装基于 GitHub Issues的utterances评论插件
在主题配置文件中开启评论功能，并修改utterances相应参数配置

comments:
    enable: true
    #...
utterances:
  repo: Linshou99/Linshou99.github.io
  issue_term: title
  label: utterances
  theme: github-light
  theme_dark: github-dark
  crossorigin: anonymous

实现登录Github账户后可以在文章下进行评论功能

数学公式支持

由于 Hexo 默认的 Markdown 渲染器不支持复杂公式，于是完善对数学公式的支持。

首先卸载原有的渲染器，更换渲染器katex,并安装hexo官方的hexo-math插件，可以让字体变得更好看

#卸载原有的渲染器
npm un hexo-renderer-marked --save
#安装渲染器katex
npm i hexo-renderer-markdown-it-plus --save
#安装hexo-math
npm install hexo-math --save

再在博客根目录下的_config.yml站点配置文件的文末添加以下内容，修改渲染器名，加入hexo-math插件

math:
  engine: katex
  katex:
    css: https://fastly.jsdelivr.net/npm/katex@0.11.0/dist/katex.min.css
    js: https://fastly.jsdelivr.net/npm/katex@0.11.0/dist/katex.min.js
    config:
      # KaTeX config
      throwOnError: false
      errorColor: "#cc0000"

最后在主题配置文件内修改并启动支持latex数学公式功能

post:
  math:
    enable: true
    specific: true
    engine: katex

之后在需要加入数学公式的文章的Front-matter处添加一行math: true即可启用公式转换
效果显示 $E=mc^2$

固定背景

从美观角度考虑，在主题配置文件中更换banner图后，原先fluid主体下的banner背景图不是全屏，下拉背景会变为纯白，觉得有些单调，于是将背景固定。

在博客根目录新建scripts文件夹，在该文件夹下新建injector.js

1
2
3

const { root: siteRoot = "/" } = hexo.config;
hexo.extend.injector.register("body_begin", `<div id="web_bg"></div>`);
hexo.extend.injector.register("body_end",`<script src="${siteRoot}js/backgroundize.js"></script>`);

替换背景，在博客根目录下的/source下新建/js目录，以及在/js下新建backgroundize.js

//更改背景图像：更改`web_bg`元素的背景图像为`.banner`元素的背景图像，并且它将被固定在整个窗口上方。
document
  .querySelector('#web_bg')
  .setAttribute('style', `background-image: ${document.querySelector('.banner').style.background.split(' ')[0]};position: fixed;width: 100%;height: 100%;z-index: -1;background-size: cover;`);
//移除背景图像：通过将`background-image`设置为`url()`，这里是空的，即没有指定具体的背景图像URL，使得`banner`元素的背景图像被移除。
document
  .querySelector("#banner")
  .setAttribute('style', 'background-image: url()')
//修改遮罩层的背景颜色：通过将`background-color`设置为`rgba(0,0,0,0)`，即完全透明的黑色，这将使`banner`元素的遮罩层的背景颜色变为透明。
document
  .querySelector("#banner .mask")
  .setAttribute('style', 'background-color:rgba(0,0,0,0)')

毛玻璃滤镜

给用于显示内容的board板添加一层毛玻璃滤镜，模糊背景而不是纯色的效果使其与页面整体更协调、融合。

在/themes/fluid/_config.yml修改背景色为透明

# 主面板背景色
# Color of main board
board_color: "#ffffff80"
board_color_dark: "#00000080"

在/themes/fluid/source/css下新建cloudedGlasses.css实现毛玻璃滤镜效果，即给board元素添加模糊背景效果，blur(5px)指定了模糊效果的强度。

#board {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

再回到/themes/fluid/_config.yml配置文件中引入该样式

1 2	`custom_css: - /css/cloudedGlass.css`

最后依据修改后的效果在主题配置文件中调整字体颜色，使内容明显，清晰可见。

注意，每次修改配置，都需要在bash命令行输入以下命令将修改内容部署到博客上

#清除缓存
hexo clean
#生成静态文件并部署到仓库/网站中
hexo g --d

博客制作过程中遇到的问题及其解决方法

在博客md文件中以相对路径插入图片，部署上去后图片无法显示，查看控制台发现是无法找到图片。

解决方法：

安装hexo-asset-image插件

1	`npm install https://github.com/CodeFalling/hexo-asset-image --save`

修改博客根目录下_config.yml文件

1	`post_asset_folder: true`

创建新文件report

1	`hexo n report`

此时在/source/_posts下还会生成同名文件夹report/，将图片（如img.jpg）放到该文件夹内，在md文件中按相对路径插入即可。

1	`![](./report/img.jpg)`

四、总结与反思

搭建个人博客网站是一个用来展示个人技术能力和分享知识、并与其他人进行交流的很好的方式。通过这次项目实践，我了解到GitHub Pages是一项免费的静态站点托管服务，它可以直接从 GitHub 上的仓库获取 HTML、CSS 和 JavaScript 文件，然后发布网站，因而我们搭建自己的博客网站并直接部署到GitHub上，省去购买独立服务器的成本。同时也熟悉了如何利用静态博客框架进行快速搭建。

此外，通过这次项目实践，我还感受到了开源项目的魅力。Hexo 是一个开源的静态博客生成工具，它在以下几个方面体现了开源项目的优势：

灵活性和可定制性：Hexo 的源代码是公开的，用户可以根据自己的需求进行修改和定制。用户可以自由地添加、删除或修改功能，以满足个人或组织的特定需求。这种灵活性和可定制性使得 Hexo 可以适应各种不同的博客需求和设计风格。比如说在实现背景固定和毛玻璃特效时使用的注入代码功能，可以在修改主题的时候将代码无侵入式加入到主题里，不会直接修改源码影响日后更新。
活跃的社区支持：Hexo 有一个活跃的社区，由志愿者开发者和用户组成。这个社区提供了长期的支持和维护，确保 Hexo 的持续发展和改进。社区成员可以提供技术支持、解决问题、分享经验和贡献代码，使得 Hexo 的质量和功能得到不断提升。
丰富的插件生态系统：Hexo 的开源性质促进了插件的开发和共享。Hexo 社区中有大量的插件可供选择，用于扩展 Hexo 的功能和增强用户体验。这些插件可以帮助用户实现各种功能，如在遇到文章无法显示图片报错时解决方法就是安装hexo-asset-image插件等，还有评论功能提供了更多的选择和灵活性。
透明度和可信度：Hexo 的源代码是公开的，任何人都可以查看和审查代码。这使得用户可以对 Hexo 的功能和安全性进行自行验证，增加了用户对 Hexo 的信任度。用户可以通过检查源代码来确保没有潜在的安全漏洞或后门。
降低成本和提高效率：Hexo 是一个免费的开源项目，用户可以免费获取和使用。这降低了使用 Hexo 的成本，同时也避免了从零开始开发一个静态博客生成工具的时间和资源投入。通过利用已有的开源项目，用户可以更快速地搭建和部署自己的博客。

总的来说，Hexo 作为一个开源项目，在灵活性、社区支持、插件生态系统、透明度和成本效益等方面都展现了开源项目的优势。

基于以上，我完成了个人博客网站的第一次搭建和写作。反思就是更多的进阶的功能，比如留言板等还有待添加。

实验报告

#实验报告

report

http://example.com/2023/07/13/report/

作者

10205501409陈沁文

发布于

2023年7月13日

许可协议

fabric_chaincode 下一篇