- 这几天逛了很多博客，找到了十年之约 (foreverblog.cn)、博客广场 - 博友圈 · 博客人的朋友圈！ (boyouquan.com)等博客交流圈子，等我慢慢写博客，然后域名备案下来了，提交申请吧~
一、新增博客背景虚化图片
这个很简单，在assets\scss\custom.scss中对body选择器声明块中增加，背景图片即可。
如果要点击暗色模式的时候，切换背景虚化的颜色。那么需要在为暗色模式的click事件中增加背景虚化的类。
-
\主题文件夹\public\ts\main.ts中
-
首先在CSS: 使用
.dark-mode类在暗色模式下应用黑色毛玻璃效果。
body { background-image: url('/page/nav-img/background4.jpg'); background-size: cover; background-attachment: fixed; position: relative; transition: background-color 0.3s ease; } body::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; /* 白色模式下的样式 */ background: rgba(176, 176, 176, 0.595); /* 黑色半透明 */ backdrop-filter: blur(10px); /* 毛玻璃效果 */ z-index: -1; // transition: background 0.3s ease, backdrop-filter 0.3s ease; /* 平滑过渡效果 */ } /* 暗色模式下的样式 */ body.dark-mode::after { background: rgba(158, 157, 157, 0.5); /* 更强的黑色半透明毛玻璃效果 */
其次main.ts的JS中: 切换 dark-mode 类以应用新的样式。
- main.ts
// 初始化颜色方案切换器 const colorSchemeToggler = new colorScheme_default(document.getElementById("dark-mode-toggle")); // 为暗色模式切换按钮添加事件监听器 const darkModeToggleButton = document.getElementById("dark-mode-toggle"); if (darkModeToggleButton) { darkModeToggleButton.addEventListener("click", () => { // 切换 body 上的 'dark-mode' 类，切换到暗色模式 document.body.classList.toggle("dark-mode"); }); } } };
实现效果。
二、新增导航栏及Home、关于我、走走停停板块
(1)导航栏
1.创建导航栏的html
layouts/partials文件夹中创建一个新的部分文件
我创建在了\hugo-theme-stack-3.26.0\layouts\partials\navbar目录下的navbar.html
<!-- layouts/partials/navbar.html --> <nav class="navbar--fixed-top"> <div class="container"> <a href="/" class="navbar-brand">Logo</a> <ul class="navbar-nav"> <li class="nav-item"><a href="/" class="nav-link">Home</a></li> <li class="nav-item"><a href="/about" class="nav-link">About</a></li> <li class="nav-item"><a href="/contact" class="nav-link">Contact</a></li> </ul> </div> </nav>
2.在Hugo主模板中包含导航栏
修改_default目录下的baseof.html，这个文件是Hugo主题的模板文件，可以用go自己设计模板。
要包含navbar.html即可
\hugo-theme-stack-3.26.0\layouts\_default\baseof.html <!DOCTYPE html> <html lang="{{ .Site.LanguageCode }}" dir="{{ default `ltr` .Language.LanguageDirection }}"> <head> {{- partial "head/head.html" . -}} {{- block "head" . -}}{{ end }} </head> <body class="{{ block `body-class` . }}{{ end }}"> {{- partial "head/colorScheme" . -}} <!-- 导航栏的html文件包含 --> {{ partial "navbar/navbar.html" . }} <!-- 包含导航栏 --> {{/* The container is wider when there's any activated widget */}} {{- $hasWidget := false -}} {{- range .Site.Params.widgets -}} {{- if gt (len .) 0 -}} {{- $hasWidget = true -}} {{- end -}} {{- end -}} <div class="container main-container flex on-phone--column {{ if $hasWidget }}extended{{ else }}compact{{ end }}"> {{- block "left-sidebar" . -}} {{ partial "sidebar/left.html" . }} {{- end -}} {{- block "right-sidebar" . -}}{{ end }} <main class="main full-width"> {{- block "main" . }}{{- end }} </main> </div> {{ partial "footer/include.html" . }} </body> </html>
3.为导航栏的html增加css样式
我放在了\hugo-theme-stack-3.26.0\assets\scss\partials的navbar.scss中
/* assets/css/styles.css */ .navbar--fixed-top { position: sticky; top: 0; z-index: var(--ifm-z-index-fixed); background-color: white; /* 你可以根据需要添加其他样式 */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); padding: 10px 0; } .navbar-nav { list-style: none; display: flex; gap: 20px; } .nav-item { display: inline; } .nav-link { text-decoration: none; color: black; } .navbar-brand { font-size: 1.5em; font-weight: bold; }
4.在head.html文件下确保css被正确引用
-
theme-stack-3.26.0\layouts\partials\head\head.html中
<meta charset='utf-8'> <meta name='viewport' content='width=device-width, initial-scale=1'> {{- $description := partialCached "data/description" . .RelPermalink -}} <meta name='description' {{ printf "content=%q" $description | safeHTMLAttr }}> {{ with .Params.Keywords }}<meta name="keywords" content="{{ delimit . ", " }}">{{ end }} {{- $title := partial "data/title" . -}} <title>{{ $title }}</title> <link rel='canonical' href='{{ .Permalink }}'> <!-- navbar的css引用 --> <link rel="stylesheet" href="{{ "/scss/partials/navbar.scss" | relURL }}"> <!-- 添加CSS文件引用 --> {{- partial "head/style.html" . -}} {{- partial "head/script.html" . -}} {{- partial "head/opengraph/include.html" . -}} {{- range .AlternativeOutputFormats -}} <link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}"> {{- end -}} {{ with .Site.Params.favicon }} <link rel="shortcut icon" href="{{ . | relURL }}" /> {{ end }} {{- template "_internal/google_analytics.html" . -}} {{- partial "head/custom.html" . -}} <!-- busuanzi --> {{- if .Site.Params.busuanzi.enable -}} <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script> <meta name="referrer" content="no-referrer-when-downgrade"> {{- end -}} 5.然后在style.scss中增加scss引用
/*! * Hugo Theme Stack * * @author: Jimmy Cai * @website: https://jimmycai.com * @link: https://github.com/CaiJimmy/hugo-theme-stack 这个 SCSS 文件作为一个主文件，起到将所有相关样式文件引入到一个地方的作用。 它确保项目中的样式文件能够被组织和管理，使得最终生成的 CSS 文件包含了所有必要的样式定义。 这种结构化的样式管理方式有助于保持代码的清晰和模块化。 */ @import "breakpoints.scss"; @import "variables.scss"; @import "grid.scss"; @import "external/normalize.scss"; @import "partials/menu.scss"; @import "partials/article.scss"; @import "partials/widgets.scss"; @import "partials/footer.scss"; @import "partials/pagination.scss"; @import "partials/sidebar.scss"; @import "partials/base.scss"; @import "partials/layout/article.scss"; @import "partials/layout/list.scss"; @import "partials/layout/404.scss"; @import "partials/layout/search.scss"; @import "general.scss"; @import "custom.scss"; // narbar @import "partials/navbar.scss"
这就可以增加导航栏了。
(2)关于我
- 定位到acrchives的.md文件。navbar的html中设置a标签href跳转即可。
- md文件的layout设置为已经存在的layout文件，我使用的是archives的layout文件。
(3)走走停停
1.使用Apache ECharts创建地图
一个基于 JavaScript 的开源可视化图表库Apache ECharts
三、走走停停板块的设置
-
pb主题\content\page\daily_info中的index.md
-
layout自定义了daily_info的Hugo模块
-
\hugo-theme-stack-3.26.0\layouts\partials\map中创建了index4.html设置了地图及时间轴
-
\hugo-theme-stack-3.26.0\layouts_default中创建了daily_info.html自定义了模板，引入了index4.index（archives.html也默认再此设置的）
