Featured image of post 【合集】Hugo博客

【合集】Hugo博客

欢迎加QQ群一起成长:291557205

Windows安装Hugo

下载解压Hugo扩展版

配置环境变量:C:\Users\xzhang10\IdeaProjects\blog-hugo\hugo_extended_0.134.0_windows-amd64

img_233.png

查看是否安装成功:hugo version

MacOS安装Hugo

安装:brew install hugo

查看是否安装成功:hugo version

常用命令

 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
33
34
# 指令查询
hugo help

# 启动服务 指令查询
hugo server --help

# 启动 
hugo server

# 包含草稿内容启动 
hugo server -D

# 构建静态文件
hugo
# 构建静态文件 包含草稿文章
hugo -D
# 构建静态文件 包含过期文章
hugo -E
# 构建静态文件 包含未来文章
hugo -F

# 构建并启动
hugo server
# 构建并启动 包含草稿文章
hugo server -D

# 编辑内容时,如果您希望浏览器自动重定向到您上次修改的页面,请运行:
hugo server --navigateToChanged

# 创建新文章
hugo new content content/post/my-first-post.md

# 清理mod
hugo mod clean

新建站点,并使用stack主题

1
2
3
4
5
6
7
8
9
# 新建站点
hugo new site zxalive

# 进入站点
cd zxalive

# 下载stack主题
# stack主题文档:https://stack.jimmycai.com/guide/getting-started
git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack

删除站点下原hugo.toml,然后将主题下示例站点的hugo.toml文件复制到博客主程序目录下

img_234.png

1
2
3
4
5
# 新建文章
hugo new content content/post/my-first-post.md

# 包含草稿内容启动
hugo server -D

访问:http://localhost:1313/

Stack主题配置及优化

简码

https://stack.jimmycai.com/writing/shortcodes#shortcodes

https://www.bilibili.com/video/BV1By411H7cb/?t=13&spm_id_from=333.1007.tianma.1-2-2.click&vd_source=c57311942d38847adc4597a126bba185 这样写:

1
{{< bilibili BV1By411H7cb >}}

效果:

ico获取

https://fontawesome.com/

https://tablericons.com/

Stroke调至0.5px, 单击图标复制,在assets/icons下新建"图标名.svg",内容粘贴到其中即可。

主页分类左颜色边框和右统计数字

复制 themes\hugo-theme-stack\layouts\partials\widget\categories.html 到 layouts\partials\widget\categories.html

然后修改见下面

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
{{- $context := .Context -}}
{{- $limit := default 10 .Params.limit -}}
<section class="widget tagCloud">
    <div class="widget-icon">
        {{ partial "helper/icon" "categories" }}
    </div>
    <h2 class="widget-title section-title">{{ T "widget.categoriesCloud.title" }}</h2>

    <!-- 自定义修改:分类左颜色边框和右统计数字 -->
    <div class="tagCloud-tags">
        {{ range first $limit $context.Site.Taxonomies.categories.ByCount }}
            <a href="{{ .Page.RelPermalink }}" class="font_size_{{ .Count }}"
               style="border-left: 6px solid {{ .Page.Params.style.background }}; filter:saturate(1.7);">
                {{ .Page.Title }}<span class="category-count">{{ .Count }}</span>
            </a>
        {{ end }}
    </div>
</section>

assets\scss\custom.scss中添加(没有文件则自己新建一个)

1
2
3
4
/* 自定义新增:分类统计颜色 */
.category-count {
  color: var(--body-text-color);
}

主页标签右统计数字

复制 themes\hugo-theme-stack\layouts\partials\widget\tag-cloud.html 到 layouts\partials\widget\tag-cloud.html

