Browse Source

feat: add icon shortcode to render icons within Markdown content

See https://sourcethemes.com/academic/docs/writing-markdown-latex/#icons
George Cushen 5 năm trước cách đây
mục cha
commit
581faa19e7

+ 18 - 0
exampleSite/content/post/writing-technical-content/index.md

@@ -261,4 +261,22 @@ renders as
 A Markdown aside is useful for displaying notices, hints, or definitions to your readers.
 {{% /alert %}}
 
+### Icons
+
+Academic enables you to use a wide range of [icons from _Font Awesome_ and _Academicons_](https://sourcethemes.com/academic/docs/page-builder/#icons) in addition to [emojis](https://sourcethemes.com/academic/docs/writing-markdown-latex/#emojis).
+
+Here are some examples using the `icon` shortcode to render icons:
+
+```markdown
+{{</* icon name="terminal" pack="fas" */>}} Terminal  
+{{</* icon name="python" pack="fab" */>}} Python  
+{{</* icon name="r-project" pack="fab" */>}} R
+```
+
+renders as
+
+{{< icon name="terminal" pack="fas" >}} Terminal  
+{{< icon name="python" pack="fab" >}} Python  
+{{< icon name="r-project" pack="fab" >}} R
+
 ### Did you find this page helpful? Consider sharing it 🙌

+ 9 - 0
layouts/shortcodes/icon.html

@@ -0,0 +1,9 @@
+{{- if (.Get "name") -}}
+  {{- $icon := .Get "name" -}}
+  {{- $pack := or (.Get "pack") "fas" -}}
+  {{- $pack_prefix := $pack -}}
+  {{- if in (slice "fab" "fas" "far" "fal") $pack -}}
+    {{- $pack_prefix = "fa" -}}
+  {{- end -}}
+  <i class="{{ $pack }} {{ $pack_prefix }}-{{ $icon }} {{with (.Get "padding_left")}}pl-{{.}}{{end}} {{with (.Get "padding_right")}}pr-{{.}}{{end}}"></i>
+{{- end -}}