Hugo | Blog

Hugo：代码高亮风格

1 代码高亮风格代码高亮风格很多，可以参见 Chroma Style Gallery 看起来都不错，可以考虑添加进 hugo 2 遇到问题之前我已经在 config.toml 中已经添加如下配置： 1[markup] 2 [markup.highlight] 3 codeFences = true 4 guessSyntax =

Posted by Nefelibata on Sat 2024-03-30 | Last Modified on Thu 2024-05-23

Hugo：添加热力图

1 显示效果鼠标未移动到上面的时候，根据发表文章的数量显示热力图：如果鼠标移动到上面，会显示当天发表的文章详情，并且可以点击进行跳转： 2 解决方

Posted by Nefelibata on Sat 2024-03-30 | Last Modified on Thu 2024-05-23

Hugo：图片点击放大

1 显示效果想要知乎这种图片点击放大的效果，一查才知道是灯箱。 2 解决方案 2.1 修改 config.toml 在 config.toml文件中，添加如下代码： 1[params] 2 fancybox = true 2.2 创建

Posted by Nefelibata on Fri 2024-03-29 | Last Modified on Thu 2024-05-23

Hugo：添加评论功能

1 显示效果 2 解决方案我正在使用的主题所提供的评论方案是： 1 [params.giscus] 2 data_repo="your GitHub repo" 3 data_repo_id="your repo id" 4 data_category="your category" 5 data_category_id="your category id" 6 data_mapping="pathname" 7 data_reactions_enabled="1" 8 data_emit_metadata="0" 9 data_theme="light" 10 data_lang="en" 11 crossorigin="anonymous" 在申请giscus 的时候，

Posted by Nefelibata on Thu 2024-03-28 | Last Modified on Thu 2024-05-23

Hugo：内容折叠与代码块大小限制

1 目前显示效果 1git add . 2git commit -m "update" 3git push origin master 2 解决方案 2.1 内容折叠新建 themes\hugo-theme-cleanwhite\layouts\shortcodes\details.html 文件，并添加以下代码： 1<details style="background-color:#ffffff;border-radius:6px;border:2px dashed rgba(187, 181, 181, 0.712);"> 2 <summary> <font color=#817f7f> > > > 展开 > > > </font></summary> 3 {{ .Inner | markdownify }} 4</details> 以

Posted by Nefelibata on Wed 2024-03-27 | Last Modified on Thu 2024-05-23

Hugo：访问量统计

显示效果解决方案本文使用不蒜子来进行网站访问量的统计前期也踩了几个坑，最后在官网发现了最佳解决方案，只需要将官网上的两行代码稍加改进就可以在

Posted by Nefelibata on Wed 2024-03-27 | Last Modified on Thu 2024-05-23

Hugo：自定义字体

显示效果解决方案本博客使用的是霞鹜文楷，要在网站使用此字体，可以查看霞鹜文楷屏幕阅读版网络字体仓库 1、插入代码将以下代码插入 themes\hugo-theme-cleanwhite\layouts\partials\head.html 1<html> 2<head> 3 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-web/style.css" />

Posted by Nefelibata on Wed 2024-03-27 | Last Modified on Thu 2024-05-23

Hugo：一键回到顶部

文章参考自：https://github.com/sengmitnick/hugo-theme-hello-friend-ng/commit

Posted by Nefelibata on Wed 2024-03-27 | Last Modified on Thu 2024-05-23

Hugo：博客运行时间

文章参考自 https://thirdshire.com/hugo-stack-renovation/ 显示效果解决方案 1 2本博客已稳定运行 3<span id="runningdays" class="running-days"></span> 4<script> 5let s1 = '2024-3-18'; //website start date 6s1 = new Date(s1.replace(/-/g, "/")); 7let s2 = new Date(); 8let timeDifference = s2.getTime() - s1.getTime(); 9 10let days = Math.floor(timeDifference / (1000 * 60 * 60 * 24)); 11let

Posted by Nefelibata on Wed 2024-03-27 | Last Modified on Thu 2024-05-23

Hugo：总字数统计

文章参考自 https://thirdshire.com/hugo-stack-renovation/ 显示效果解决方法我是直接在主题上面改的，在主题的 layouts/partials/footer.html 里增加以下代码： 1 2 3 4{{$scratch := newScratch}} 5{{ range

Posted by Nefelibata on Wed 2024-03-27 | Last Modified on Thu 2024-05-23

Hugo：图片存储路径优化

使用hugo搭建博客的时候，md文件的图片存储路径有问题，对其进行改进 1、typora配置图像存储路径改为如图，其中是以相对路径 ./ 开头 2、用

Posted by Nefelibata on Thu 2024-03-21 | Last Modified on Thu 2024-05-23

Hugo：代码块拷贝

本文转载与修改自：Hugo插件之代码块拷贝插件添加按钮-css 我们通过检查博客内容页面发现，hugo生成的每个代码块格式如下：没有语法突出显

Posted by Nefelibata on Thu 2024-03-21 | Last Modified on Thu 2024-05-23

Hugo：日常更新流程

1、新建文章进入blog本地仓库，新疆文章，写文章并修改 1cd F:\vscode\hugo-root 2hugo new post/文章名字.md 2、本地验证 1hugo serve -D --disableFastRender 2或 3hugo serve 3、更新public目录

Posted by Nefelibata on Wed 2024-03-20 | Last Modified on Thu 2024-05-23

博客搭建：Hugo+GithubPages

本文借鉴并修改自 Windows下使用hugo和Github Pages配置博客 1 下载安装hugo 访问最新版本页面下载，推荐使用 Hugo extended 版本解压到某

Posted by Nefelibata on Wed 2024-03-20 | Last Modified on Thu 2024-05-23