Browse Source

feat(feature/section-menu): add support for html link decoration

Josh Habdas 11 months ago
parent
commit
f02c68f8db
Signed by: Josh Habdas <jhabdas@protonmail.com> GPG Key ID: B148B31154C75A74
2 changed files with 11 additions and 1 deletions
  1. 10
    0
      docs/content/feature/section-menu.md
  2. 1
    1
      layouts/partials/shortcode/navmenu.html

+ 10
- 0
docs/content/feature/section-menu.md View File

@@ -47,4 +47,14 @@ Adjust link names and menu position by adding the following code block to your {
47 47
   url = "/post/"
48 48
 ```
49 49
 
50
+Decorate links with SVG icons using `pre` and `post`:
51
+
52
+```toml
53
+[[menu.main]]
54
+  name = "Search"
55
+  identifier = "search"
56
+  url = "/search/"
57
+  post = "<svg aria-hidden=\"true\" class=\"i-search\" viewBox=\"0 0 32 32\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentcolor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\"><circle cx=\"14\" cy=\"14\" r=\"12\" /><path d=\"M23 23 L30 30\" /></svg>"
58
+```
59
+
50 60
 See {{< external href="https://gohugo.io/content-management/menus/" text="Menus in Hugo" />}} for additional information.

+ 1
- 1
layouts/partials/shortcode/navmenu.html View File

@@ -2,6 +2,6 @@
2 2
   <meta itemprop="name" content="Navigation Menu">
3 3
   {{ range (index .menus .name) }}
4 4
     {{ $is_active := or ($.page.IsMenuCurrent $.name .) ($.page.HasMenuCurrent $.name .) }}
5
-    <a itemprop="url" {{ if $is_active }}class="active"{{ end }} href="{{ .URL }}">{{ .Name }}</a>
5
+    <a itemprop="url"{{ if $is_active }} class="active"{{ end }} href="{{ .URL }}">{{ if .Pre }}{{ .Pre | safeHTML }} {{ end }}{{ .Name }}{{ if .Post }} {{ .Post | safeHTML }}{{ end }}</a>
6 6
   {{- end }}
7 7
 </nav>

Loading…
Cancel
Save