add exampleSite
This commit is contained in:
Reorx
parent
7880623a8d
commit
883c9ec553
|
|
@ -6,7 +6,6 @@ on:
|
||||||
- "README.md"
|
- "README.md"
|
||||||
branches:
|
branches:
|
||||||
- master
|
- master
|
||||||
- exampleSite
|
|
||||||
|
|
||||||
jobs:
|
jobs:
|
||||||
deploy:
|
deploy:
|
||||||
|
|
@ -14,21 +13,18 @@ jobs:
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v3
|
- uses: actions/checkout@v3
|
||||||
with:
|
with:
|
||||||
ref: exampleSite
|
fetch-depth: 1
|
||||||
submodules: true # Fetch Hugo themes (true OR recursive)
|
|
||||||
fetch-depth: 0 # Fetch all history for .GitInfo and .Lastmod
|
|
||||||
|
|
||||||
- name: Setup Hugo
|
- name: Setup Hugo
|
||||||
uses: peaceiris/actions-hugo@v2
|
uses: peaceiris/actions-hugo@v2
|
||||||
with:
|
with:
|
||||||
hugo-version: '0.91.2'
|
hugo-version: '0.91.2'
|
||||||
# extended: true
|
|
||||||
|
|
||||||
- name: Build
|
- name: Build
|
||||||
run: hugo -D --verbose --minify
|
run: cd exampleSite && hugo -D --verbose --minify
|
||||||
|
|
||||||
- name: Deploy
|
- name: Deploy
|
||||||
uses: peaceiris/actions-gh-pages@v3
|
uses: peaceiris/actions-gh-pages@v3
|
||||||
with:
|
with:
|
||||||
github_token: ${{ secrets.GITHUB_TOKEN }}
|
github_token: ${{ secrets.GITHUB_TOKEN }}
|
||||||
publish_dir: ./public
|
publish_dir: ./exampleSite/public
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
run-example:
|
||||||
|
cd exampleSite && hugo server -D -p 13131
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
# Compiled Object files, Static and Dynamic libs (Shared Objects)
|
||||||
|
*.o
|
||||||
|
*.a
|
||||||
|
*.so
|
||||||
|
|
||||||
|
# Folders
|
||||||
|
_obj
|
||||||
|
_test
|
||||||
|
|
||||||
|
# Architecture specific extensions/prefixes
|
||||||
|
*.[568vq]
|
||||||
|
[568vq].out
|
||||||
|
|
||||||
|
*.cgo1.go
|
||||||
|
*.cgo2.c
|
||||||
|
_cgo_defun.c
|
||||||
|
_cgo_gotypes.go
|
||||||
|
_cgo_export.*
|
||||||
|
|
||||||
|
_testmain.go
|
||||||
|
|
||||||
|
*.exe
|
||||||
|
*.test
|
||||||
|
|
||||||
|
/public
|
||||||
|
.DS_Store
|
||||||
|
.hugo_build.lock
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
# hugo-PaperModX Example
|
||||||
|
|
||||||
|
This repository offers an example site for [hugo-PaperModX](https://github.com/reorx/hugo-PaperModX)
|
||||||
|
|
@ -0,0 +1,215 @@
|
||||||
|
baseURL: "https://reorx.github.io/hugo-PaperModX/"
|
||||||
|
title: PaperModX
|
||||||
|
paginate: 5
|
||||||
|
theme: hugo-PaperModX
|
||||||
|
# NOTE remove this line if you copy exampleSite outof hugo-PaperModX
|
||||||
|
themesdir: ../..
|
||||||
|
|
||||||
|
enableInlineShortcodes: true
|
||||||
|
enableRobotsTXT: true
|
||||||
|
buildDrafts: false
|
||||||
|
buildFuture: false
|
||||||
|
buildExpired: false
|
||||||
|
enableEmoji: true
|
||||||
|
pygmentsUseClasses: true
|
||||||
|
# googleAnalytics: UA-123-45
|
||||||
|
|
||||||
|
minify:
|
||||||
|
disableXML: true
|
||||||
|
# minifyOutput: true
|
||||||
|
|
||||||
|
languages:
|
||||||
|
en:
|
||||||
|
languageName: "English"
|
||||||
|
weight: 1
|
||||||
|
menu:
|
||||||
|
main:
|
||||||
|
- name: Archive
|
||||||
|
url: archives
|
||||||
|
weight: 5
|
||||||
|
- name: Search
|
||||||
|
url: search/
|
||||||
|
weight: 10
|
||||||
|
- name: Tags
|
||||||
|
url: tags/
|
||||||
|
weight: 10
|
||||||
|
- name: Categories
|
||||||
|
url: categories/
|
||||||
|
weight: 10
|
||||||
|
- name: Icons
|
||||||
|
url: icons/
|
||||||
|
weight: 10
|
||||||
|
- name: "@Author"
|
||||||
|
url: "https://reorx.com"
|
||||||
|
|
||||||
|
zh:
|
||||||
|
languageName: ":cn:"
|
||||||
|
languageAltTitle: 中文
|
||||||
|
weight: 2
|
||||||
|
title: PaperModX
|
||||||
|
profileMode:
|
||||||
|
enabled: true
|
||||||
|
title: PaperModX
|
||||||
|
# imageUrl: "#"
|
||||||
|
# imageTitle: my image
|
||||||
|
# imageWidth: 120
|
||||||
|
# imageHeight: 120
|
||||||
|
subtitle: >
|
||||||
|
<p>Hugo 主题</p>
|
||||||
|
☄️ 快速 | ☁️ 流畅 | 📖 可读性 | 📱 响应式
|
||||||
|
buttons:
|
||||||
|
- name: 文档
|
||||||
|
url: posts
|
||||||
|
- name: 标签
|
||||||
|
url: tags
|
||||||
|
menu:
|
||||||
|
main:
|
||||||
|
- name: 归档
|
||||||
|
url: archives/
|
||||||
|
weight: 5
|
||||||
|
- name: 标签
|
||||||
|
url: tags
|
||||||
|
weight: 10
|
||||||
|
- name: 分类
|
||||||
|
url: categories
|
||||||
|
weight: 10
|
||||||
|
- name: 系列
|
||||||
|
url: series
|
||||||
|
weight: 10
|
||||||
|
- name: 搜索
|
||||||
|
url: search/
|
||||||
|
weight: 20
|
||||||
|
- name: "@Author"
|
||||||
|
url: "https://reorx.com"
|
||||||
|
|
||||||
|
outputs:
|
||||||
|
home:
|
||||||
|
- HTML
|
||||||
|
- RSS
|
||||||
|
- JSON
|
||||||
|
|
||||||
|
params:
|
||||||
|
env: production # to enable google analytics, opengraph, twitter-cards and schema.
|
||||||
|
description: "Theme PaperModX - https://github.com/reorx/hugo-PaperModX"
|
||||||
|
author: ["reorx", "adityatelange"]
|
||||||
|
|
||||||
|
defaultTheme: auto
|
||||||
|
# disableThemeToggle: true
|
||||||
|
ShowShareButtons: true
|
||||||
|
ShowReadingTime: true
|
||||||
|
# disableSpecial1stPost: true
|
||||||
|
displayFullLangName: true
|
||||||
|
ShowPostNavLinks: true
|
||||||
|
ShowBreadCrumbs: true
|
||||||
|
ShowCodeCopyButtons: true
|
||||||
|
ShowToc: true
|
||||||
|
TocOpen: true
|
||||||
|
TocSide: 'right'
|
||||||
|
# DisableSmoothScroll: true
|
||||||
|
EnableInstantClick: true
|
||||||
|
# comments: false
|
||||||
|
images: ["cover.png"]
|
||||||
|
|
||||||
|
profileMode:
|
||||||
|
enabled: false
|
||||||
|
title: PaperModX
|
||||||
|
imageUrl: "#"
|
||||||
|
imageTitle: my image
|
||||||
|
# imageWidth: 120
|
||||||
|
# imageHeight: 120
|
||||||
|
buttons:
|
||||||
|
- name: Archives
|
||||||
|
url: archives
|
||||||
|
- name: Tags
|
||||||
|
url: tags
|
||||||
|
|
||||||
|
homeInfoParams:
|
||||||
|
Title: "PaperModX"
|
||||||
|
Content: >
|
||||||
|
Welcome to demo of hugo's theme PaperModX.
|
||||||
|
|
||||||
|
- **PaperModX** is a simple but fast and responsive theme with useful feature-set that enhances UX.
|
||||||
|
|
||||||
|
- PaperModX is based on theme [PaperMod](https://github.com/adityatelange/hugo-PaperMod).
|
||||||
|
|
||||||
|
socialIcons:
|
||||||
|
- name: github-simple
|
||||||
|
url: "https://github.com/reorx/hugo-PaperModX"
|
||||||
|
- name: rss-simple
|
||||||
|
url: "index.xml"
|
||||||
|
|
||||||
|
editPost:
|
||||||
|
URL: "https://github.com/reorx/hugo-PaperModX/tree/exampleSite/content"
|
||||||
|
Text: "Suggest Changes" # edit text
|
||||||
|
appendFilePath: true # to append file path to Edit link
|
||||||
|
|
||||||
|
# label:
|
||||||
|
# text: "Home"
|
||||||
|
# icon: icon.png
|
||||||
|
# iconHeight: 35
|
||||||
|
|
||||||
|
# analytics:
|
||||||
|
# google:
|
||||||
|
# SiteVerificationTag: "XYZabc"
|
||||||
|
|
||||||
|
# assets:
|
||||||
|
# favicon: "<link / abs url>"
|
||||||
|
# favicon16x16: "<link / abs url>"
|
||||||
|
# favicon32x32: "<link / abs url>"
|
||||||
|
# apple_touch_icon: "<link / abs url>"
|
||||||
|
# safari_pinned_tab: "<link / abs url>"
|
||||||
|
|
||||||
|
# cover:
|
||||||
|
# hidden: true # hide everywhere but not in structured data
|
||||||
|
# hiddenInList: true # hide on list pages and home
|
||||||
|
# hiddenInSingle: true # hide on single page
|
||||||
|
|
||||||
|
# fuseOpts:
|
||||||
|
# isCaseSensitive: false
|
||||||
|
# shouldSort: true
|
||||||
|
# location: 0
|
||||||
|
# distance: 1000
|
||||||
|
# threshold: 0.4
|
||||||
|
# minMatchCharLength: 0
|
||||||
|
# keys: ["title", "permalink", "summary", "content"]
|
||||||
|
|
||||||
|
taxonomies:
|
||||||
|
category: categories
|
||||||
|
tag: tags
|
||||||
|
series: series
|
||||||
|
|
||||||
|
markup:
|
||||||
|
goldmark:
|
||||||
|
renderer:
|
||||||
|
unsafe: true
|
||||||
|
# highlight:
|
||||||
|
# # anchorLineNos: true
|
||||||
|
# codeFences: true
|
||||||
|
# guessSyntax: true
|
||||||
|
# lineNos: true
|
||||||
|
# # noClasses: false
|
||||||
|
# style: monokai
|
||||||
|
|
||||||
|
privacy:
|
||||||
|
vimeo:
|
||||||
|
disabled: false
|
||||||
|
simple: true
|
||||||
|
|
||||||
|
twitter:
|
||||||
|
disabled: false
|
||||||
|
enableDNT: true
|
||||||
|
simple: true
|
||||||
|
|
||||||
|
instagram:
|
||||||
|
disabled: false
|
||||||
|
simple: true
|
||||||
|
|
||||||
|
youtube:
|
||||||
|
disabled: false
|
||||||
|
privacyEnhanced: true
|
||||||
|
|
||||||
|
services:
|
||||||
|
instagram:
|
||||||
|
disableInlineCSS: true
|
||||||
|
twitter:
|
||||||
|
disableInlineCSS: true
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
timeout: 30000
|
||||||
|
enableInlineShortcodes: true
|
||||||
|
|
||||||
|
taxonomies:
|
||||||
|
category: categories
|
||||||
|
tag: tags
|
||||||
|
series: series
|
||||||
|
|
||||||
|
privacy:
|
||||||
|
vimeo:
|
||||||
|
disabled: false
|
||||||
|
simple: true
|
||||||
|
|
||||||
|
twitter:
|
||||||
|
disabled: false
|
||||||
|
enableDNT: true
|
||||||
|
simple: true
|
||||||
|
disableInlineCSS: true
|
||||||
|
|
||||||
|
instagram:
|
||||||
|
disabled: false
|
||||||
|
simple: true
|
||||||
|
|
||||||
|
youtube:
|
||||||
|
disabled: false
|
||||||
|
privacyEnhanced: true
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
---
|
||||||
|
title: Archives
|
||||||
|
---
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
---
|
||||||
|
title: 归档
|
||||||
|
---
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
---
|
||||||
|
title: "Icons Preview"
|
||||||
|
layout: icons
|
||||||
|
---
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
---
|
||||||
|
title: 文章列表
|
||||||
|
---
|
||||||
|
|
@ -0,0 +1,50 @@
|
||||||
|
---
|
||||||
|
author: "Hugo Authors"
|
||||||
|
title: "Emoji Support"
|
||||||
|
date: "2019-03-05"
|
||||||
|
description: "Guide to emoji usage in Hugo"
|
||||||
|
tags: ["emoji"]
|
||||||
|
ShowToc: false
|
||||||
|
ShowBreadCrumbs: false
|
||||||
|
---
|
||||||
|
|
||||||
|
Emoji can be enabled in a Hugo project in a number of ways.
|
||||||
|
|
||||||
|
<!--more-->
|
||||||
|
|
||||||
|
The [`emojify`](https://gohugo.io/functions/emojify/) function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes).
|
||||||
|
|
||||||
|
To enable emoji globally, set `enableEmoji` to `true` in your site's [configuration](https://gohugo.io/getting-started/configuration/) and then you can type emoji shorthand codes directly in content files; e.g.
|
||||||
|
|
||||||
|
<p><span class="nowrap"><span class="emojify">🙈</span> <code>:see_no_evil:</code></span> <span class="nowrap"><span class="emojify">🙉</span> <code>:hear_no_evil:</code></span> <span class="nowrap"><span class="emojify">🙊</span> <code>:speak_no_evil:</code></span></p>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
The [Emoji cheat sheet](http://www.emoji-cheat-sheet.com/) is a useful reference for emoji shorthand codes.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**N.B.** The above steps enable Unicode Standard emoji characters and sequences in Hugo, however the rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack; e.g.
|
||||||
|
|
||||||
|
{{< highlight html >}}
|
||||||
|
.emoji {
|
||||||
|
font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
|
||||||
|
}
|
||||||
|
{{< /highlight >}}
|
||||||
|
|
||||||
|
{{< css.inline >}}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.emojify {
|
||||||
|
font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
|
||||||
|
font-size: 2rem;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
@media screen and (max-width:650px) {
|
||||||
|
.nowrap {
|
||||||
|
display: block;
|
||||||
|
margin: 25px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
{{< /css.inline >}}
|
||||||
|
|
@ -0,0 +1,182 @@
|
||||||
|
---
|
||||||
|
author: "Hugo Authors"
|
||||||
|
title: "Markdown Syntax Guide"
|
||||||
|
date: "2019-03-11"
|
||||||
|
description: "Sample article showcasing basic Markdown syntax and formatting for HTML elements."
|
||||||
|
tags: ["markdown", "css", "html", "themes"]
|
||||||
|
categories: ["themes", "syntax"]
|
||||||
|
series: ["Themes Guide"]
|
||||||
|
aliases: ["migrate-from-jekyl"]
|
||||||
|
ShowToc: true
|
||||||
|
TocOpen: true
|
||||||
|
---
|
||||||
|
|
||||||
|
This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
|
||||||
|
|
||||||
|
<!--more-->
|
||||||
|
|
||||||
|
## Headings
|
||||||
|
|
||||||
|
The following HTML `<h1>`—`<h6>` elements represent six levels of section headings. `<h1>` is the highest section level while `<h6>` is the lowest.
|
||||||
|
|
||||||
|
# H1
|
||||||
|
|
||||||
|
## H2
|
||||||
|
|
||||||
|
### H3
|
||||||
|
|
||||||
|
#### H4
|
||||||
|
|
||||||
|
##### H5
|
||||||
|
|
||||||
|
###### H6
|
||||||
|
|
||||||
|
## Paragraph
|
||||||
|
|
||||||
|
Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
|
||||||
|
|
||||||
|
Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
|
||||||
|
|
||||||
|
## Blockquotes
|
||||||
|
|
||||||
|
The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations.
|
||||||
|
|
||||||
|
#### Blockquote without attribution
|
||||||
|
|
||||||
|
> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
|
||||||
|
> **Note** that you can use _Markdown syntax_ within a blockquote.
|
||||||
|
|
||||||
|
#### Blockquote with attribution
|
||||||
|
|
||||||
|
> Don't communicate by sharing memory, share memory by communicating.
|
||||||
|
>
|
||||||
|
> — <cite>Rob Pike[^1]</cite>
|
||||||
|
|
||||||
|
[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
|
||||||
|
|
||||||
|
## Tables
|
||||||
|
|
||||||
|
Tables aren't part of the core Markdown spec, but Hugo supports them out-of-the-box.
|
||||||
|
|
||||||
|
| Name | Age |
|
||||||
|
| ----- | --- |
|
||||||
|
| Bob | 27 |
|
||||||
|
| Alice | 23 |
|
||||||
|
|
||||||
|
#### Inline Markdown within tables
|
||||||
|
|
||||||
|
| Italics | Bold | Code |
|
||||||
|
| --------- | -------- | ------ |
|
||||||
|
| _italics_ | **bold** | `code` |
|
||||||
|
|
||||||
|
## Code Blocks
|
||||||
|
|
||||||
|
#### Inline Code
|
||||||
|
|
||||||
|
`This is Inline Code`
|
||||||
|
|
||||||
|
#### Only `pre`
|
||||||
|
|
||||||
|
<pre>
|
||||||
|
This is pre text
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
#### Code block with backticks
|
||||||
|
|
||||||
|
```
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>Example HTML5 Document</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<p>Test</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Code block with backticks and language specified
|
||||||
|
|
||||||
|
```html {linenos=true}
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>Example HTML5 Document</title>
|
||||||
|
<meta name="description" content="Sample article showcasing basic Markdown syntax and formatting for HTML elements.">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<p>Test</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Code block indented with four spaces
|
||||||
|
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Example HTML5 Document</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<p>Test</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
#### Code block with Hugo's internal highlight shortcode
|
||||||
|
|
||||||
|
{{< highlight html >}}
|
||||||
|
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Example HTML5 Document</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<p>Test</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
{{< /highlight >}}
|
||||||
|
|
||||||
|
#### Gist
|
||||||
|
|
||||||
|
{{< gist spf13 7896402 >}}
|
||||||
|
|
||||||
|
## List Types
|
||||||
|
|
||||||
|
#### Ordered List
|
||||||
|
|
||||||
|
1. First item
|
||||||
|
2. Second item
|
||||||
|
3. Third item
|
||||||
|
|
||||||
|
#### Unordered List
|
||||||
|
|
||||||
|
- List item
|
||||||
|
- Another item
|
||||||
|
- And another item
|
||||||
|
|
||||||
|
#### Nested list
|
||||||
|
|
||||||
|
- Fruit
|
||||||
|
- Apple
|
||||||
|
- Orange
|
||||||
|
- Banana
|
||||||
|
- Dairy
|
||||||
|
- Milk
|
||||||
|
- Cheese
|
||||||
|
|
||||||
|
## Other Elements — abbr, sub, sup, kbd, mark
|
||||||
|
|
||||||
|
<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
|
||||||
|
|
||||||
|
H<sub>2</sub>O
|
||||||
|
|
||||||
|
X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
|
||||||
|
|
||||||
|
Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the session.
|
||||||
|
|
||||||
|
Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
|
||||||
|
|
@ -0,0 +1,334 @@
|
||||||
|
---
|
||||||
|
author: "markdown.xyz"
|
||||||
|
title: "Markdown 入门指南"
|
||||||
|
date: "2022-04-12"
|
||||||
|
description: "Markdown 概述、工作原理以及用途。"
|
||||||
|
tags: ["markdown", "css", "html", "themes"]
|
||||||
|
categories: ["themes", "syntax"]
|
||||||
|
series: ["Themes Guide"]
|
||||||
|
ShowToc: true
|
||||||
|
TocOpen: true
|
||||||
|
---
|
||||||
|
|
||||||
|
# Markdown 入门
|
||||||
|
|
||||||
|
> 原文链接: [Markdown 入门指南 | Markdown 指南中文版](https://www.markdown.xyz/getting-started/)
|
||||||
|
|
||||||
|
_Markdown 的概述、工作原理，以及用途。_
|
||||||
|
|
||||||
|
|
||||||
|
<!--TOC-->
|
||||||
|
|
||||||
|
## Markdown 是什么？
|
||||||
|
|
||||||
|
Markdown
|
||||||
|
是一种轻量级的标记语言，可用于在纯文本文档中添加格式化元素。Markdown 由
|
||||||
|
[John Gruber](https://daringfireball.net/projects/markdown/) 于 2004
|
||||||
|
年创建，如今已成为世界上最受欢迎的标记语言之一。
|
||||||
|
|
||||||
|
使用 Markdown 与使用 [WYSIWYG](https://en.wikipedia.org/wiki/WYSIWYG)
|
||||||
|
编辑器不同。在 Microsoft Word
|
||||||
|
之类的应用程序中，单击按钮以设置单词和短语的格式，并且，更改立即可见。而
|
||||||
|
Markdown 与此不同，当你创建 Markdown 格式的文件时，可以在文本中添加
|
||||||
|
Markdown 语法，以指示哪些单词和短语看起来应该有所不同。
|
||||||
|
|
||||||
|
例如，要表示标题，只须在短语前面添加一个井号即可（例如，
|
||||||
|
`# Heading One`）。或者要加粗一个短语，只须在短语前后各加两个星号即可（例如，`**this text is bold**`）。可能需要一段时间才能习惯在文本中看到
|
||||||
|
Markdown
|
||||||
|
语法，尤其是如果你已习惯了所见即所得的应用程序。以下屏幕截展示了
|
||||||
|
Markdown 文件在 [VSCode](https://code.visualstudio.com/) 中显示的效果。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
你可以使用文本编辑器为纯文本文件添加 Markdown
|
||||||
|
格式的元素。或者，你也可以安装针对 macOS、Windows、Linux、iOS 和 Android
|
||||||
|
操作系统的 Markdown 应用程序。或者还可以使用一些基于 Web 的应用程序用于
|
||||||
|
Markdown 编写。
|
||||||
|
|
||||||
|
依赖于你所使用的应用程序，你可能无法实时预览格式化的文档。但是没关系。[根据
|
||||||
|
Gruber 的说法](https://daringfireball.net/projects/markdown/)，Markdown
|
||||||
|
的语法被设计为可读性强且不显眼，因此即使 Markdown
|
||||||
|
文件中的文本未经过渲染也易于阅读。
|
||||||
|
|
||||||
|
> Markdown 语法的首要设计目标是尽可能易读。基于这个目标，Markdown
|
||||||
|
> 格式的文档能够以纯文本形式原样发布，而不会看起来像被填满了标签或格式化指令。
|
||||||
|
|
||||||
|
## 为什么要使用 Markdown？
|
||||||
|
|
||||||
|
你可能想知道为什么人们使用 Markdown
|
||||||
|
而不是所用即所得（WYSIWYG）编辑器。当你可以通过按下界面中的按钮来设置文本格式时，为什么还要使用
|
||||||
|
Markdown 来书写呢？事实证明，人们使用 Markdown 而不是 WYSIWYG
|
||||||
|
编辑器的原因有两个：
|
||||||
|
|
||||||
|
- Markdown 处处可用。人们使用它来创建
|
||||||
|
[网站](#websites)、[文档](#documents)、[便签](#notes)、[书籍](#books)、[演示文稿](#presentations)、[邮件](#email)
|
||||||
|
和 [技术文档](#documentation)。
|
||||||
|
|
||||||
|
- Markdown 是可移植的。几乎可以使用任何应用程序打开包含 Markdown
|
||||||
|
格式的文本文件。如果你不喜欢当前使用的 Markdown 应用程序了，则可以将
|
||||||
|
Markdown 文件导入另一个 Markdown 应用程序中。这与 Microsoft Word
|
||||||
|
等文字处理应用程序形成了鲜明的对比，Microsoft Word
|
||||||
|
将你的内容锁定在专有文件格式中。
|
||||||
|
|
||||||
|
- Markdown 是独立于平台的。你可以在运行任何操作系统的任何设备上创建
|
||||||
|
Markdown 格式的文本。
|
||||||
|
|
||||||
|
- Markdown
|
||||||
|
能适应未来的变化。即使你正在使用的应用程序将来会在某个时候不能使用了，你仍然可以使用文本编辑器读取
|
||||||
|
Markdown
|
||||||
|
格式的文本。当涉及需要无限期保存的书籍、大学论文和其他里程碑式的文件时，这是一个重要的考虑因素。
|
||||||
|
|
||||||
|
- Markdown 无处不在。例如 [Reddit](/tools/reddit/) 和 GitHub
|
||||||
|
等网站都支持 Markdown，许多桌面和基于 Web 的应用程序也都支持
|
||||||
|
Markdown。
|
||||||
|
|
||||||
|
## 工欲善其事，必先利其器
|
||||||
|
|
||||||
|
Markdown
|
||||||
|
入门的最佳方式就是多使用它。由于有大量免费工具的存在，这比以前任何时候都更容易开始上手了。
|
||||||
|
|
||||||
|
你甚至都不需要下载任何程序，就可以使用几种在线的 Markdown 编辑器来编写
|
||||||
|
Markdown。[MDEditor](https://www.zybuluo.com/mdeditor) 是最好的在线 Markdown
|
||||||
|
编辑器之一。进入其站点就可以开始在左侧窗格中书写了。渲染后的文档在右侧窗格预览。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
阅读本指南时，你可以打开 MDEditor 网站。这样，你就可以一边学习 Markdown
|
||||||
|
语法一边练习了。熟悉 Markdown
|
||||||
|
之后，你可以在台式计算机或移动设备上安装支持 Markdown 的应用程序。
|
||||||
|
|
||||||
|
## Markdown 的工作原理
|
||||||
|
|
||||||
|
MDEditor 让 Markdown
|
||||||
|
的编写变得容易，因为它隐藏了幕后发生的事情，但是该过程的总体工作方式是值得探索的。
|
||||||
|
|
||||||
|
在使用 Markdown 格式书写时，文本内容存储在带有 `.md` 或 `.markdown`
|
||||||
|
扩展名的纯文本文件中。那然后呢？你的 Markdown 格式的文件如何转换为 HTML
|
||||||
|
或可打印的文档呢？
|
||||||
|
|
||||||
|
简单来说，你需要一个能够处理 Markdown 文件的 *Markdown
|
||||||
|
应用程序*。有许多应用程序可供选择，从简单的脚本到类似于 Microsoft Word
|
||||||
|
的桌面应用程序，应有尽有。尽管它们在视觉上有所不同，但所有应用程序都执行相同的操作。像
|
||||||
|
MDEditor 一样，它们都是将 Markdown 格式的文本转换为 HTML，以便可以在
|
||||||
|
Web 浏览器中显示。
|
||||||
|
|
||||||
|
Markdown 应用程序使用一种称为 *Markdown
|
||||||
|
处理器*（也通常称为“解析器”或“实现”）的东西将获取到的 Markdown
|
||||||
|
格式的文本输出为 HTML 格式。此时，可以在 Web
|
||||||
|
浏览器中查看你的文档，或者将其与样式表组合并打印。你可以在下图看到此过程的直观表示。
|
||||||
|
|
||||||
|
<div class="alert alert-info">
|
||||||
|
注意： Markdown
|
||||||
|
应用程序和处理器是两个单独的组件。为了简洁起见，在下图中，我将它们组合为一个元素（即
|
||||||
|
“Markdown应用程序”）。
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
总而言之，这是一个四步的过程：
|
||||||
|
|
||||||
|
1. 使用文本编辑器或 Markdown 专用的应用程序创建 Markdown
|
||||||
|
文件。该文件应带有 `.md` 或 `.markdown` 扩展名。
|
||||||
|
2. 在 Markdown 应用程序中打开 Markdown 文件。
|
||||||
|
3. 使用 Markdown 应用程序将 Markdown 文件转换为 HTML 文档。
|
||||||
|
4. 在 web 浏览器中查看 HTML 文件，或使用 Markdown
|
||||||
|
应用程序将其转换为其他文件格式，例如 PDF。
|
||||||
|
|
||||||
|
从你的角度来看，该过程将根据你使用的应用程序的不同而有所不同。例如，MDEditor
|
||||||
|
本质上将第 1-3
|
||||||
|
步组合到一个单一、无缝的界面中，你要做的就是在左窗格中键入内容，然后转换结果就在右窗格中就神奇地出现了。但是，如果你使用的是其他工具（例如带有静态网站生成器的文本编辑器），则会发现该过程更为明显。
|
||||||
|
|
||||||
|
## Markdown 有什么用？
|
||||||
|
|
||||||
|
Markdown 是做笔记、为网站创建内容以及生成可打印文档的快速、简便的方法。
|
||||||
|
|
||||||
|
学习 Markdown
|
||||||
|
语法并不需要很长时间，一旦你知道如何使用它，你就可以在几乎所有地方使用
|
||||||
|
Markdown 进行书写了。大多数人使用 Markdown 来为网站创建内容，但是
|
||||||
|
Markdown 也可以很好地格式化从电子邮件到购物清单的所有内容。
|
||||||
|
|
||||||
|
下面是一些你可以使用 Markdown 的场景。
|
||||||
|
|
||||||
|
### 网站
|
||||||
|
|
||||||
|
Markdown 是为 web
|
||||||
|
而设计的，因此，市面上有很多专门用于创建网站内容的应用程序就不足为奇了。
|
||||||
|
|
||||||
|
如果你您正在寻找利用 Markdown 文件创建网站的最简单方法，请参考
|
||||||
|
[blot.im](https://blot.im) 和 [smallvictori.es](https://smallvictori.es)
|
||||||
|
两个站点。在你注册某个服务之后，它们将在你的计算机上创建一个 Dropbox
|
||||||
|
文件夹。你只需将 Markdown
|
||||||
|
文件拖放到该文件夹中，然后嗖的一声，这些文件就在你的网站上了。再简单不过了。
|
||||||
|
|
||||||
|
如果您熟悉 HTML、CSS和版本管理工具，请试试
|
||||||
|
[Jekyll](/tools/jekyll/)，这是一个广受欢迎的静态网站生成器，它能将
|
||||||
|
Markdown 文件并构建为 HTML 网站。这种方法的优势之一是 [GitHub
|
||||||
|
Pages](/tools/github-pages/) 为 Jekyll 生成的网站提供免费托管服务。如果
|
||||||
|
Jekyll 不是你的理想之选，你可以在
|
||||||
|
[其它大量可用的静态站点生成器](https://www.staticgen.com/) 中选择一个。
|
||||||
|
|
||||||
|
<div class="alert alert-info">
|
||||||
|
注意： 此 <b>Markdown指南</b> 就是用 Jekyll 创建的。你可以在
|
||||||
|
GitHub 上查看其源码。
|
||||||
|
</div>
|
||||||
|
|
||||||
|
如果你想使用内容管理系统（CMS）来支撑你的网站，请试试
|
||||||
|
[Ghost](/tools/ghost/)。这是一个免费的开源博客平台，具有出色的 Markdown
|
||||||
|
编辑器。如果你是 WordPress 用户，你将很高兴地知道 WordPress.com
|
||||||
|
上托管的网站都 [支持
|
||||||
|
Markdown](https://en.support.wordpress.com/markdown/)。自托管的
|
||||||
|
WordPress 网站可以使用 [Jetpack
|
||||||
|
插件](https://jetpack.com/support/markdown/)实现对 Markdown 的支持。
|
||||||
|
|
||||||
|
### 文件资料
|
||||||
|
|
||||||
|
Markdown 并不具备像 Microsoft Word
|
||||||
|
这样的文字处理程序的所有功能，但是对于创建基本文件（例如作业和信件）来说已经足够了。你可以使用
|
||||||
|
Markdown 文档创作工具来创建 Markdown 格式的文档并将其导出为 PDF 或 HTML
|
||||||
|
格式。PDF 格式是关键，因为一旦有了 PDF
|
||||||
|
文档，您就可以使用它进行任何操作：打印、通过电子邮件发送或将其上传到网站。
|
||||||
|
|
||||||
|
这是我推荐的一些Markdown文档创作工具：
|
||||||
|
|
||||||
|
平台|工具|链接
|
||||||
|
---|---|---
|
||||||
|
Mac | MacDown | https://macdown.uranusjr.com/
|
||||||
|
Mac | Marked | https://marked2app.com/
|
||||||
|
Mac / iOS / Android | iA Writer | https://ia.net/writer
|
||||||
|
Windows | ghostwriter | https://wereturtle.github.io/ghostwriter/
|
||||||
|
Windows | Markdown Monster | https://markdownmonster.west-wind.com/
|
||||||
|
Linux | ReText | https://github.com/retext-project/retext
|
||||||
|
Linux | ghostwriter | https://wereturtle.github.io/ghostwriter/
|
||||||
|
Web | MDEditor | https://www.zybuluo.com/mdeditor
|
||||||
|
|
||||||
|
<div class="alert alert-success">
|
||||||
|
提示：iA Writer
|
||||||
|
提供了模板用于预览、打印和导出 Markdown 格式的文档。例如，“ Academic –
|
||||||
|
MLA 样式”的模板会缩进段落并添加双句间距。
|
||||||
|
</div>
|
||||||
|
|
||||||
|
### 笔记
|
||||||
|
|
||||||
|
在几乎所有方面，Markdown
|
||||||
|
都是记笔记的理想语法。不幸的是，两个最受欢迎的笔记应用程序
|
||||||
|
[Evernote](https://evernote.com/) 和 [OneNote](https://www.onenote.com/)
|
||||||
|
目前都不支持 Markdown。好消息是，其他一些笔记应用程序 *是* 支持 Markdown
|
||||||
|
的：
|
||||||
|
|
||||||
|
- [Simplenote](/tools/simplenote/)
|
||||||
|
是适用于所有平台的免费、简单的笔记应用程序。
|
||||||
|
- [Notable](/tools/notable/) 是可以在各种平台上运行的笔记应用程序。
|
||||||
|
- [Bear](/tools/bear/) 是适用于 Mac 和 iOS 设备的类似 Evernote
|
||||||
|
的应用程序。默认情况下，它并不专门针对 Markdown 的，但是你可以启用
|
||||||
|
Markdown 兼容模式。
|
||||||
|
- [Boostnote](/tools/boostnote/)
|
||||||
|
自称是“专为程序员设计的开源笔记应用程序”。
|
||||||
|
|
||||||
|
如果你无法放弃 Evernote，可以试试
|
||||||
|
[Marxico](https://marxi.co/)，一个专门针对 Evernote 的基于订阅付费的
|
||||||
|
Markdown编辑器，或在 Evernote 网站上使用 [Markdown
|
||||||
|
Here](/tools/markdown-here/) 插件。
|
||||||
|
|
||||||
|
### 书籍
|
||||||
|
|
||||||
|
想要自行出版小说？请试试 [Leanpub](https://leanpub.com/)，该服务可将你的
|
||||||
|
Markdown 格式的文件转换为电子书。Leanpub 以 PDF、EPUB 和 MOBI
|
||||||
|
文件格式输出你的图书。如果你要创建纸版书籍，可以将 PDF 文件上传到类似
|
||||||
|
[Kindle Direct Publishing](https://kdp.amazon.com)
|
||||||
|
之类的服务提供商处。要了解有关使用 Markdown
|
||||||
|
编写和自行出版书籍的更多信息，请阅读
|
||||||
|
[此博文](https://medium.com/techspiration-ideas-making-it-happen/how-i-wrote-and-published-my-novel-using-only-open-source-tools-5cdfbd7c00ca)。
|
||||||
|
|
||||||
|
### 演示文稿
|
||||||
|
|
||||||
|
信不信由你，你可以将 Markdown 格式的文件转换成演示文稿。在 Markdown
|
||||||
|
中创建演示文稿需要一点时间来适应，但是一旦你掌握了它，你就能体会到比使用
|
||||||
|
PowerPoint 或 Keynote
|
||||||
|
之类的应用程序更快、更容易。[Remark](https://remarkjs.com)（[GitHub
|
||||||
|
仓库](https://github.com/gnab/remark)）和
|
||||||
|
[Cleaver](https://jdan.github.io/cleaver/)（[GitHub
|
||||||
|
仓库](https://github.com/jdan/cleaver)）一样，是一种基于浏览器的、流行的
|
||||||
|
Markdown 幻灯片工具。如果你使用的是
|
||||||
|
Mac，并且希望安装一个应用程序来使用的话，请试试
|
||||||
|
[Deckset](https://www.decksetapp.com/) 或
|
||||||
|
[Marked](https://marked2app.com/)。
|
||||||
|
|
||||||
|
### 邮件
|
||||||
|
|
||||||
|
如果你需要发送大量电子邮件，并且对大多数电子邮件提供商网站上可用的格式设置控件感到厌倦，那么你将很高兴地发现有一种使用
|
||||||
|
Markdown 编写电子邮件的简便方法：[Markdown Here](/tools/markdown-here/)
|
||||||
|
是一个免费、开源的浏览器扩展程序，可将 Markdown
|
||||||
|
格式的文本转换为可用于发送的 HTML。
|
||||||
|
|
||||||
|
### 文档
|
||||||
|
|
||||||
|
Markdown 非常适合技术文档。像 GitHub 这样的公司越来越多地转向使用
|
||||||
|
Markdown 来创建其文档了，请查看此
|
||||||
|
[博文](https://github.com/blog/1939-how-github-uses-github-to-document-github)
|
||||||
|
以了解如何将 Markdown 格式的文档迁移到
|
||||||
|
[Jekyll](/tools/jekyll/)。如果你是为产品或服务编写文档，请试试以下的便捷工具：
|
||||||
|
|
||||||
|
- [Read the Docs](https://readthedocs.org) 可以将你所开源的 Markdown
|
||||||
|
文件生成文档网站。只需将你的 GitHub
|
||||||
|
仓库连接到他们的服务，然后你就可以将内容推送到该仓库中，Read the
|
||||||
|
Docs 会完成其余的工作。他们还为
|
||||||
|
[商业实体提供服务](https://readthedocs.com/)。
|
||||||
|
- [MkDocs](/tools/mkdocs/)
|
||||||
|
是一个快速、简单的静态站点生成器，专门用于构建项目文档。文档源文件使用
|
||||||
|
Markdown 编写，并使用一个 YAML 配置文件进行配置。MkDocs 有多个
|
||||||
|
[内置主题](https://www.mkdocs.org/user-guide/styling-your-docs/)，包括移植自
|
||||||
|
[Read the Docs](https://readthedocs.org/)
|
||||||
|
的文档主题。最新的一个主题是 [MkDocs
|
||||||
|
Material](https://squidfunk.github.io/mkdocs-material/)。
|
||||||
|
- [Docusaurus](/tools/docusaurus/)
|
||||||
|
是一个静态网站生成器，专门用于创建文档网站。它支持翻译、搜索和版本控制。
|
||||||
|
- [VuePress](https://vuepress.vuejs.org/) 是基于
|
||||||
|
[Vue](https://vuejs.org/)
|
||||||
|
构建的静态站点生成器，并针对编写技术文档进行了优化。
|
||||||
|
- [Jekyll](/tools/jekyll/) 前面已经提到过它了，但它也是将 Markdown
|
||||||
|
文件生成文档网站的一个不错的选择。如果你选择 Jekyll，请务必试试
|
||||||
|
[Jekyll
|
||||||
|
文档主题](https://idratherbewriting.com/documentation-theme-jekyll/)。
|
||||||
|
|
||||||
|
## Markdown 方言
|
||||||
|
|
||||||
|
使用 Markdown 的过程中，最令人困惑的地方是：实际上每个 Markdown
|
||||||
|
应用程序都实现了稍有不同的 Markdown 语法。Markdown 的这些变体通常被称为
|
||||||
|
*flavors（方言）*。掌握你的应用程序所实现的 Markdown
|
||||||
|
语法是你需要主义的。
|
||||||
|
|
||||||
|
为了让你了解各 Markdown 变体的概念，将它们比作语言的方言（language
|
||||||
|
dialects）可能会有所帮助。华雷斯城（Ciudad
|
||||||
|
Juárez）的人说西班牙语，就像巴塞罗那（Barcelona）人一样，但是两个城市使用的方言之间有很大的不同。使用不同
|
||||||
|
Markdown 应用程序的人也是如此。MDEditor 支持的
|
||||||
|
Markdown 格式与 Ulysses 有着很大的不同。
|
||||||
|
|
||||||
|
实际上，这意味着当一个应用程序说它支持 “Markdown”
|
||||||
|
时，你永远也不会确切地知到它的实际意思。它说的是仅支持
|
||||||
|
[基本语法](/basic-syntax/)？还是所有基本语法加
|
||||||
|
[扩展语法](/extended-syntax/)
|
||||||
|
？或者是某些语法的组合呢？在你阅读其文档或开始使用该应用程序之前，你永远都不会知到。
|
||||||
|
|
||||||
|
如果你只是新手，我能给你的最好建议就是选择一个具有良好 Markdown
|
||||||
|
支持的应用程序。这对保持 Markdown
|
||||||
|
文件的可移植性大有帮助。你可能需要在其它应用程序中保存或使用你的
|
||||||
|
Markdown 文件，要实现这一点，你应当从使用一个具有良好 Markdown
|
||||||
|
支持的应用程序开始。你可以在 [Markdown 工具列表](/tools/)
|
||||||
|
中找到合适的应用程序。
|
||||||
|
|
||||||
|
## 其它资源
|
||||||
|
|
||||||
|
网上有很多资源用来学习 Markdown。以下列出一些：
|
||||||
|
|
||||||
|
- [John Gruber’s Markdown
|
||||||
|
documentation](https://daringfireball.net/projects/markdown/).
|
||||||
|
Markdown 的创建者编写的原始指南。
|
||||||
|
- [Markdown Tutorial](https://www.markdowntutorial.com/).
|
||||||
|
一个开源网站，你能用浏览器在这个网站上尝试 Markdown。
|
||||||
|
- [Awesome Markdown](https://github.com/mundimark/awesome-markdown).
|
||||||
|
Markdown 工具和学习资源列表。
|
||||||
|
- [Typesetting
|
||||||
|
Markdown](https://dave.autonoma.ca/blog/2019/05/22/typesetting-markdown-part-1).
|
||||||
|
这是一个系列教程，介绍了使用 [pandoc](https://pandoc.org/) 和
|
||||||
|
[ConTeXt](https://www.contextgarden.net/) 对 Markdown
|
||||||
|
文档进行排版的系统。
|
||||||
|
|
@ -0,0 +1,55 @@
|
||||||
|
---
|
||||||
|
author: Hugo Authors
|
||||||
|
title: Math Typesetting
|
||||||
|
date: 2019-03-08
|
||||||
|
description: A brief guide to setup KaTeX
|
||||||
|
math: true
|
||||||
|
ShowBreadCrumbs: false
|
||||||
|
---
|
||||||
|
|
||||||
|
Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries.
|
||||||
|
|
||||||
|
<!--more-->
|
||||||
|
|
||||||
|
In this example we will be using [KaTeX](https://katex.org/)
|
||||||
|
|
||||||
|
- Create a partial under `/layouts/partials/math.html`
|
||||||
|
- Within this partial reference the [Auto-render Extension](https://katex.org/docs/autorender.html) or host these scripts locally.
|
||||||
|
- Include the partial in your templates ([`extend_head.html`](../papermod/papermod-faq/#custom-head--footer)) like so:
|
||||||
|
- refer [ISSUE #236](https://github.com/adityatelange/hugo-PaperMod/issues/236)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
{{ if or .Params.math .Site.Params.math }}
|
||||||
|
{{ partial "math.html" . }}
|
||||||
|
{{ end }}
|
||||||
|
```
|
||||||
|
|
||||||
|
- To enable KaTex globally set the parameter `math` to `true` in a project's configuration
|
||||||
|
- To enable KaTex on a per page basis include the parameter `math: true` in content files
|
||||||
|
|
||||||
|
**Note:** Use the online reference of [Supported TeX Functions](https://katex.org/docs/supported.html)
|
||||||
|
|
||||||
|
{{< math.inline >}}
|
||||||
|
{{ if or .Page.Params.math .Site.Params.math }}
|
||||||
|
|
||||||
|
<!-- KaTeX -->
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
|
||||||
|
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
|
||||||
|
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
|
||||||
|
{{ end }}
|
||||||
|
{{</ math.inline >}}
|
||||||
|
|
||||||
|
### Examples
|
||||||
|
|
||||||
|
{{< math.inline >}}
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Inline math: \(\varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887…\)
|
||||||
|
</p>
|
||||||
|
{{</ math.inline >}}
|
||||||
|
|
||||||
|
Block math:
|
||||||
|
|
||||||
|
$$
|
||||||
|
\varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } }
|
||||||
|
$$
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
title: PaperMod
|
||||||
|
summary: Contains posts related to `PaperMod`
|
||||||
|
description: Contains posts related to PaperMod
|
||||||
|
---
|
||||||
|
|
@ -0,0 +1,313 @@
|
||||||
|
---
|
||||||
|
title: "FAQs"
|
||||||
|
summary: Frequently Asked Questions
|
||||||
|
date: 2021-01-20
|
||||||
|
aliases: ["/papermod-how-to-guide"]
|
||||||
|
tags: ["PaperMod"]
|
||||||
|
author: "Aditya Telange"
|
||||||
|
draft: true
|
||||||
|
aliases: [/posts/papermod/papermod-how-to]
|
||||||
|
weight: 3
|
||||||
|
---
|
||||||
|
|
||||||
|
## Intro
|
||||||
|
|
||||||
|
- **We'll be using `yml/yaml` format for all examples down below, I recommend using `yml` over `toml` as it is easier to read.**
|
||||||
|
|
||||||
|
- You can find any [YML to TOML](https://www.google.com/search?q=yml+to+toml) converters if necessary.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Override theme template
|
||||||
|
|
||||||
|
By Hugo's Lookup Order, you can override any part of a theme that you want. The following is a quick example.
|
||||||
|
|
||||||
|
Let's say you wish the `list` was different. All you have to do is copy the `list` template:
|
||||||
|
|
||||||
|
```shell
|
||||||
|
your-site/themes/papermod/layouts/_defaults/list.html
|
||||||
|
```
|
||||||
|
|
||||||
|
And paste it under your own `layouts` folder:
|
||||||
|
|
||||||
|
```shell
|
||||||
|
your-site/layouts/_defaults/list.html
|
||||||
|
```
|
||||||
|
|
||||||
|
Then you're free to make any changes you want to the `list`.
|
||||||
|
When Hugo builds your site, your copy of `list.html` will be used instead of the theme's `list.html`.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Enable Social-Metadata and SEO
|
||||||
|
|
||||||
|
These include OpenGraph, Twitter Cards and Schema.
|
||||||
|
|
||||||
|
```yml
|
||||||
|
params:
|
||||||
|
env: production
|
||||||
|
```
|
||||||
|
|
||||||
|
or set `HUGO_ENV` as "production" in system env-vars
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Failed to find a valid digest in the 'integrity' attribute for resource ... ?
|
||||||
|
|
||||||
|
Read about How Subresource Integrity helps: [Subresource_Integrity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity)
|
||||||
|
|
||||||
|
Why was the `asset` not loading ? : [How_browsers_handle_Subresource_Integrity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity#How_browsers_handle_Subresource_Integrity)
|
||||||
|
|
||||||
|
**Solution:**
|
||||||
|
|
||||||
|
Set the following in `config.yml`
|
||||||
|
|
||||||
|
```yml
|
||||||
|
params:
|
||||||
|
assets:
|
||||||
|
disableFingerprinting: true
|
||||||
|
```
|
||||||
|
|
||||||
|
Linked Issues:
|
||||||
|
|
||||||
|
- https://stackoverflow.com/questions/65056585/hugo-theme-not-loading
|
||||||
|
- https://stackoverflow.com/questions/65040931/hugo-failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource
|
||||||
|
- https://blog.gerardbeckerleg.com/posts/hugo-failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource/
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Bundling Custom css with theme's assets
|
||||||
|
|
||||||
|
- For adding custom css to be bundled inside one minimized css
|
||||||
|
|
||||||
|
Create folder in yout project directory as
|
||||||
|
|
||||||
|
```
|
||||||
|
.(site root)
|
||||||
|
├── config.yml
|
||||||
|
├── content/
|
||||||
|
├── theme/hugo-PaperMod/
|
||||||
|
└── assets/
|
||||||
|
└── css/
|
||||||
|
└── extended/ <---
|
||||||
|
├── custom_css1.css <---
|
||||||
|
└── any_name.css <---
|
||||||
|
```
|
||||||
|
|
||||||
|
All `css` files inside `assets/css/extended` will be bundled !
|
||||||
|
|
||||||
|
**Note**: blank.css is just the placeholder so that it doesn't break the theme when no files are present under `assets/css/extended`
|
||||||
|
|
||||||
|
Linked Issues:
|
||||||
|
|
||||||
|
- [Papermod Theme: How to add custom CSS?](https://discourse.gohugo.io/t/papermod-theme-how-to-add-custom-css/30165)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Custom Head / Footer
|
||||||
|
|
||||||
|
Custom css/js can be added by way mentioned below.
|
||||||
|
|
||||||
|
```
|
||||||
|
.(site root)
|
||||||
|
├── config.yml
|
||||||
|
├── content/
|
||||||
|
├── theme/hugo-PaperMod/
|
||||||
|
└── layouts
|
||||||
|
├── partials
|
||||||
|
│ ├── comments.html
|
||||||
|
│ ├── extend_footer.html <---
|
||||||
|
│ └── extend_head.html <---
|
||||||
|
└── robots.txt
|
||||||
|
```
|
||||||
|
|
||||||
|
Create a html page in directory structure as shown above.
|
||||||
|
|
||||||
|
Contents of `extend_head.html` will be added to `head` of page.
|
||||||
|
|
||||||
|
and contents of `extend_footer.html` will be added to bottom of page.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Add menu to site
|
||||||
|
|
||||||
|
You can add menu entries which will appear in the header of every page.
|
||||||
|
|
||||||
|
To do so, add a `menu` section to your site's `config.yml`:
|
||||||
|
|
||||||
|
```yml
|
||||||
|
menu:
|
||||||
|
main:
|
||||||
|
- identifier: categories
|
||||||
|
name: categories
|
||||||
|
url: /categories/
|
||||||
|
weight: 10
|
||||||
|
- identifier: tags
|
||||||
|
name: tags
|
||||||
|
url: /tags/
|
||||||
|
weight: 20
|
||||||
|
- identifier: example
|
||||||
|
name: example.org
|
||||||
|
url: https://example.org
|
||||||
|
weight: 30
|
||||||
|
```
|
||||||
|
|
||||||
|
`name` controls what will be displayed for the menu entry.
|
||||||
|
`url` sets the URL that the entry points to.
|
||||||
|
`weight` is used to control the positioning of entries.
|
||||||
|
|
||||||
|
For more information on menus, see the [Hugo wiki page](https://gohugo.io/content-management/menus/).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Pin a Post
|
||||||
|
|
||||||
|
Post can be pinned/ displayed top on the list by adding a `weight=<num>` var to page-variables
|
||||||
|
|
||||||
|
example:
|
||||||
|
|
||||||
|
```yml
|
||||||
|
---
|
||||||
|
title: "My Important post"
|
||||||
|
date: 2020-09-15T11:30:03+00:00
|
||||||
|
weight: 1
|
||||||
|
---
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
```yml
|
||||||
|
---
|
||||||
|
title: "My 2nd Important post"
|
||||||
|
date: 2020-09-15T11:30:03+00:00
|
||||||
|
weight: 2
|
||||||
|
---
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Adding Custom Favicon(s)
|
||||||
|
|
||||||
|
We support the following paths under `/static` directory
|
||||||
|
and can be added accordingly.
|
||||||
|
|
||||||
|
- `favicon.ico`
|
||||||
|
- `favicon-16x16.png`
|
||||||
|
- `favicon-32x32.png`
|
||||||
|
- `apple-touch-icon.png`
|
||||||
|
- `safari-pinned-tab.svg`
|
||||||
|
|
||||||
|
1. Favicon(s) can be generated by [Favicon.io](https://favicon.io)
|
||||||
|
|
||||||
|
and can be simply put in `/static` folder.
|
||||||
|
|
||||||
|
2. Other way is to add favicon(s) NOT located in `/static` folder.
|
||||||
|
|
||||||
|
In site config add the following:
|
||||||
|
|
||||||
|
```
|
||||||
|
params:
|
||||||
|
assets:
|
||||||
|
favicon: "<link / absolute url>"
|
||||||
|
favicon16x16: "<link / absolute url>"
|
||||||
|
favicon32x32: "<link / absolute url>"
|
||||||
|
apple_touch_icon: "<link / absolute url>"
|
||||||
|
safari_pinned_tab: "<link / absolute url>"
|
||||||
|
```
|
||||||
|
|
||||||
|
- `absolute url` means direct links to external resource: ex. https://web.site/someimage.png
|
||||||
|
|
||||||
|
example:
|
||||||
|
|
||||||
|
```
|
||||||
|
params:
|
||||||
|
assets:
|
||||||
|
favicon: "/favicon.ico"
|
||||||
|
favicon16x16: "/favicon-16x16.png"
|
||||||
|
favicon32x32: "/favicon-32x32.png"
|
||||||
|
apple_touch_icon: "/apple-touch-icon.png"
|
||||||
|
safari_pinned_tab: "/safari-pinned-tab.svg"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Centering image in markdown
|
||||||
|
|
||||||
|
Add `#center` after image to center align an image
|
||||||
|
|
||||||
|
```md
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
**When using [`figure`](https://gohugo.io/content-management/shortcodes/) shortcode**
|
||||||
|
|
||||||
|
use `align=center` to center image with captions
|
||||||
|
|
||||||
|
ex.
|
||||||
|
|
||||||
|
```md
|
||||||
|
{{</* figure align=center src="image.jpg" */>}}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Using Hugo's Syntax highlighter "chroma"
|
||||||
|
|
||||||
|
1. Disable Highlight.js in site `config.yml`
|
||||||
|
|
||||||
|
```yml
|
||||||
|
params:
|
||||||
|
assets:
|
||||||
|
disableHLJS: true
|
||||||
|
```
|
||||||
|
|
||||||
|
2. Set hugo's markdown styling in site `config.yml`
|
||||||
|
|
||||||
|
```yml
|
||||||
|
markup:
|
||||||
|
highlight:
|
||||||
|
# anchorLineNos: true
|
||||||
|
codeFences: true
|
||||||
|
guessSyntax: true
|
||||||
|
lineNos: true
|
||||||
|
# noClasses: false
|
||||||
|
style: monokai
|
||||||
|
```
|
||||||
|
|
||||||
|
3. If you want `lineNos: true`, the background won't be proper.
|
||||||
|
This will only work with `noClasses: false` or `pygmentsUseClasses: true`.
|
||||||
|
Read [Generate Syntax Highlighter CSS](https://gohugo.io/content-management/syntax-highlighting/#generate-syntax-highlighter-css)
|
||||||
|
|
||||||
|
Add the following to `assets/css/extended/custom.css`
|
||||||
|
|
||||||
|
```css
|
||||||
|
.chroma {
|
||||||
|
background-color: unset;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
More Info : [Configure Markup - Highlight](https://gohugo.io/getting-started/configuration-markup#highlight)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Search not working ?
|
||||||
|
|
||||||
|
If you are using a CDN to server assets from a different domain, search would break
|
||||||
|
|
||||||
|
Why? Take a look at [fastsearch.js#L35](https://github.com/adityatelange/hugo-PaperMod/blob/fb4988cfb6d0d6e4e489f17d89f0fa618def3396/assets/js/fastsearch.js#L35).
|
||||||
|
|
||||||
|
We fetch the `index.json` (where the search function looks for the keywords typed) one level up of the website `search.min.js` is hosted on.
|
||||||
|
|
||||||
|
We have used this insted of assigning `baseURL` so as to work with multilingual websites ex. `example.com/fr/` and websites being placed under a subdirectory ex. `example.com/blog/`.
|
||||||
|
|
||||||
|
To fix for _single_ language websites hosting assets from CDN, this you may [override](#override-theme-template) [fastsearch.js#L35](https://github.com/adityatelange/hugo-PaperMod/blob/fb4988cfb6d0d6e4e489f17d89f0fa618def3396/assets/js/fastsearch.js#L35) and placing appropriate URL as in
|
||||||
|
|
||||||
|
```js
|
||||||
|
xhr.open("GET", "https://example.com/index.json");
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## References
|
||||||
|
|
||||||
|
- [Override a Hugo theme](https://zwbetz.com/override-a-hugo-theme/)
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
|
|
@ -0,0 +1,505 @@
|
||||||
|
---
|
||||||
|
title: "Features"
|
||||||
|
summary: Learn About All Features in PaperMod
|
||||||
|
date: 2021-01-20
|
||||||
|
weight: 2
|
||||||
|
aliases: ["/papermod-features"]
|
||||||
|
tags: ["PaperMod"]
|
||||||
|
author: "Aditya Telange"
|
||||||
|
---
|
||||||
|
|
||||||
|
### Intro
|
||||||
|
|
||||||
|
- **We'll be using `yml/yaml` format for all examples down below, I recommend using `yml` over `toml` as it is easier to read.**
|
||||||
|
|
||||||
|
- You can find any [YML to TOML](https://www.google.com/search?q=yml+to+toml) converters if necessary.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Assets (js/css)
|
||||||
|
|
||||||
|
The following is enabled by default
|
||||||
|
|
||||||
|
- [minification](https://gohugo.io/hugo-pipes/minification/) - makes the assets size smallest as possible.
|
||||||
|
- [bundling](https://gohugo.io/hugo-pipes/bundling/) - bundles all the styles in one single asset
|
||||||
|
- [fingerprint/integrity](https://gohugo.io/hugo-pipes/fingerprint/) check.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Default Theme light/dark/auto
|
||||||
|
|
||||||
|
```yml
|
||||||
|
params:
|
||||||
|
# defaultTheme: light
|
||||||
|
# defaultTheme: dark
|
||||||
|
defaultTheme: auto # to switch between dark or light according to browser theme
|
||||||
|
```
|
||||||
|
|
||||||
|
</details>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Theme Switch Toggle (enabled by default)
|
||||||
|
|
||||||
|
Shows icon besides title of page to change theme
|
||||||
|
|
||||||
|
To disable it :
|
||||||
|
|
||||||
|
```yml
|
||||||
|
disableThemeToggle: true
|
||||||
|
```
|
||||||
|
|
||||||
|
You can refer following table for better understanding...
|
||||||
|
|
||||||
|
| `defaultTheme` | `disableThemeToggle` | checks local storage? | checks system theme? | Info |
|
||||||
|
| -------------- | -------------------- | --------------------- | -------------------- | ----------------- |
|
||||||
|
| `auto` | true | No | Yes | only system theme |
|
||||||
|
| | false | Yes (if not->2) | Yes (2) | _switch present_ |
|
||||||
|
| `dark` | true | No | No | force dark only |
|
||||||
|
| | false | Yes | No | _switch present_ |
|
||||||
|
| `light` | true | No | No | force light only |
|
||||||
|
| | false | Yes | No | _switch present_ |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Archives Layout
|
||||||
|
|
||||||
|
Create a page with `archive.md` in `content` directory with following content
|
||||||
|
|
||||||
|
```shell
|
||||||
|
.
|
||||||
|
├── config.yml
|
||||||
|
├── content/
|
||||||
|
│ ├── archives.md <--- Create archive.md here
|
||||||
|
│ └── posts/
|
||||||
|
├── static/
|
||||||
|
└── themes/
|
||||||
|
└── PaperMod/
|
||||||
|
```
|
||||||
|
|
||||||
|
and add the following to it
|
||||||
|
|
||||||
|
```yml
|
||||||
|
---
|
||||||
|
title: "Archive"
|
||||||
|
layout: "archives"
|
||||||
|
url: "/archives/"
|
||||||
|
summary: archives
|
||||||
|
---
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
**Note:** Archives Layout does not support Multilingual Month Translations.
|
||||||
|
|
||||||
|
ex: [archives.md](https://raw.githubusercontent.com/adityatelange/hugo-PaperMod/exampleSite/content/archives.md)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Regular Mode (default-mode)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Home-Info Mode
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Use 1st entry as some Information
|
||||||
|
|
||||||
|
add following to config file
|
||||||
|
|
||||||
|
```yml
|
||||||
|
params:
|
||||||
|
homeInfoParams:
|
||||||
|
Title: Hi there wave
|
||||||
|
Content: Can be Info, links, about...
|
||||||
|
|
||||||
|
socialIcons: # optional
|
||||||
|
- name: "<platform>"
|
||||||
|
url: "<link>"
|
||||||
|
- name: "<platform 2>"
|
||||||
|
url: "<link2>"
|
||||||
|
```
|
||||||
|
|
||||||
|
ex. [config.yml#L106](https://github.com/adityatelange/hugo-PaperMod/blob/exampleSite/config.yml#L106)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Profile Mode
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Shows Index/Home page as Full Page with Social Links and Image
|
||||||
|
|
||||||
|
add following to config file
|
||||||
|
|
||||||
|
```yml
|
||||||
|
params:
|
||||||
|
profileMode:
|
||||||
|
enabled: true
|
||||||
|
title: "<Title>" # optional default will be site title
|
||||||
|
subtitle: "This is subtitle"
|
||||||
|
imageUrl: "<image link>" # optional
|
||||||
|
imageTitle: "<title of image as alt>" # optional
|
||||||
|
imageWidth: 120 # custom size
|
||||||
|
imageHeight: 120 # custom size
|
||||||
|
buttons:
|
||||||
|
- name: Archive
|
||||||
|
url: "/archive"
|
||||||
|
- name: Github
|
||||||
|
url: "https://github.com/"
|
||||||
|
|
||||||
|
socialIcons: # optional
|
||||||
|
- name: "<platform>"
|
||||||
|
url: "<link>"
|
||||||
|
- name: "<platform 2>"
|
||||||
|
url: "<link2>"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Search Page
|
||||||
|
|
||||||
|
PaperMod uses [Fuse.js Basic](https://fusejs.io/getting-started/different-builds.html#explanation-of-different-builds) for seach functionality
|
||||||
|
|
||||||
|
Add the following to site config, `config.yml`
|
||||||
|
|
||||||
|
```yml
|
||||||
|
outputs:
|
||||||
|
home:
|
||||||
|
- HTML
|
||||||
|
- RSS
|
||||||
|
- JSON # is necessary
|
||||||
|
```
|
||||||
|
|
||||||
|
Create a page with `search.md` in `content` directory with following content
|
||||||
|
|
||||||
|
```yml
|
||||||
|
---
|
||||||
|
title: "Search" # in any language you want
|
||||||
|
layout: "search" # is necessary
|
||||||
|
# url: "/archive"
|
||||||
|
# description: "Description for Search"
|
||||||
|
summary: "search"
|
||||||
|
---
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
To hide a particular page from being searched, add it in post's fron't matter
|
||||||
|
|
||||||
|
```yml
|
||||||
|
---
|
||||||
|
searchHidden: true
|
||||||
|
```
|
||||||
|
|
||||||
|
ex: [search.md](https://raw.githubusercontent.com/adityatelange/hugo-PaperMod/exampleSite/content/search.md)
|
||||||
|
|
||||||
|
> Search Page also has Key bindings:
|
||||||
|
>
|
||||||
|
> - Arrow keys to move up/down the list
|
||||||
|
> - Enter key (return) or Right Arrow key to Go to highlighted page
|
||||||
|
> - Escape key to clear searchbox and results
|
||||||
|
|
||||||
|
For Multilingual use `search.<lang>.md` ex. `search.es.md`.
|
||||||
|
|
||||||
|
**Note:** Search will work only on current language, user is currently on !
|
||||||
|
|
||||||
|
**Customizing Fusejs Options**
|
||||||
|
|
||||||
|
Refer https://fusejs.io/api/options.html for Options, Add those as shown below.
|
||||||
|
|
||||||
|
```yml
|
||||||
|
params:
|
||||||
|
fuseOpts:
|
||||||
|
isCaseSensitive: false
|
||||||
|
shouldSort: true
|
||||||
|
location: 0
|
||||||
|
distance: 1000
|
||||||
|
threshold: 0.4
|
||||||
|
minMatchCharLength: 0
|
||||||
|
keys: ["title", "permalink", "summary", "content"]
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Draft Page indication
|
||||||
|
|
||||||
|
adds `[draft]` mark to indicate draft pages.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Post Cover Image
|
||||||
|
|
||||||
|
In post's page-variables add :
|
||||||
|
|
||||||
|
```yml
|
||||||
|
cover:
|
||||||
|
image: "<image path/url>"
|
||||||
|
# can also paste direct link from external site
|
||||||
|
# ex. https://i.ibb.co/K0HVPBd/paper-mod-profilemode.png
|
||||||
|
alt: "<alt text>"
|
||||||
|
caption: "<text>"
|
||||||
|
relative: false # To use relative path for cover image, used in hugo Page-bundles
|
||||||
|
```
|
||||||
|
|
||||||
|
When you include images in the [Page Bundle](https://gohugo.io/content-management/page-bundles/), multiple sizes of the image will automatically be provided using the HTML5 `srcset` field.
|
||||||
|
|
||||||
|
To reduce generation time and size of the site, you can disable this feature using
|
||||||
|
|
||||||
|
```yml
|
||||||
|
params:
|
||||||
|
cover:
|
||||||
|
responsiveImages: false
|
||||||
|
```
|
||||||
|
|
||||||
|
To enable hyperlinks to the full image size on post pages, use
|
||||||
|
|
||||||
|
```yml
|
||||||
|
params:
|
||||||
|
cover:
|
||||||
|
linkFullImages: true
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Share Buttons on post
|
||||||
|
|
||||||
|
Displays Share Buttons at Bottom of each post
|
||||||
|
|
||||||
|
to show share buttons add
|
||||||
|
|
||||||
|
```yml
|
||||||
|
params:
|
||||||
|
ShowShareButtons: true
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Show post reading time
|
||||||
|
|
||||||
|
Displays Reading Time (the estimated time, in minutes, it takes to read the content.)
|
||||||
|
|
||||||
|
To show reading time add
|
||||||
|
|
||||||
|
```yml
|
||||||
|
Params:
|
||||||
|
ShowReadingTime: true
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Show Table of Contents (Toc) on blog post
|
||||||
|
|
||||||
|
Displays ToC on blog-pages
|
||||||
|
|
||||||
|
To show ToC add following to page-variables
|
||||||
|
|
||||||
|
```yml
|
||||||
|
ShowToc: true
|
||||||
|
```
|
||||||
|
|
||||||
|
To keep Toc Open **by default** on a post add following to page-variables:
|
||||||
|
|
||||||
|
```yml
|
||||||
|
TocOpen: true
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### BreadCrumb Navigation
|
||||||
|
|
||||||
|
Adds BreadCrumb Navigation above Post's Title to show subsections and Navigation to Home
|
||||||
|
|
||||||
|
```yml
|
||||||
|
params:
|
||||||
|
ShowBreadCrumbs: true
|
||||||
|
```
|
||||||
|
|
||||||
|
Can be diabled for particular page's front-matter
|
||||||
|
|
||||||
|
```yml
|
||||||
|
---
|
||||||
|
ShowBreadCrumbs: false
|
||||||
|
---
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Edit Link for Posts
|
||||||
|
|
||||||
|
Add a button to suggest changes by using the file path of the post to link to a edit destination.
|
||||||
|
|
||||||
|
For site config use:
|
||||||
|
|
||||||
|
```yml
|
||||||
|
Params:
|
||||||
|
editPost:
|
||||||
|
URL: "https://github.com/<path_to_repo>/content"
|
||||||
|
Text: "Suggest Changes" # edit text
|
||||||
|
appendFilePath: true # to append file path to Edit link
|
||||||
|
```
|
||||||
|
|
||||||
|
Can be modified for individual pages
|
||||||
|
|
||||||
|
```yml
|
||||||
|
---
|
||||||
|
editPost:
|
||||||
|
URL: "https://github.com/<path_to_repo>/content"
|
||||||
|
Text: "Suggest Changes" # edit text
|
||||||
|
appendFilePath: true # to append file path to Edit link
|
||||||
|
---
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
The example above would yield the following link for the post file `posts/post-name.md`:
|
||||||
|
https://github.com/<path_to_repo>/content/posts/post-name.md
|
||||||
|
|
||||||
|
| Parameter | Required | Default Value |
|
||||||
|
| ----------------------- | -------- | ------------- |
|
||||||
|
| editPost.URL | true | - |
|
||||||
|
| editPost.appendFilePath | false | false |
|
||||||
|
| editPost.Text | false | "Edit" |
|
||||||
|
|
||||||
|
Since the link generated is a regular HTML anchor tag `<a href=...>`, you can
|
||||||
|
also use other URL schemas like `mailto://`, e.g.
|
||||||
|
`URL: "mailto://mail@example.com?subject=Suggesting changes for "`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Other Posts suggestion below a post
|
||||||
|
|
||||||
|
Adds a Previous / Next post suggestion under a single post
|
||||||
|
|
||||||
|
```yml
|
||||||
|
params:
|
||||||
|
ShowPostNavLinks: true
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Multiple Authors
|
||||||
|
|
||||||
|
To Use multiple authors for a post, in post-variables:
|
||||||
|
|
||||||
|
```yml
|
||||||
|
---
|
||||||
|
author: ["Me", "You"]
|
||||||
|
---
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
To use Multiple Authors Site-wide, in `config.yml`:
|
||||||
|
|
||||||
|
```yml
|
||||||
|
params:
|
||||||
|
author: ["Me", "You"]
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Comments
|
||||||
|
|
||||||
|
to add comments, create a html file
|
||||||
|
|
||||||
|
`layouts/partials/comments.html`
|
||||||
|
|
||||||
|
and paste code provided by your comments provider
|
||||||
|
|
||||||
|
also in config add this
|
||||||
|
|
||||||
|
```yml
|
||||||
|
params:
|
||||||
|
comments: true
|
||||||
|
```
|
||||||
|
|
||||||
|
read more about this [hugo-comments](https://gohugo.io/content-management/comments/)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### AccessKeys
|
||||||
|
|
||||||
|
```text
|
||||||
|
c - ToC Open/Close
|
||||||
|
g - Go To Top
|
||||||
|
h - Home (according to current lang)
|
||||||
|
t - Theme toggle
|
||||||
|
/ - Jumps to search page if in menu
|
||||||
|
```
|
||||||
|
|
||||||
|
[What's AccessKeys ?](https://www.w3schools.com/tags/att_global_accesskey.asp)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Enhanced SEO
|
||||||
|
|
||||||
|
**Enabled only when `env: production`**
|
||||||
|
|
||||||
|
- [Rich Results/Snippets Support](https://support.google.com/webmasters/answer/7506797?hl=en)
|
||||||
|
|
||||||
|
#### Twitter Cards Support
|
||||||
|
|
||||||
|
* The Twitter Cards metadata, except ``twitter:image`` should not require
|
||||||
|
additional configuration, since it is generated from metadata that
|
||||||
|
you should already have (for instance the page title and description).
|
||||||
|
* The ``twitter:image`` uses the [Post Cover Image](#post-cover-image), if present.
|
||||||
|
* In the absence of a cover images, the first image from the ``images``
|
||||||
|
frontmatter (a list) is used.
|
||||||
|
```yaml
|
||||||
|
images:
|
||||||
|
- image_01.png
|
||||||
|
- image_02.png
|
||||||
|
```
|
||||||
|
* Finally, if neither of those are provided, ``twitter:image`` comes from the first
|
||||||
|
[Page Bundle](https://gohugo.io/content-management/page-bundles/)
|
||||||
|
image with ``feature`` in the name, with a fallback to the first image with
|
||||||
|
``cover`` or ``thumbnail`` in the name.
|
||||||
|
|
||||||
|
#### OpenGraph support
|
||||||
|
|
||||||
|
* The OpenGraph metadata, except ``og:image`` should not require
|
||||||
|
additional configuration, since it is generated from metadata that
|
||||||
|
you should already have (for instance the page title and description).
|
||||||
|
* The ``og:image`` uses the [Post Cover Image](#post-cover-image), if present.
|
||||||
|
* In the absence of a cover images, the first image from the ``images``
|
||||||
|
frontmatter (a list) is used.
|
||||||
|
```yaml
|
||||||
|
images:
|
||||||
|
- image_01.png
|
||||||
|
- image_02.png
|
||||||
|
```
|
||||||
|
* Finally, if neither of those are provided, ``og:image`` comes from the first
|
||||||
|
[Page Bundle](https://gohugo.io/content-management/page-bundles/)
|
||||||
|
image with ``feature`` in the name, with a fallback to the first image with
|
||||||
|
``cover`` or ``thumbnail`` in the name.
|
||||||
|
* For pages, you can also add audio (using frontmatter ``audio: filename.ext``) and/or
|
||||||
|
videos.
|
||||||
|
```yaml
|
||||||
|
videos:
|
||||||
|
- filename01.mov
|
||||||
|
- filename02.avi
|
||||||
|
```
|
||||||
|
---
|
||||||
|
|
||||||
|
### Multilingual Support
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Misc
|
||||||
|
|
||||||
|
#### Scroll-Bar themed (by default)
|
||||||
|
|
||||||
|
#### Smooth Scroll between in-page links (by default)
|
||||||
|
|
||||||
|
#### Scroll-to-Top Button (by default)
|
||||||
|
|
||||||
|
```text
|
||||||
|
Displays a Scroll-to-Top button in right-bottom corner
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Google Analytics integration
|
||||||
|
|
||||||
|
#### Syntax highlighting
|
||||||
|
|
||||||
|
#### RSS feeds
|
||||||
|
|
@ -0,0 +1,101 @@
|
||||||
|
---
|
||||||
|
title: "Icons"
|
||||||
|
summary: List of all Icons supported by PaperMod
|
||||||
|
date: 2021-01-20
|
||||||
|
weight: 4
|
||||||
|
aliases: ["/papermod-icons"]
|
||||||
|
tags: ["PaperMod"]
|
||||||
|
author: "Aditya Telange"
|
||||||
|
draft: true
|
||||||
|
---
|
||||||
|
|
||||||
|
## Social Icons
|
||||||
|
|
||||||
|
| No. | Name | Platform Link |
|
||||||
|
| --- | --------------- | ------------------------------- |
|
||||||
|
| 1 | `123rf` | 123rf.com |
|
||||||
|
| 2 | `adobestock` | stock.adobe.com |
|
||||||
|
| 3 | `behance` | behance.net |
|
||||||
|
| 4 | `buymeacoffee` | buymeacoffee.com |
|
||||||
|
| 5 | `codepen` | codepen.io |
|
||||||
|
| 6 | `cryptohack` | cryptohack.org |
|
||||||
|
| 7 | `ctftime` | ctftime.org |
|
||||||
|
| 8 | `dev` | dev.to |
|
||||||
|
| 9 | `discogs` | discogs.com |
|
||||||
|
| 10 | `discord` | discord.com |
|
||||||
|
| 11 | `dreamstime` | dreamstime.com |
|
||||||
|
| 12 | `dribbble` | dribbble.com |
|
||||||
|
| 13 | `email` | - |
|
||||||
|
| 14 | `facebook` | facebook.com |
|
||||||
|
| 15 | `flickr` | flickr.com |
|
||||||
|
| 16 | `freepik` | freepik.com |
|
||||||
|
| 17 | `gitea` | gitea.io |
|
||||||
|
| 18 | `github` | github.com |
|
||||||
|
| 19 | `gitlab` | gitlab.com |
|
||||||
|
| 20 | `goodreads` | goodreads.com |
|
||||||
|
| 21 | `hackerone` | hackerone.com |
|
||||||
|
| 22 | `hackerrank` | hackerrank.com |
|
||||||
|
| 23 | `hackthebox` | hackthebox.eu |
|
||||||
|
| 24 | `instagram` | instagram.com |
|
||||||
|
| 25 | `itchio` | itch.io |
|
||||||
|
| 26 | `kakaotalk` | kakaocorp.com/service/KakaoTalk |
|
||||||
|
| 27 | `keybase` | keybase.io |
|
||||||
|
| 28 | `kofi` | ko-fi.com |
|
||||||
|
| 29 | `lastfm` | last.fm |
|
||||||
|
| 30 | `liberapay` | liberapay.com |
|
||||||
|
| 31 | `linkedin` | linkedin.com |
|
||||||
|
| 32 | `mastodon` | mastodon.social |
|
||||||
|
| 33 | `matrix` | matrix.org |
|
||||||
|
| 34 | `medium` | medium.com |
|
||||||
|
| 35 | `mixcloud` | mixcloud.com |
|
||||||
|
| 36 | `nuget` | nuget.org |
|
||||||
|
| 37 | `paypal` | paypal.com |
|
||||||
|
| 38 | `qq` | qq.com |
|
||||||
|
| 39 | `reddit` | reddit.com |
|
||||||
|
| 40 | `rss` | - |
|
||||||
|
| 41 | `serverfault` | serverfault.com |
|
||||||
|
| 42 | `soundcloud` | soundcloud.com |
|
||||||
|
| 43 | `shutterstock` | shutterstock.com |
|
||||||
|
| 44 | `slack` | slack.com |
|
||||||
|
| 45 | `snapchat` | snapchat.com/add |
|
||||||
|
| 46 | `sourcerer` | sourcerer.io |
|
||||||
|
| 47 | `spotify` | spotify.com |
|
||||||
|
| 48 | `stackoverflow` | stackoverflow.com |
|
||||||
|
| 49 | `steam` | steampowered.com |
|
||||||
|
| 50 | `telegram` | telegram.org |
|
||||||
|
| 51 | `twitch` | twitch.tv |
|
||||||
|
| 52 | `twitter` | twitter.com |
|
||||||
|
| 53 | `unsplash` | unsplash.com |
|
||||||
|
| 54 | `xda` | xda-developers.com |
|
||||||
|
| 55 | `youtube` | youtube.com |
|
||||||
|
| 56 | `other` | - |
|
||||||
|
|
||||||
|
Usage :
|
||||||
|
|
||||||
|
```
|
||||||
|
socialIcons:
|
||||||
|
- name: "kofi"
|
||||||
|
url: "https://kofi.com"
|
||||||
|
- name: "twitter"
|
||||||
|
url: "https://twitter.com"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Share Icons
|
||||||
|
|
||||||
|
| No. | Platform |
|
||||||
|
| --- | --------------------------------------------------------------- |
|
||||||
|
| 1 | `twitter` (also generates hash tags from tags linked with post) |
|
||||||
|
| 2 | `linkedin` |
|
||||||
|
| 3 | `reddit` |
|
||||||
|
| 4 | `facebook` |
|
||||||
|
| 5 | `whatsapp` |
|
||||||
|
| 6 | `telegram` |
|
||||||
|
|
||||||
|
Usage:
|
||||||
|
|
||||||
|
```yml
|
||||||
|
params:
|
||||||
|
ShowShareButtons: true
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,316 @@
|
||||||
|
---
|
||||||
|
title: "Installation | Update"
|
||||||
|
summary: Read Install and Update instructions here
|
||||||
|
date: 2021-01-20
|
||||||
|
series: ["PaperMod"]
|
||||||
|
weight: 1
|
||||||
|
aliases: ["/papermod-installation"]
|
||||||
|
tags: ["PaperMod"]
|
||||||
|
author: "Aditya Telange"
|
||||||
|
TocSide: left
|
||||||
|
---
|
||||||
|
|
||||||
|
## Intro
|
||||||
|
|
||||||
|
- **We'll be using `yml/yaml` format for all examples down below, I recommend using `yml` over `toml` as it is easier to read.**
|
||||||
|
- You can find any [YML to TOML](https://www.google.com/search?q=yml+to+toml) converters if necessary.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Guide
|
||||||
|
|
||||||
|
Follow [Quick Start](https://gohugo.io/getting-started/quick-start/) guide to setup hugo and create a new site.
|
||||||
|
|
||||||
|
> Note: Use -f to select yml format
|
||||||
|
>
|
||||||
|
> `hugo new site <name of site> -f yml`
|
||||||
|
|
||||||
|
Make sure you install latest version of **`hugo(>=0.83.0)`**.
|
||||||
|
|
||||||
|
After you have created a new site, at [Step 3](https://gohugo.io/getting-started/quick-start/#step-3-add-a-theme) follow the steps:
|
||||||
|
|
||||||
|
### Method 1
|
||||||
|
|
||||||
|
Inside the folder of your Hugo site, run:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git clone https://github.com/adityatelange/hugo-PaperMod themes/PaperMod --depth=1
|
||||||
|
```
|
||||||
|
|
||||||
|
**Note**: You may use ` --branch v5.0` to end of above command if you want to stick to specific release.
|
||||||
|
|
||||||
|
> Updating theme :
|
||||||
|
>
|
||||||
|
> ```bash
|
||||||
|
> cd themes/PaperMod
|
||||||
|
> git pull
|
||||||
|
> ```
|
||||||
|
|
||||||
|
### Method 2
|
||||||
|
|
||||||
|
You can use as [submodule](https://www.atlassian.com/git/tutorials/git-submodule) with
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod --depth=1
|
||||||
|
git submodule update --init --recursive # needed when you reclone your repo (submodules may not get cloned automatically)
|
||||||
|
```
|
||||||
|
|
||||||
|
**Note**: You may use ` --branch v5.0` to end of above command if you want to stick to specific release.
|
||||||
|
|
||||||
|
> Updating theme :
|
||||||
|
>
|
||||||
|
> ```bash
|
||||||
|
> git submodule update --remote --merge
|
||||||
|
> ```
|
||||||
|
|
||||||
|
### Method 3
|
||||||
|
|
||||||
|
Or you can Download as Zip from Github Page and extract in your themes directory
|
||||||
|
|
||||||
|
Direct Links:
|
||||||
|
|
||||||
|
- [Master Branch (Latest)](https://github.com/adityatelange/hugo-PaperMod/archive/master.zip)
|
||||||
|
- [v5.0](https://github.com/adityatelange/hugo-PaperMod/archive/v5.0.zip)
|
||||||
|
- [v4.0](https://github.com/adityatelange/hugo-PaperMod/archive/v4.0.zip)
|
||||||
|
- [v3.0](https://github.com/adityatelange/hugo-PaperMod/archive/v3.0.zip)
|
||||||
|
- [v2.0](https://github.com/adityatelange/hugo-PaperMod/archive/v2.0.zip)
|
||||||
|
- [v1.0](https://github.com/adityatelange/hugo-PaperMod/archive/v1.0.zip)
|
||||||
|
|
||||||
|
### Finally ...
|
||||||
|
|
||||||
|
Add in `config.yml`:
|
||||||
|
|
||||||
|
```yml
|
||||||
|
theme: "PaperMod"
|
||||||
|
```
|
||||||
|
### Method 4
|
||||||
|
|
||||||
|
- Install [Go programming language](https://go.dev/doc/install) in your operating system.
|
||||||
|
|
||||||
|
- Intialize your own hugo mod
|
||||||
|
|
||||||
|
```
|
||||||
|
hugo mod init YOUR_OWN_GIT_REPOSITORY
|
||||||
|
```
|
||||||
|
|
||||||
|
- Add PaperMod in your `config.yml` file
|
||||||
|
|
||||||
|
```
|
||||||
|
module:
|
||||||
|
imports:
|
||||||
|
- path: github.com/adityatelange/hugo-PaperMod
|
||||||
|
```
|
||||||
|
- Update theme
|
||||||
|
|
||||||
|
```
|
||||||
|
hugo mod get -u
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Quick Links
|
||||||
|
|
||||||
|
- ### [Papermod - Features](../papermod-features)
|
||||||
|
|
||||||
|
- ### [Papermod - FAQs](../papermod-how-to)
|
||||||
|
|
||||||
|
- ### [Papermod - Variables](../papermod-variables)
|
||||||
|
|
||||||
|
- ### [Papermod - Icons](../papermod-icons)
|
||||||
|
|
||||||
|
- ### [ChangeLog](https://github.com/adityatelange/hugo-PaperMod/releases)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Sample `config.yml`
|
||||||
|
|
||||||
|
> **Example Site Structure is present here**: [exampleSite](https://github.com/adityatelange/hugo-PaperMod/tree/exampleSite/)
|
||||||
|
|
||||||
|
**Use appropriately**
|
||||||
|
|
||||||
|
```yml
|
||||||
|
baseURL: "https://examplesite.com/"
|
||||||
|
title: ExampleSite
|
||||||
|
paginate: 5
|
||||||
|
theme: PaperMod
|
||||||
|
|
||||||
|
enableRobotsTXT: true
|
||||||
|
buildDrafts: false
|
||||||
|
buildFuture: false
|
||||||
|
buildExpired: false
|
||||||
|
pygmentsUseClasses: true
|
||||||
|
|
||||||
|
googleAnalytics: UA-123-45
|
||||||
|
|
||||||
|
minify:
|
||||||
|
disableXML: true
|
||||||
|
minifyOutput: true
|
||||||
|
|
||||||
|
params:
|
||||||
|
env: production # to enable google analytics, opengraph, twitter-cards and schema.
|
||||||
|
title: ExampleSite
|
||||||
|
description: "ExampleSite description"
|
||||||
|
keywords: [Blog, Portfolio, PaperMod]
|
||||||
|
author: Me
|
||||||
|
# author: ["Me", "You"] # multiple authors
|
||||||
|
images: ["<link or path of image for opengraph, twitter-cards>"]
|
||||||
|
DateFormat: "January 2, 2006"
|
||||||
|
defaultTheme: auto # dark, light
|
||||||
|
disableThemeToggle: false
|
||||||
|
|
||||||
|
ShowReadingTime: true
|
||||||
|
ShowShareButtons: true
|
||||||
|
ShowPostNavLinks: true
|
||||||
|
ShowBreadCrumbs: true
|
||||||
|
ShowCodeCopyButtons: false
|
||||||
|
disableSpecial1stPost: false
|
||||||
|
disableScrollToTop: false
|
||||||
|
comments: false
|
||||||
|
hidemeta: false
|
||||||
|
hideSummary: false
|
||||||
|
showtoc: false
|
||||||
|
tocopen: false
|
||||||
|
|
||||||
|
assets:
|
||||||
|
# disableHLJS: true # to disable highlight.js
|
||||||
|
# disableFingerprinting: true
|
||||||
|
favicon: "<link / abs url>"
|
||||||
|
favicon16x16: "<link / abs url>"
|
||||||
|
favicon32x32: "<link / abs url>"
|
||||||
|
apple_touch_icon: "<link / abs url>"
|
||||||
|
safari_pinned_tab: "<link / abs url>"
|
||||||
|
|
||||||
|
label:
|
||||||
|
text: "Home"
|
||||||
|
icon: /apple-touch-icon.png
|
||||||
|
iconHeight: 35
|
||||||
|
|
||||||
|
# profile-mode
|
||||||
|
profileMode:
|
||||||
|
enabled: false # needs to be explicitly set
|
||||||
|
title: ExampleSite
|
||||||
|
subtitle: "This is subtitle"
|
||||||
|
imageUrl: "<img location>"
|
||||||
|
imageWidth: 120
|
||||||
|
imageHeight: 120
|
||||||
|
imageTitle: my image
|
||||||
|
buttons:
|
||||||
|
- name: Posts
|
||||||
|
url: posts
|
||||||
|
- name: Tags
|
||||||
|
url: tags
|
||||||
|
|
||||||
|
# home-info mode
|
||||||
|
homeInfoParams:
|
||||||
|
Title: "Hi there \U0001F44B"
|
||||||
|
Content: Welcome to my blog
|
||||||
|
|
||||||
|
socialIcons:
|
||||||
|
- name: twitter
|
||||||
|
url: "https://twitter.com/"
|
||||||
|
- name: stackoverflow
|
||||||
|
url: "https://stackoverflow.com"
|
||||||
|
- name: github
|
||||||
|
url: "https://github.com/"
|
||||||
|
|
||||||
|
analytics:
|
||||||
|
google:
|
||||||
|
SiteVerificationTag: "XYZabc"
|
||||||
|
bing:
|
||||||
|
SiteVerificationTag: "XYZabc"
|
||||||
|
yandex:
|
||||||
|
SiteVerificationTag: "XYZabc"
|
||||||
|
|
||||||
|
cover:
|
||||||
|
hidden: true # hide everywhere but not in structured data
|
||||||
|
hiddenInList: true # hide on list pages and home
|
||||||
|
hiddenInSingle: true # hide on single page
|
||||||
|
|
||||||
|
editPost:
|
||||||
|
URL: "https://github.com/<path_to_repo>/content"
|
||||||
|
Text: "Suggest Changes" # edit text
|
||||||
|
appendFilePath: true # to append file path to Edit link
|
||||||
|
|
||||||
|
# for search
|
||||||
|
# https://fusejs.io/api/options.html
|
||||||
|
fuseOpts:
|
||||||
|
isCaseSensitive: false
|
||||||
|
shouldSort: true
|
||||||
|
location: 0
|
||||||
|
distance: 1000
|
||||||
|
threshold: 0.4
|
||||||
|
minMatchCharLength: 0
|
||||||
|
keys: ["title", "permalink", "summary", "content"]
|
||||||
|
menu:
|
||||||
|
main:
|
||||||
|
- identifier: categories
|
||||||
|
name: categories
|
||||||
|
url: /categories/
|
||||||
|
weight: 10
|
||||||
|
- identifier: tags
|
||||||
|
name: tags
|
||||||
|
url: /tags/
|
||||||
|
weight: 20
|
||||||
|
- identifier: example
|
||||||
|
name: example.org
|
||||||
|
url: https://example.org
|
||||||
|
weight: 30
|
||||||
|
# Read: https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs#using-hugos-syntax-highlighter-chroma
|
||||||
|
# pygmentsUseClasses: true
|
||||||
|
# markup:
|
||||||
|
# highlight:
|
||||||
|
# # anchorLineNos: true
|
||||||
|
# codeFences: true
|
||||||
|
# guessSyntax: true
|
||||||
|
# lineNos: true
|
||||||
|
# style: monokai
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Sample `Page.md`
|
||||||
|
|
||||||
|
```yml
|
||||||
|
---
|
||||||
|
title: "My 1st post"
|
||||||
|
date: 2020-09-15T11:30:03+00:00
|
||||||
|
# weight: 1
|
||||||
|
# aliases: ["/first"]
|
||||||
|
tags: ["first"]
|
||||||
|
author: "Me"
|
||||||
|
# author: ["Me", "You"] # multiple authors
|
||||||
|
showToc: true
|
||||||
|
TocOpen: false
|
||||||
|
draft: false
|
||||||
|
hidemeta: false
|
||||||
|
comments: false
|
||||||
|
description: "Desc Text."
|
||||||
|
canonicalURL: "https://canonical.url/to/page"
|
||||||
|
disableHLJS: true # to disable highlightjs
|
||||||
|
disableShare: false
|
||||||
|
disableHLJS: false
|
||||||
|
hideSummary: false
|
||||||
|
searchHidden: true
|
||||||
|
ShowReadingTime: true
|
||||||
|
ShowBreadCrumbs: true
|
||||||
|
ShowPostNavLinks: true
|
||||||
|
cover:
|
||||||
|
image: "<image path/url>" # image path/url
|
||||||
|
alt: "<alt text>" # alt text
|
||||||
|
caption: "<text>" # display caption under cover
|
||||||
|
relative: false # when using page bundles set this to true
|
||||||
|
hidden: true # only hide on current single page
|
||||||
|
editPost:
|
||||||
|
URL: "https://github.com/<path_to_repo>/content"
|
||||||
|
Text: "Suggest Changes" # edit text
|
||||||
|
appendFilePath: true # to append file path to Edit link
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
You can use it by creating `archetypes/post.md`
|
||||||
|
|
||||||
|
```shell
|
||||||
|
hugo new --kind post <name>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
@ -0,0 +1,180 @@
|
||||||
|
---
|
||||||
|
title: "Variables | Front Matter"
|
||||||
|
summary: List of Front Matter variables used by PaperMod
|
||||||
|
date: 2021-01-20
|
||||||
|
tags: ["PaperMod"]
|
||||||
|
author: "Aditya Telange"
|
||||||
|
draft: true
|
||||||
|
weight: 5
|
||||||
|
---
|
||||||
|
|
||||||
|
**Below are variables used with this theme...**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Site Variables under `Params`
|
||||||
|
|
||||||
|
| name | type | example | Description |
|
||||||
|
| -------------------------------------- | ------------- | ------------------------ | ----------------------------------------------------------------------------------------- |
|
||||||
|
| `env` | string | 'production' | To set env to production |
|
||||||
|
| `title` | string | 'My Blog' | To set title |
|
||||||
|
| `description` | string | 'This is a blog of mine' | To set site description |
|
||||||
|
| `author` | string \|list | 'Me' \| ['Me','You'] | To show multiple Authors |
|
||||||
|
| `images` | string | 'myimage.png' | Link or path of image for opengraph, twitter-cards |
|
||||||
|
| `keywords` | list | [blog, page] | Add keywords for Home page |
|
||||||
|
| `DateFormat` | string | "January 2, 2006" | The format of date strings in the website. [Details](https://gohugo.io/functions/format/) |
|
||||||
|
| `languageAltTitle` | string | "English" | Alternate title in Multilingual Mode |
|
||||||
|
| `ShowReadingTime` | boolean | true \| false | To show read time in post meta |
|
||||||
|
| `ShowShareButtons` | boolean | true \| false | To show/hide share buttons under post |
|
||||||
|
| `ShowCodeCopyButtons` | boolean | true \| false | To show/hide Code Copy button |
|
||||||
|
| `ShowFullTextinRSS` | boolean | true \| false | To show Content in RSS feed |
|
||||||
|
| `defaultTheme` | string | light \| dark \| auto | To set default theme |
|
||||||
|
| `disableThemeToggle` | boolean | true \| false | To disable theme toggle icon shown besides label |
|
||||||
|
| `disableSpecial1stPost` | boolean | true \| false | To disable no-card special appearance of 1st post |
|
||||||
|
| `disableScrollToTop` | boolean | true \| false | To disable ScrollToTop button |
|
||||||
|
| `disableAnchoredHeadings` | boolean | true \| false | To disable Anchored Headings |
|
||||||
|
| `hideMeta` | boolean | true \| false | To Hide meta elements : date, read-time, author and available-translations for page |
|
||||||
|
| `hideSummary` | boolean | true \| false | To Hide summary being shown in list pages |
|
||||||
|
| `showtoc` | boolean | true \| false | To show/hide Table of Contents |
|
||||||
|
| `tocopen` | boolean | true \| false | To keep open ToC by default on page load |
|
||||||
|
| `ShowPostNavLinks` | boolean | true \| false | Show Previous and Next Posts below a Post |
|
||||||
|
| `ShowBreadCrumbs` | boolean | true \| false | Show BreadCrumb Navigation above single post/page |
|
||||||
|
| `comments` | boolean | true \| false | To show/hide comments |
|
||||||
|
| `analytics.google.SiteVerificationTag` | string | "XYZabc" | Site Verification Tag for Google Analytics |
|
||||||
|
| `analytics.bing.SiteVerificationTag` | string | "XYZabc" | Site Verification Tag for Bing |
|
||||||
|
| `analytics.yandex.SiteVerificationTag` | string | "XYZabc" | Site Verification Tag for Yandex |
|
||||||
|
| `schema` | - | - | [Details](#schema) |
|
||||||
|
| `fuseOpts` | - | - | [Details](#fuseOpts) |
|
||||||
|
| `socialIcons` | - | - | [Details](#socialIcons) |
|
||||||
|
| `label` | - | - | [Details](#label) |
|
||||||
|
| `assets` | - | - | [Details](#assets) |
|
||||||
|
| `cover` | - | - | [Details](#cover) |
|
||||||
|
| `profileMode` | - | - | [Details](#profilemode) |
|
||||||
|
| `editPost` | - | - | [Details](#editPost) |
|
||||||
|
|
||||||
|
### Site Variables
|
||||||
|
|
||||||
|
| name | type | example | Description |
|
||||||
|
| ----------- | ------ | ------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------- |
|
||||||
|
| `copyright` | string | `**[example.site](https://example.site)**` | This is [HUGO's site variable](https://gohugo.io/variables/site/#site-variables-list), which can also render markdown content |
|
||||||
|
|
||||||
|
#### label
|
||||||
|
|
||||||
|
| name | type | example | Description |
|
||||||
|
| ------------------ | ------- | ----------------------- | ------------------------------------------------ |
|
||||||
|
| `label.text` | string | 'Home' | To display different label text other than title |
|
||||||
|
| `label.icon` | string | '/apple-touch-icon.png' | To display a logo image in label |
|
||||||
|
| `label.iconHeight` | integer | 35 | To set size of label logo image |
|
||||||
|
|
||||||
|
#### profileMode
|
||||||
|
|
||||||
|
| name | type | example | Description |
|
||||||
|
| ------------------------- | ------- | ---------------------------------------------- | ---------------------------------------------------- |
|
||||||
|
| `profileMode.enabled` | boolean | true \| false | For enabling profileMode, needs to be explicitly set |
|
||||||
|
| `profileMode.title` | string | "Title" | Title |
|
||||||
|
| `profileMode.subtitle` | string | "subtitle here" | Subtitle |
|
||||||
|
| `profileMode.imageUrl` | string | "image.png" \| "https://example.com/image.jpg" | Image URL or Link |
|
||||||
|
| `profileMode.imageWidth ` | string | "150" | Width of image |
|
||||||
|
| `profileMode.imageHeight` | string | "150" | Height of image |
|
||||||
|
| `profileMode.imageTitle` | string | "This image is a picture of .." | Title of image |
|
||||||
|
| `profileMode.buttons` | - | - | [Details](#profileModebuttons) |
|
||||||
|
|
||||||
|
##### profileMode.buttons
|
||||||
|
|
||||||
|
```yml
|
||||||
|
profileMode:
|
||||||
|
buttons:
|
||||||
|
- name: Archive
|
||||||
|
url: "/archive"
|
||||||
|
- name: Github
|
||||||
|
url: "https://github.com/"
|
||||||
|
```
|
||||||
|
|
||||||
|
#### assets
|
||||||
|
|
||||||
|
| name | type | example | Description |
|
||||||
|
| ------------------------------ | ------- | ------------- | -------------------------------------------- |
|
||||||
|
| `assets.favicon` | string | 'icon.ico' | To set favicon, can be path or external link |
|
||||||
|
| `assets.disableHLJS` | boolean | true \| false | To disable Highlight.js loading |
|
||||||
|
| `assets.disableFingerprinting` | boolean | true \| false | To disable Sub-Resource integrity for assets |
|
||||||
|
|
||||||
|
#### cover
|
||||||
|
|
||||||
|
| name | type | example | Description |
|
||||||
|
| ------------------------ | ------- | ------------- | ------------------------------------------------------- |
|
||||||
|
| `cover.linkFullImages` | boolean | true \| false | To open full size cover images on click on cover |
|
||||||
|
| `cover.responsiveImages` | boolean | true \| false | To enable/disable generation of responsive cover images |
|
||||||
|
| `cover.hidden` | boolean | true \| false | To hide everywhere but not in structured data |
|
||||||
|
| `cover.hiddenInList` | boolean | true \| false | To hide on list pages and home |
|
||||||
|
| `cover.hiddenInSingle ` | boolean | true \| false | To hide on list pages and home |
|
||||||
|
|
||||||
|
#### schema
|
||||||
|
|
||||||
|
| name | type | example | Description |
|
||||||
|
| ---------------------- | ------ | ---------------- | ----------------------------- |
|
||||||
|
| `schema.publisherType` | string | 'Organization' | https://schema.org/publisher |
|
||||||
|
| `schema.sameAs` | list | ["URL1", "URL2"] | Set https://schema.org/sameAs |
|
||||||
|
|
||||||
|
#### fuseOpts
|
||||||
|
|
||||||
|
Refer: https://fusejs.io/api/options.html
|
||||||
|
|
||||||
|
```yml
|
||||||
|
fuseOpts:
|
||||||
|
isCaseSensitive: false
|
||||||
|
shouldSort: true
|
||||||
|
location: 0
|
||||||
|
distance: 1000
|
||||||
|
threshold: 0.4
|
||||||
|
minMatchCharLength: 0
|
||||||
|
keys: ["title", "permalink", "summary", "content"] ## can be less but not more than shown in list
|
||||||
|
```
|
||||||
|
|
||||||
|
#### socialIcons
|
||||||
|
|
||||||
|
```yml
|
||||||
|
socialIcons:
|
||||||
|
- name: "<platform>"
|
||||||
|
url: "<link>"
|
||||||
|
- name: "<platform 2>"
|
||||||
|
url: "<link2>"
|
||||||
|
```
|
||||||
|
|
||||||
|
#### editPost
|
||||||
|
|
||||||
|
```yml
|
||||||
|
editPost:
|
||||||
|
URL: "https://github.com/<path_to_repo>/content"
|
||||||
|
Text: "Suggest Changes" # edit text
|
||||||
|
appendFilePath: true # to append file path to Edit link
|
||||||
|
```
|
||||||
|
|
||||||
|
> Note: Same format is being used by Page Variables
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Page Variables
|
||||||
|
|
||||||
|
| Name | Type | Example | Description |
|
||||||
|
| ------------------------- | ------------- | ------------------------------- | ----------------------------------------------------------------------------------- |
|
||||||
|
| `showtoc` | boolean | true \| false | To show/hide Table of Contents |
|
||||||
|
| `tocopen` | boolean | true \| false | To keep open ToC by default on page load |
|
||||||
|
| `hidemeta` | boolean | true \| false | To Hide meta elements : date, read-time, author and available-translations for page |
|
||||||
|
| `comments` | boolean | true \| false | To show/hide comments |
|
||||||
|
| `description` | string | 'description text' | Show Post Description under Title |
|
||||||
|
| `canonicalURL` | string | "https://canonical.url/to/page" | To add canonical URL to posts |
|
||||||
|
| `disableShare` | boolean | true \| false | To hide/show share icons under a page |
|
||||||
|
| `disableHLJS` | boolean | true \| false | To disable Highlight.js loading |
|
||||||
|
| `disableAnchoredHeadings` | boolean | true \| false | To disable Anchored Headings |
|
||||||
|
| `searchHidden` | boolean | true \| false | Hide page from search |
|
||||||
|
| `hideSummary` | boolean | true \| false | To Hide summary being shown in list pages |
|
||||||
|
| `ShowReadingTime` | boolean | true \| false | To show read time in post meta |
|
||||||
|
| `ShowBreadCrumbs` | boolean | true \| false | Show BreadCrumb Navigation above single post/page |
|
||||||
|
| `ShowPostNavLinks` | boolean | true \| false | Show Previous and Next Posts below a Post |
|
||||||
|
| `author` | string \|list | 'Me' \| ['Me','You'] | To show multiple Authors |
|
||||||
|
| `cover.image` | string | 'featured.jpg' | To add a cover image |
|
||||||
|
| `cover.caption ` | string | 'caption for image' | To add caption to cover image |
|
||||||
|
| `cover.alt` | string | 'this is cover image' | Alternate text to show if image doesn't load/show up |
|
||||||
|
| `cover.relative` | boolean | true \| false | To use relative path for cover image, used in hugo Page-bundles |
|
||||||
|
| `cover.hidden ` | boolean | true \| false | To hide on current single page |
|
||||||
|
| `weight ` | integer | 5 | To set page order or to pin a post to Top of list |
|
||||||
|
|
@ -0,0 +1,72 @@
|
||||||
|
---
|
||||||
|
title: "PaperModX New Features"
|
||||||
|
date: 2022-04-12T23:37:00+08:00
|
||||||
|
weight: 1
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
This page explains the new features and changes of PaperModX
|
||||||
|
comparing to it's origin PaperMod.
|
||||||
|
|
||||||
|
|
||||||
|
## Table of Contents (ToC) floating on the side
|
||||||
|
|
||||||
|
By adding config:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
params:
|
||||||
|
TocSide: 'left' # or 'right'
|
||||||
|
```
|
||||||
|
|
||||||
|
ToC will float on the left/right side of the page.
|
||||||
|
You can take a look at how `'right'` feels like in [Installation | Update](../papermod/papermod-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.
|
||||||
|
|
||||||
|
|
||||||
|
## InstantClick integration
|
||||||
|
|
||||||
|
By adding config:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
params:
|
||||||
|
EnableInstantClick: true
|
||||||
|
```
|
||||||
|
|
||||||
|
[InstantClick](http://instantclick.io/) will be enabled,
|
||||||
|
making navigation behaves like Single Page Application.
|
||||||
|
|
||||||
|
Note that `/search` pages are omitted from InstantClick
|
||||||
|
to prevent conflicts from search's JavaScript,
|
||||||
|
this may be changed in the future after refactoring those scripts.
|
||||||
|
|
||||||
|
Another thing to notice is smooth scrolling will be disabled
|
||||||
|
if InstantClick is enabled, because they both listen click
|
||||||
|
event on every `<a>` tags. IMO smooth scrolling is not very useful
|
||||||
|
so it has to give way to InstantCllick.
|
||||||
|
|
||||||
|
This feature is enabled on this site.
|
||||||
|
|
||||||
|
|
||||||
|
## Social icons from Simple Icons
|
||||||
|
|
||||||
|
Add social icons with `-simple` suffix from [Simple Icons](https://simpleicons.org/).
|
||||||
|
|
||||||
|
Available icons:
|
||||||
|
- github-simple
|
||||||
|
- rss-simple
|
||||||
|
- telegram-simple
|
||||||
|
- 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](../../icons)
|
||||||
|
|
||||||
|
## Opinionated UI enhancements
|
||||||
|
|
||||||
|
- Distinguish home page width and post page width, post page is wider
|
||||||
|
(800px) for better readability, you can change it by `--post-width` in `theme-vars.css`.
|
||||||
|
- Menu links are always bold, this feels more consistent when clicking around. Active links have deeper color.
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
---
|
||||||
|
author: "Hugo Authors"
|
||||||
|
title: "Placeholder Text"
|
||||||
|
date: "2019-03-09"
|
||||||
|
description: "Lorem Ipsum Dolor Si Amet"
|
||||||
|
tags: ["markdown", "text"]
|
||||||
|
hideMeta: true
|
||||||
|
searchHidden: true
|
||||||
|
ShowBreadCrumbs: false
|
||||||
|
---
|
||||||
|
|
||||||
|
Lorem est tota propiore conpellat pectoribus de pectora summo. <!--more-->Redit teque digerit hominumque toris verebor lumina non cervice subde tollit usus habet Arctonque, furores quas nec ferunt. Quoque montibus nunc caluere tempus inhospita parcite confusaque translucet patri vestro qui optatis lumine cognoscere flos nubis! Fronde ipsamque patulos Dryopen deorum.
|
||||||
|
|
||||||
|
1. Exierant elisi ambit vivere dedere
|
||||||
|
2. Duce pollice
|
||||||
|
3. Eris modo
|
||||||
|
4. Spargitque ferrea quos palude
|
||||||
|
|
||||||
|
Rursus nulli murmur; hastile inridet ut ab gravi sententia! Nomine potitus silentia flumen, sustinet placuit petis in dilapsa erat sunt. Atria tractus malis.
|
||||||
|
|
||||||
|
1. Comas hunc haec pietate fetum procerum dixit
|
||||||
|
2. Post torum vates letum Tiresia
|
||||||
|
3. Flumen querellas
|
||||||
|
4. Arcanaque montibus omnes
|
||||||
|
5. Quidem et
|
||||||
|
|
||||||
|
# Vagus elidunt
|
||||||
|
|
||||||
|
<svg class="canon" xmlns="http://www.w3.org/2000/svg" overflow="visible" viewBox="0 0 496 373" height="373" width="496"><g fill="none"><path stroke="#000" stroke-width=".75" d="M.599 372.348L495.263 1.206M.312.633l494.95 370.853M.312 372.633L247.643.92M248.502.92l246.76 370.566M330.828 123.869V1.134M330.396 1.134L165.104 124.515"></path><path stroke="#ED1C24" stroke-width=".75" d="M275.73 41.616h166.224v249.05H275.73zM54.478 41.616h166.225v249.052H54.478z"></path><path stroke="#000" stroke-width=".75" d="M.479.375h495v372h-495zM247.979.875v372"></path><ellipse cx="498.729" cy="177.625" rx=".75" ry="1.25"></ellipse><ellipse cx="247.229" cy="377.375" rx=".75" ry="1.25"></ellipse></g></svg>
|
||||||
|
|
||||||
|
[The Van de Graaf Canon](https://en.wikipedia.org/wiki/Canons_of_page_construction#Van_de_Graaf_canon)
|
||||||
|
|
||||||
|
## Mane refeci capiebant unda mulcebat
|
||||||
|
|
||||||
|
Victa caducifer, malo vulnere contra dicere aurato, ludit regale, voca! Retorsit colit est profanae esse virescere furit nec; iaculi matertera et visa est, viribus. Divesque creatis, tecta novat collumque vulnus est, parvas. **Faces illo pepulere** tempus adest. Tendit flamma, ab opes virum sustinet, sidus sequendo urbis.
|
||||||
|
|
||||||
|
Iubar proles corpore raptos vero auctor imperium; sed et huic: manus caeli Lelegas tu lux. Verbis obstitit intus oblectamina fixis linguisque ausus sperare Echionides cornuaque tenent clausit possit. Omnia putatur. Praeteritae refert ausus; ferebant e primus lora nutat, vici quae mea ipse. Et iter nil spectatae vulnus haerentia iuste et exercebat, sui et.
|
||||||
|
|
||||||
|
Eurytus Hector, materna ipsumque ut Politen, nec, nate, ignari, vernum cohaesit sequitur. Vel **mitis temploque** vocatus, inque alis, _oculos nomen_ non silvis corpore coniunx ne displicet illa. Crescunt non unus, vidit visa quantum inmiti flumina mortis facto sic: undique a alios vincula sunt iactata abdita! Suspenderat ego fuit tendit: luna, ante urbem Propoetides **parte**.
|
||||||
|
|
||||||
|
{{< css.inline >}}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.canon { background: white; width: 100%; height: auto; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
{{< /css.inline >}}
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
---
|
||||||
|
author: "Hugo Authors"
|
||||||
|
title: "Rich Content"
|
||||||
|
date: "2019-03-10"
|
||||||
|
description: "A brief description of Hugo Shortcodes"
|
||||||
|
tags: ["shortcodes", "privacy"]
|
||||||
|
ShowToc: true
|
||||||
|
---
|
||||||
|
|
||||||
|
Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-management/shortcodes/#use-hugos-built-in-shortcodes) for rich content, along with a [Privacy Config](https://gohugo.io/about/hugo-and-gdpr/) and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds.
|
||||||
|
<!--more-->
|
||||||
|
---
|
||||||
|
|
||||||
|
## YouTube Privacy Enhanced Shortcode
|
||||||
|
|
||||||
|
{{< youtube ZJthWmvUzzc >}}
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Twitter Simple Shortcode
|
||||||
|
|
||||||
|
{{< twitter_simple 1085870671291310081 >}}
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Vimeo Simple Shortcode
|
||||||
|
|
||||||
|
{{< vimeo_simple 48912912 >}}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
---
|
||||||
|
title: "Search"
|
||||||
|
layout: "search"
|
||||||
|
---
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
---
|
||||||
|
title: "搜索"
|
||||||
|
layout: "search"
|
||||||
|
---
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
{{- define "main" }}
|
||||||
|
<h1>{{ .Title }}</h1>
|
||||||
|
|
||||||
|
<div id="icons">
|
||||||
|
{{ range $name, $icon := $.Site.Data.svg }}
|
||||||
|
<div class="item">
|
||||||
|
<div class="icon">{{ safeHTML $icon }}</div>
|
||||||
|
<div class="name">{{ $name }}</div>
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{- end }}
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
<style>
|
||||||
|
#icons {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-top: 2em;
|
||||||
|
}
|
||||||
|
#icons .item {
|
||||||
|
width: 80px;
|
||||||
|
height: 50px;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
#icons .item .name {
|
||||||
|
font-size: 12px;
|
||||||
|
user-select: all;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#icons .item .icon {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
#icons .item svg {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Loading…
Reference in New Issue