0
0

Hugo的Stack主题配置记录03-背景虚化-导航栏-Apache ECharts创建地图

  • 这几天逛了很多博客，找到了十年之约 (foreverblog.cn)、博客广场 - 博友圈 · 博客人的朋友圈！ (boyouquan.com)等博客交流圈子，等我慢慢写博客，然后域名备案下来了，提交申请吧~

一、新增博客背景虚化图片

​ 这个很简单，在assets\scss\custom.scss中对body选择器声明块中增加，背景图片即可。

如果要点击暗色模式的时候，切换背景虚化的颜色。那么需要在为暗色模式的click事件中增加背景虚化的类。

  • \主题文件夹\public\ts\main.ts中
  • 首先在CSS: 使用 .dark-mode 类在暗色模式下应用黑色毛玻璃效果。
  1. 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;
  2.   // transition: background 0.3s ease, backdrop-filter 0.3s ease;/* 平滑过渡效果 */}/* 暗色模式下的样式 */body.dark-mode::after{background:rgba(158, 157, 157, 0.5);/* 更强的黑色半透明毛玻璃效果 */

其次main.ts的JS中: 切换 

  1. dark-mode

类以应用新的样式。

  • main.ts
  1. // 初始化颜色方案切换器const colorSchemeToggler =newcolorScheme_default(document.getElementById("dark-mode-toggle"));// 为暗色模式切换按钮添加事件监听器const darkModeToggleButton = document.getElementById("dark-mode-toggle");if(darkModeToggleButton){
  2.         darkModeToggleButton.addEventListener("click",()=>{// 切换 body 上的 'dark-mode' 类，切换到暗色模式
  3.           document.body.classList.toggle("dark-mode");});}}};

实现效果。

二、新增导航栏及Home、关于我、走走停停板块

(1)导航栏

1.创建导航栏的html

  • layouts/partials 文件夹中创建一个新的部分文件

我创建在了\hugo-theme-stack-3.26.0\layouts\partials\navbar目录下的navbar.html

  1. <!-- layouts/partials/navbar.html --><navclass="navbar--fixed-top"><divclass="container"><ahref="/"class="navbar-brand">Logo</a><ulclass="navbar-nav"><liclass="nav-item"><ahref="/"class="nav-link">Home</a></li><liclass="nav-item"><ahref="/about"class="nav-link">About</a></li><liclass="nav-item"><ahref="/contact"class="nav-link">Contact</a></li></ul></div></nav>

2.在Hugo主模板中包含导航栏

修改_default目录下的baseof.html，这个文件是Hugo主题的模板文件，可以用go自己设计模板。

要包含navbar.html即可

  1. \hugo-theme-stack-3.26.0\layouts\_default\baseof.html
  2. <!DOCTYPE html>
  3. <html lang="{{ .Site.LanguageCode }}" dir="{{ default `ltr` .Language.LanguageDirection }}">
  4.     <head>
  5.         {{- partial "head/head.html" . -}}
  6.         {{- block "head" . -}}{{ end }}
  7.     </head>
  8.     <body class="{{ block `body-class` . }}{{ end }}">
  9.         {{- partial "head/colorScheme" . -}}
  10. <!-- 导航栏的html文件包含 -->
  11.         {{ partial "navbar/navbar.html" . }} <!-- 包含导航栏 -->
  13.         {{/* The container is wider when there's any activated widget */}}
  14.         {{- $hasWidget := false -}}
  15.         {{- range .Site.Params.widgets -}}
  16.             {{- if gt (len .) 0 -}}
  17.                 {{- $hasWidget = true -}}
  18.             {{- end -}}
  19.         {{- end -}}
  20.         <div class="container main-container flex on-phone--column {{ if $hasWidget }}extended{{ else }}compact{{ end }}">
  21.             {{- block "left-sidebar" . -}}
  22.                 {{ partial "sidebar/left.html" . }}
  23.             {{- end -}}
  24.             {{- block "right-sidebar" . -}}{{ end }}
  25.             <main class="main full-width">
  26.                 {{- block "main" . }}{{- end }}
  27.             </main>
  28.         </div>
  29.         {{ partial "footer/include.html" . }}
  30.     </body>
  31. </html>

3.为导航栏的html增加css样式

我放在了\hugo-theme-stack-3.26.0\assets\scss\partials的navbar.scss中

  1. /* assets/css/styles.css */
  2. .navbar--fixed-top {
  3.     position: sticky;
  4.     top: 0;
  5.     z-index: var(--ifm-z-index-fixed);
  6.     background-color: white; /* 你可以根据需要添加其他样式 */
  7.     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  8.     padding: 10px 0;
  9. }
  11. .navbar-nav {
  12.     list-style: none;
  13.     display: flex;
  14.     gap: 20px;
  15. }
  17. .nav-item {
  18.     display: inline;
  19. }
  21. .nav-link {
  22.     text-decoration: none;
  23.     color: black;
  24. }
  26. .navbar-brand {
  27.     font-size: 1.5em;
  28.     font-weight: bold;
  29. }

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引用
  1. /*!
  2. *   Hugo Theme Stack
  3. *
  4. *   @author: Jimmy Cai
  5. *   @website: https://jimmycai.com
  6. *   @link: https://github.com/CaiJimmy/hugo-theme-stack
  7. 这个 SCSS 文件作为一个主文件，起到将所有相关样式文件引入到一个地方的作用。
  8. 它确保项目中的样式文件能够被组织和管理，使得最终生成的 CSS 文件包含了所有必要的样式定义。
  9. 这种结构化的样式管理方式有助于保持代码的清晰和模块化。
  10. */
  12. @import "breakpoints.scss";
  13. @import "variables.scss";
  14. @import "grid.scss";
  16. @import "external/normalize.scss";
  18. @import "partials/menu.scss";
  19. @import "partials/article.scss";
  20. @import "partials/widgets.scss";
  21. @import "partials/footer.scss";
  22. @import "partials/pagination.scss";
  23. @import "partials/sidebar.scss";
  24. @import "partials/base.scss";
  25. @import "partials/layout/article.scss";
  26. @import "partials/layout/list.scss";
  27. @import "partials/layout/404.scss";
  28. @import "partials/layout/search.scss";
  30. @import "general.scss";
  31. @import "custom.scss";
  32. // narbar
  33. @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也默认再此设置的）
标签： apache echarts 前端
本文转载自: https://blog.csdn.net/weixin_59786087/article/details/141109993
版权归原作者 人良爱编程 所有， 如有侵权，请联系我们删除。
登录后发布评论

“Hugo的Stack主题配置记录03-背景虚化-导航栏-Apache ECharts创建地图”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？