修改single page模版里的标题字体大小→直接使用内联样式style=””

<!-- 也可以使用fs-3 bootstrap class来修改字体大小 -->
<h2 class="display-1 fw-bold text-center text-primary pb-3" style="font-size: 2.5rem;">
  {{ .Title }}
</h2>

修改list page显示item数→修改config.yaml

# 增加如下配置：
paginate: 12

如何单独定义一个目录的single.html模版：

• 在主题layouts目录中找到_default目录，在里面创建custom.html，用于作为指定页面的模版，然后在内容页面singlepage.md的frontmatter中加入layout: custom(注意yaml冒号后有空格)
• 注意：hugo中只要访问的是目录，则会默认访问的是listpage页面

用hugo range渲染md文件frontmatter图片数组

• html模板：

  <div class="container">
    {{ range .Params.sections }}//外层循环sections的item
    <div class="row justify-content-center py-4">
      <div class="row pb-4">
        <div class="col-12 d-flex justify-content-center fs-5">
          <hr class="col-md-5" />
          {{ .title }}
          <hr class="col-md-5" />
        </div>
      </div>
      {{ range .items }}//内层循环item里的images
      <div class="col-md-3 images">
        <!-- 添加图片链接 -->
        <a href="{{ .url }}">
          <img src="{{ .src }}" class="img-fluid" alt="{{ .alt }}" />
        </a>
      </div>
      {{ end }}
    </div>
    {{ end }}
  </div>

• md文件：

---
sections: 
  - title: Wi-Fi&BLE模块
    items: 
    - src: "/images/mod-wifi-4g1.png"
      url: "../module-wbr3" 
      alt: "wbr3"
  - title: 4G&2G模块
    items: 
    - src: "/images/mod-4g1.png"
      url: "../module-air720d" 
      alt: "air720d"
layout: product
---

可以通过params域给菜单条目添加用户定义内容.

常见的用例是定义一个参数添加css类给特定菜单条目.
或者传递一个"_blank",让菜单链接在新页面打开。
感谢:-)

#给菜单选项增加css
menu:
  main:
  - identifier: about
    name: about hugo
    params:
      class: highlight-menu-item
    pre: <i class='fa fa-heart'></i>
    url: /about/
    weight: -110

#给菜单链接增加target="_blank"，让用户在新页面打开链接
    - name: "google↗"
      url: "https://google.com"
      params:
        target: "_blank"
      weight: 7

<!-- html模板配置target="_blank" -->
      <ul class="navbar-nav ms-auto mb-2 mb-xl-0">
        {{ range .Site.Menus.main }}
          <li class="nav-item dropdown text-center">
            {{ if .Children }}
              <a class="nav-link dropdown-toggle text-primary px-4" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">{{ .Name }}</a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                {{ range .Children }}
                <!-- with .Params.target参数判断是否在新页面打开链接 -->
                <li><a class="dropdown-item" href="{{ .URL }}" {{ with .Params.target }}target="{{ . }}"{{ end }}>{{ .Name }}</a></li>
                {{ end }}
              </ul>
            {{ else }}
              <a class="nav-link text-primary px-4" href="{{ .URL }}" {{ with .Params.target }}target="{{ . }}"{{ end }}>{{ .Name }}</a>
            {{ end }}
          </li>
        {{ end }}
      </ul>

在header中配置谷歌分析

  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-YOUR_ID"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-YOUR_ID');
  </script>