然后修改见下面

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
{{- $context := .Context -}}
{{- $limit := default 10 .Params.limit -}}
<section class="widget tagCloud">
    <div class="widget-icon">
        {{ partial "helper/icon" "tag" }}
    </div>
    <h2 class="widget-title section-title">{{ T "widget.tagCloud.title" }}</h2>

    <!-- 自定义修改:标签右统计数字 -->
    <div class="tagCloud-tags">
        {{ range first $limit $context.Site.Taxonomies.tags.ByCount }}
            <a href="{{ .Page.RelPermalink }}" class="font_size_{{ .Count }}">
                {{ .Page.Title }} <span class="tagCloud-count">{{ .Count }}</span>
            </a>
        {{ end }}
    </div>
</section>

assets\scss\custom.scss中添加(没有文件则自己新建一个)

1
2
3
4
/* 自定义新增:标签云统计颜色 */
.tagCloud-count {
  color: var(--body-text-color);
}

友链页:友链说明放下面

复制 themes\hugo-theme-stack\layouts\partials\article\components\links.html 到 layouts\partials\article\components\links.html

然后在</div>下面添加

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- 自定义新增:友链说明放下面 -->
<article class="has-image main-article">
<section class="article-content">
    <p><strong>下方评论,即可申请友链,平均5分钟内添加~</strong></p>
    <p><strong>申请要求</strong></p>
    <ul>
        <li>有不少于5篇原创文章,且稳定维护更新;</li>
        <li>不含任何违法违规内容;</li>
        <li>已添加本网站到友情链接。</li>
    </ul>
    <p><strong>本站信息</strong></p>
    <ul>
        <li>站点名称:知行博客</li>
        <li>站点简介:Java开发代码实战,搜你所需,快速CV,早点下班~</li>
        <li>站点地址:https://zxalive.com/</li>
        <li>站点Logo:https://zxalive.com/avatar.webp</li>
        <li>我的站点友链接地址:https://zxalive.com/links/</li>
        <li>RSS地址:https://zxalive.com/rss.xml</li>
        <li>站点地图:https://zxalive.com/sitemap.xml</li>
    </ul>
</section>

</article>

友链3栏

assets\scss\custom.scss中添加(没有文件则自己新建一个)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* 自定义新增:友情链接3栏 */
@media (min-width: 1024px) {
  .article-list--compact.links {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 修改为三栏 */
    gap: 8px; /* 使用gap属性来设置列与列之间的间距,这样就不需要单独设置margin-right了 */
    background: none;
    box-shadow: none;

    article {
      background: var(--card-background);
      border: none;
      box-shadow: var(--shadow-l2);
      margin-bottom: 8px; /* 如果需要底部间距,可以保留 */
      border-radius: 10px;
      /* 移除或注释掉原有的 :nth-child(odd) 选择器,因为它不再适用 */
      /* &:nth-child(odd) {
        margin-right: 8px;
      } */
    }
  }
}

归档页添加标签云

复制 themes\hugo-theme-stack\layouts_default\archives.html 到 layouts/_default/archives.html

然后在下面添加

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<!-- 自定义新增: 归档页添加标签云 -->
<section class="widget tagCloud">
    <h2 class="section-title">Tags</h2> <!-- 假设标签税收分类的标题就是 "Tags" -->

    <div class="tagCloud-tags">
        {{- $tags := $.Site.Taxonomies.tags -}}
        {{- if $tags -}}
            {{- range $name, $taxonomy := $tags -}}
                {{- $tagCount := len $taxonomy.Pages -}}
                <a href="{{ "/tags/" | relURL }}{{ $name | urlize }}" class="tag-cloud-item">
                    {{ $name }}<span class="tag-cloud-count">{{ $tagCount }}</span>
                </a>
            {{- end -}}
        {{- else -}}
            <p>No tags found.</p>
        {{- end -}}
    </div>
</section>

<!-- 这里是一个空行 -->

assets\scss\custom.scss中添加(没有文件则自己新建一个)

1
2
3
4
/* 自定义新增:标签云统计颜色 */
.tagCloud-count {
  color: var(--body-text-color);
}

页脚加:备案号

复制 themes\hugo-theme-stack\layouts\partials\footer\footer.html 到 layouts\partials\footer\footer.html

然后在</section>下面添加

