ZhmYe's
首页 文章 分类 标签 Github

【实验报告】个人博客搭建总结报告

2024-04-19 实践笔记

一、博客主题及其选取原因

​ 博客主题这里分为两方面介绍，一方面是网站功能主题，一方面是网站布局代码使用的主题(theme)。

​ 首先说明布局主题。本次博客网站选取了card主题。选取的原因也比较简单，主要是因为个人比较倾向于比较简洁的页面。在相关文档页面可以得到相关的使用方式，在部署到本地代码后，对其中的一些功能进行了使用。

​ 其次是网站功能主题，本次制作的博客内容主题是个人的一些学习笔记、论文分享，也比较契合博客本身的主旨。其中，学习笔记来源于平时在学习一些新的研究内容的时候会习惯性的以markdown的形式将一些关键内容记录下来。论文分享的主要来源则是实验室要求大家按序每周一人在组会分享论文，并且在汇报完后在实验室公众号上发表相关读书笔记。

二、博客页面布局及其设计思路

​ 博客主要分为以下页面

  • 主页

    image-20240419123733673

​ 主页内容比较简单，主要就是以卡片形式展现了发在博客上的各种文章，并展示了文章的一些关键信息，包括题目，标签，分类等。卡片的主题展现方式非常简洁，并且和目前很多推送方式使用的微信公众号的UI形式类似。

  • 文章页面（Achive）

    image-20240419123944904

​ 文章页面以更清晰的时间轴的形式展现了发布在博客上的文章。

  • 分类页面

    image-20240419124031085

​ 分类页面中根据给不同文章赋予的”categories”内容将文章归类于不同的分类，并在该页面进行分类的展示，同时给出了不同分类的文章个数，点击相关分类后可以得到分类中的所有文章，方便用户根据自己感兴趣的分类查看所有文章。

image-20240419124149290

  • 标签页面

    image-20240419124345331

​ 标签页面和分类页面类似，根据给不同文章赋予的“tags”属性将文章归类于不同的标签。功能与分类页面类似，只是分类页面更侧重于文章发表的目的或原因，而标签页面侧重于文章本身的内容指向。

  • Github

    Github页面直接链接向本人的github页面。这里不作额外展示

  • 搜索

    image-20240419124527856

​

​ 搜索页面主要基于card主题提供的搜索功能，主要用于在该页面进行关键词搜索以得到相关的文章。

三、博客搭建过程

  • 框架选择

    • hexo

  • 主题选择

  • 搭建过程

    • 首先在npm中下载安装hexo框架，然后根据主题官方文档将相关主题下载到了hexo框架的theme文件夹下并做了相应的调整

    • 通过hexo new [文章名称]即可新建一个文章

    • 在每个文章的对应.md文件中添加tags和categories用于构建分类和标签页面

    • 修改主题文件夹下的_config.yml文件以修改导航栏

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      # 顶部导航栏设置
      navbar: 

        # 左侧名称显示
        sitename: ZhmYe's
        
        # 右侧站内导航链接
        menu: 
          - name: 首页
            url: /
          - name: 文章
            url: /archives/
          - name: 分类
            url: /categories/
          - name: 标签
            url: /tags/
          - name: Github
            url: https://github.com/ZhmYe

        # 导航栏永远显示在屏幕顶端
        # 仅当屏幕宽度不小于 1080 px 时生效
        sticky: false
        
       # 这里还包括后续启用search功能
       search:
        enable: true
        path: search.json
        field: All  # Page | Post | All

    • 修改对应的github链接，使得代码会被部署到github.io中

      • 首先要创建相应的github.io仓库并完成ssh认证，这里略过
      • 修改项目根目录的config.yml
      1
      2
      3
      4
      deploy:
        type: git
        repo: git@github.com:ZhmYe/zhmye.github.io.git
        branch: main

  • 通过运行hexo相关命令部署到仓库

    1
    2
    hexo g # 生成相关html等文件
    hexo d # 部署到github.io

四、问题与总结

​ 实验过程整体比较顺利，参考相关的资料可以很快完成整个博客的搭建，主要遇到了如下两个问题

  • 首先在md中的图片文件在网页上无法正常显示，后续通过安装hexo-asset-img并对图片存放位置与路径做了相应的修改，成功解决

  • 在md中的latex公式无法正常显示，后续通过对配置文件中mathjax部分的修改，并参考相关资料对相关js源码做了部分小改动（修改了一些源），成功解决

    1
    2
    3
    4
    5
    6
      # MathJax
      # https://www.mathjax.org/
      # Version: 3
      mathjax: 
        enable: true
    # 对源码源的修改这里不展示

    通过这次实验，完成了搭建个人博客的实践，对一些工具框架如hexo等有了深入的了解和使用。

updated at 2024-04-19

# 实验报告
Next Post
【学习笔记】Sumcheck协议