导航与推荐创建

导航下拉框

下拉框的效果可以参考文章-分类、归档、标签。

这里博主把友链改成了导航，其中可以导向友链、推荐，后续有其他内容也可以自主添加哦。

在 hugo.toml 中修改如下内容（第 328-333 行附近）,注意缩进，可以参考文章-分类、归档、标签的上下文内容进行对齐：

toml

  [[params.menu.main]]
    name = '导航'
    url = '/links/'
    icon = 'ant-design:global-outlined'
    weight = 5
    [[params.menu.main.items]]
      name = '友链'
      url = '/links/'
      icon = 'ant-design:link-outlined'
    [[params.menu.main.items]]
      name = '推荐'
      url = '/recommend/'
      icon = 'ant-design:star-filled'
  [[params.menu.main]]
    name = '关于'
    url = '/about/'
    icon = 'ant-design:idcard-filled'
    weight = 6

推荐页与网站卡片创建

新建数据文件：data/recommend.yaml

这是推荐网站的数据存储文件，结构完全复用 links.yaml 的格式。

YAML

# =============================================================================
# 推荐网站数据（推荐网站页 /recommend/ 读取此文件）
# 页面壳子在 content/recommend.md，卡片内容在此维护

title: 推荐网站
cover: "/hero/tt1.png"

# linkGroups：推荐网站分组，可增删组；每组 links 为网站卡片列表
linkGroups:
  - name: 技术博客
    desc: 这里放一些优秀的技术博客推荐~
    links:
      - url: https://gohugo.io/
        avatar: https://gohugo.io/favicon-32x32.png
        name: Hugo
        blog: Hugo 官方文档
        desc: 全世界最快的静态网站生成框架
        color: "#FF4088"
        siteshot: https://s0.wp.com/mshots/v1/https://gohugo.io?w=800&h=450

      - url: https://www.go.dev/
        avatar: https://go.dev/images/favicon-gopher.png
        name: Go
        blog: Go 编程语言
        desc: 高性能、简洁的编程语言
        color: "#00ADD8"

  - name: 设计资源
    desc: 好用的设计工具和资源网站~
    links:
      - url: https://www.iconify.design/
        avatar: https://api.dicebear.com/7.x/adventurer/svg?seed=iconify
        name: Iconify
        blog: Iconify 图标库
        desc: 海量免费图标，本博客就在用
        color: "#1769AA"

      - url: https://unsplash.com/
        avatar: https://api.dicebear.com/7.x/adventurer/svg?seed=unsplash
        name: Unsplash
        blog: Unsplash 免费图片
        desc: 高质量免费可商用图片
        color: "#000000"

新建内容页面： content/recommend.md

这是页面的"壳子"，通过 layout: “recommend” 指定使用哪个布局模板。

Markdown

---
title: "推荐网站"
layout: "recommend"
cover: "/hero/tt1.png"
description: "一些值得推荐的优质网站"
---

新建布局模板：themes/aiovtue/layouts/_default/recommend.html

这是核心布局模板，这里同样复用友链页面的卡片样式。

HTML

{{ define "main" }}
{{ $layout := default "preview" site.Params.links.layout }}
{{ $data := hugo.Data.recommend }}
<article class="sakura-page sakura-links-page sakura-links-page--{{ $layout }}">
  {{- partial "page-header.html" . -}}
  <div class="sakura-links-main">
    <div class="content sakura-page-content">
      <div class="links-preview links-preview--{{ $layout }}">
        {{ range $data.linkGroups }}
          {{ partial "links-preview-group.html" (dict "PageLayout" $layout "Group" .) }}
        {{ end }}
      </div>
    </div>
  </div>
</article>
{{ end }}

修改themes\aiovtue\layouts\partials\page-styles.html：

为recommend布局添加卡片样式

将第47行（若没有找到，可以通过Ctrl+F查找）的：

HTML

{{- if eq .Layout "links" -}}

改为（注意不要修改任何缩进）：

HTML

{{- if or (eq .Layout "links") (eq .Layout "recommend") -}}