1
2
3
4
<!-- 自定义新增:备案号 -->
<section class="powerby">
    <a href="Https://beian.miit.gov.cn" target="_blank" rel="noopener">皖ICP备2024056275号-1</a>
</section>

页脚加:全站统计

复制 themes\hugo-theme-stack\layouts\partials\footer\footer.html 到 layouts\partials\footer\footer.html

然后在</section>下面添加

1
2
3
4
5
6
7
8
9
<!-- 自定义新增:全站统计 -->
<section class="totalcount">
    {{$scratch := newScratch}}
    {{ range (where .Site.Pages "Kind" "page" )}}
    {{$scratch.Add "total" .WordCount}}
    {{ end }}
    发表了{{ len (where .Site.RegularPages "Section" "post") }}篇文章 ·
    总计{{ div ($scratch.Get "total") 1000.0 | lang.FormatNumber 2 }}k字
</section>

assets\scss\custom.scss中添加(没有文件则自己新建一个)

1
2
3
4
5
6
/* 自定义新增:全站统计 */
.totalcount {
  color: var(--card-text-color-secondary);
  font-weight: normal;
  margin-bottom: 5px;
}

页脚加:博客动态运行时间

复制 themes\hugo-theme-stack\layouts\partials\footer\footer.html 到 layouts\partials\footer\footer.html

然后在</section>下面添加

 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
<!-- 自定义新增:博客动态运行时间 -->
<section class="run">
    本站已稳定运行
    <span id="run-time" class="run-time"></span>
</section>
<script>
    function updateRunningTime() {
        let s1 = '2018-10-26'; // 站点创建时间
        s1 = new Date(s1.replace(/-/g, "/"));
        let s2 = new Date();
        let timeDifference = s2.getTime() - s1.getTime();

        let days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
        let hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        let minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
        let seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);

        let result = days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒";
        document.getElementById('run-time').innerHTML = result;
    }

    // 页面加载完成后立即调用一次,然后每1000毫秒(1秒)更新一次
    updateRunningTime();
    setInterval(updateRunningTime, 1000);
</script>

assets\scss\custom.scss中添加(没有文件则自己新建一个)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
/* 自定义新增:博客动态运行时间 */
.run {
  color: var(--card-text-color-secondary);
  font-weight: normal;

  .run-time {
    font-weight: bold;
    color: var(--run-time-color);
  }
}
:root {
 --run-time-color: #9e8f9f;
  &[data-scheme="dark"] {
   --run-time-color: #d5cfc4;
  }
}

一键返回顶部按钮

复制 themes\hugo-theme-stack\layouts_default\single.html 到 layouts_default\single.html

{{ define "main" }}下面添加

1
2
    <!-- 自定义新增:一键返回顶部按钮 -->
    <a href="#top" class="backtop">{{ partial "arrow.html" . }}</a>

layouts\partials\head\custom.html中添加(没有文件则自己新建一个)

1
2
<!-- 自定义新增:一键返回顶部按钮 -->
<span id="top"></span>

新建 layouts\partials\arrow.html,填入 https://fontawesome.com/ 或者 https://tablericons.com/ 获取到的图标svg代码,也可直接用下面的代码

1
2
3
4
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-circle-up" class="svg-inline--fa fa-chevron-circle-up fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
    <path fill="currentColor" d="M8 256C8 119 119 8 256 8s248 111 248 248-111 248-248 248S8 393 8 256zm231-113.9L103.5 277.6c-9.4 9.4-9.4 24.6 0 33.9l17 17c9.4 9.4 24.6 9.4 33.9 0L256 226.9l101.6 101.6c9.4 9.4 24.6 9.4 33.9 0l17-17c9.4-9.4 9.4-24.6 0-33.9L273 142.1c-9.4-9.4-24.6-9.4-34 0z">
    </path>
</svg>

assets\scss\custom.scss中添加(没有文件则自己新建一个)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
/* 自定义新增:一键返回顶部按钮 */
.backtop {
     color: #b3b1b1;
     position: fixed;
     right: 16px;
     bottom: 16px;
     width: 32px;
     height: 32px;
     z-index: 999998;
}

