handle external menu item

README.md

@@ -20,9 +20,11 @@ params:
 ```
 
 ToC will float on the left/right side of the page.
+You can take a look at how `'right'` feels like in [Installation | Update](https://reorx.github.io/hugo-PaperModX/docs/installation/).
+
 The ToC box is responsive, it only shows on the side when minimum screen size is 1440px.
 
-this feature is enabled on this site.
+This feature is enabled on this site.
 
 
 ## InstantClick integration
@@ -55,7 +57,7 @@ Though PaperModX is designed to be minimal, accent color is still essential.
 It's a good way to show personality and make your site feels more delightful.
 
 The default color is a purple vibe,
-you can customize the colors of link, link underline and the hover variants of them
+you can customize the colors of link, link underline and their hover variants
 by override the following css variables in `assets/css/extended/custom.css` of your site.
 
 ```css
@@ -108,6 +110,10 @@ Available icons:
 - twitter-simple
 - pinboard-simple
 
+The icons are moved from `layouts/partials/svg.html` to `data/svg.toml`,
+makes it easier to maintain, it's now possible to have an index page
+to show all the icons, check it out at: [Icons Preview](https://reorx.github.io/hugo-PaperModX/docs/icons_preview/)
+
 
 ## Opinionated UI enhancements
 

assets/css/common/header.css

@@ -85,6 +85,17 @@ body:not(.dark) #sun {
     box-shadow: 0 2px 0 var(--primary);
 }
 
+#menu .external-link {
+    position: relative;
+}
+#menu .external-link svg {
+    width: 13px;
+    height: auto;
+    position: relative;
+    top: 1px;
+    margin-left: 3px;
+}
+
 .lang-switch li,
 .lang-switch ul,
 .logo-switches {

data/svg.toml

@@ -185,6 +185,14 @@ email = '''
     <polyline points="22,6 12,13 2,6"></polyline>
 </svg>
 '''
+external-link = '''
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-external-link" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+  <line x1="10" y1="14" x2="20" y2="4" />
+  <polyline points="15 4 20 4 20 9" />
+</svg>
+'''
 facebook = '''
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
     stroke-linecap="round" stroke-linejoin="round">

exampleSite/config.yml

@@ -38,6 +38,8 @@ languages:
                   weight: 10
                 - name: "@Author"
                   url: "https://reorx.com"
+                  params:
+                    external: true
 
     zh:
         languageName: ":cn:"

layouts/partials/header.html

@@ -127,10 +127,13 @@
                 <a href="{{ .URL | absLangURL }}" title="{{ .Title | default .Name }} {{- cond $is_search (" (Alt + /)" | safeHTMLAttr) ("" | safeHTMLAttr ) }}"
                 {{- if $is_search -}}data-no-instant{{- end -}}
                 {{- cond $is_search (" accesskey=/" | safeHTMLAttr) ("" | safeHTMLAttr ) }}
-                {{- if eq $menu_item_url $page_url }} class="active" {{- end }}>
+                {{- if eq $menu_item_url $page_url }} class="active" {{- end }}
+                {{- if .Params.External }} target="_blank" {{- end }}
+                >
                     {{- .Pre }}
                     {{- .Name -}}
                     {{ .Post -}}
+                    {{- if .Params.External }}<span class="external-link">{{ safeHTML (index $.Site.Data.svg "external-link") }}</span>{{- end }}
                 </a>
             </li>
             {{- end }}