页尾菜单

页尾菜单

本文将描述如何配置页尾菜单。

如图所示,页尾菜单具有两级层次。

菜单集标识§

页尾菜单集标识为 footer

页尾菜单项参数§

ParameterTypeDescription
iconobject图标参数。
icon.vendorstring图标供应商,必填。
icon.namestring图标名称,必填。
icon.colorstring图标颜色。
icon.classNamestring图标 CSS 类名。

详情请参阅菜单配置

Example§

页尾菜单示例

menus.toml

 1[[footer]]
 2  identifier = 'a'
 3  name = 'A'
 4[[footer]]
 5  name = 'A-1'
 6  parent = 'a'
 7  url = '#a-1'
 8  [footer.params]
 9    [footer.params.icon]
10      color = '#712cf9'
11      name = '1-square'
12      vendor = 'bootstrap'
13[[footer]]
14  name = 'A-2'
15  parent = 'a'
16  url = '#a-2'
17  [footer.params]
18    [footer.params.icon]
19      color = '#712cf9'
20      name = '2-square'
21      vendor = 'bootstrap'
22[[footer]]
23  identifier = 'b'
24  name = 'B'
25[[footer]]
26  name = 'B-1'
27  parent = 'b'
28  url = '#b-1'
29  [footer.params]
30    [footer.params.icon]
31      color = 'green'
32      name = '1-square'
33      vendor = 'bootstrap'
34[[footer]]
35  name = 'B-2'
36  parent = 'b'
37  url = '#b-2'
38  [footer.params]
39    [footer.params.icon]
40      color = 'green'
41      name = '2-square'
42      vendor = 'bootstrap'
43[[footer]]
44  identifier = 'c'
45  name = 'C'
46[[footer]]
47  name = 'C-1'
48  parent = 'c'
49  url = '#c-1'
50  [footer.params]
51    [footer.params.icon]
52      color = 'blue'
53      name = '1-square'
54      vendor = 'bootstrap'
55[[footer]]
56  name = 'C-2'
57  parent = 'c'
58  url = '#c-2'
59  [footer.params]
60    [footer.params.icon]
61      color = 'blue'
62      name = '2-square'
63      vendor = 'bootstrap'
64[[footer]]
65  identifier = 'd'
66  name = 'D'
67[[footer]]
68  name = 'D-1'
69  parent = 'd'
70  url = '#d-1'
71  [footer.params]
72    [footer.params.icon]
73      color = 'red'
74      name = '1-square'
75      vendor = 'bootstrap'
76[[footer]]
77  name = 'D-2'
78  parent = 'd'
79  url = '#d-2'
80  [footer.params]
81    [footer.params.icon]
82      color = 'red'
83      name = '2-square'
84      vendor = 'bootstrap'
toml

menus.yaml

 1footer:
 2- identifier: a
 3  name: A
 4- name: A-1
 5  params:
 6    icon:
 7      color: '#712cf9'
 8      name: 1-square
 9      vendor: bootstrap
10  parent: a
11  url: '#a-1'
12- name: A-2
13  params:
14    icon:
15      color: '#712cf9'
16      name: 2-square
17      vendor: bootstrap
18  parent: a
19  url: '#a-2'
20- identifier: b
21  name: B
22- name: B-1
23  params:
24    icon:
25      color: green
26      name: 1-square
27      vendor: bootstrap
28  parent: b
29  url: '#b-1'
30- name: B-2
31  params:
32    icon:
33      color: green
34      name: 2-square
35      vendor: bootstrap
36  parent: b
37  url: '#b-2'
38- identifier: c
39  name: C
40- name: C-1
41  params:
42    icon:
43      color: blue
44      name: 1-square
45      vendor: bootstrap
46  parent: c
47  url: '#c-1'
48- name: C-2
49  params:
50    icon:
51      color: blue
52      name: 2-square
53      vendor: bootstrap
54  parent: c
55  url: '#c-2'
56- identifier: d
57  name: D
58- name: D-1
59  params:
60    icon:
61      color: red
62      name: 1-square
63      vendor: bootstrap
64  parent: d
65  url: '#d-1'
66- name: D-2
67  params:
68    icon:
69      color: red
70      name: 2-square
71      vendor: bootstrap
72  parent: d
73  url: '#d-2'
yaml