外链后面加图标

复制 themes\hugo-theme-stack\layouts_default_markup\render-link.html 到 layouts_default_markup\render-link.html

然后{{ .Text | safeHTML }}后面添加:

1
2
3
4
5
6
7
8
9
<!-- 自定义新增:外链后面加图标 -->
{{ if strings.HasPrefix .Destination "http" }}
<span style="white-space: nowrap;">
    <svg width=".7em" height=".7em" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg">
        <path d="m13 3l3.293 3.293l-7 7l1.414 1.414l7-7L21 11V3z" fill="currentColor" />
        <path d="M19 19H5V5h7l-2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-5l-2-2v7z" fill="currentColor">
    </svg>
</span>
{{ end }}

缩小归档页分类卡片尺寸

assets\scss\custom.scss中添加(没有文件则自己新建一个)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
/* 自定义新增:缩小归档页分类卡片尺寸 */
.subsection-list {

  .article-list--tile {
    padding-bottom: 0px;

    article {
      width: 200px;
      height: 90px;
      margin-right: 5px;
    }
  }
}

参考文档

  1. stack官方主题文档
  2. Hugo-Stack主题页
  3. 仓库最新版本
  4. HUGO+Stack下的美化修改
  5. Hugo Stack主题装修笔记
  6. Hugo Stack主题装修笔记Part 2

Cloudflare托管

先将你的站点zxalive推到github仓库,然后打开cloudflare

(我这里外面套了一层文件夹blog-hugo,主要是存其他文件的)

img_236.png

img_235.png

img_237.png

img_238.png

img_239.png

接入谷歌广告

参考Halo博客接入谷歌广告

img_241.png

img_240.png

使用Github Actions自动构建发布到阿里云服务器

参考:https://spaceforfox.cn/post/how-to-build-a-site/

打开阿里云ecs控制台

点击1,进入服务器内

img_245.png

创建密钥对,创建完会自动下载。然后点击绑定密钥对,并重启服务器。

img_242.png

进入你的github仓库,新建两个secret,对应 服务器公网IP 和 上面下载的密钥内容

img_243.png

创建文件:.github/workflows/main.yml,然后每次push,就会自动构建并发布到云服务器

img_246.png

 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
33
34
35
36
37
38
name: deploy

on:
 push:
 workflow_dispatch:
 schedule:
  # Runs everyday at 8:00 AM
  - cron: "0 0 * * *"

jobs:
 build:
  runs-on: ubuntu-latest
  steps:
   - name: Checkout
     uses: actions/checkout@v2
     with:
      submodules: true
      fetch-depth: 0

   - name: Setup Hugo
     uses: peaceiris/actions-hugo@v2
     with:
      hugo-version: "latest"
      extended: true

   - name: Build Web
     run: |
      cd zxalive           # 切换到你的网站源代码目录
      hugo --minify --gc   # 执行 Hugo 构建 minify:压缩html、css、js gc:先删除旧的文件再重新生成      

   - name: Deploy
     uses: wlixcc/SFTP-Deploy-Action@v1.0
     with:
      username: 'root' #你在服务器设定的登录名
      server: '${{ secrets.SERVER_IP }}'
      ssh_private_key: ${{ secrets.SSH_PRIVATE_KEY }}
      local_path: './zxalive/public'
      remote_path: 'nginx/html' #你在服务器设置的放置网站静态文件的文件夹

actions可以看构建记录

img_247.png

Vercel部署Waline评论系统

注册leadcloud

参考:https://waline.js.org/guide/get-started/

注册并登录leadcloud,然后创建一个应用(开发版),打开应用查看应用凭证。

https://console.leancloud.cn/apps

img_212.png

Vercel部署waline

vercle部署waline 如果你未登录的话,Vercel 会让你注册或登录,请使用 GitHub 账户进行快捷登录。

img_221.png

