hugo 博客搭建

zhouxhere

278字

2024-11-12 14:11

搭建一个简单的个人所用的 hugo blog，包含基本的功能、简单的样式、基础的暗黑模式以及代码块展示的处理等等

为什么

之前学习的很多知识很容易忘记，想写一点东西来留存一下
留点东西证明自己的能力，并且想让自己养成一个好的习惯
之前使用过不同的 hugo 主题，大部分都挺好，但是有很多功能个人简单使用不需要

结论

刚开始打算新建一个 hugo theme 项目，但是在开发的过程中去翻阅 hugo 的文档，以及在测试一些功能时候添加 post 文章时候想到根本没必要去新建一个 hugo theme，因为在认真考虑所需要的东西（即满足 1. 个人简单使用；2. 后续功能可以迭代）之后决定直接将 theme 中的 template 挪至博客项目中，这样方便后续的功能迭代（如：增加 mermaid 图表展示、增加 mapbox 等 code blocks），而且由于是个人使用，所以直接做成一个项目最合适。

思路

需要哪些功能

文章展示的基本要求
文章中的代码块展示
网站底部的备案信息展示
网站基本的暗黑模式
网站的弹性布局后续待增加

如何处理

文章的展示及代码块展示是 hugo 已经包含的基本功能，只需根据个人特殊所需处理相应的东西

首页只展示配置中设置的一页数量且按文章中的 weight 倒序排序

1
2
3
4
5
6


{{ define "main" }}
  {{ .Content }}
  {{ range sort (first .Paginator.PagerSize site.RegularPages.ByWeight) "Weight" "desc"}}
    {{ partial "block.html" . }}
  {{ end }}
{{ end }}

其他页面采用时间倒序排序，即最新的在最上面

1
2
3
4
5


{{ $pages := sort .Pages "Date" "desc" }}
{{ $paginator := .Paginate $pages 5 }}
{{ range $paginator.Pages }}
  {{ partial "block.html" . }}
{{ end }}

暗黑模式的处理采用 javascript 判断

 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
29
30
31
32


const mediaQueryListDark = window.matchMedia("(prefers-color-scheme: dark)");
const theme = sessionStorage.getItem("theme") ? sessionStorage.getItem("theme") : mediaQueryListDark.matches ? "dark" : "light";

if (theme === "dark") {
  document.documentElement.classList.add("dark");
} else {
  document.documentElement.classList.remove("dark");
}

mediaQueryListDark.addEventListener("change", (e) => {
  if (e.matches) {
    sessionStorage.setItem("theme", "dark");
    document.documentElement.classList.add("dark");
  } else {
    sessionStorage.setItem("theme", "light");
    document.documentElement.classList.remove("dark");
  }
});

window.addEventListener("DOMContentLoaded", () => {
  const darkModeToggle = document.getElementById("dark-mode-toggle");
  
  darkModeToggle.addEventListener("click", () => {
    if (document.documentElement.classList.contains("dark")) {
      sessionStorage.setItem("theme", "light");
      document.documentElement.classList.remove("dark");
    } else {
      sessionStorage.setItem("theme", "dark");
      document.documentElement.classList.add("dark");
    }
  });
});

网站底部的备案采用 hugo 配置中的 params 来获取展示

1
2
3
4
5
6


{{ $icp := .Site.Params.footer.icp }}
{{ if $icp }}
<p class="flex items-center justify-center flex-wrap">
	{{ $icp | safeHTML }}
 </p>
{{ end }}

网站的弹性布局、黑暗模式样式及文本样式采用 taiwindcss 来处理

结果

整个项目采用 npm 来处理，使用 gulp + browserify 来处理 javascript，使用 tailwindcss + postcss + autoprefixer 来处理 css 当前网站即为发布展现出的结果

后续

后续根据所需添加对应的功能再更新此篇文章