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

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

2024-08-18 22:08:46 前端知识 前端哥 230 939 我要收藏
  • 这几天逛了很多博客,找到了十年之约 (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也默认再此设置的)

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16159.html
标签
apache
评论
发布的文章

无涯教程-HTML5 - MathML

2024-08-25 23:08:46

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!