输入waline,并创建,等待完成后,点击 Go to Dashboard

配置三个环境变量LEAN_ID、LEAN_KEY、LEAN_MASTER_KEY,它们的值分别对应上一步在 LeanCloud 中获得的APP ID、APP KEY、Master Key。

国内版需要增加配置LEAN_SERVER,对应leancloud的REST API服务器地址

img_227.png

点击replay,等待部署好

img_224.png

点击主域名查看并注册用户

img_226.png

首次注册的为管理员

img_211.png

hugo配置waline地址:https://waline-zxalive.vercel.app

img_228.png

云服务器上部署Waline评论系统

添加二级域名+https证书

阿里云添加二级域名:阿里云-域名控制台

img_231.png

给二级域名安装https证书,参考:Nginx配置Https免费证书

nginx配置中增加server,然后重启nginx:docker restart nginx

img_197.png

 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
33
34
35
36
37
server {
    listen 80;
    listen 443 ssl http2;
    server_name  waline.zxalive.com;
    root /www/wwwroot/waline.zxalive.com;
    if ($server_port !~ 443){
        rewrite ^(/.*)$ https://$host$1 permanent;
    }

    # SSL 设置
    ssl_certificate /usr/share/nginx/html/cert/waline.zxalive.com.pem;
    ssl_certificate_key /usr/share/nginx/html/cert/waline.zxalive.com.key;
    ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
    ssl_ciphers EECDH+CHACHA20:EECDH+CHACHA20-draft:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;
    ssl_prefer_server_ciphers on;
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 10m;
    add_header Strict-Transport-Security "max-age=31536000";
    
    # 代理到8360端口
    location / {
        proxy_pass http://服务器ip:8360;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header REMOTE-HOST $remote_addr;
        add_header X-Cache $upstream_cache_status;
        add_header Cache-Control no-cache;
        expires 12h;
    }

    error_page 500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html/zxalive/public;
    }
}

创建mysql数据库容器

如果没有mysql,先部署一个mysql

进入mysql容器:docker exec -it mysql mysql -u root -p,然后输出密码

创建一个数据库:CREATE DATABASE waline;

使用数据库:USE waline;

waline.sql 复制并执行,会创建表,查看是否创建成功:SHOW TABLES;

img_219.png

创建waline容器

如果在mysql容器内,先退出mysql:exit,然后执行:

服务端环境变量说明: https://waline.js.org/reference/server/env.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
docker rm -f waline
docker run --name waline \
        -p 8360:8360 \
        -e MYSQL_HOST=服务器ip \
        -e MYSQL_PORT=3306 \
        -e MYSQL_DB=waline \
        -e MYSQL_USER=root \
        -e MYSQL_PASSWORD=数据库密码 \
        -e SITE_URL="https://zxalive.com" \
        -e SITE_NAME="知行博客" \
        -e SERVER_URL="https://waline.zxalive.com" \
        --restart always \
        -d lizheming/waline

开启服务器安全组:8360端口

img_210.png

注册,首次注册的为管理员: https://waline.zxalive.com/ui/register

hugo配置waline地址:https://waline.zxalive.com

img_230.png

评论邮件通知

参考: https://waline.js.org/guide/features/notification.html#%E9%82%AE%E4%BB%B6%E9%80%9A%E7%9F%A5

https://mail.qq.com/ 登录qq邮箱,右上角账号与安全->安全设置->生成授权码

服务端环境变量说明: https://waline.js.org/reference/server/env.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
docker rm -f waline
docker run --name waline \
        -p 8360:8360 \
        -e TZ=Asia/Shanghai \
        -e MYSQL_HOST=服务器ip \
        -e MYSQL_PORT=3306 \
        -e MYSQL_DB=waline \
        -e MYSQL_USER=root \
        -e MYSQL_PASSWORD=数据库密码 \
        -e SITE_URL=https://zxalive.com \
        -e SITE_NAME=知行博客 \
        -e SERVER_URL=https://waline.zxalive.com \
        -e SMTP_HOST=smtp.qq.com \
        -e SMTP_PORT=465 \
        -e SMTP_USER=1205362172@qq.com \
        -e SMTP_PASS=QQ邮箱获取的授权码 \
        -e SMTP_SECURE=true \
        -e SITE_NAME=知行博客 \
        -e SITE_URL=https://zxalive.com \
        -e AUTHOR_EMAIL=1205362172@qq.com \
        --restart always \
        -d lizheming/waline

