搭建·历程

时间线： 2025年：
🔜 08/25 (开始搭建，初步发布和部署Github)
🔜 08/26 (开始优化框架界面，头像、网站图标、文字字体等)
🔜 08/27 (逐步增加背景粒子效果和底部动画效果，文章Tile居中等等)
🔜 08/28 (更新优化Html界面，搜索及链接栏的布局排版，网站界面元素动画等)

1. 问题

1.初步发布和部署Github

2.主要的网站显示问题和优化界面

3.如何新建和发布编写自己的文章

2. 解决过程

2.1 核心搭建学习

主要学习b站up主（此处贴的他个人网站的那篇博客）：参考B站UP主的个人博客网站

2.2 网站Logo显示问题

网站的favicon没有显示问题参考：favicon显示参考网址

2.3 动态背景效果

在添加动态背景时粒子效果一直加载不成功，用b站up主的源码复制发现不行，后面换路径就可以了。

2.4 Markdown博客编写

添加图片：
添加视频：
1
2
3
4
<video width="100%" controls poster="封面照片.jpg">
  <source src="视频名称.mp4" type="video/mp4">
  您的浏览器不支持Video标签，请尝试使用现代浏览器查看。
</video>  
文章写法：
文字内容示例：

加粗

斜体

~~删除线~~
代码写法示例：
在Markdown里用三个反引号开启/关闭代码块。指定语言后,Hugo 会自动高亮。
例1：python
1
2
def hello():
    print("Hello Hugo!")
例2：c++
1
2
3
4
5
6
#include <iostream>
using namespace std;
int main() {
    cout << "Hello, Hugo!" << endl;
    return 0;
}
换行示例：
(1).两个空格＋回车
1
2
这是第一行（结尾有两个空格）    
这是第二行  
(2).空一行
1
2
3
这是第一段

这是第二段（中间有空行）
(3).HTML换行标签
1
2
3
这是第一行<br>
这是第二行<br>
这是第三行
GitHub风格的块引用Alerts：

参考引用Alerts学习文章

2.3 link栏修改

2.3.1 删除上方多余文章将技术链接上面的文章栏去掉：在link.md文章增加，然后再新增的links.html文件中添好相关代码
2.3.2 修改显示列表技术链接改行数：my_web\assets\scss\custom.scss

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


@media (min-width: 1024px) {
    .article-list--compact {
      display: grid;
      /* 目前是两列，如需三列，则后面再加一个1fr，以此类推 */
      grid-template-columns: 1fr 1fr;
      background: none;
      box-shadow: none;
      gap: 1rem;
  
      article {
        background: var(--card-background);
        border: none;
        box-shadow: var(--shadow-l2);
        margin-bottom: 8px;
        margin-right: 8px;
        border-radius: 16px;
      }
    }
  }

2.4 博客Tile居中

更改主页的文章标题及内容居中文件路径:assets\scss\custom.scss

2.5 优化网站显示

2.5.1 网站运行时间
增加网站运行时间：layouts\partials\footer.html

2.5.2 网页元素动画
给网页元素添加动画：assets\scss\custom.scss

2.5.3 目录显示优化
将目录的自动排序取消：hugo.yaml文件内修改ordered参数

2.6 新增项目栏

新增一个项目栏：先在content\page项目栏里新增一个栏目名称，然后添加md文件。

编写好md后为它在layouts\page\增加好对应名称的html布局文件就可以了。

不需要更改其他关联，hugo会自动识别并且连接使用，主要确保layout属性挂到html文件就可以

2.7 修改文字显示

修改主页栏名称：content_index.zh-cn.md

2.8 新建博客文章

新创建一篇博客文章：终端命令执行：hugo new post\新文章名称\index.md生成后编写即可

总结心得

心得我写在了8/28，这几天都在做这个网站，初步能看了才开始编写这篇内容，本人专业是软件但是学校课程学的非常少，基本都是期末一周极限“预习”，低分飘过及格线。(在这里我要非常非常感谢一下我的英语老师，大英一到四，捞了我整整四个学期，真的不夸张，3个学期60分！)机缘巧合我走了嵌入式，加了学校的机器人工作室，也算是2年入门(后面我想单独会写一篇博客来纪念一下我逝去的这两年)，但是本人其中在工作室或者说这个比赛的经历非常坎坷，后面会在那篇文章详细聊聊。说实话这个网站搭的我非常艰辛，基本上不是在修BUG，找资料，就是在问AI怎么做，因为我对前端可以说是一点知识没有，虽然好像上个学期刚学过JAVA，但是前面我给自己叠了甲！但是还是坚持搭了下去，因为或许我可以在这里写一些我想说的话，想记录一下我的生活和内容。希这个网站我会一直坚持和维护的。还想起来我到时候也要记一篇我喜欢听的音乐成长历程博客，在这里先给自己标记一下！😇😇以后我估计我会常常更新我的日常，还有想起来我学了这么多东西总要有个记录备份呐，所以这个网站就必然的营运而生咯！“悦己，越己！”

第一篇博客

我的第一篇 Hugo 博客文章，同时介绍一下我的搭建历程，可能会不定时更新新的界面功能

搭建·历程

1. 问题

2. 解决过程

2.1 核心搭建学习

2.2 网站Logo显示问题

2.3 动态背景效果

2.4 Markdown博客编写

2.3 link栏修改

2.4 博客Tile居中

2.5 优化网站显示

2.6 新增项目栏

2.7 修改文字显示

2.8 新建博客文章

总结心得