Hugo Blowfish主题配置

1. 创建 about 和 gallery 页面

1.1 about 页面

新建about页面：

hugo new about.md

菜单配置页面生效：

编辑 config/_default/menus.zh-cn.toml 文件，添加或修改菜单：

[[main]]
  identifier = "about"   # 一个唯一的标识符
  name = "about"         # 显示在菜单上的文字
  url = "/about/"      # 页面的链接，注意前后都有斜杠
  weight = 30

配置页面全宽：

在 layout 目录下新建 _config 目录，_config 下新建 simple.html ，内容如下：

{{ define "main" }}
  <article class="max-w-full">
    <header>
      {{ if .Params.showBreadcrumbs | default (.Site.Params.article.showBreadcrumbs | default false) }}
        {{ partial "breadcrumbs.html" . }}
      {{ end }}
      <h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">
        {{ .Title | emojify }}
      </h1>
    </header>
    <section class="max-w-full mt-6 prose dark:prose-invert">
      {{ .Content }}
    </section>
    <footer class="pt-8">
      {{ partial "sharing-links.html" . }}
    </footer>
  </article>
{{ end }}

编辑 about.md ，内容如下：

+++
date = '2024-10-13T15:37:42+08:00'
draft = false
title = 'about'
layout = 'simple'
#slug = '40cdf947'
+++

这里是你的自我介绍
1.2 gallery 页面

新建 gallery 页面：

hugo new gallery.md

相册页面：

在 static 目录下 创建 photos 目录存储照片，将照片放入 photos 下；

在 layout/_config 目录下，新建 photos.html ，内容如下：

{{ define "main" }}
<div class="gallery-photos page">
  {{ range (sort (readDir "./static/photos") "Name" "desc")}}
    {{ if ( .Name | findRE "\\.(gif|jpg|jpeg|tiff|png|bmp|webp|avif|jxl)") }}
    <div class="gallery-photo">
      <img class="photo-img" loading='lazy' decoding="async" src="/photos/{{ .Name }}" alt="{{ .Name }}" />
      <span class="photo-title">{{ .Name | replaceRE "^[0-9 -]+(.*)[.].*" "$1"}}</span><span class="photo-time">{{ .Name | replaceRE "^([0-9-]+).*[.].*" "$1" }}</span>
    </div>
    {{ end }}
  {{ end }}
</div>

<style>
.gallery-photos{width:100%;}
.gallery-photo{width:24.9%;position: relative;visibility: hidden;overflow: hidden;}
.gallery-photo.visible{visibility: visible;animation: fadeIn 2s;}
.gallery-photo img{display: block;width:100%;border-radius:0;padding:4px;animation: fadeIn 1s;cursor: pointer;transition: all .4s ease-in-out;}
.gallery-photo span.photo-title,.gallery-photo span.photo-time{background: rgba(0, 0, 0, 0.3);padding:0px 8px;font-size:0.9rem;color: #fff;display:none;animation: fadeIn 1s;}
.gallery-photo span.photo-title{position:absolute;bottom:4px;left:4px;}
.gallery-photo span.photo-time{position:absolute;top:4px;left:4px;font-size:0.8rem;}
.gallery-photo:hover span.photo-title{display:block;}
.gallery-photo:hover img{transform: scale(1.1);}
@media screen and (max-width: 1280px) {
    .gallery-photo{width:33.3%;}
}
@media screen and (max-width: 860px) {
    .gallery-photo{width:49.9%;}
}
@media (max-width: 683px){
    .photo-time{display: none;}
}
@keyframes fadeIn{
    0% {opacity: 0;}
   100% {opacity: 1;}
}
</style>
<script src="https://immmmm.com/waterfall.min.js"></script>
<script src="https://immmmm.com/imgStatus.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
    imgStatus.watch('.photo-img', function(imgs) {
      if(imgs.isDone()){
        waterfall('.gallery-photos');
        let pagePhoto = document.querySelectorAll('.gallery-photo');
        for(var i=0;i < pagePhoto.length;i++){pagePhoto[i].className += " visible"};
      }
    });
    window.addEventListener('resize', function () {
      waterfall('.gallery-photos');
    });
});
</script>
<script src="https://immmmm.com/view-image.js"></script>
<script src="https://immmmm.com/lately.min.js"></script>
<script>
  window.Lately && Lately.init({ target: '.photo-time'});
  window.ViewImage && ViewImage.init('.gallery-photo img')
</script>
{{ end }}

编辑 gallery.md 文件，内容如下：

+++
#date = '2024-10-14T15:44:52+08:00'
draft = false
title = 'gallery'
layout = 'photos'
#slug = '2c2d4238'
+++

2. 短代码配置

2.1 自定义短代码

在 layout 目录下新建 shortcodes 目录，shortcodes 下新建 gallery.html ，内容如下：

{{/*
gallery.html: A self-contained shortcode to display images from a folder inside /static.
Usage: {{< gallery "path/to/images" >}}
*/}}