RSS订阅

默认自带 https://zxalive.com/index.xml

相册功能

新建 layouts\shortcodes\gallery.html

1
<a href="{{ .Get "src" }}" data-ngThumb="{{ .Get "src" }}">{{ .Get "title" }}</a>

新建 layouts\shortcodes\galleries.html

data-nanogallery2里面的配置参考nanogallery2用法指导

 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
    <script src="https://fastly.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/nanogallery2@3.0.5/dist/css/nanogallery2.min.css">
    <script src="https://fastly.jsdelivr.net/npm/nanogallery2@3.0.5/dist/jquery.nanogallery2.min.js"></script>
</head>

<body>
<div data-nanogallery2='{
	 "thumbnailDisplayTransition":          "none",
     "thumbnailDisplayTransitionDuration":  500,
     "thumbnailDisplayInterval":            30,
     "galleryDisplayTransition":            "none",
     "galleryDisplayTransitionDuration":    500,
     "galleryDisplayMode": "rows",
     "thumbnailDisplayOutsideScreen": "false",
     "eventsDebounceDelay": 10,
     "thumbnailL1BorderHorizontal": 0,
     "thumbnailL1BorderVertical": 0,
     "thumbnailLabel": {
        "titleFontSize": "0.6em"
     },
     "thumbnailHoverEffect2": "image_scale_1.00_1.10|label_backgroundColor_rgba(0,0,0,0)_rgba(255,255,255,0)",
     "galleryTheme": {
        "thumbnail": {
            "borderRadius": "8px"
        }
     },
     "thumbnailToolbarImage": {
        "topLeft": "",
        "topRight": "",
        "bottomLeft": "",
        "bottomRight": ""
     },
     "viewerToolbar":   {
        "display": true,
        "standard": "label"
     },
     "viewerTools":     {
        "topLeft":    "pageCounter, playPauseButton",
        "topRight":   "downloadButton, rotateLeft, zoomButton, fullscreenButton, closeButton"
     },
     "viewerGalleryTWidth": 40,
     "viewerGalleryTHeight": 40
}'>
    {{ .Inner }}
</div>
</body>

</html>

md文章里面使用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
[comment]: <>
{使用时去掉我{< galleries >}}
{使用时去掉我{< gallery src="https://www.sulvblog.cn/image/16_IMG_20220430_202353.png" title="香克斯">}}
{使用时去掉我{< gallery src="https://www.sulvblog.cn/image/17_IMG_20220430_202228.png" >}}
{使用时去掉我{< gallery src="https://www.sulvblog.cn/image/19_IMG_20220430_200901.png" >}}
{使用时去掉我{< gallery src="https://www.sulvblog.cn/image/16_IMG_20220430_202353.png" title="香克斯" >}}
{使用时去掉我{< gallery src="https://www.sulvblog.cn/image/17_IMG_20220430_202228.png" >}}
{使用时去掉我{< gallery src="https://www.sulvblog.cn/image/19_IMG_20220430_200901.png" >}}
{使用时去掉我{< gallery src="https://www.sulvblog.cn/image/16_IMG_20220430_202353.png" title="香克斯" >}}
{使用时去掉我{< gallery src="https://www.sulvblog.cn/image/17_IMG_20220430_202228.png" >}}
{使用时去掉我{< gallery src="https://www.sulvblog.cn/image/19_IMG_20220430_200901.png" >}}
{使用时去掉我{< /galleries >}}
皖ICP备2024056275号-1
发表了78篇文章 · 总计148.99k字
本站已稳定运行