menus.json

  1{
  2   "footer": [
  3      {
  4         "identifier": "a",
  5         "name": "A"
  6      },
  7      {
  8         "name": "A-1",
  9         "params": {
 10            "icon": {
 11               "color": "#712cf9",
 12               "name": "1-square",
 13               "vendor": "bootstrap"
 14            }
 15         },
 16         "parent": "a",
 17         "url": "#a-1"
 18      },
 19      {
 20         "name": "A-2",
 21         "params": {
 22            "icon": {
 23               "color": "#712cf9",
 24               "name": "2-square",
 25               "vendor": "bootstrap"
 26            }
 27         },
 28         "parent": "a",
 29         "url": "#a-2"
 30      },
 31      {
 32         "identifier": "b",
 33         "name": "B"
 34      },
 35      {
 36         "name": "B-1",
 37         "params": {
 38            "icon": {
 39               "color": "green",
 40               "name": "1-square",
 41               "vendor": "bootstrap"
 42            }
 43         },
 44         "parent": "b",
 45         "url": "#b-1"
 46      },
 47      {
 48         "name": "B-2",
 49         "params": {
 50            "icon": {
 51               "color": "green",
 52               "name": "2-square",
 53               "vendor": "bootstrap"
 54            }
 55         },
 56         "parent": "b",
 57         "url": "#b-2"
 58      },
 59      {
 60         "identifier": "c",
 61         "name": "C"
 62      },
 63      {
 64         "name": "C-1",
 65         "params": {
 66            "icon": {
 67               "color": "blue",
 68               "name": "1-square",
 69               "vendor": "bootstrap"
 70            }
 71         },
 72         "parent": "c",
 73         "url": "#c-1"
 74      },
 75      {
 76         "name": "C-2",
 77         "params": {
 78            "icon": {
 79               "color": "blue",
 80               "name": "2-square",
 81               "vendor": "bootstrap"
 82            }
 83         },
 84         "parent": "c",
 85         "url": "#c-2"
 86      },
 87      {
 88         "identifier": "d",
 89         "name": "D"
 90      },
 91      {
 92         "name": "D-1",
 93         "params": {
 94            "icon": {
 95               "color": "red",
 96               "name": "1-square",
 97               "vendor": "bootstrap"
 98            }
 99         },
100         "parent": "d",
101         "url": "#d-1"
102      },
103      {
104         "name": "D-2",
105         "params": {
106            "icon": {
107               "color": "red",
108               "name": "2-square",
109               "vendor": "bootstrap"
110            }
111         },
112         "parent": "d",
113         "url": "#d-2"
114      }
115   ]
116}
json