{{/* 1. 参数检查 */}}
{{- $folder := .Get 0 -}}
{{- if not $folder -}}
  {{- errorf "The 'gallery' shortcode requires a folder path. Page: %s" .Page.Path -}}
  {{- return -}}
{{- end -}}

{{/* 2. 构造正确的读取路径，并检查文件夹是否存在 */}}
{{- $readPath := print "static/" $folder -}}
{{- $files := slice -}}
{{- if fileExists $readPath -}}
  {{- $files = readDir $readPath -}}
{{- else -}}
  {{- warnf "Gallery folder not found at '%s'. Page: %s" $readPath .Page.Path -}}
{{- end -}}

{{/* 3. 渲染画廊 */}}
{{- if gt (len $files) 0 -}}
<div class="simple-gallery">
  {{- range sort $files "Name" "asc" -}}
    {{/* 过滤掉非图片文件 (不区分大小写) */}}
    {{- if .Name | findRE "(?i)\\.(gif|jpg|jpeg|tiff|png|bmp|webp|avif|jxl)$" -}}
      
      {{/* 构造图片的公开URL (更简洁的方式) */}}
      {{- $imageURL := print $folder "/" .Name | absURL -}}
      
      <figure class="simple-gallery-item">
        <a href="{{ $imageURL }}" target="_blank" rel="noopener noreferrer">
          <img
            loading="lazy"
            decoding="async"
            src="{{ $imageURL }}"
            alt="{{ .Name | replaceRE "\\..*" "" }}" />
        </a>
        <figcaption class="simple-gallery-caption">{{ .Name | replaceRE "\\..*" "" }}</figcaption>
      </figure>

    {{- end -}}
  {{- end -}}
</div>
{{- end -}}
2.2 短代码使用

在 static 目录下新建 images 目录用来存放你的图片；例如，你的图片存放在 static/images/test/下

页面/文章中使用段代码只需添加：

{{< gallery "images/test" >}}

3. 配置 waline 评论系统

在 layout 目录下新建 partials 目录，partials 下新建 comments.html ，内容如下：

<br/>
<span style="color:rgba(var(--color-neutral-400),var(--tw-text-opacity));">
    <span class="post-meta-item-text" >  文章阅读量:  </span>
    <span class="waline-pageview-count">⏳</span><div></div><br/>
</span>
<script type="text/javascript">
      document.getElementByClassName("aline-pageview-count")[0].data-path = window.location.pathname;
</script>
<script src='//unpkg.com/@waline/client@v2/dist/waline.js'></script>
<link href='//unpkg.com/@waline/client@v2/dist/waline.css' rel='stylesheet' />
<div id="vcomments"></div>
  <script>
    if ({{i18n "lanString"}}=="zh-CN") {
                    Waline.init({
            el: '#vcomments',
           serverURL: '自行填入',
           emoji: ['https://valine-emoji.bili33.top/bilibilitv','https://valine-emoji.bili33.top/bilibiliHotKey','https://valine-emoji.bili33.top/Tieba-New','https://valine-emoji.bili33.top/weibo',],
           meta:['nick', 'mail'],
           pageview: true,
           reaction: true,
           lang: "zh-CN",
           locale: {
          reactionTitle: '•畅所欲言——这里是开放区•',
          comment: '留言板',
          placeholder: '点击下方登录后再评论，会有惊喜哦~',
          gifSearchPlaceholder: '搜索表情包...',
          admin: '作者',
          sofa: '还没有人评论，快来抢沙发吧',
          anonymous: '匿名者'
        }
          });

    } 
    else {
                Waline.init({
            el: '#vcomments',
           serverURL: 'https://waline-1-e5403272.deta.app/',
           emoji: ['https://valine-emoji.bili33.top/bilibilitv','https://valine-emoji.bili33.top/bilibiliHotKey','https://valine-emoji.bili33.top/Tieba-New','https://valine-emoji.bili33.top/weibo',],
           meta:['nick', 'mail'],
           pageview: true,
           reaction: true,
           lang:{{i18n "lanString"}},
          });

    }
  document.getElementsByClassName('wl-power')[0].style.display = 'none';
      document.querySelector(".wl-actions a").style.display = 'none'
  </script>
  <style type="text/css">
    :root{
      --waline-color: var(--tw-prose-quotes);
      --waline-info-color: var(--tw-prose-quotes);
      --waline-info-bgcolor: var(--tw-ring-color);
      --waline-theme-color: rgba(var(--color-primary-400));
      --waline-bgcolor: transparent;
      --waline-border-color: #747474;
    }
    .wl-editor:focus, .wl-input:focus {
    background: transparent;
        }
    .wl-editor,.wl-input{
      max-width:88%;
    }
    .wl-reaction-item.active .wl-reaction-votes {
    color: white;
    }
  </style>

serverURL：填入你的评论系统域名

4. 推送到 github

请参考我的博客：https://lihe.blog

Github Pages 配置部分

标签
文章分享到：

留下评论

您的邮箱地址不会被公开。 必填项已用 * 标注