上述例子实用 Bootstrap 图标,你也可以使用其他图标,比如 Font Awesome、Feather、Tabler、Simple 等。

  • 全部
  • English
  • 简体中文
  • 繁體中文
  • 最佳匹配
  • 最旧的
  • 最新的
  • 2020
  • 2022
  • 2023
  • HB Framework Authors
  • Hugo Authors
  • Banner
  • Build Tools
  • Comments
  • Configuration
  • Deployment
  • Develop
  • Footer
  • Header
  • Inline Frame
  • Installation
  • Look and Feel
  • Menus
  • Module
  • Modules
  • Shortcode
  • Sidebar
  • 主题
  • 侧边栏
  • 内容
  • 安装
  • 开发
  • 构建工具
  • 概览
  • 模块
  • 横幅
  • 短代码
  • 菜单
  • 观感
  • 评论
  • 部署
  • 配置
  • 页头
  • 页尾
  • 主題
  • 側邊欄
  • 內容
  • 安裝
  • 概覽
  • 構建工具
  • 模塊
  • 橫幅
  • 短代碼
  • 菜單
  • 觀感
  • 評論
  • 開發
  • 頁尾
  • 頁頭
  • Docs
  • Examples
  • Modules
  • News
  • Showcases
  • Themes
  • Tutorials
  • 教程
  • 文档
  • 新闻
  • 模块
  • 示例
  • 文檔
  • 新聞
  • 模塊
  • Alert
  • Animations
  • AOS
  • Applications
  • asciinema
  • Authors
  • Autoprefixer
  • Back to top
  • Background Image
  • beian
  • Bigger Picture
  • Bilibili
  • Blog
  • Bootstrap
  • Breadcrumb
  • Breakpoint
  • Classic
  • clean
  • Clearfix
  • Cloudflare Pages
  • Code Block Panel
  • CodePen
  • Comments
  • Comments Engine
  • Config Toggle
  • Contact
  • Contact Form
  • Content Panel
  • CSS
  • Dark Mode
  • defaultContentLanguageInSubdir
  • Diagrams
  • Disqus
  • Docker
  • Docs
  • DocSearch
  • Domain
  • Featured Image
  • Figure
  • Fonts
  • Footer
  • Footer Menus
  • frame
  • Gallery
  • GCSE
  • Giscus
  • Gist
  • Git
  • GitHub Pages
  • Go
  • Google
  • Google Fonts
  • graph
  • Header
  • Header Menus
  • Heading Sign
  • Highlight
  • HLS
  • Hooks
  • HTML
  • Hugo
  • Icon
  • iframe
  • Image
  • Image Link
  • Instagram
  • Introduction
  • JavaScript
  • JS
  • JSRun
  • KaTex
  • Language Picker
  • Lead
  • Light Mode
  • Markdown
  • Menus
  • Mermaid
  • Meta
  • Module
  • MPD
  • MPEG-DASH
  • Multilingual
  • NetEase Could Music
  • Netlify
  • News
  • Node.js
  • noscript
  • NPM
  • Pagination
  • Param
  • Picture
  • Pills
  • PostCSS
  • Posts
  • Profile
  • Progress Bar
  • PurgeCSS
  • PWA
  • Ratio
  • ref
  • Related Posts
  • relref
  • Return to top
  • RTLCSS
  • Scrollbar
  • Scrollspy
  • SCSS
  • Search
  • Search Engines
  • Slide
  • Social Links
  • Socials
  • Start Page
  • Staticman
  • Style Guide
  • Syntax Highlighting
  • Table of Contents
  • Taxonomies
  • Theme
  • Themes
  • tidy
  • ToC
  • Toggle
  • Tweet
  • Twikoo
  • TypeScript
  • Utterances
  • Videos
  • Vimeo
  • YouKu
  • YouTube
  • Front Matter
  • JSON
  • TOML
  • YAML
  • 主题
  • 代码块面板
  • 优酷
  • 作者
  • 元模块
  • 公告栏
  • 内容面板
  • 内容面板模块
  • 分类
  • 分页
  • 动画
  • 博客
  • 卡片
  • 哔哩哔哩
  • 回到顶部
  • 图库
  • 图标
  • 图片
  • 图片链接
  • 图表
  • 域名
  • 备案
  • 多语言
  • 字体
  • 幻灯片
  • 搜索
  • 文档
  • 文章
  • 断点
  • 新闻
  • 标题链接
  • 浅色模式
  • 深色模式
  • 滚动条
  • 特色图片
  • 目录
  • 相关文章
  • 社交链接
  • 简介
  • 网易云音乐
  • 联系表单
  • 背景图片
  • 菜单
  • 视频
  • 评论
  • 评论引擎
  • 语法高亮
  • 语言选项
  • 谷歌
  • 谷歌字体
  • 返回顶部
  • 进度条
  • 钩子
  • 面包屑导航
  • 页头
  • 页头菜单
  • 页尾
  • 页尾菜单
  • 风格指南
  • 主題
  • 代碼塊面板
  • 備案
  • 優酷
  • 元模塊
  • 內容面板
  • 內容面板模塊
  • 公告欄
  • 分頁
  • 分類
  • 動畫
  • 嗶哩嗶哩
  • 回到頂部
  • 圖庫
  • 圖標
  • 圖片
  • 圖片鏈接
  • 圖表
  • 多語言
  • 字體
  • 幻燈片
  • 文檔
  • 新聞
  • 斷點
  • 標題鏈接
  • 淺色模式
  • 滾動條
  • 特色圖片
  • 目錄
  • 相關文章
  • 社交鏈接
  • 簡介
  • 網易雲音樂
  • 聯繫表單
  • 背景圖片
  • 菜單
  • 視頻
  • 評論
  • 評論引擎
  • 語法高亮
  • 語言選項
  • 谷歌字體
  • 返回頂部
  • 進度條
  • 鉤子
  • 頁尾
  • 頁尾菜單
  • 頁頭
  • 頁頭菜單
  • 風格指南
  • 麪包屑導航