use LoveIt theme, self hosted
This commit is contained in:
parent
bcafaafff8
commit
e9ec93a471
1973 changed files with 54578 additions and 15688 deletions
117
themes/LoveIt/exampleSite/content/about/index.en.md
Normal file
117
themes/LoveIt/exampleSite/content/about/index.en.md
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
---
|
||||
title: "About LoveIt"
|
||||
date: 2019-08-02T11:04:49+08:00
|
||||
draft: false
|
||||
|
||||
lightgallery: true
|
||||
|
||||
math:
|
||||
enable: true
|
||||
---
|
||||
|
||||
{{< style "img { height: 1.25rem; }" >}}
|
||||
[](https://github.com/dillonzq/LoveIt/releases)
|
||||
[](https://gohugo.io/)
|
||||
[](https://github.com/dillonzq/LoveIt/blob/master/LICENSE)
|
||||
[](https://github.com/dillonzq/LoveIt)
|
||||
[](https://github.com/dillonzq/LoveIt/fork)
|
||||
{{< /style >}}
|
||||
|
||||
> [:(far fa-kiss-wink-heart fa-fw): LoveIt](https://github.com/dillonzq/LoveIt) is a **clean**, **elegant** but **advanced** blog theme for [Hugo](https://gohugo.io/) developed by [Dillon](https://dillonzq.com).
|
||||
>
|
||||
> It is based on the original [LeaveIt Theme](https://github.com/liuzc/LeaveIt) and [KeepIt Theme](https://github.com/Fastbyte01/KeepIt).
|
||||
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
#### Performance and SEO
|
||||
|
||||
* :(fas fa-rocket fa-fw): Optimized for **performance**: [99]/[100] on mobile and [100]/[100] on desktop in [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights)
|
||||
* :(fab fa-searchengin fa-fw): Optimized SEO performance with a correct **SEO SCHEMA** based on JSON-LD
|
||||
* :(fab fa-google fa-fw): **[Google Analytics](https://analytics.google.com/analytics)** supported
|
||||
* :(far fa-chart-bar fa-fw): **[Fathom Analytics](https://usefathom.com/)** supported
|
||||
* :(fas fa-search fa-fw): Search engine **verification** supported (Google, Bind, Yandex and Baidu)
|
||||
* :(fas fa-tachometer-alt fa-fw): **CDN** for third-party libraries supported
|
||||
* :(fas fa-cloud-download-alt fa-fw): Automatically converted images with **Lazy Load** by [lazysizes](https://github.com/aFarkas/lazysizes)
|
||||
|
||||
#### Appearance and Layout
|
||||
|
||||
* [:(fas fa-desktop):]/[:(fas fa-mobile):] **Responsive** layout
|
||||
* [:(fas fa-sun):]/[:(fas fa-moon):] **[Light]/[Dark]** mode
|
||||
* :(fas fa-layer-group fa-fw): Globally consistent **design language**
|
||||
* :(fas fa-ellipsis-h fa-fw): **Pagination** supported
|
||||
* :(far fa-list-alt fa-fw): Easy-to-use and self-expanding **table of contents**
|
||||
* :(fas fa-language fa-fw): **Multilanguage** supported and i18n ready
|
||||
* :(fab fa-css3-alt fa-fw): Beautiful **CSS animation**
|
||||
|
||||
#### Social and Comment Systems
|
||||
|
||||
* :(far fa-user fa-fw): **Gravatar** supported by [Gravatar](https://gravatar.com)
|
||||
* :(fas fa-user-circle fa-fw): Local **Avatar** supported
|
||||
* :(far fa-id-card fa-fw): Up to **64** social links supported
|
||||
* :(fas fa-share-square fa-fw): Up to **28** share sites supported
|
||||
* :(far fa-comment fa-fw): **Disqus** comment system supported by [Disqus](https://disqus.com)
|
||||
* :(far fa-comment-dots fa-fw): **Gitalk** comment system supported by [Gitalk](https://github.com/gitalk/gitalk)
|
||||
* :(far fa-comment-alt fa-fw): **Valine** comment system supported by [Valine](https://valine.js.org/)
|
||||
* :(far fa-comments fa-fw): **Facebook comments** system supported by [Facebook](https://developers.facebook.com/docs/plugins/comments/)
|
||||
* :(fas fa-comment fa-fw): **Telegram comments** system supported by [Comments](https://comments.app/)
|
||||
* :(fas fa-comment-dots fa-fw): **Commento** comment system supported by [Commento](https://commento.io/)
|
||||
* :(fas fa-comment-alt fa-fw): **Utterances** comment system supported by [Utterances](https://utteranc.es/)
|
||||
|
||||
#### Extended Features
|
||||
|
||||
* :(fas fa-search fa-fw): **Search** supported by [Lunr.js](https://lunrjs.com/) or [algolia](https://www.algolia.com/)
|
||||
* :(far fa-grin-tongue-wink fa-fw): **Twemoji** supported
|
||||
* :(fas fa-code fa-fw): Automatically **highlighting** code
|
||||
* :(far fa-copy fa-fw): **Copy code** to clipboard with one click
|
||||
* :(far fa-images fa-fw): **Images gallery** supported by [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
|
||||
* :(fab fa-font-awesome fa-fw): Extended Markdown syntax for **[Font Awesome](https://fontawesome.com/) icons**
|
||||
* :(far fa-sticky-note fa-fw): Extended Markdown syntax for **ruby annotation**
|
||||
* :(fas fa-percentage fa-fw): Extended Markdown syntax for **fraction**
|
||||
* :(fas fa-square-root-alt fa-fw): **Mathematical formula** supported by [$ \KaTeX $](https://katex.org/)
|
||||
* :(fas fa-project-diagram fa-fw): **Diagrams** shortcode supported by [mermaid](https://github.com/knsv/mermaid)
|
||||
* :(fas fa-chart-pie fa-fw): **Interactive data visualization** shortcode supported by [ECharts](https://echarts.apache.org/)
|
||||
* :(fas fa-map-marked-alt fa-fw): **Mapbox** shortcode supported by [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
|
||||
* :(fas fa-music fa-fw): **Music player** shortcode supported by [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS)
|
||||
* :(fas fa-video fa-fw): **Bilibili player** shortcode
|
||||
* :(far fa-bell fa-fw): Kinds of **admonitions** shortcode
|
||||
* :(fas fa-align-left fa-fw): **Custom style** shortcode
|
||||
* :(fab fa-js-square fa-fw): **Custom script** shortcode
|
||||
* :(fas fa-i-cursor fa-fw): **Animated typing** supported by [TypeIt](https://typeitjs.com/)
|
||||
* :(fas fa-arrow-down fa-fw): **Dynamic scroll** supported by [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll)
|
||||
* :(fas fa-cookie-bite fa-fw): **Cookie consent banner** supported by [cookieconsent](https://github.com/osano/cookieconsent)
|
||||
* ...
|
||||
|
||||
### License
|
||||
|
||||
LoveIt is licensed under the **MIT** license.
|
||||
|
||||
Check the [LICENSE file](https://github.com/dillonzq/LoveIt/blob/master/LICENSE) for details.
|
||||
|
||||
Thanks to the authors of following resources included in the theme:
|
||||
|
||||
* [normalize.css](https://github.com/necolas/normalize.css)
|
||||
* [Font Awesome](https://fontawesome.com/)
|
||||
* [Simple Icons](https://github.com/simple-icons/simple-icons)
|
||||
* [Animate.css](https://daneden.github.io/animate.css/)
|
||||
* [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll)
|
||||
* [autocomplete.js](https://github.com/algolia/autocomplete.js)
|
||||
* [Lunr.js](https://lunrjs.com/)
|
||||
* [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
|
||||
* [lazysizes](https://github.com/aFarkas/lazysizes)
|
||||
* [object-fit-images](https://github.com/fregante/object-fit-images)
|
||||
* [Twemoji](https://github.com/twitter/twemoji)
|
||||
* [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
|
||||
* [clipboard.js](https://github.com/zenorocha/clipboard.js)
|
||||
* [Sharer.js](https://github.com/ellisonleao/sharer.js)
|
||||
* [TypeIt](https://typeitjs.com/)
|
||||
* [$ \KaTeX $](https://katex.org/)
|
||||
* [mermaid](https://github.com/knsv/mermaid)
|
||||
* [ECharts](https://echarts.apache.org/)
|
||||
* [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
|
||||
* [APlayer](https://github.com/MoePlayer/APlayer)
|
||||
* [MetingJS](https://github.com/metowolf/MetingJS)
|
||||
* [Gitalk](https://github.com/gitalk/gitalk)
|
||||
* [Valine](https://valine.js.org/)
|
||||
* [cookieconsent](https://github.com/osano/cookieconsent)
|
||||
122
themes/LoveIt/exampleSite/content/about/index.fr.md
Normal file
122
themes/LoveIt/exampleSite/content/about/index.fr.md
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
---
|
||||
title: "À propos de LoveIt"
|
||||
date: 2019-08-02T11:04:49+08:00
|
||||
draft: false
|
||||
|
||||
lightgallery: true
|
||||
|
||||
math:
|
||||
enable: true
|
||||
---
|
||||
|
||||
{{< style "img { height: 1.25rem; }" >}}
|
||||
[](https://github.com/dillonzq/LoveIt/releases)
|
||||
[](https://gohugo.io/)
|
||||
[](https://github.com/dillonzq/LoveIt/blob/master/LICENSE)
|
||||
[](https://github.com/dillonzq/LoveIt)
|
||||
[](https://github.com/dillonzq/LoveIt/fork)
|
||||
{{< /style >}}
|
||||
|
||||
{{< admonition warning >}}
|
||||
Sorry, this article has not been completely translated into **French**.
|
||||
Welcome to take the time to propose a translation by [:(fas fa-code-branch fa-fw): making a PR](https://github.com/dillonzq/LoveIt/pulls) to the theme!
|
||||
{{< /admonition >}}
|
||||
|
||||
> [:(far fa-kiss-wink-heart fa-fw): LoveIt](https://github.com/dillonzq/LoveIt) is a **clean**, **elegant** but **advanced** blog theme for [Hugo](https://gohugo.io/) developed by [Dillon](https://dillonzq.com).
|
||||
>
|
||||
> It is based on the original [LeaveIt Theme](https://github.com/liuzc/LeaveIt) and [KeepIt Theme](https://github.com/Fastbyte01/KeepIt).
|
||||
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
#### Performance and SEO
|
||||
|
||||
* :(fas fa-rocket fa-fw): Optimized for **performance**: [99]/[100] on mobile and [100]/[100] on desktop in [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights)
|
||||
* :(fab fa-searchengin fa-fw): Optimized SEO performance with a correct **SEO SCHEMA** based on JSON-LD
|
||||
* :(fab fa-google fa-fw): **[Google Analytics](https://analytics.google.com/analytics)** supported
|
||||
* :(far fa-chart-bar fa-fw): **[Fathom Analytics](https://usefathom.com/)** supported
|
||||
* :(fas fa-search fa-fw): Search engine **verification** supported (Google, Bind, Yandex and Baidu)
|
||||
* :(fas fa-tachometer-alt fa-fw): **CDN** for third-party libraries supported
|
||||
* :(fas fa-cloud-download-alt fa-fw): Automatically converted images with **Lazy Load** by [lazysizes](https://github.com/aFarkas/lazysizes)
|
||||
|
||||
#### Appearance and Layout
|
||||
|
||||
* [:(fas fa-desktop):]/[:(fas fa-mobile):] **Responsive** layout
|
||||
* [:(fas fa-sun):]/[:(fas fa-moon):] **[Light]/[Dark]** mode
|
||||
* :(fas fa-layer-group fa-fw): Globally consistent **design language**
|
||||
* :(fas fa-ellipsis-h fa-fw): **Pagination** supported
|
||||
* :(far fa-list-alt fa-fw): Easy-to-use and self-expanding **table of contents**
|
||||
* :(fas fa-language fa-fw): **Multilanguage** supported and i18n ready
|
||||
* :(fab fa-css3-alt fa-fw): Beautiful **CSS animation**
|
||||
|
||||
#### Social and Comment Systems
|
||||
|
||||
* :(far fa-user fa-fw): **Gravatar** supported by [Gravatar](https://gravatar.com)
|
||||
* :(fas fa-user-circle fa-fw): Local **Avatar** supported
|
||||
* :(far fa-id-card fa-fw): Up to **64** social links supported
|
||||
* :(fas fa-share-square fa-fw): Up to **28** share sites supported
|
||||
* :(far fa-comment fa-fw): **Disqus** comment system supported by [Disqus](https://disqus.com)
|
||||
* :(far fa-comment-dots fa-fw): **Gitalk** comment system supported by [Gitalk](https://github.com/gitalk/gitalk)
|
||||
* :(far fa-comment-alt fa-fw): **Valine** comment system supported by [Valine](https://valine.js.org/)
|
||||
* :(far fa-comments fa-fw): **Facebook comments** system supported by [Facebook](https://developers.facebook.com/docs/plugins/comments/)
|
||||
* :(fas fa-comment fa-fw): **Telegram comments** system supported by [Comments](https://comments.app/)
|
||||
* :(fas fa-comment-dots fa-fw): **Commento** comment system supported by [Commento](https://commento.io/)
|
||||
* :(fas fa-comment-alt fa-fw): **Utterances** comment system supported by [Utterances](https://utteranc.es/)
|
||||
|
||||
#### Extended Features
|
||||
|
||||
* :(fas fa-search fa-fw): **Search** supported by [Lunr.js](https://lunrjs.com/) or [algolia](https://www.algolia.com/)
|
||||
* :(far fa-grin-tongue-wink fa-fw): **Twemoji** supported
|
||||
* :(fas fa-code fa-fw): Automatically **highlighting** code
|
||||
* :(far fa-copy fa-fw): **Copy code** to clipboard with one click
|
||||
* :(far fa-images fa-fw): **Images gallery** supported by [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
|
||||
* :(fab fa-font-awesome fa-fw): Extended Markdown syntax for **[Font Awesome](https://fontawesome.com/) icons**
|
||||
* :(far fa-sticky-note fa-fw): Extended Markdown syntax for **ruby annotation**
|
||||
* :(fas fa-percentage fa-fw): Extended Markdown syntax for **fraction**
|
||||
* :(fas fa-square-root-alt fa-fw): **Mathematical formula** supported by [$ \KaTeX $](https://katex.org/)
|
||||
* :(fas fa-project-diagram fa-fw): **Diagrams** shortcode supported by [mermaid](https://github.com/knsv/mermaid)
|
||||
* :(fas fa-chart-pie fa-fw): **Interactive data visualization** shortcode supported by [ECharts](https://echarts.apache.org/)
|
||||
* :(fas fa-map-marked-alt fa-fw): **Mapbox** shortcode supported by [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
|
||||
* :(fas fa-music fa-fw): **Music player** shortcode supported by [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS)
|
||||
* :(fas fa-video fa-fw): **Bilibili player** shortcode
|
||||
* :(far fa-bell fa-fw): Kinds of **admonitions** shortcode
|
||||
* :(fas fa-align-left fa-fw): **Custom style** shortcode
|
||||
* :(fab fa-js-square fa-fw): **Custom script** shortcode
|
||||
* :(fas fa-i-cursor fa-fw): **Animated typing** supported by [TypeIt](https://typeitjs.com/)
|
||||
* :(fas fa-arrow-down fa-fw): **Dynamic scroll** supported by [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll)
|
||||
* :(fas fa-cookie-bite fa-fw): **Cookie consent banner** supported by [cookieconsent](https://github.com/osano/cookieconsent)
|
||||
* ...
|
||||
|
||||
### License
|
||||
|
||||
LoveIt is licensed under the **MIT** license.
|
||||
|
||||
Check the [LICENSE file](https://github.com/dillonzq/LoveIt/blob/master/LICENSE) for details.
|
||||
|
||||
Thanks to the authors of following resources included in the theme:
|
||||
|
||||
* [normalize.css](https://github.com/necolas/normalize.css)
|
||||
* [Font Awesome](https://fontawesome.com/)
|
||||
* [Simple Icons](https://github.com/simple-icons/simple-icons)
|
||||
* [Animate.css](https://daneden.github.io/animate.css/)
|
||||
* [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll)
|
||||
* [autocomplete.js](https://github.com/algolia/autocomplete.js)
|
||||
* [Lunr.js](https://lunrjs.com/)
|
||||
* [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
|
||||
* [lazysizes](https://github.com/aFarkas/lazysizes)
|
||||
* [object-fit-images](https://github.com/fregante/object-fit-images)
|
||||
* [Twemoji](https://github.com/twitter/twemoji)
|
||||
* [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
|
||||
* [clipboard.js](https://github.com/zenorocha/clipboard.js)
|
||||
* [Sharer.js](https://github.com/ellisonleao/sharer.js)
|
||||
* [TypeIt](https://typeitjs.com/)
|
||||
* [$ \KaTeX $](https://katex.org/)
|
||||
* [mermaid](https://github.com/knsv/mermaid)
|
||||
* [ECharts](https://echarts.apache.org/)
|
||||
* [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
|
||||
* [APlayer](https://github.com/MoePlayer/APlayer)
|
||||
* [MetingJS](https://github.com/metowolf/MetingJS)
|
||||
* [Gitalk](https://github.com/gitalk/gitalk)
|
||||
* [Valine](https://valine.js.org/)
|
||||
* [cookieconsent](https://github.com/osano/cookieconsent)
|
||||
117
themes/LoveIt/exampleSite/content/about/index.zh-cn.md
Normal file
117
themes/LoveIt/exampleSite/content/about/index.zh-cn.md
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
---
|
||||
title: "关于 LoveIt"
|
||||
date: 2019-08-02T11:04:49+08:00
|
||||
draft: false
|
||||
|
||||
lightgallery: true
|
||||
|
||||
math:
|
||||
enable: true
|
||||
---
|
||||
|
||||
{{< style "img { height: 1.25rem; }" >}}
|
||||
[](https://github.com/dillonzq/LoveIt/releases)
|
||||
[](https://gohugo.io/)
|
||||
[](https://github.com/dillonzq/LoveIt/blob/master/LICENSE)
|
||||
[](https://github.com/dillonzq/LoveIt)
|
||||
[](https://github.com/dillonzq/LoveIt/fork)
|
||||
{{< /style >}}
|
||||
|
||||
> [:(far fa-kiss-wink-heart fa-fw): LoveIt](https://github.com/dillonzq/LoveIt) 是一个由 [Dillon](https://dillonzq.com) 开发的**简洁**、**优雅**且**高效**的 [Hugo](https://gohugo.io/) 博客主题。
|
||||
>
|
||||
> 它的原型基于 [LeaveIt 主题](https://github.com/liuzc/LeaveIt) 和 [KeepIt 主题](https://github.com/Fastbyte01/KeepIt)。
|
||||
|
||||
|
||||
|
||||
### 特性
|
||||
|
||||
#### 性能和 SEO
|
||||
|
||||
* :(fas fa-rocket fa-fw): **性能**优化：在 [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights) 中， [99]/[100] 的移动设备得分和 [100]/[100] 的桌面设备得分
|
||||
* :(fab fa-searchengin fa-fw): 使用基于 JSON-LD 格式 的 **SEO SCHEMA** 文件进行 SEO 优化
|
||||
* :(fab fa-google fa-fw): 支持 **[Google Analytics](https://analytics.google.com/analytics)**
|
||||
* :(far fa-chart-bar fa-fw): 支持 **[Fathom Analytics](https://usefathom.com/)**
|
||||
* :(fas fa-search fa-fw): 支持搜索引擎的**网站验证** (Google, Bind, Yandex and Baidu)
|
||||
* :(fas fa-tachometer-alt fa-fw): 支持所有第三方库的 **CDN**
|
||||
* :(fas fa-cloud-download-alt fa-fw): 基于 [lazysizes](https://github.com/aFarkas/lazysizes) 自动转换图片为**懒加载**
|
||||
|
||||
#### 外观和布局
|
||||
|
||||
* [:(fas fa-desktop):]/[:(fas fa-mobile):] **响应式**布局
|
||||
* [:(fas fa-sun):]/[:(fas fa-moon):] **[浅色]/[深色]** 主题模式
|
||||
* :(fas fa-layer-group fa-fw): 全局一致的**设计语言**
|
||||
* :(fas fa-ellipsis-h fa-fw): 支持**分页**
|
||||
* :(far fa-list-alt fa-fw): 易用和自动展开的**文章目录**
|
||||
* :(fas fa-language fa-fw): 支持**多语言**和国际化
|
||||
* :(fab fa-css3-alt fa-fw): 美观的 **CSS 动画**
|
||||
|
||||
#### 社交和评论系统
|
||||
|
||||
* :(far fa-user fa-fw): 支持 **[Gravatar](https://gravatar.com)** 头像
|
||||
* :(fas fa-user-circle fa-fw): 支持本地**头像**
|
||||
* :(far fa-id-card fa-fw): 支持多达 **64** 种社交链接
|
||||
* :(fas fa-share-square fa-fw): 支持多达 **28** 种网站分享
|
||||
* :(far fa-comment fa-fw): 支持 **[Disqus](https://disqus.com)** 评论系统
|
||||
* :(far fa-comment-dots fa-fw): 支持 **[Gitalk](https://github.com/gitalk/gitalk)** 评论系统
|
||||
* :(far fa-comment-alt fa-fw): 支持 **[Valine](https://valine.js.org/)** 评论系统
|
||||
* :(far fa-comments fa-fw): 支持 **[Facebook](https://developers.facebook.com/docs/plugins/comments/) 评论**系统
|
||||
* :(fas fa-comment fa-fw): 支持 **[Telegram comments](https://comments.app/) 评论**系统
|
||||
* :(fas fa-comment-dots fa-fw): 支持 **[Commento](https://commento.io/)** 评论系统
|
||||
* :(far fa-comment-alt fa-fw): 支持 **[Utterances](https://utteranc.es/)** 评论系统
|
||||
|
||||
#### 扩展功能
|
||||
|
||||
* :(fas fa-search fa-fw): 支持基于 [Lunr.js](https://lunrjs.com/) 或 [algolia](https://www.algolia.com/) 的**搜索**
|
||||
* :(far fa-grin-tongue-wink fa-fw): 支持 **Twemoji**
|
||||
* :(fas fa-code fa-fw): 支持**代码高亮**
|
||||
* :(far fa-copy fa-fw): 一键**复制代码**到剪贴板
|
||||
* :(far fa-images fa-fw): 支持基于 [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js) 的**图片画廊**
|
||||
* :(fab fa-font-awesome fa-fw): 支持 **[Font Awesome](https://fontawesome.com/) 图标**的扩展 Markdown 语法
|
||||
* :(far fa-sticky-note fa-fw): 支持**上标注释**的扩展 Markdown 语法
|
||||
* :(fas fa-percentage fa-fw): 支持**分数**的扩展 Markdown 语法
|
||||
* :(fas fa-square-root-alt fa-fw): 支持基于 [$ \KaTeX $](https://katex.org/) 的**数学公式**
|
||||
* :(fas fa-project-diagram fa-fw): 支持基于 [mermaid](https://github.com/knsv/mermaid) 的**图表** shortcode
|
||||
* :(fas fa-chart-pie fa-fw): 支持基于 [ECharts](https://echarts.apache.org/) 的**交互式数据可视化** shortcode
|
||||
* :(fas fa-map-marked-alt fa-fw): 支持基于 [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) 的 **Mapbox** shortcode
|
||||
* :(fas fa-music fa-fw): 支持基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 的**音乐播放器** shortcode
|
||||
* :(fas fa-video fa-fw): 支持 **Bilibili 视频** shortcode
|
||||
* :(far fa-bell fa-fw): 支持多种**注释**的 shortcode
|
||||
* :(fas fa-align-left fa-fw): 支持**自定义样式**的 shortcode
|
||||
* :(fab fa-js-square fa-fw): 支持**自定义脚本**的 shortcode
|
||||
* :(fas fa-i-cursor fa-fw): 支持基于 [TypeIt](https://typeitjs.com/) 的**打字动画** shortcode
|
||||
* :(fas fa-arrow-down fa-fw): 支持基于 [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll) 的**滚动动画**
|
||||
* :(fas fa-cookie-bite fa-fw): 支持基于 [cookieconsent](https://github.com/osano/cookieconsent) 的 **Cookie 许可横幅**
|
||||
* ...
|
||||
|
||||
### 许可协议
|
||||
|
||||
LoveIt 根据 **MIT** 许可协议授权。
|
||||
|
||||
更多信息请查看 [LICENSE 文件](https://github.com/dillonzq/LoveIt/blob/master/LICENSE)。
|
||||
|
||||
LoveIt 主题中用到了以下项目，感谢它们的作者：
|
||||
|
||||
* [normalize.css](https://github.com/necolas/normalize.css)
|
||||
* [Font Awesome](https://fontawesome.com/)
|
||||
* [Simple Icons](https://github.com/simple-icons/simple-icons)
|
||||
* [Animate.css](https://daneden.github.io/animate.css/)
|
||||
* [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll)
|
||||
* [autocomplete.js](https://github.com/algolia/autocomplete.js)
|
||||
* [Lunr.js](https://lunrjs.com/)
|
||||
* [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
|
||||
* [lazysizes](https://github.com/aFarkas/lazysizes)
|
||||
* [object-fit-images](https://github.com/fregante/object-fit-images)
|
||||
* [Twemoji](https://github.com/twitter/twemoji)
|
||||
* [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
|
||||
* [clipboard.js](https://github.com/zenorocha/clipboard.js)
|
||||
* [Sharer.js](https://github.com/ellisonleao/sharer.js)
|
||||
* [TypeIt](https://typeitjs.com/)
|
||||
* [$ \KaTeX $](https://katex.org/)
|
||||
* [mermaid](https://github.com/knsv/mermaid)
|
||||
* [ECharts](https://echarts.apache.org/)
|
||||
* [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
|
||||
* [APlayer](https://github.com/MoePlayer/APlayer)
|
||||
* [MetingJS](https://github.com/metowolf/MetingJS)
|
||||
* [Gitalk](https://github.com/gitalk/gitalk)
|
||||
* [Valine](https://valine.js.org/)
|
||||
* [cookieconsent](https://github.com/osano/cookieconsent)
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
---
|
||||
title: "Documentation"
|
||||
---
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
---
|
||||
title: "Documentation"
|
||||
---
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
---
|
||||
title: "文档"
|
||||
---
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 168 KiB |
|
|
@ -0,0 +1,763 @@
|
|||
---
|
||||
weight: 4
|
||||
title: "Basic Markdown Syntax"
|
||||
date: 2019-12-01T21:57:40+08:00
|
||||
lastmod: 2020-01-01T16:45:40+08:00
|
||||
draft: false
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "This article shows the basic Markdown syntax and format."
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.png"
|
||||
|
||||
tags: ["Markdown", "HTML"]
|
||||
categories: ["Markdown"]
|
||||
|
||||
lightgallery: true
|
||||
---
|
||||
|
||||
This article offers a sample of basic Markdown syntax that can be used in Hugo content files.
|
||||
|
||||
<!--more-->
|
||||
|
||||
{{< admonition >}}
|
||||
This article is a shameful copy of the great [Grav original page](http://learn.getgrav.org/content/markdown).
|
||||
|
||||
If you want to know about the extented Markdown syntax of **LoveIt** theme, please read [extended Markdown syntax page](../theme-documentation-content#extended-markdown-syntax).
|
||||
{{< /admonition >}}
|
||||
|
||||
Let's face it: Writing content for the Web is tiresome. WYSIWYG editors help alleviate this task, but they generally result in horrible code, or worse yet, ugly web pages.
|
||||
|
||||
**Markdown** is a better way to write **HTML**, without all the complexities and ugliness that usually accompanies it.
|
||||
|
||||
Some of the key benefits are:
|
||||
|
||||
1. Markdown is simple to learn, with minimal extra characters, so it's also quicker to write content.
|
||||
2. Less chance of errors when writing in Markdown.
|
||||
3. Produces valid XHTML output.
|
||||
4. Keeps the content and the visual display separate, so you cannot mess up the look of your site.
|
||||
5. Write in any text editor or Markdown application you like.
|
||||
6. Markdown is a joy to use!
|
||||
|
||||
John Gruber, the author of Markdown, puts it like this:
|
||||
|
||||
> The overriding design goal for Markdown’s formatting syntax is to make it as readable as possible.
|
||||
> The idea is that a Markdown-formatted document should be publishable as-is, as plain text,
|
||||
> without looking like it’s been marked up with tags or formatting instructions.
|
||||
> While Markdown’s syntax has been influenced by several existing text-to-HTML filters,
|
||||
> the single biggest source of inspiration for Markdown’s syntax is the format of plain text email.
|
||||
>
|
||||
> {{< style "text-align: right;" >}}-- _John Gruber_{{< /style >}}
|
||||
|
||||
Without further delay, let us go over the main elements of Markdown and what the resulting HTML looks like!
|
||||
|
||||
{{< admonition tip >}}
|
||||
:(far fa-bookmark fa-fw): Bookmark this page for easy future reference!
|
||||
{{< /admonition >}}
|
||||
|
||||
## 1 Headings
|
||||
|
||||
Headings from `h2` through `h6` are constructed with a `#` for each level:
|
||||
|
||||
```markdown
|
||||
## h2 Heading
|
||||
### h3 Heading
|
||||
#### h4 Heading
|
||||
##### h5 Heading
|
||||
###### h6 Heading
|
||||
```
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<h2>h2 Heading</h2>
|
||||
<h3>h3 Heading</h3>
|
||||
<h4>h4 Heading</h4>
|
||||
<h5>h5 Heading</h5>
|
||||
<h6>h6 Heading</h6>
|
||||
```
|
||||
|
||||
{{< admonition note "Heading IDs" >}}
|
||||
To add a custom heading ID, enclose the custom ID in curly braces on the same line as the heading:
|
||||
|
||||
```markdown
|
||||
### A Great Heading {#custom-id}
|
||||
```
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<h3 id="custom-id">A Great Heading</h3>
|
||||
```
|
||||
{{< /admonition >}}
|
||||
|
||||
## 2 Comments
|
||||
|
||||
Comments should be HTML compatible.
|
||||
|
||||
```html
|
||||
<!--
|
||||
This is a comment
|
||||
-->
|
||||
```
|
||||
|
||||
Comment below should **NOT** be seen:
|
||||
|
||||
<!--
|
||||
This is a comment
|
||||
-->
|
||||
|
||||
## 3 Horizontal Rules
|
||||
|
||||
The HTML `<hr>` element is for creating a "thematic break" between paragraph-level elements.
|
||||
In Markdown, you can create a `<hr>` with any of the following:
|
||||
|
||||
* `___`: three consecutive underscores
|
||||
* `---`: three consecutive dashes
|
||||
* `***`: three consecutive asterisks
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
___
|
||||
---
|
||||
***
|
||||
|
||||
## 4 Body Copy
|
||||
|
||||
Body copy written as normal, plain text will be wrapped with `<p></p>` tags in the rendered HTML.
|
||||
|
||||
So this body copy:
|
||||
|
||||
```markdown
|
||||
Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri,
|
||||
animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex,
|
||||
soluta officiis concludaturque ei qui, vide sensibus vim ad.
|
||||
```
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<p>Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.</p>
|
||||
```
|
||||
|
||||
A **line break** can be done with one blank line.
|
||||
|
||||
## 5 Inline HTML
|
||||
|
||||
If you need a certain HTML tag (with a class) you can simply use HTML:
|
||||
|
||||
```html
|
||||
Paragraph in Markdown.
|
||||
|
||||
<div class="class">
|
||||
This is <b>HTML</b>
|
||||
</div>
|
||||
|
||||
Paragraph in Markdown.
|
||||
```
|
||||
|
||||
## 6 Emphasis
|
||||
|
||||
### Bold
|
||||
|
||||
For emphasizing a snippet of text with a heavier font-weight.
|
||||
|
||||
The following snippet of text is **rendered as bold text**.
|
||||
|
||||
```markdown
|
||||
**rendered as bold text**
|
||||
__rendered as bold text__
|
||||
```
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<strong>rendered as bold text</strong>
|
||||
```
|
||||
|
||||
### Italics
|
||||
|
||||
For emphasizing a snippet of text with italics.
|
||||
|
||||
The following snippet of text is _rendered as italicized text_.
|
||||
|
||||
```markdown
|
||||
*rendered as italicized text*
|
||||
_rendered as italicized text_
|
||||
```
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<em>rendered as italicized text</em>
|
||||
```
|
||||
|
||||
### Strikethrough
|
||||
|
||||
In [[GFM]^(GitHub flavored Markdown)](https://github.github.com/gfm/) you can do strikethroughs.
|
||||
|
||||
```markdown
|
||||
~~Strike through this text.~~
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
~~Strike through this text.~~
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<del>Strike through this text.</del>
|
||||
```
|
||||
|
||||
### Combination
|
||||
|
||||
Bold, italics, and strikethrough can be used in combination.
|
||||
|
||||
```markdown
|
||||
***bold and italics***
|
||||
~~**strikethrough and bold**~~
|
||||
~~*strikethrough and italics*~~
|
||||
~~***bold, italics and strikethrough***~~
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
***bold and italics***
|
||||
|
||||
~~**strikethrough and bold**~~
|
||||
|
||||
~~*strikethrough and italics*~~
|
||||
|
||||
~~***bold, italics and strikethrough***~~
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<em><strong>bold and italics</strong></em>
|
||||
<del><strong>strikethrough and bold</strong></del>
|
||||
<del><em>strikethrough and italics</em></del>
|
||||
<del><em><strong>bold, italics and strikethrough</strong></em></del>
|
||||
```
|
||||
|
||||
## 7 Blockquotes
|
||||
|
||||
For quoting blocks of content from another source within your document.
|
||||
|
||||
Add `>` before any text you want to quote:
|
||||
|
||||
```markdown
|
||||
> **Fusion Drive** combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
> **Fusion Drive** combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<blockquote>
|
||||
<p>
|
||||
<strong>Fusion Drive</strong> combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.
|
||||
</p>
|
||||
</blockquote>
|
||||
```
|
||||
|
||||
Blockquotes can also be nested:
|
||||
|
||||
```markdown
|
||||
> Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue.
|
||||
Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.
|
||||
>> Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor
|
||||
odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
> Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue.
|
||||
Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.
|
||||
>> Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor
|
||||
odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.
|
||||
|
||||
## 8 Lists
|
||||
|
||||
### Unordered
|
||||
|
||||
A list of items in which the order of the items does not explicitly matter.
|
||||
|
||||
You may use any of the following symbols to denote bullets for each list item:
|
||||
|
||||
```markdown
|
||||
* valid bullet
|
||||
- valid bullet
|
||||
+ valid bullet
|
||||
```
|
||||
|
||||
For example:
|
||||
|
||||
```markdown
|
||||
* Lorem ipsum dolor sit amet
|
||||
* Consectetur adipiscing elit
|
||||
* Integer molestie lorem at massa
|
||||
* Facilisis in pretium nisl aliquet
|
||||
* Nulla volutpat aliquam velit
|
||||
* Phasellus iaculis neque
|
||||
* Purus sodales ultricies
|
||||
* Vestibulum laoreet porttitor sem
|
||||
* Ac tristique libero volutpat at
|
||||
* Faucibus porta lacus fringilla vel
|
||||
* Aenean sit amet erat nunc
|
||||
* Eget porttitor lorem
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
* Lorem ipsum dolor sit amet
|
||||
* Consectetur adipiscing elit
|
||||
* Integer molestie lorem at massa
|
||||
* Facilisis in pretium nisl aliquet
|
||||
* Nulla volutpat aliquam velit
|
||||
* Phasellus iaculis neque
|
||||
* Purus sodales ultricies
|
||||
* Vestibulum laoreet porttitor sem
|
||||
* Ac tristique libero volutpat at
|
||||
* Faucibus porta lacus fringilla vel
|
||||
* Aenean sit amet erat nunc
|
||||
* Eget porttitor lorem
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li>Lorem ipsum dolor sit amet</li>
|
||||
<li>Consectetur adipiscing elit</li>
|
||||
<li>Integer molestie lorem at massa</li>
|
||||
<li>Facilisis in pretium nisl aliquet</li>
|
||||
<li>Nulla volutpat aliquam velit
|
||||
<ul>
|
||||
<li>Phasellus iaculis neque</li>
|
||||
<li>Purus sodales ultricies</li>
|
||||
<li>Vestibulum laoreet porttitor sem</li>
|
||||
<li>Ac tristique libero volutpat at</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Faucibus porta lacus fringilla vel</li>
|
||||
<li>Aenean sit amet erat nunc</li>
|
||||
<li>Eget porttitor lorem</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
### Ordered
|
||||
|
||||
A list of items in which the order of items does explicitly matter.
|
||||
|
||||
```markdown
|
||||
1. Lorem ipsum dolor sit amet
|
||||
2. Consectetur adipiscing elit
|
||||
3. Integer molestie lorem at massa
|
||||
4. Facilisis in pretium nisl aliquet
|
||||
5. Nulla volutpat aliquam velit
|
||||
6. Faucibus porta lacus fringilla vel
|
||||
7. Aenean sit amet erat nunc
|
||||
8. Eget porttitor lorem
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
1. Lorem ipsum dolor sit amet
|
||||
2. Consectetur adipiscing elit
|
||||
3. Integer molestie lorem at massa
|
||||
4. Facilisis in pretium nisl aliquet
|
||||
5. Nulla volutpat aliquam velit
|
||||
6. Faucibus porta lacus fringilla vel
|
||||
7. Aenean sit amet erat nunc
|
||||
8. Eget porttitor lorem
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<ol>
|
||||
<li>Lorem ipsum dolor sit amet</li>
|
||||
<li>Consectetur adipiscing elit</li>
|
||||
<li>Integer molestie lorem at massa</li>
|
||||
<li>Facilisis in pretium nisl aliquet</li>
|
||||
<li>Nulla volutpat aliquam velit</li>
|
||||
<li>Faucibus porta lacus fringilla vel</li>
|
||||
<li>Aenean sit amet erat nunc</li>
|
||||
<li>Eget porttitor lorem</li>
|
||||
</ol>
|
||||
```
|
||||
|
||||
{{< admonition tip >}}
|
||||
If you just use `1.` for each number, Markdown will automatically number each item. For example:
|
||||
|
||||
```markdown
|
||||
1. Lorem ipsum dolor sit amet
|
||||
1. Consectetur adipiscing elit
|
||||
1. Integer molestie lorem at massa
|
||||
1. Facilisis in pretium nisl aliquet
|
||||
1. Nulla volutpat aliquam velit
|
||||
1. Faucibus porta lacus fringilla vel
|
||||
1. Aenean sit amet erat nunc
|
||||
1. Eget porttitor lorem
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
1. Lorem ipsum dolor sit amet
|
||||
1. Consectetur adipiscing elit
|
||||
1. Integer molestie lorem at massa
|
||||
1. Facilisis in pretium nisl aliquet
|
||||
1. Nulla volutpat aliquam velit
|
||||
1. Faucibus porta lacus fringilla vel
|
||||
1. Aenean sit amet erat nunc
|
||||
1. Eget porttitor lorem
|
||||
{{< /admonition >}}
|
||||
|
||||
### Task Lists
|
||||
|
||||
Task lists allow you to create a list of items with checkboxes. To create a task list, add dashes (`-`) and brackets with a space (`[ ]`) before task list items. To select a checkbox, add an x in between the brackets (`[x]`).
|
||||
|
||||
```markdown
|
||||
- [x] Write the press release
|
||||
- [ ] Update the website
|
||||
- [ ] Contact the media
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
- [x] Write the press release
|
||||
- [ ] Update the website
|
||||
- [ ] Contact the media
|
||||
|
||||
## 9 Code
|
||||
|
||||
### Inline Code
|
||||
|
||||
Wrap inline snippets of code with <code>`</code>.
|
||||
|
||||
```markdown
|
||||
In this example, `<section></section>` should be wrapped as **code**.
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
In this example, `<section></section>` should be wrapped as **code**.
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<p>
|
||||
In this example, <code><section></section></code> should be wrapped with <strong>code</strong>.
|
||||
</p>
|
||||
```
|
||||
|
||||
### Indented Code
|
||||
|
||||
Or indent several lines of code by at least four spaces, as in:
|
||||
|
||||
```markdown
|
||||
// Some comments
|
||||
line 1 of code
|
||||
line 2 of code
|
||||
line 3 of code
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
// Some comments
|
||||
line 1 of code
|
||||
line 2 of code
|
||||
line 3 of code
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<pre>
|
||||
<code>
|
||||
// Some comments
|
||||
line 1 of code
|
||||
line 2 of code
|
||||
line 3 of code
|
||||
</code>
|
||||
</pre>
|
||||
```
|
||||
|
||||
### Block Fenced Code
|
||||
|
||||
Use "fences" <code>```</code> to block in multiple lines of code with a language attribute.
|
||||
|
||||
{{< highlight markdown >}}
|
||||
```markdown
|
||||
Sample text here...
|
||||
```
|
||||
{{< / highlight >}}
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<pre language-html>
|
||||
<code>Sample text here...</code>
|
||||
</pre>
|
||||
```
|
||||
|
||||
### Syntax Highlighting
|
||||
|
||||
[GFM]^(GitHub Flavored Markdown) also supports syntax highlighting.
|
||||
|
||||
To activate it, simply add the file extension of the language you want to use directly after the first code "fence",
|
||||
<code>```js</code>, and syntax highlighting will automatically be applied in the rendered HTML.
|
||||
|
||||
For example, to apply syntax highlighting to JavaScript code:
|
||||
|
||||
{{< highlight markdown >}}
|
||||
```js
|
||||
grunt.initConfig({
|
||||
assemble: {
|
||||
options: {
|
||||
assets: 'docs/assets',
|
||||
data: 'src/data/*.{json,yml}',
|
||||
helpers: 'src/custom-helpers.js',
|
||||
partials: ['src/partials/**/*.{hbs,md}']
|
||||
},
|
||||
pages: {
|
||||
options: {
|
||||
layout: 'default.hbs'
|
||||
},
|
||||
files: {
|
||||
'./': ['src/templates/pages/index.hbs']
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
{{< / highlight >}}
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
```js
|
||||
grunt.initConfig({
|
||||
assemble: {
|
||||
options: {
|
||||
assets: 'docs/assets',
|
||||
data: 'src/data/*.{json,yml}',
|
||||
helpers: 'src/custom-helpers.js',
|
||||
partials: ['src/partials/**/*.{hbs,md}']
|
||||
},
|
||||
pages: {
|
||||
options: {
|
||||
layout: 'default.hbs'
|
||||
},
|
||||
files: {
|
||||
'./': ['src/templates/pages/index.hbs']
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
{{< admonition >}}
|
||||
[Syntax highlighting page](https://gohugo.io/content-management/syntax-highlighting/) in **Hugo** Docs introduces more about syntax highlighting, including highlight shortcode.
|
||||
{{< /admonition >}}
|
||||
|
||||
## 10 Tables
|
||||
|
||||
Tables are created by adding pipes as dividers between each cell, and by adding a line of dashes (also separated by bars) beneath the header. Note that the pipes do not need to be vertically aligned.
|
||||
|
||||
```markdown
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| data | path to data files to supply the data that will be passed into templates. |
|
||||
| engine | engine to be used for processing templates. Handlebars is the default. |
|
||||
| ext | extension to be used for dest files. |
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| data | path to data files to supply the data that will be passed into templates. |
|
||||
| engine | engine to be used for processing templates. Handlebars is the default. |
|
||||
| ext | extension to be used for dest files. |
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Option</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>data</td>
|
||||
<td>path to data files to supply the data that will be passed into templates.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>engine</td>
|
||||
<td>engine to be used for processing templates. Handlebars is the default.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ext</td>
|
||||
<td>extension to be used for dest files.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
```
|
||||
|
||||
{{< admonition note "Right or center aligned text" >}}
|
||||
Adding a colon on the right side of the dashes below any heading will right align text for that column.
|
||||
|
||||
Adding colons on both sides of the dashes below any heading will center align text for that column.
|
||||
|
||||
```markdown
|
||||
| Option | Description |
|
||||
|:------:| -----------:|
|
||||
| data | path to data files to supply the data that will be passed into templates. |
|
||||
| engine | engine to be used for processing templates. Handlebars is the default. |
|
||||
| ext | extension to be used for dest files. |
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
| Option | Description |
|
||||
|:------:| -----------:|
|
||||
| data | path to data files to supply the data that will be passed into templates. |
|
||||
| engine | engine to be used for processing templates. Handlebars is the default. |
|
||||
| ext | extension to be used for dest files. |
|
||||
{{< /admonition >}}
|
||||
|
||||
## 11 Links {#links}
|
||||
|
||||
### Basic Link
|
||||
|
||||
```markdown
|
||||
<https://assemble.io>
|
||||
<contact@revolunet.com>
|
||||
[Assemble](https://assemble.io)
|
||||
```
|
||||
|
||||
The rendered output looks like this (hover over the link, there is no tooltip):
|
||||
|
||||
<https://assemble.io>
|
||||
|
||||
<contact@revolunet.com>
|
||||
|
||||
[Assemble](https://assemble.io)
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<a href="https://assemble.io">https://assemble.io</a>
|
||||
<a href="mailto:contact@revolunet.com">contact@revolunet.com</a>
|
||||
<a href="https://assemble.io">Assemble</a>
|
||||
```
|
||||
|
||||
### Add a Title
|
||||
|
||||
```markdown
|
||||
[Upstage](https://github.com/upstage/ "Visit Upstage!")
|
||||
```
|
||||
|
||||
The rendered output looks like this (hover over the link, there should be a tooltip):
|
||||
|
||||
[Upstage](https://github.com/upstage/ "Visit Upstage!")
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<a href="https://github.com/upstage/" title="Visit Upstage!">Upstage</a>
|
||||
```
|
||||
|
||||
### Named Anchors
|
||||
|
||||
Named anchors enable you to jump to the specified anchor point on the same page. For example, each of these chapters:
|
||||
|
||||
```markdown
|
||||
## Table of Contents
|
||||
* [Chapter 1](#chapter-1)
|
||||
* [Chapter 2](#chapter-2)
|
||||
* [Chapter 3](#chapter-3)
|
||||
```
|
||||
|
||||
will jump to these sections:
|
||||
|
||||
```markdown
|
||||
## Chapter 1 <a id="chapter-1"></a>
|
||||
Content for chapter one.
|
||||
|
||||
## Chapter 2 <a id="chapter-2"></a>
|
||||
Content for chapter one.
|
||||
|
||||
## Chapter 3 <a id="chapter-3"></a>
|
||||
Content for chapter one.
|
||||
```
|
||||
|
||||
{{< admonition >}}
|
||||
The specific placement of the anchor tag seems to be arbitrary. They are placed inline here since it seems to be unobtrusive, and it works.
|
||||
{{< /admonition >}}
|
||||
|
||||
## 12 Footnotes
|
||||
|
||||
Footnotes allow you to add notes and references without cluttering the body of the document. When you create a footnote, a superscript number with a link appears where you added the footnote reference. Readers can click the link to jump to the content of the footnote at the bottom of the page.
|
||||
|
||||
To create a footnote reference, add a caret and an identifier inside brackets (`[^1]`). Identifiers can be numbers or words, but they can’t contain spaces or tabs. Identifiers only correlate the footnote reference with the footnote itself — in the output, footnotes are numbered sequentially.
|
||||
|
||||
Add the footnote using another caret and number inside brackets with a colon and text (`[^1]: My footnote.`). You don’t have to put footnotes at the end of the document. You can put them anywhere except inside other elements like lists, block quotes, and tables.
|
||||
|
||||
```markdown
|
||||
This is a digital footnote[^1].
|
||||
This is a footnote with "label"[^label]
|
||||
|
||||
[^1]: This is a digital footnote
|
||||
[^label]: This is a footnote with "label"
|
||||
```
|
||||
|
||||
This is a digital footnote[^1].
|
||||
|
||||
This is a footnote with "label"[^label]
|
||||
|
||||
[^1]: This is a digital footnote
|
||||
[^label]: This is a footnote with "label"
|
||||
|
||||
## 13 Images
|
||||
|
||||
Images have a similar syntax to links but include a preceding exclamation point.
|
||||
|
||||
```markdown
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
or:
|
||||
|
||||
```markdown
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
Like links, images also have a footnote style syntax:
|
||||
|
||||
```markdown
|
||||
![Alt text][id]
|
||||
```
|
||||
|
||||
![Alt text][id]
|
||||
|
||||
With a reference later in the document defining the URL location:
|
||||
|
||||
```markdown
|
||||
[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
|
||||
```
|
||||
|
||||
[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
|
||||
|
||||
{{< admonition tip >}}
|
||||
**LoveIt** theme has [special shortcode for image](../theme-documentation-extended-shortcodes#image), which provides more features.
|
||||
{{< /admonition >}}
|
||||
|
|
@ -0,0 +1,768 @@
|
|||
---
|
||||
weight: 4
|
||||
title: "Syntaxe de Markdown de Base"
|
||||
date: 2019-12-01T21:57:40+08:00
|
||||
lastmod: 2020-01-01T16:45:40+08:00
|
||||
draft: false
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "Cet article présente la syntaxe et le format de base de Markdown."
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.png"
|
||||
|
||||
tags: ["Markdown", "HTML"]
|
||||
categories: ["Markdown"]
|
||||
|
||||
lightgallery: true
|
||||
---
|
||||
|
||||
Cet article propose un exemple de syntaxe Markdown de base qui peut être utilisée dans les fichiers de contenu Hugo.
|
||||
|
||||
<!--more-->
|
||||
|
||||
{{< admonition warning >}}
|
||||
Sorry, this article has not been completely translated into **French**.
|
||||
Welcome to take the time to propose a translation by [:(fas fa-code-branch fa-fw): making a PR](https://github.com/dillonzq/LoveIt/pulls) to the theme!
|
||||
{{< /admonition >}}
|
||||
|
||||
{{< admonition >}}
|
||||
This article is a shameful copy of the great [Grav original page](http://learn.getgrav.org/content/markdown).
|
||||
|
||||
If you want to know about the extented Markdown syntax of **LoveIt** theme, please read [extended Markdown syntax page](../theme-documentation-content#extended-markdown-syntax).
|
||||
{{< /admonition >}}
|
||||
|
||||
Let's face it: Writing content for the Web is tiresome. WYSIWYG editors help alleviate this task, but they generally result in horrible code, or worse yet, ugly web pages.
|
||||
|
||||
**Markdown** is a better way to write **HTML**, without all the complexities and ugliness that usually accompanies it.
|
||||
|
||||
Some of the key benefits are:
|
||||
|
||||
1. Markdown is simple to learn, with minimal extra characters, so it's also quicker to write content.
|
||||
2. Less chance of errors when writing in Markdown.
|
||||
3. Produces valid XHTML output.
|
||||
4. Keeps the content and the visual display separate, so you cannot mess up the look of your site.
|
||||
5. Write in any text editor or Markdown application you like.
|
||||
6. Markdown is a joy to use!
|
||||
|
||||
John Gruber, the author of Markdown, puts it like this:
|
||||
|
||||
> The overriding design goal for Markdown’s formatting syntax is to make it as readable as possible.
|
||||
> The idea is that a Markdown-formatted document should be publishable as-is, as plain text,
|
||||
> without looking like it’s been marked up with tags or formatting instructions.
|
||||
> While Markdown’s syntax has been influenced by several existing text-to-HTML filters,
|
||||
> the single biggest source of inspiration for Markdown’s syntax is the format of plain text email.
|
||||
>
|
||||
> {{< style "text-align: right;" >}}-- _John Gruber_{{< /style >}}
|
||||
|
||||
Without further delay, let us go over the main elements of Markdown and what the resulting HTML looks like!
|
||||
|
||||
{{< admonition tip >}}
|
||||
:(far fa-bookmark fa-fw): Bookmark this page for easy future reference!
|
||||
{{< /admonition >}}
|
||||
|
||||
## 1 Headings
|
||||
|
||||
Headings from `h2` through `h6` are constructed with a `#` for each level:
|
||||
|
||||
```markdown
|
||||
## h2 Heading
|
||||
### h3 Heading
|
||||
#### h4 Heading
|
||||
##### h5 Heading
|
||||
###### h6 Heading
|
||||
```
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<h2>h2 Heading</h2>
|
||||
<h3>h3 Heading</h3>
|
||||
<h4>h4 Heading</h4>
|
||||
<h5>h5 Heading</h5>
|
||||
<h6>h6 Heading</h6>
|
||||
```
|
||||
|
||||
{{< admonition note "Heading IDs" >}}
|
||||
To add a custom heading ID, enclose the custom ID in curly braces on the same line as the heading:
|
||||
|
||||
```markdown
|
||||
### A Great Heading {#custom-id}
|
||||
```
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<h3 id="custom-id">A Great Heading</h3>
|
||||
```
|
||||
{{< /admonition >}}
|
||||
|
||||
## 2 Comments
|
||||
|
||||
Comments should be HTML compatible.
|
||||
|
||||
```html
|
||||
<!--
|
||||
This is a comment
|
||||
-->
|
||||
```
|
||||
|
||||
Comment below should **NOT** be seen:
|
||||
|
||||
<!--
|
||||
This is a comment
|
||||
-->
|
||||
|
||||
## 3 Horizontal Rules
|
||||
|
||||
The HTML `<hr>` element is for creating a "thematic break" between paragraph-level elements.
|
||||
In Markdown, you can create a `<hr>` with any of the following:
|
||||
|
||||
* `___`: three consecutive underscores
|
||||
* `---`: three consecutive dashes
|
||||
* `***`: three consecutive asterisks
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
___
|
||||
---
|
||||
***
|
||||
|
||||
## 4 Body Copy
|
||||
|
||||
Body copy written as normal, plain text will be wrapped with `<p></p>` tags in the rendered HTML.
|
||||
|
||||
So this body copy:
|
||||
|
||||
```markdown
|
||||
Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri,
|
||||
animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex,
|
||||
soluta officiis concludaturque ei qui, vide sensibus vim ad.
|
||||
```
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<p>Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.</p>
|
||||
```
|
||||
|
||||
A **line break** can be done with one blank line.
|
||||
|
||||
## 5 Inline HTML
|
||||
|
||||
If you need a certain HTML tag (with a class) you can simply use HTML:
|
||||
|
||||
```html
|
||||
Paragraph in Markdown.
|
||||
|
||||
<div class="class">
|
||||
This is <b>HTML</b>
|
||||
</div>
|
||||
|
||||
Paragraph in Markdown.
|
||||
```
|
||||
|
||||
## 6 Emphasis
|
||||
|
||||
### Bold
|
||||
|
||||
For emphasizing a snippet of text with a heavier font-weight.
|
||||
|
||||
The following snippet of text is **rendered as bold text**.
|
||||
|
||||
```markdown
|
||||
**rendered as bold text**
|
||||
__rendered as bold text__
|
||||
```
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<strong>rendered as bold text</strong>
|
||||
```
|
||||
|
||||
### Italics
|
||||
|
||||
For emphasizing a snippet of text with italics.
|
||||
|
||||
The following snippet of text is _rendered as italicized text_.
|
||||
|
||||
```markdown
|
||||
*rendered as italicized text*
|
||||
_rendered as italicized text_
|
||||
```
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<em>rendered as italicized text</em>
|
||||
```
|
||||
|
||||
### Strikethrough
|
||||
|
||||
In [[GFM]^(GitHub flavored Markdown)](https://github.github.com/gfm/) you can do strikethroughs.
|
||||
|
||||
```markdown
|
||||
~~Strike through this text.~~
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
~~Strike through this text.~~
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<del>Strike through this text.</del>
|
||||
```
|
||||
|
||||
### Combination
|
||||
|
||||
Bold, italics, and strikethrough can be used in combination.
|
||||
|
||||
```markdown
|
||||
***bold and italics***
|
||||
~~**strikethrough and bold**~~
|
||||
~~*strikethrough and italics*~~
|
||||
~~***bold, italics and strikethrough***~~
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
***bold and italics***
|
||||
|
||||
~~**strikethrough and bold**~~
|
||||
|
||||
~~*strikethrough and italics*~~
|
||||
|
||||
~~***bold, italics and strikethrough***~~
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<em><strong>bold and italics</strong></em>
|
||||
<del><strong>strikethrough and bold</strong></del>
|
||||
<del><em>strikethrough and italics</em></del>
|
||||
<del><em><strong>bold, italics and strikethrough</strong></em></del>
|
||||
```
|
||||
|
||||
## 7 Blockquotes
|
||||
|
||||
For quoting blocks of content from another source within your document.
|
||||
|
||||
Add `>` before any text you want to quote:
|
||||
|
||||
```markdown
|
||||
> **Fusion Drive** combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
> **Fusion Drive** combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<blockquote>
|
||||
<p>
|
||||
<strong>Fusion Drive</strong> combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.
|
||||
</p>
|
||||
</blockquote>
|
||||
```
|
||||
|
||||
Blockquotes can also be nested:
|
||||
|
||||
```markdown
|
||||
> Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue.
|
||||
Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.
|
||||
>> Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor
|
||||
odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
> Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue.
|
||||
Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.
|
||||
>> Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor
|
||||
odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.
|
||||
|
||||
## 8 Lists
|
||||
|
||||
### Unordered
|
||||
|
||||
A list of items in which the order of the items does not explicitly matter.
|
||||
|
||||
You may use any of the following symbols to denote bullets for each list item:
|
||||
|
||||
```markdown
|
||||
* valid bullet
|
||||
- valid bullet
|
||||
+ valid bullet
|
||||
```
|
||||
|
||||
For example:
|
||||
|
||||
```markdown
|
||||
* Lorem ipsum dolor sit amet
|
||||
* Consectetur adipiscing elit
|
||||
* Integer molestie lorem at massa
|
||||
* Facilisis in pretium nisl aliquet
|
||||
* Nulla volutpat aliquam velit
|
||||
* Phasellus iaculis neque
|
||||
* Purus sodales ultricies
|
||||
* Vestibulum laoreet porttitor sem
|
||||
* Ac tristique libero volutpat at
|
||||
* Faucibus porta lacus fringilla vel
|
||||
* Aenean sit amet erat nunc
|
||||
* Eget porttitor lorem
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
* Lorem ipsum dolor sit amet
|
||||
* Consectetur adipiscing elit
|
||||
* Integer molestie lorem at massa
|
||||
* Facilisis in pretium nisl aliquet
|
||||
* Nulla volutpat aliquam velit
|
||||
* Phasellus iaculis neque
|
||||
* Purus sodales ultricies
|
||||
* Vestibulum laoreet porttitor sem
|
||||
* Ac tristique libero volutpat at
|
||||
* Faucibus porta lacus fringilla vel
|
||||
* Aenean sit amet erat nunc
|
||||
* Eget porttitor lorem
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li>Lorem ipsum dolor sit amet</li>
|
||||
<li>Consectetur adipiscing elit</li>
|
||||
<li>Integer molestie lorem at massa</li>
|
||||
<li>Facilisis in pretium nisl aliquet</li>
|
||||
<li>Nulla volutpat aliquam velit
|
||||
<ul>
|
||||
<li>Phasellus iaculis neque</li>
|
||||
<li>Purus sodales ultricies</li>
|
||||
<li>Vestibulum laoreet porttitor sem</li>
|
||||
<li>Ac tristique libero volutpat at</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Faucibus porta lacus fringilla vel</li>
|
||||
<li>Aenean sit amet erat nunc</li>
|
||||
<li>Eget porttitor lorem</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
### Ordered
|
||||
|
||||
A list of items in which the order of items does explicitly matter.
|
||||
|
||||
```markdown
|
||||
1. Lorem ipsum dolor sit amet
|
||||
2. Consectetur adipiscing elit
|
||||
3. Integer molestie lorem at massa
|
||||
4. Facilisis in pretium nisl aliquet
|
||||
5. Nulla volutpat aliquam velit
|
||||
6. Faucibus porta lacus fringilla vel
|
||||
7. Aenean sit amet erat nunc
|
||||
8. Eget porttitor lorem
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
1. Lorem ipsum dolor sit amet
|
||||
2. Consectetur adipiscing elit
|
||||
3. Integer molestie lorem at massa
|
||||
4. Facilisis in pretium nisl aliquet
|
||||
5. Nulla volutpat aliquam velit
|
||||
6. Faucibus porta lacus fringilla vel
|
||||
7. Aenean sit amet erat nunc
|
||||
8. Eget porttitor lorem
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<ol>
|
||||
<li>Lorem ipsum dolor sit amet</li>
|
||||
<li>Consectetur adipiscing elit</li>
|
||||
<li>Integer molestie lorem at massa</li>
|
||||
<li>Facilisis in pretium nisl aliquet</li>
|
||||
<li>Nulla volutpat aliquam velit</li>
|
||||
<li>Faucibus porta lacus fringilla vel</li>
|
||||
<li>Aenean sit amet erat nunc</li>
|
||||
<li>Eget porttitor lorem</li>
|
||||
</ol>
|
||||
```
|
||||
|
||||
{{< admonition tip >}}
|
||||
If you just use `1.` for each number, Markdown will automatically number each item. For example:
|
||||
|
||||
```markdown
|
||||
1. Lorem ipsum dolor sit amet
|
||||
1. Consectetur adipiscing elit
|
||||
1. Integer molestie lorem at massa
|
||||
1. Facilisis in pretium nisl aliquet
|
||||
1. Nulla volutpat aliquam velit
|
||||
1. Faucibus porta lacus fringilla vel
|
||||
1. Aenean sit amet erat nunc
|
||||
1. Eget porttitor lorem
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
1. Lorem ipsum dolor sit amet
|
||||
1. Consectetur adipiscing elit
|
||||
1. Integer molestie lorem at massa
|
||||
1. Facilisis in pretium nisl aliquet
|
||||
1. Nulla volutpat aliquam velit
|
||||
1. Faucibus porta lacus fringilla vel
|
||||
1. Aenean sit amet erat nunc
|
||||
1. Eget porttitor lorem
|
||||
{{< /admonition >}}
|
||||
|
||||
### Task Lists
|
||||
|
||||
Task lists allow you to create a list of items with checkboxes. To create a task list, add dashes (`-`) and brackets with a space (`[ ]`) before task list items. To select a checkbox, add an x in between the brackets (`[x]`).
|
||||
|
||||
```markdown
|
||||
- [x] Write the press release
|
||||
- [ ] Update the website
|
||||
- [ ] Contact the media
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
- [x] Write the press release
|
||||
- [ ] Update the website
|
||||
- [ ] Contact the media
|
||||
|
||||
## 9 Code
|
||||
|
||||
### Inline Code
|
||||
|
||||
Wrap inline snippets of code with <code>`</code>.
|
||||
|
||||
```markdown
|
||||
In this example, `<section></section>` should be wrapped as **code**.
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
In this example, `<section></section>` should be wrapped as **code**.
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<p>
|
||||
In this example, <code><section></section></code> should be wrapped with <strong>code</strong>.
|
||||
</p>
|
||||
```
|
||||
|
||||
### Indented Code
|
||||
|
||||
Or indent several lines of code by at least four spaces, as in:
|
||||
|
||||
```markdown
|
||||
// Some comments
|
||||
line 1 of code
|
||||
line 2 of code
|
||||
line 3 of code
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
// Some comments
|
||||
line 1 of code
|
||||
line 2 of code
|
||||
line 3 of code
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<pre>
|
||||
<code>
|
||||
// Some comments
|
||||
line 1 of code
|
||||
line 2 of code
|
||||
line 3 of code
|
||||
</code>
|
||||
</pre>
|
||||
```
|
||||
|
||||
### Block Fenced Code
|
||||
|
||||
Use "fences" <code>```</code> to block in multiple lines of code with a language attribute.
|
||||
|
||||
{{< highlight markdown >}}
|
||||
```markdown
|
||||
Sample text here...
|
||||
```
|
||||
{{< / highlight >}}
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<pre language-html>
|
||||
<code>Sample text here...</code>
|
||||
</pre>
|
||||
```
|
||||
|
||||
### Syntax Highlighting
|
||||
|
||||
[GFM]^(GitHub Flavored Markdown) also supports syntax highlighting.
|
||||
|
||||
To activate it, simply add the file extension of the language you want to use directly after the first code "fence",
|
||||
<code>```js</code>, and syntax highlighting will automatically be applied in the rendered HTML.
|
||||
|
||||
For example, to apply syntax highlighting to JavaScript code:
|
||||
|
||||
{{< highlight markdown >}}
|
||||
```js
|
||||
grunt.initConfig({
|
||||
assemble: {
|
||||
options: {
|
||||
assets: 'docs/assets',
|
||||
data: 'src/data/*.{json,yml}',
|
||||
helpers: 'src/custom-helpers.js',
|
||||
partials: ['src/partials/**/*.{hbs,md}']
|
||||
},
|
||||
pages: {
|
||||
options: {
|
||||
layout: 'default.hbs'
|
||||
},
|
||||
files: {
|
||||
'./': ['src/templates/pages/index.hbs']
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
{{< / highlight >}}
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
```js
|
||||
grunt.initConfig({
|
||||
assemble: {
|
||||
options: {
|
||||
assets: 'docs/assets',
|
||||
data: 'src/data/*.{json,yml}',
|
||||
helpers: 'src/custom-helpers.js',
|
||||
partials: ['src/partials/**/*.{hbs,md}']
|
||||
},
|
||||
pages: {
|
||||
options: {
|
||||
layout: 'default.hbs'
|
||||
},
|
||||
files: {
|
||||
'./': ['src/templates/pages/index.hbs']
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
{{< admonition >}}
|
||||
[Syntax highlighting page](https://gohugo.io/content-management/syntax-highlighting/) in **Hugo** Docs introduces more about syntax highlighting, including highlight shortcode.
|
||||
{{< /admonition >}}
|
||||
|
||||
## 10 Tables
|
||||
|
||||
Tables are created by adding pipes as dividers between each cell, and by adding a line of dashes (also separated by bars) beneath the header. Note that the pipes do not need to be vertically aligned.
|
||||
|
||||
```markdown
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| data | path to data files to supply the data that will be passed into templates. |
|
||||
| engine | engine to be used for processing templates. Handlebars is the default. |
|
||||
| ext | extension to be used for dest files. |
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| data | path to data files to supply the data that will be passed into templates. |
|
||||
| engine | engine to be used for processing templates. Handlebars is the default. |
|
||||
| ext | extension to be used for dest files. |
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Option</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>data</td>
|
||||
<td>path to data files to supply the data that will be passed into templates.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>engine</td>
|
||||
<td>engine to be used for processing templates. Handlebars is the default.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ext</td>
|
||||
<td>extension to be used for dest files.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
```
|
||||
|
||||
{{< admonition note "Right or center aligned text" >}}
|
||||
Adding a colon on the right side of the dashes below any heading will right align text for that column.
|
||||
|
||||
Adding colons on both sides of the dashes below any heading will center align text for that column.
|
||||
|
||||
```markdown
|
||||
| Option | Description |
|
||||
|:------:| -----------:|
|
||||
| data | path to data files to supply the data that will be passed into templates. |
|
||||
| engine | engine to be used for processing templates. Handlebars is the default. |
|
||||
| ext | extension to be used for dest files. |
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
| Option | Description |
|
||||
|:------:| -----------:|
|
||||
| data | path to data files to supply the data that will be passed into templates. |
|
||||
| engine | engine to be used for processing templates. Handlebars is the default. |
|
||||
| ext | extension to be used for dest files. |
|
||||
{{< /admonition >}}
|
||||
|
||||
## 11 Links
|
||||
|
||||
### Basic Link {#links}
|
||||
|
||||
```markdown
|
||||
<https://assemble.io>
|
||||
<contact@revolunet.com>
|
||||
[Assemble](https://assemble.io)
|
||||
```
|
||||
|
||||
The rendered output looks like this (hover over the link, there is no tooltip):
|
||||
|
||||
<https://assemble.io>
|
||||
|
||||
<contact@revolunet.com>
|
||||
|
||||
[Assemble](https://assemble.io)
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<a href="https://assemble.io">https://assemble.io</a>
|
||||
<a href="mailto:contact@revolunet.com">contact@revolunet.com</a>
|
||||
<a href="https://assemble.io">Assemble</a>
|
||||
```
|
||||
|
||||
### Add a Title
|
||||
|
||||
```markdown
|
||||
[Upstage](https://github.com/upstage/ "Visit Upstage!")
|
||||
```
|
||||
|
||||
The rendered output looks like this (hover over the link, there should be a tooltip):
|
||||
|
||||
[Upstage](https://github.com/upstage/ "Visit Upstage!")
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<a href="https://github.com/upstage/" title="Visit Upstage!">Upstage</a>
|
||||
```
|
||||
|
||||
### Named Anchors
|
||||
|
||||
Named anchors enable you to jump to the specified anchor point on the same page. For example, each of these chapters:
|
||||
|
||||
```markdown
|
||||
## Table of Contents
|
||||
* [Chapter 1](#chapter-1)
|
||||
* [Chapter 2](#chapter-2)
|
||||
* [Chapter 3](#chapter-3)
|
||||
```
|
||||
|
||||
will jump to these sections:
|
||||
|
||||
```markdown
|
||||
## Chapter 1 <a id="chapter-1"></a>
|
||||
Content for chapter one.
|
||||
|
||||
## Chapter 2 <a id="chapter-2"></a>
|
||||
Content for chapter one.
|
||||
|
||||
## Chapter 3 <a id="chapter-3"></a>
|
||||
Content for chapter one.
|
||||
```
|
||||
|
||||
{{< admonition >}}
|
||||
The specific placement of the anchor tag seems to be arbitrary. They are placed inline here since it seems to be unobtrusive, and it works.
|
||||
{{< /admonition >}}
|
||||
|
||||
## 12 Footnotes
|
||||
|
||||
Footnotes allow you to add notes and references without cluttering the body of the document. When you create a footnote, a superscript number with a link appears where you added the footnote reference. Readers can click the link to jump to the content of the footnote at the bottom of the page.
|
||||
|
||||
To create a footnote reference, add a caret and an identifier inside brackets (`[^1]`). Identifiers can be numbers or words, but they can’t contain spaces or tabs. Identifiers only correlate the footnote reference with the footnote itself — in the output, footnotes are numbered sequentially.
|
||||
|
||||
Add the footnote using another caret and number inside brackets with a colon and text (`[^1]: My footnote.`). You don’t have to put footnotes at the end of the document. You can put them anywhere except inside other elements like lists, block quotes, and tables.
|
||||
|
||||
```markdown
|
||||
This is a digital footnote[^1].
|
||||
This is a footnote with "label"[^label]
|
||||
|
||||
[^1]: This is a digital footnote
|
||||
[^label]: This is a footnote with "label"
|
||||
```
|
||||
|
||||
This is a digital footnote[^1].
|
||||
|
||||
This is a footnote with "label"[^label]
|
||||
|
||||
[^1]: This is a digital footnote
|
||||
[^label]: This is a footnote with "label"
|
||||
|
||||
## 13 Images
|
||||
|
||||
Images have a similar syntax to links but include a preceding exclamation point.
|
||||
|
||||
```markdown
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
or:
|
||||
|
||||
```markdown
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
Like links, images also have a footnote style syntax:
|
||||
|
||||
```markdown
|
||||
![Alt text][id]
|
||||
```
|
||||
|
||||
![Alt text][id]
|
||||
|
||||
With a reference later in the document defining the URL location:
|
||||
|
||||
```markdown
|
||||
[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
|
||||
```
|
||||
|
||||
[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
|
||||
|
||||
{{< admonition tip >}}
|
||||
**LoveIt** theme has [special shortcode for image](../theme-documentation-extended-shortcodes#image), which provides more features.
|
||||
{{< /admonition >}}
|
||||
|
|
@ -0,0 +1,770 @@
|
|||
---
|
||||
weight: 4
|
||||
title: "Markdown 基本语法"
|
||||
date: 2019-12-01T21:57:40+08:00
|
||||
lastmod: 2020-01-01T16:45:40+08:00
|
||||
draft: false
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "这篇文章展示了基本的 Markdown 语法和格式."
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.png"
|
||||
|
||||
tags: ["Markdown", "HTML"]
|
||||
categories: ["Markdown"]
|
||||
|
||||
lightgallery: true
|
||||
---
|
||||
|
||||
这篇文章提供了可以在 Hugo 的文章中使用的基本 Markdown 语法示例.
|
||||
|
||||
<!--more-->
|
||||
|
||||
{{< admonition >}}
|
||||
这篇文章借鉴了一篇很棒的[来自 Grav 的文章](http://learn.getgrav.org/content/markdown).
|
||||
|
||||
如果你想了解 **Loveit** 主题的扩展 Markdown 语法, 请阅读[扩展 Markdown 语法页面](../theme-documentation-content#extended-markdown-syntax).
|
||||
{{< /admonition >}}
|
||||
|
||||
事实上, 编写 Web 内容很麻烦. [WYSIWYG]^(所见即所得) 编辑器帮助减轻了这一任务. 但通常会导致代码太糟, 或更糟糕的是, 网页也会很丑.
|
||||
|
||||
没有通常伴随的所有复杂和丑陋的问题, **Markdown** 是一种更好的生成 **HTML** 内容的方式.
|
||||
|
||||
一些主要好处是:
|
||||
|
||||
1. Markdown 简单易学, 几乎没有多余的字符, 因此编写内容也更快.
|
||||
2. 用 Markdown 书写时出错的机会更少.
|
||||
3. 可以产生有效的 XHTML 输出.
|
||||
4. 将内容和视觉显示保持分开, 这样就不会打乱网站的外观.
|
||||
5. 可以在你喜欢的任何文本编辑器或 Markdown 应用程序中编写内容.
|
||||
6. Markdown 使用起来很有趣!
|
||||
|
||||
John Gruber, Markdown 的作者如是说:
|
||||
|
||||
> Markdown 格式的首要设计目标是更具可读性.
|
||||
> 最初的想法是 Markdown 格式的文档应当以纯文本形式发布,
|
||||
> 而不会看起来像被标签或格式说明所标记.
|
||||
> 虽然 Markdown 的语法受到几种现有的文本到 HTML 转换工具的影响,
|
||||
> 但 Markdown 语法的最大灵感来源是纯文本电子邮件的格式.
|
||||
>
|
||||
> {{< style "text-align: right;" >}}-- _John Gruber_{{< /style >}}
|
||||
|
||||
话不多说, 我们来回顾一下 Markdown 的主要语法以及生成的 HTML 样式!
|
||||
|
||||
{{< admonition tip >}}
|
||||
:(far fa-bookmark fa-fw): 将此页保存为书签，以备将来参考!
|
||||
{{< /admonition >}}
|
||||
|
||||
## 1 标题
|
||||
|
||||
从 `h2` 到 `h6` 的标题在每个级别上都加上一个 `＃`:
|
||||
|
||||
```markdown
|
||||
## h2 标题
|
||||
### h3 标题
|
||||
#### h4 标题
|
||||
##### h5 标题
|
||||
###### h6 标题
|
||||
```
|
||||
|
||||
输出的 HTML 看起来像这样:
|
||||
|
||||
```html
|
||||
<h2>h2 标题</h2>
|
||||
<h3>h3 标题</h3>
|
||||
<h4>h4 标题</h4>
|
||||
<h5>h5 标题</h5>
|
||||
<h6>h6 标题</h6>
|
||||
```
|
||||
|
||||
{{< admonition note "标题 ID" >}}
|
||||
要添加自定义标题 ID, 请在与标题相同的行中将自定义 ID 放在花括号中:
|
||||
|
||||
```markdown
|
||||
### 一个很棒的标题 {#custom-id}
|
||||
```
|
||||
|
||||
输出的 HTML 看起来像这样:
|
||||
|
||||
```html
|
||||
<h3 id="custom-id">一个很棒的标题</h3>
|
||||
```
|
||||
{{< /admonition >}}
|
||||
|
||||
## 2 注释
|
||||
|
||||
注释是和 HTML 兼容的：
|
||||
|
||||
```html
|
||||
<!--
|
||||
这是一段注释
|
||||
-->
|
||||
```
|
||||
|
||||
**不能**看到以下的注释:
|
||||
|
||||
<!--
|
||||
这是一段注释
|
||||
-->
|
||||
|
||||
## 3 水平线
|
||||
|
||||
HTML 中的 `<hr>` 标签是用来在段落元素之间创建一个 "专题间隔" 的.
|
||||
使用 Markdown, 你可以用以下方式创建一个 `<hr>` 标签:
|
||||
|
||||
* `___`: 三个连续的下划线
|
||||
* `---`: 三个连续的破折号
|
||||
* `***`: 三个连续的星号
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
___
|
||||
---
|
||||
***
|
||||
|
||||
## 4 段落
|
||||
|
||||
按照纯文本的方式书写段落, 纯文本在呈现的 HTML 中将用 `<p>`/`</p>` 标签包裹.
|
||||
|
||||
如下段落:
|
||||
|
||||
```markdown
|
||||
Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri,
|
||||
animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex,
|
||||
soluta officiis concludaturque ei qui, vide sensibus vim ad.
|
||||
```
|
||||
|
||||
输出的 HTML 看起来像这样:
|
||||
|
||||
```html
|
||||
<p>Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.</p>
|
||||
```
|
||||
|
||||
可以使用一个空白行进行**换行**.
|
||||
|
||||
## 5 内联 HTML 元素
|
||||
|
||||
如果你需要某个 HTML 标签 (带有一个类), 则可以简单地像这样使用:
|
||||
|
||||
```html
|
||||
Markdown 格式的段落.
|
||||
|
||||
<div class="class">
|
||||
这是 <b>HTML</b>
|
||||
</div>
|
||||
|
||||
Markdown 格式的段落.
|
||||
```
|
||||
|
||||
## 6 强调
|
||||
|
||||
### 加粗
|
||||
|
||||
用于强调带有较粗字体的文本片段.
|
||||
|
||||
以下文本片段会被 **渲染为粗体**.
|
||||
|
||||
```markdown
|
||||
**渲染为粗体**
|
||||
__渲染为粗体__
|
||||
```
|
||||
|
||||
输出的 HTML 看起来像这样:
|
||||
|
||||
```html
|
||||
<strong>渲染为粗体</strong>
|
||||
```
|
||||
|
||||
### 斜体
|
||||
|
||||
用于强调带有斜体的文本片段.
|
||||
|
||||
以下文本片段被 _渲染为斜体_.
|
||||
|
||||
```markdown
|
||||
*渲染为斜体*
|
||||
_渲染为斜体_
|
||||
```
|
||||
|
||||
输出的 HTML 看起来像这样:
|
||||
|
||||
```html
|
||||
<em>渲染为斜体</em>
|
||||
```
|
||||
|
||||
### 删除线
|
||||
|
||||
按照 [[GFM]^(GitHub flavored Markdown)](https://github.github.com/gfm/) 你可以使用删除线.
|
||||
|
||||
```markdown
|
||||
~~这段文本带有删除线.~~
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
~~这段文本带有删除线.~~
|
||||
|
||||
输出的 HTML 看起来像这样:
|
||||
|
||||
```html
|
||||
<del>这段文本带有删除线.</del>
|
||||
```
|
||||
|
||||
### 组合
|
||||
|
||||
加粗, 斜体, 和删除线可以 组合使用.
|
||||
|
||||
```markdown
|
||||
***加粗和斜体***
|
||||
~~**删除线和加粗**~~
|
||||
~~*删除线和斜体*~~
|
||||
~~***加粗, 斜体和删除线***~~
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
***加粗和斜体***
|
||||
|
||||
~~**删除线和加粗**~~
|
||||
|
||||
~~*删除线和斜体*~~
|
||||
|
||||
~~***加粗, 斜体和删除线***~~
|
||||
|
||||
输出的 HTML 看起来像这样:
|
||||
|
||||
```html
|
||||
<em><strong>加粗和斜体</strong></em>
|
||||
<del><strong>删除线和加粗</strong></del>
|
||||
<del><em>删除线和斜体</em></del>
|
||||
<del><em><strong>加粗, 斜体和删除线</strong></em></del>
|
||||
```
|
||||
|
||||
## 7 引用
|
||||
|
||||
用于在文档中引用其他来源的内容块.
|
||||
|
||||
在要引用的任何文本之前添加 `>`:
|
||||
|
||||
```markdown
|
||||
> **Fusion Drive** combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
> **Fusion Drive** combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.
|
||||
|
||||
输出的 HTML 看起来像这样:
|
||||
|
||||
```html
|
||||
<blockquote>
|
||||
<p>
|
||||
<strong>Fusion Drive</strong> combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.
|
||||
</p>
|
||||
</blockquote>
|
||||
```
|
||||
|
||||
引用也可以嵌套:
|
||||
|
||||
```markdown
|
||||
> Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue.
|
||||
Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.
|
||||
>> Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor
|
||||
odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
> Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue.
|
||||
Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.
|
||||
>> Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor
|
||||
odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.
|
||||
|
||||
## 8 列表
|
||||
|
||||
### 无序列表
|
||||
|
||||
一系列项的列表, 其中项的顺序没有明显关系.
|
||||
|
||||
你可以使用以下任何符号来表示无序列表中的项:
|
||||
|
||||
```markdown
|
||||
* 一项内容
|
||||
- 一项内容
|
||||
+ 一项内容
|
||||
```
|
||||
|
||||
例如:
|
||||
|
||||
```markdown
|
||||
* Lorem ipsum dolor sit amet
|
||||
* Consectetur adipiscing elit
|
||||
* Integer molestie lorem at massa
|
||||
* Facilisis in pretium nisl aliquet
|
||||
* Nulla volutpat aliquam velit
|
||||
* Phasellus iaculis neque
|
||||
* Purus sodales ultricies
|
||||
* Vestibulum laoreet porttitor sem
|
||||
* Ac tristique libero volutpat at
|
||||
* Faucibus porta lacus fringilla vel
|
||||
* Aenean sit amet erat nunc
|
||||
* Eget porttitor lorem
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
* Lorem ipsum dolor sit amet
|
||||
* Consectetur adipiscing elit
|
||||
* Integer molestie lorem at massa
|
||||
* Facilisis in pretium nisl aliquet
|
||||
* Nulla volutpat aliquam velit
|
||||
* Phasellus iaculis neque
|
||||
* Purus sodales ultricies
|
||||
* Vestibulum laoreet porttitor sem
|
||||
* Ac tristique libero volutpat at
|
||||
* Faucibus porta lacus fringilla vel
|
||||
* Aenean sit amet erat nunc
|
||||
* Eget porttitor lorem
|
||||
|
||||
输出的 HTML 看起来像这样:
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li>Lorem ipsum dolor sit amet</li>
|
||||
<li>Consectetur adipiscing elit</li>
|
||||
<li>Integer molestie lorem at massa</li>
|
||||
<li>Facilisis in pretium nisl aliquet</li>
|
||||
<li>Nulla volutpat aliquam velit
|
||||
<ul>
|
||||
<li>Phasellus iaculis neque</li>
|
||||
<li>Purus sodales ultricies</li>
|
||||
<li>Vestibulum laoreet porttitor sem</li>
|
||||
<li>Ac tristique libero volutpat at</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Faucibus porta lacus fringilla vel</li>
|
||||
<li>Aenean sit amet erat nunc</li>
|
||||
<li>Eget porttitor lorem</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
### 有序列表
|
||||
|
||||
一系列项的列表, 其中项的顺序确实很重要.
|
||||
|
||||
```markdown
|
||||
1. Lorem ipsum dolor sit amet
|
||||
2. Consectetur adipiscing elit
|
||||
3. Integer molestie lorem at massa
|
||||
4. Facilisis in pretium nisl aliquet
|
||||
5. Nulla volutpat aliquam velit
|
||||
6. Faucibus porta lacus fringilla vel
|
||||
7. Aenean sit amet erat nunc
|
||||
8. Eget porttitor lorem
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
1. Lorem ipsum dolor sit amet
|
||||
2. Consectetur adipiscing elit
|
||||
3. Integer molestie lorem at massa
|
||||
4. Facilisis in pretium nisl aliquet
|
||||
5. Nulla volutpat aliquam velit
|
||||
6. Faucibus porta lacus fringilla vel
|
||||
7. Aenean sit amet erat nunc
|
||||
8. Eget porttitor lorem
|
||||
|
||||
输出的 HTML 看起来像这样:
|
||||
|
||||
```html
|
||||
<ol>
|
||||
<li>Lorem ipsum dolor sit amet</li>
|
||||
<li>Consectetur adipiscing elit</li>
|
||||
<li>Integer molestie lorem at massa</li>
|
||||
<li>Facilisis in pretium nisl aliquet</li>
|
||||
<li>Nulla volutpat aliquam velit</li>
|
||||
<li>Faucibus porta lacus fringilla vel</li>
|
||||
<li>Aenean sit amet erat nunc</li>
|
||||
<li>Eget porttitor lorem</li>
|
||||
</ol>
|
||||
```
|
||||
|
||||
{{< admonition tip >}}
|
||||
如果你对每一项使用 `1.`, Markdown 将自动为每一项编号. 例如:
|
||||
|
||||
```markdown
|
||||
1. Lorem ipsum dolor sit amet
|
||||
1. Consectetur adipiscing elit
|
||||
1. Integer molestie lorem at massa
|
||||
1. Facilisis in pretium nisl aliquet
|
||||
1. Nulla volutpat aliquam velit
|
||||
1. Faucibus porta lacus fringilla vel
|
||||
1. Aenean sit amet erat nunc
|
||||
1. Eget porttitor lorem
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
1. Lorem ipsum dolor sit amet
|
||||
1. Consectetur adipiscing elit
|
||||
1. Integer molestie lorem at massa
|
||||
1. Facilisis in pretium nisl aliquet
|
||||
1. Nulla volutpat aliquam velit
|
||||
1. Faucibus porta lacus fringilla vel
|
||||
1. Aenean sit amet erat nunc
|
||||
1. Eget porttitor lorem
|
||||
{{< /admonition >}}
|
||||
|
||||
### 任务列表
|
||||
|
||||
任务列表使你可以创建带有复选框的列表.
|
||||
要创建任务列表, 请在任务列表项之前添加破折号 (`-`) 和带有空格的方括号 (`[ ]`). 要选择一个复选框，请在方括号之间添加 x (`[x]`).
|
||||
|
||||
```markdown
|
||||
- [x] Write the press release
|
||||
- [ ] Update the website
|
||||
- [ ] Contact the media
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
- [x] Write the press release
|
||||
- [ ] Update the website
|
||||
- [ ] Contact the media
|
||||
|
||||
## 9 代码
|
||||
|
||||
### 行内代码
|
||||
|
||||
用 <code>`</code> 包装行内代码段.
|
||||
|
||||
```markdown
|
||||
在这个例子中, `<section></section>` 会被包裹成 **代码**.
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
在这个例子中, `<section></section>` 会被包裹成 **代码**.
|
||||
|
||||
输出的 HTML 看起来像这样:
|
||||
|
||||
```html
|
||||
<p>
|
||||
在这个例子中, <code><section></section></code> 会被包裹成 <strong>代码</strong>.
|
||||
</p>
|
||||
```
|
||||
|
||||
### 缩进代码
|
||||
|
||||
将几行代码缩进至少四个空格，例如:
|
||||
|
||||
```markdown
|
||||
// Some comments
|
||||
line 1 of code
|
||||
line 2 of code
|
||||
line 3 of code
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
// Some comments
|
||||
line 1 of code
|
||||
line 2 of code
|
||||
line 3 of code
|
||||
|
||||
输出的 HTML 看起来像这样:
|
||||
|
||||
```html
|
||||
<pre>
|
||||
<code>
|
||||
// Some comments
|
||||
line 1 of code
|
||||
line 2 of code
|
||||
line 3 of code
|
||||
</code>
|
||||
</pre>
|
||||
```
|
||||
|
||||
### 围栏代码块
|
||||
|
||||
使用 "围栏" <code>```</code> 来生成一段带有语言属性的代码块.
|
||||
|
||||
{{< highlight markdown >}}
|
||||
```markdown
|
||||
Sample text here...
|
||||
```
|
||||
{{< / highlight >}}
|
||||
|
||||
输出的 HTML 看起来像这样:
|
||||
|
||||
```html
|
||||
<pre language-html>
|
||||
<code>Sample text here...</code>
|
||||
</pre>
|
||||
```
|
||||
|
||||
### 语法高亮
|
||||
|
||||
[GFM]^(GitHub Flavored Markdown) 也支持语法高亮.
|
||||
|
||||
要激活它，只需在第一个代码 "围栏" 之后直接添加你要使用的语言的文件扩展名,
|
||||
<code>```js</code>, 语法高亮显示将自动应用于渲染的 HTML 中.
|
||||
|
||||
例如, 在以下 JavaScript 代码中应用语法高亮:
|
||||
|
||||
{{< highlight markdown >}}
|
||||
```js
|
||||
grunt.initConfig({
|
||||
assemble: {
|
||||
options: {
|
||||
assets: 'docs/assets',
|
||||
data: 'src/data/*.{json,yml}',
|
||||
helpers: 'src/custom-helpers.js',
|
||||
partials: ['src/partials/**/*.{hbs,md}']
|
||||
},
|
||||
pages: {
|
||||
options: {
|
||||
layout: 'default.hbs'
|
||||
},
|
||||
files: {
|
||||
'./': ['src/templates/pages/index.hbs']
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
{{< / highlight >}}
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
```js
|
||||
grunt.initConfig({
|
||||
assemble: {
|
||||
options: {
|
||||
assets: 'docs/assets',
|
||||
data: 'src/data/*.{json,yml}',
|
||||
helpers: 'src/custom-helpers.js',
|
||||
partials: ['src/partials/**/*.{hbs,md}']
|
||||
},
|
||||
pages: {
|
||||
options: {
|
||||
layout: 'default.hbs'
|
||||
},
|
||||
files: {
|
||||
'./': ['src/templates/pages/index.hbs']
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
{{< admonition >}}
|
||||
**Hugo** 文档中的 [语法高亮页面](https://gohugo.io/content-management/syntax-highlighting/) 介绍了有关语法高亮的更多信息,
|
||||
包括语法高亮的 shortcode.
|
||||
{{< /admonition >}}
|
||||
|
||||
## 10 表格
|
||||
|
||||
通过在每个单元格之间添加竖线作为分隔线, 并在标题下添加一行破折号 (也由竖线分隔) 来创建表格. 注意, 竖线不需要垂直对齐.
|
||||
|
||||
```markdown
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| data | path to data files to supply the data that will be passed into templates. |
|
||||
| engine | engine to be used for processing templates. Handlebars is the default. |
|
||||
| ext | extension to be used for dest files. |
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| data | path to data files to supply the data that will be passed into templates. |
|
||||
| engine | engine to be used for processing templates. Handlebars is the default. |
|
||||
| ext | extension to be used for dest files. |
|
||||
|
||||
输出的 HTML 看起来像这样:
|
||||
|
||||
```html
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Option</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>data</td>
|
||||
<td>path to data files to supply the data that will be passed into templates.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>engine</td>
|
||||
<td>engine to be used for processing templates. Handlebars is the default.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ext</td>
|
||||
<td>extension to be used for dest files.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
```
|
||||
|
||||
{{< admonition note "文本右对齐或居中对齐" >}}
|
||||
在任何标题下方的破折号右侧添加冒号将使该列的文本右对齐.
|
||||
|
||||
在任何标题下方的破折号两边添加冒号将使该列的对齐文本居中.
|
||||
|
||||
```markdown
|
||||
| Option | Description |
|
||||
|:------:| -----------:|
|
||||
| data | path to data files to supply the data that will be passed into templates. |
|
||||
| engine | engine to be used for processing templates. Handlebars is the default. |
|
||||
| ext | extension to be used for dest files. |
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
| Option | Description |
|
||||
|:------:| -----------:|
|
||||
| data | path to data files to supply the data that will be passed into templates. |
|
||||
| engine | engine to be used for processing templates. Handlebars is the default. |
|
||||
| ext | extension to be used for dest files. |
|
||||
{{< /admonition >}}
|
||||
|
||||
## 11 链接 {#links}
|
||||
|
||||
### 基本链接
|
||||
|
||||
```markdown
|
||||
<https://assemble.io>
|
||||
<contact@revolunet.com>
|
||||
[Assemble](https://assemble.io)
|
||||
```
|
||||
|
||||
呈现的输出效果如下 (将鼠标悬停在链接上，没有提示):
|
||||
|
||||
<https://assemble.io>
|
||||
|
||||
<contact@revolunet.com>
|
||||
|
||||
[Assemble](https://assemble.io)
|
||||
|
||||
输出的 HTML 看起来像这样:
|
||||
|
||||
```html
|
||||
<a href="https://assemble.io">https://assemble.io</a>
|
||||
<a href="mailto:contact@revolunet.com">contact@revolunet.com</a>
|
||||
<a href="https://assemble.io">Assemble</a>
|
||||
```
|
||||
|
||||
### 添加一个标题
|
||||
|
||||
```markdown
|
||||
[Upstage](https://github.com/upstage/ "Visit Upstage!")
|
||||
```
|
||||
|
||||
呈现的输出效果如下 (将鼠标悬停在链接上，会有一行提示):
|
||||
|
||||
[Upstage](https://github.com/upstage/ "Visit Upstage!")
|
||||
|
||||
输出的 HTML 看起来像这样:
|
||||
|
||||
```html
|
||||
<a href="https://github.com/upstage/" title="Visit Upstage!">Upstage</a>
|
||||
```
|
||||
|
||||
### 定位标记
|
||||
|
||||
定位标记使你可以跳至同一页面上的指定锚点. 例如, 每个章节:
|
||||
|
||||
```markdown
|
||||
## Table of Contents
|
||||
* [Chapter 1](#chapter-1)
|
||||
* [Chapter 2](#chapter-2)
|
||||
* [Chapter 3](#chapter-3)
|
||||
```
|
||||
|
||||
将跳转到这些部分:
|
||||
|
||||
```markdown
|
||||
## Chapter 1 <a id="chapter-1"></a>
|
||||
Content for chapter one.
|
||||
|
||||
## Chapter 2 <a id="chapter-2"></a>
|
||||
Content for chapter one.
|
||||
|
||||
## Chapter 3 <a id="chapter-3"></a>
|
||||
Content for chapter one.
|
||||
```
|
||||
|
||||
{{< admonition >}}
|
||||
定位标记的位置几乎是任意的. 因为它们并不引人注目, 所以它们通常被放在同一行了.
|
||||
{{< /admonition >}}
|
||||
|
||||
## 12 脚注
|
||||
|
||||
脚注使你可以添加注释和参考, 而不会使文档正文混乱.
|
||||
当你创建脚注时, 会在添加脚注引用的位置出现带有链接的上标编号.
|
||||
读者可以单击链接以跳至页面底部的脚注内容.
|
||||
|
||||
要创建脚注引用, 请在方括号中添加插入符号和标识符 (`[^1]`).
|
||||
标识符可以是数字或单词, 但不能包含空格或制表符.
|
||||
标识符仅将脚注引用与脚注本身相关联 - 在脚注输出中, 脚注按顺序编号.
|
||||
|
||||
在中括号内使用插入符号和数字以及用冒号和文本来添加脚注内容 (`[^1]：这是一段脚注`).
|
||||
你不一定要在文档末尾添加脚注. 可以将它们放在除列表, 引用和表格等元素之外的任何位置.
|
||||
|
||||
```markdown
|
||||
这是一个数字脚注[^1].
|
||||
这是一个带标签的脚注[^label]
|
||||
|
||||
[^1]: 这是一个数字脚注
|
||||
[^label]: 这是一个带标签的脚注
|
||||
```
|
||||
|
||||
这是一个数字脚注[^1].
|
||||
|
||||
这是一个带标签的脚注[^label]
|
||||
|
||||
[^1]: 这是一个数字脚注
|
||||
[^label]: 这是一个带标签的脚注
|
||||
|
||||
## 13 图片
|
||||
|
||||
图片的语法与链接相似, 但包含一个在前面的感叹号.
|
||||
|
||||
```markdown
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
或者:
|
||||
|
||||
```markdown
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
像链接一样, 图片也具有脚注样式的语法:
|
||||
|
||||
```markdown
|
||||
![Alt text][id]
|
||||
```
|
||||
|
||||
![Alt text][id]
|
||||
|
||||
稍后在文档中提供参考内容, 用来定义 URL 的位置:
|
||||
|
||||
```markdown
|
||||
[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
|
||||
```
|
||||
|
||||
[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
|
||||
|
||||
{{< admonition tip >}}
|
||||
**LoveIt** 主题提供了一个包含更多功能的 [图片的 shortcode](../theme-documentation-extended-shortcodes#image).
|
||||
{{< /admonition >}}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
1283
themes/LoveIt/exampleSite/content/posts/emoji-support/index.en.md
Normal file
1283
themes/LoveIt/exampleSite/content/posts/emoji-support/index.en.md
Normal file
File diff suppressed because it is too large
Load diff
1288
themes/LoveIt/exampleSite/content/posts/emoji-support/index.fr.md
Normal file
1288
themes/LoveIt/exampleSite/content/posts/emoji-support/index.fr.md
Normal file
File diff suppressed because it is too large
Load diff
1284
themes/LoveIt/exampleSite/content/posts/emoji-support/index.zh-cn.md
Normal file
1284
themes/LoveIt/exampleSite/content/posts/emoji-support/index.zh-cn.md
Normal file
File diff suppressed because it is too large
Load diff
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 151 KiB |
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
Binary file not shown.
|
After Width: | Height: | Size: 280 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
|
|
@ -0,0 +1,182 @@
|
|||
---
|
||||
weight: 3
|
||||
title: "Theme Documentation - Built-in Shortcodes"
|
||||
date: 2020-03-04T16:29:41+08:00
|
||||
lastmod: 2020-03-04T16:29:41+08:00
|
||||
draft: false
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "Hugo provides multiple built-in shortcodes for author convenience and to keep your markdown content clean."
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.png"
|
||||
|
||||
tags: ["shortcodes"]
|
||||
categories: ["documentation"]
|
||||
|
||||
lightgallery: true
|
||||
---
|
||||
|
||||
**Hugo** provides multiple built-in shortcodes for author convenience and to keep your markdown content clean.
|
||||
|
||||
<!--more-->
|
||||
|
||||
Hugo uses Markdown for its simple content format. However, there are a lot of things that Markdown doesn’t support well. You could use pure HTML to expand possibilities.
|
||||
|
||||
But this happens to be a bad idea. Everyone uses Markdown because it’s pure and simple to read even non-rendered. You should avoid HTML to keep it as simple as possible.
|
||||
|
||||
To avoid this limitations, Hugo created [shortcodes](https://gohugo.io/extras/shortcodes/).
|
||||
A shortcode is a simple snippet that can generate reasonable HTML code and conforms to Markdown's design philosophy.
|
||||
|
||||
Hugo ships with a set of predefined shortcodes that represent very common usage. These shortcodes are provided for author convenience and to keep your markdown content clean.
|
||||
|
||||
## 1 figure {#figure}
|
||||
|
||||
[Documentation of `figure`](https://gohugo.io/content-management/shortcodes#figure)
|
||||
|
||||
Example `figure` input:
|
||||
|
||||
```markdown
|
||||
{{</* figure src="/images/lighthouse.jpg" title="Lighthouse (figure)" */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< figure src="/images/lighthouse.jpg" title="Lighthouse (figure)" >}}
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<figure>
|
||||
<img src="/images/lighthouse.jpg"/>
|
||||
<figcaption>
|
||||
<h4>Lighthouse (figure)</h4>
|
||||
</figcaption>
|
||||
</figure>
|
||||
```
|
||||
|
||||
## 2 gist
|
||||
|
||||
[Documentation of `gist`](https://gohugo.io/content-management/shortcodes#gist)
|
||||
|
||||
Example `gist` input:
|
||||
|
||||
```markdown
|
||||
{{</* gist spf13 7896402 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< gist spf13 7896402 >}}
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<script type="application/javascript" src="https://gist.github.com/spf13/7896402.js"></script>
|
||||
```
|
||||
|
||||
## 3 highlight
|
||||
|
||||
[Documentation of `highlight`](https://gohugo.io/content-management/shortcodes#instagram)
|
||||
|
||||
Example `highlight` input:
|
||||
|
||||
```markdown
|
||||
{{</* highlight html */>}}
|
||||
<section id="main">
|
||||
<div>
|
||||
<h1 id="title">{{ .Title }}</h1>
|
||||
{{ range .Pages }}
|
||||
{{ .Render "summary"}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{</* /highlight */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< highlight html >}}
|
||||
<section id="main">
|
||||
<div>
|
||||
<h1 id="title">{{ .Title }}</h1>
|
||||
{{ range .Pages }}
|
||||
{{ .Render "summary"}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{< /highlight >}}
|
||||
|
||||
## 4 instagram
|
||||
|
||||
[Documentation of `instagram`](https://gohugo.io/content-management/shortcodes#instagram)
|
||||
|
||||
Example `instagram` input:
|
||||
|
||||
```markdown
|
||||
{{</* instagram BWNjjyYFxVx hidecaption */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< instagram BWNjjyYFxVx hidecaption >}}
|
||||
|
||||
## 5 param
|
||||
|
||||
[Documentation of `param`](https://gohugo.io/content-management/shortcodes#param)
|
||||
|
||||
Example `param` input:
|
||||
|
||||
```markdown
|
||||
{{</* param description */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< param description >}}
|
||||
|
||||
## 6 ref and relref {#ref-and-relref}
|
||||
|
||||
[Documentation of `ref` and `relref`](https://gohugo.io/content-management/shortcodes#ref-and-relref)
|
||||
|
||||
## 7 tweet
|
||||
|
||||
[Documentation of `tweet`](https://gohugo.io/content-management/shortcodes#tweet)
|
||||
|
||||
Example `tweet` input:
|
||||
|
||||
```markdown
|
||||
{{</* tweet 877500564405444608 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< tweet 877500564405444608 >}}
|
||||
|
||||
## 8 vimeo
|
||||
|
||||
[Documentation of `vimeo`](https://gohugo.io/content-management/shortcodes#vimeo)
|
||||
|
||||
Example `vimeo` input:
|
||||
|
||||
```markdown
|
||||
{{</* vimeo 146022717 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< vimeo 146022717 >}}
|
||||
|
||||
## 9 youtube
|
||||
|
||||
[Documentation of `youtube`](https://gohugo.io/content-management/shortcodes#youtube)
|
||||
|
||||
Example `youtube` input:
|
||||
|
||||
```markdown
|
||||
{{</* youtube w7Ft2ymGmfc */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< youtube w7Ft2ymGmfc >}}
|
||||
|
|
@ -0,0 +1,187 @@
|
|||
---
|
||||
weight: 3
|
||||
title: "Thème Documentation - Built-in Shortcodes"
|
||||
date: 2020-03-04T16:29:59+08:00
|
||||
lastmod: 2020-03-04T16:29:59+08:00
|
||||
draft: false
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "Hugo fournit plusieurs shortcodes intégrés pour la commodité de l'auteur et pour garder votre contenu de démarque propre."
|
||||
resources:
|
||||
- name: "featured"
|
||||
src: "featured-image.png"
|
||||
|
||||
tags: ["shortcodes"]
|
||||
categories: ["documentation"]
|
||||
|
||||
lightgallery: true
|
||||
---
|
||||
|
||||
**Hugo** fournit plusieurs shortcodes intégrés pour la commodité de l'auteur et pour garder votre contenu de démarque propre.
|
||||
|
||||
<!--more-->
|
||||
|
||||
{{< admonition warning >}}
|
||||
Sorry, this article has not been completely translated into **French**.
|
||||
Welcome to take the time to propose a translation by [:(fas fa-code-branch fa-fw): making a PR](https://github.com/dillonzq/LoveIt/pulls) to the theme!
|
||||
{{< /admonition >}}
|
||||
|
||||
Hugo uses Markdown for its simple content format. However, there are a lot of things that Markdown doesn’t support well. You could use pure HTML to expand possibilities.
|
||||
|
||||
But this happens to be a bad idea. Everyone uses Markdown because it’s pure and simple to read even non-rendered. You should avoid HTML to keep it as simple as possible.
|
||||
|
||||
To avoid this limitations, Hugo created [shortcodes](https://gohugo.io/extras/shortcodes/).
|
||||
A shortcode is a simple snippet that can generate reasonable HTML code and conforms to Markdown's design philosophy.
|
||||
|
||||
Hugo ships with a set of predefined shortcodes that represent very common usage. These shortcodes are provided for author convenience and to keep your markdown content clean.
|
||||
|
||||
## 1 figure {#figure}
|
||||
|
||||
[Documentation of `figure`](https://gohugo.io/content-management/shortcodes#figure)
|
||||
|
||||
Example `figure` input:
|
||||
|
||||
```markdown
|
||||
{{</* figure src="/images/lighthouse.jpg" title="Lighthouse (figure)" */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< figure src="/images/lighthouse.jpg" title="Lighthouse (figure)" >}}
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<figure>
|
||||
<img src="/images/lighthouse.jpg"/>
|
||||
<figcaption>
|
||||
<h4>Lighthouse (figure)</h4>
|
||||
</figcaption>
|
||||
</figure>
|
||||
```
|
||||
|
||||
## 2 gist
|
||||
|
||||
[Documentation of `gist`](https://gohugo.io/content-management/shortcodes#gist)
|
||||
|
||||
Example `gist` input:
|
||||
|
||||
```markdown
|
||||
{{</* gist spf13 7896402 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< gist spf13 7896402 >}}
|
||||
|
||||
The HTML looks like this:
|
||||
|
||||
```html
|
||||
<script type="application/javascript" src="https://gist.github.com/spf13/7896402.js"></script>
|
||||
```
|
||||
|
||||
## 3 highlight
|
||||
|
||||
[Documentation of `highlight`](https://gohugo.io/content-management/shortcodes#instagram)
|
||||
|
||||
Example `highlight` input:
|
||||
|
||||
```markdown
|
||||
{{</* highlight html */>}}
|
||||
<section id="main">
|
||||
<div>
|
||||
<h1 id="title">{{ .Title }}</h1>
|
||||
{{ range .Pages }}
|
||||
{{ .Render "summary"}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{</* /highlight */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< highlight html >}}
|
||||
<section id="main">
|
||||
<div>
|
||||
<h1 id="title">{{ .Title }}</h1>
|
||||
{{ range .Pages }}
|
||||
{{ .Render "summary"}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{< /highlight >}}
|
||||
|
||||
## 4 instagram
|
||||
|
||||
[Documentation of `instagram`](https://gohugo.io/content-management/shortcodes#instagram)
|
||||
|
||||
Example `instagram` input:
|
||||
|
||||
```markdown
|
||||
{{</* instagram BWNjjyYFxVx hidecaption */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< instagram BWNjjyYFxVx hidecaption >}}
|
||||
|
||||
## 5 param
|
||||
|
||||
[Documentation of `param`](https://gohugo.io/content-management/shortcodes#param)
|
||||
|
||||
Example `param` input:
|
||||
|
||||
```markdown
|
||||
{{</* param description */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< param description >}}
|
||||
|
||||
## 6 ref and relref {#ref-and-relref}
|
||||
|
||||
[Documentation of `ref` and `relref`](https://gohugo.io/content-management/shortcodes#ref-and-relref)
|
||||
|
||||
## 7 tweet
|
||||
|
||||
[Documentation of `tweet`](https://gohugo.io/content-management/shortcodes#tweet)
|
||||
|
||||
Example `tweet` input:
|
||||
|
||||
```markdown
|
||||
{{</* tweet 877500564405444608 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< tweet 877500564405444608 >}}
|
||||
|
||||
## 8 vimeo
|
||||
|
||||
[Documentation of `vimeo`](https://gohugo.io/content-management/shortcodes#vimeo)
|
||||
|
||||
Example `vimeo` input:
|
||||
|
||||
```markdown
|
||||
{{</* vimeo 146022717 */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< vimeo 146022717 >}}
|
||||
|
||||
## 9 youtube
|
||||
|
||||
[Documentation of `youtube`](https://gohugo.io/content-management/shortcodes#youtube)
|
||||
|
||||
Example `youtube` input:
|
||||
|
||||
```markdown
|
||||
{{</* youtube w7Ft2ymGmfc */>}}
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
{{< youtube w7Ft2ymGmfc >}}
|
||||
|
|
@ -0,0 +1,183 @@
|
|||
---
|
||||
weight: 3
|
||||
title: "主题文档 - 内置 Shortcodes"
|
||||
date: 2020-03-04T16:29:59+08:00
|
||||
lastmod: 2020-03-04T16:29:59+08:00
|
||||
draft: false
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "Hugo 提供了多个内置的 Shortcodes, 以方便作者保持 Markdown 内容的整洁."
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.png"
|
||||
|
||||
tags: ["shortcodes"]
|
||||
categories: ["documentation"]
|
||||
|
||||
lightgallery: true
|
||||
---
|
||||
|
||||
**Hugo** 提供了多个内置的 Shortcodes, 以方便作者保持 Markdown 内容的整洁.
|
||||
|
||||
<!--more-->
|
||||
|
||||
Hugo 使用 Markdown 为其简单的内容格式. 但是, Markdown 在很多方面都无法很好地支持. 你可以使用纯 HTML 来扩展可能性.
|
||||
|
||||
但这恰好是一个坏主意. 大家使用 Markdown, 正是因为它即使不经过渲染也可以轻松阅读. 应该尽可能避免使用 HTML 以保持内容简洁.
|
||||
|
||||
为了避免这种限制, Hugo 创建了 [shortcodes](https://gohugo.io/extras/shortcodes/).
|
||||
shortcode 是一个简单代码段, 可以生成合理的 HTML 代码, 并且符合 Markdown 的设计哲学.
|
||||
|
||||
Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见的用法.
|
||||
提供这些 shortcodes 是为了方便保持你的 Markdown 内容简洁.
|
||||
|
||||
## 1 figure {#figure}
|
||||
|
||||
[`figure` 的文档](https://gohugo.io/content-management/shortcodes#figure)
|
||||
|
||||
一个 `figure` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* figure src="/images/lighthouse.jpg" title="Lighthouse (figure)" */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< figure src="/images/lighthouse.jpg" title="Lighthouse (figure)" >}}
|
||||
|
||||
输出的 HTML 看起来像这样:
|
||||
|
||||
```html
|
||||
<figure>
|
||||
<img src="/images/lighthouse.jpg"/>
|
||||
<figcaption>
|
||||
<h4>Lighthouse (figure)</h4>
|
||||
</figcaption>
|
||||
</figure>
|
||||
```
|
||||
|
||||
## 2 gist
|
||||
|
||||
[`gist` 的文档](https://gohugo.io/content-management/shortcodes#gist)
|
||||
|
||||
一个 `gist` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* gist spf13 7896402 */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< gist spf13 7896402 >}}
|
||||
|
||||
输出的 HTML 看起来像这样:
|
||||
|
||||
```html
|
||||
<script type="application/javascript" src="https://gist.github.com/spf13/7896402.js"></script>
|
||||
```
|
||||
|
||||
## 3 highlight
|
||||
|
||||
[`highlight` 的文档](https://gohugo.io/content-management/shortcodes#instagram)
|
||||
|
||||
一个 `highlight` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* highlight html */>}}
|
||||
<section id="main">
|
||||
<div>
|
||||
<h1 id="title">{{ .Title }}</h1>
|
||||
{{ range .Pages }}
|
||||
{{ .Render "summary"}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{</* /highlight */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< highlight html >}}
|
||||
<section id="main">
|
||||
<div>
|
||||
<h1 id="title">{{ .Title }}</h1>
|
||||
{{ range .Pages }}
|
||||
{{ .Render "summary"}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{< /highlight >}}
|
||||
|
||||
## 4 instagram
|
||||
|
||||
[`instagram` 的文档](https://gohugo.io/content-management/shortcodes#instagram)
|
||||
|
||||
一个 `instagram` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* instagram BWNjjyYFxVx hidecaption */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< instagram BWNjjyYFxVx hidecaption >}}
|
||||
|
||||
## 5 param
|
||||
|
||||
[`param` 的文档](https://gohugo.io/content-management/shortcodes#param)
|
||||
|
||||
一个 `param` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* param description */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< param description >}}
|
||||
|
||||
## 6 ref 和 relref {#ref-and-relref}
|
||||
|
||||
[`ref` 和 `relref` 的文档](https://gohugo.io/content-management/shortcodes#ref-and-relref)
|
||||
|
||||
## 7 tweet
|
||||
|
||||
[`tweet` 的文档](https://gohugo.io/content-management/shortcodes#tweet)
|
||||
|
||||
一个 `tweet` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* tweet 877500564405444608 */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< tweet 877500564405444608 >}}
|
||||
|
||||
## 8 vimeo
|
||||
|
||||
[`vimeo` 的文档](https://gohugo.io/content-management/shortcodes#vimeo)
|
||||
|
||||
一个 `vimeo` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* vimeo 146022717 */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< vimeo 146022717 >}}
|
||||
|
||||
## 9 youtube
|
||||
|
||||
[`youtube` 的文档](https://gohugo.io/content-management/shortcodes#youtube)
|
||||
|
||||
一个 `youtube` 示例:
|
||||
|
||||
```markdown
|
||||
{{</* youtube w7Ft2ymGmfc */>}}
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
{{< youtube w7Ft2ymGmfc >}}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 289 KiB |
|
|
@ -0,0 +1,399 @@
|
|||
---
|
||||
weight: 2
|
||||
title: "Theme Documentation - Content"
|
||||
date: 2020-03-05T15:58:26+08:00
|
||||
lastmod: 2020-03-05T15:58:26+08:00
|
||||
draft: false
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "Find out how to create and organize your content quickly and intuitively in LoveIt theme."
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.jpg"
|
||||
|
||||
tags: ["content", "Markdown"]
|
||||
categories: ["documentation"]
|
||||
|
||||
lightgallery: true
|
||||
|
||||
toc:
|
||||
auto: false
|
||||
math:
|
||||
enable: true
|
||||
---
|
||||
|
||||
Find out how to create and organize your content quickly and intuitively in **LoveIt** theme.
|
||||
|
||||
<!--more-->
|
||||
|
||||
## 1 Contents Organization {#contents-organization}
|
||||
|
||||
A few suggestions to help you get a good looking site quickly:
|
||||
|
||||
* Keep post pages in the `content/posts` directory, for example: `content/posts/my-first-post.md`
|
||||
* Keep other pages in the `content` directory, for example: `content/about.md`
|
||||
* Local resources organization
|
||||
|
||||
{{< admonition note "Local Resource Reference" >}}
|
||||
{{< version 0.2.10 >}}
|
||||
|
||||
There are three ways to reference local resources such as **images** and **music**:
|
||||
|
||||
1. Using [page resources](https://gohugo.io/content-management/page-resources/) in [page bundles](https://gohugo.io/content-management/page-bundles/).
|
||||
You can reference page resources by the value for `Resources.GetMatch` or the filepath of the resource relative to the page directory directly.
|
||||
2. Store resources in the **assets** directory, which is `/assets` by default.
|
||||
The filepath of the resource to reference in the post is relative to the assets directory.
|
||||
3. Store resources in the **static** directory, which is `/static` by default.
|
||||
The filepath of the resource to reference in the post is relative to the static directory.
|
||||
|
||||
The **priority** of references is also in the above order.
|
||||
|
||||
There are many places in the theme where the above local resource references can be used,
|
||||
such as **links**, **images**, `image` shortcode, `music` shortcode and some params in the **front matter**.
|
||||
|
||||
Images in page resources or assets directory [processing](https://gohugo.io/content-management/image-processing/)
|
||||
will be supported in the future.
|
||||
It's really cool! :(far fa-grin-squint fa-fw):
|
||||
{{< /admonition >}}
|
||||
|
||||
## 2 Front Matter {#front-matter}
|
||||
|
||||
**Hugo** allows you to add front matter in `yaml`, `toml` or `json` to your content files.
|
||||
|
||||
{{< admonition >}}
|
||||
**Not all** of the below front matters need to be set in each of your posts.
|
||||
It is necessary only if the front matters and the `page` part in your [site configuration](../theme-documentation-basics#site-configuration) are inconsistent.
|
||||
{{< /admonition >}}
|
||||
|
||||
Here is a front matter example:
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "My First Post"
|
||||
subtitle: ""
|
||||
date: 2020-03-04T15:58:26+08:00
|
||||
lastmod: 2020-03-04T15:58:26+08:00
|
||||
draft: true
|
||||
author: ""
|
||||
authorLink: ""
|
||||
description: ""
|
||||
license: ""
|
||||
images: []
|
||||
|
||||
tags: []
|
||||
categories: []
|
||||
featuredImage: ""
|
||||
featuredImagePreview: ""
|
||||
|
||||
hiddenFromHomePage: false
|
||||
hiddenFromSearch: false
|
||||
twemoji: false
|
||||
lightgallery: true
|
||||
ruby: true
|
||||
fraction: true
|
||||
fontawesome: true
|
||||
linkToMarkdown: true
|
||||
rssFullText: false
|
||||
|
||||
toc:
|
||||
enable: true
|
||||
auto: true
|
||||
code:
|
||||
copy: true
|
||||
# ...
|
||||
math:
|
||||
enable: true
|
||||
# ...
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
# ...
|
||||
share:
|
||||
enable: true
|
||||
# ...
|
||||
comment:
|
||||
enable: true
|
||||
# ...
|
||||
library:
|
||||
css:
|
||||
# someCSS = "some.css"
|
||||
# located in "assets/"
|
||||
# Or
|
||||
# someCSS = "https://cdn.example.com/some.css"
|
||||
js:
|
||||
# someJS = "some.js"
|
||||
# located in "assets/"
|
||||
# Or
|
||||
# someJS = "https://cdn.example.com/some.js"
|
||||
seo:
|
||||
images: []
|
||||
# ...
|
||||
---
|
||||
```
|
||||
|
||||
* **title**: the title for the content.
|
||||
* **subtitle**: {{< version 0.2.0 >}} the subtitle for the content.
|
||||
* **date**: the datetime assigned to this page, which is usually fetched from the `date` field in front matter, but this behaviour is configurabl in the [site configuration](../theme-documentation-basics#site-configuration).
|
||||
* **lastmod**: the datetime at which the content was last modified.
|
||||
* **draft**: if `true`, the content will not be rendered unless the `--buildDrafts`/`-D` flag is passed to the `hugo` command.
|
||||
* **author**: the author for the content.
|
||||
* **authorLink**: the link of the author.
|
||||
* **description**: the description for the content.
|
||||
* **license**: the special lisence for this content.
|
||||
* **images**: page images for Open Graph and Twitter Cards.
|
||||
|
||||
* **tags**: the tags for the content.
|
||||
* **categories**: the categories for the content.
|
||||
* **featuredImage**: the featured image for the content.
|
||||
* **featuredImagePreview**: the featured image for the content preview in the home page.
|
||||
|
||||
* **hiddenFromHomePage**: if `true`, the content will not be shown in the home page.
|
||||
* **hiddenFromSearch**: {{< version 0.2.0 >}} if `true`, the content will not be shown in the search results.
|
||||
* **twemoji**: {{< version 0.2.0 >}} if `true`, the content will enable the twemoji.
|
||||
* **lightgallery**: if `true`, images in the content will be shown as the gallery.
|
||||
* **ruby**: {{< version 0.2.0 >}} if `true`, the content will enable the [ruby extended syntax](#ruby).
|
||||
* **fraction**: {{< version 0.2.0 >}} if `true`, the content will enable the [fraction extended syntax](#fraction).
|
||||
* **fontawesome**: {{< version 0.2.0 >}} if `true`, the content will enable the [Font Awesome extended syntax](#fontawesome).
|
||||
* **linkToMarkdown**: if `true`, the footer of the content will be shown the link to the orignal Markdown file.
|
||||
* **rssFullText**: {{< version 0.2.4 >}} if `true`, the full text content will be shown in RSS.
|
||||
|
||||
* **toc**: {{< version 0.2.9 changed >}} the same as the `params.page.toc` part in the [site configuration](../theme-documentation-basics#site-configuration).
|
||||
* **code**: {{< version 0.2.0 >}} the same as the `params.page.code` part in the [site configuration](../theme-documentation-basics#site-configuration).
|
||||
* **math**: {{< version 0.2.0 changed >}} the same as the `params.page.math` part in the [site configuration](../theme-documentation-basics#site-configuration).
|
||||
* **mapbox**: {{< version 0.2.0 >}} the same as the `params.page.mapbox` part in the [site configuration](../theme-documentation-basics#site-configuration).
|
||||
* **share**: the same as the `params.page.share` part in the [site configuration](../theme-documentation-basics#site-configuration).
|
||||
* **comment**: {{< version 0.2.0 changed >}} the same as the `params.page.comment` part in the [site configuration](../theme-documentation-basics#site-configuration).
|
||||
* **library**: {{< version 0.2.7 >}} the same as the `params.page.library` part in the [site configuration](../theme-documentation-basics#site-configuration).
|
||||
* **seo**: {{< version 0.2.10 >}} the same as the `params.page.seo` part in the [site configuration](../theme-documentation-basics#site-configuration).
|
||||
|
||||
{{< admonition tip >}}
|
||||
{{< version 0.2.10 >}}
|
||||
|
||||
**featuredImage** and **featuredImagePreview** support the complete usage of [local resource references](#contents-organization).
|
||||
|
||||
If the page resource with `name: featured-image` or `name: featured-image-preview` is set in the front matter,
|
||||
it is not necessary to set the parameter `featuredImage` or `featuredImagePreview`:
|
||||
|
||||
```yaml
|
||||
resources:
|
||||
- name: featured-image
|
||||
src: featured-image.jpg
|
||||
- name: featured-image-preview
|
||||
src: featured-image-preview.jpg
|
||||
```
|
||||
{{< /admonition >}}
|
||||
|
||||
## 3 Content Summaries
|
||||
|
||||
**LoveIt** theme uses the summary of the content to display abstract information in the home page. Hugo can generate summaries of your content.
|
||||
|
||||
|
||||
|
||||
### Automatic Summary Splitting
|
||||
|
||||
By default, Hugo automatically takes the first 70 words of your content as its summary.
|
||||
|
||||
You may customize the summary length by setting `summaryLength` in the [site configuration](../theme-documentation-basics#site-configuration).
|
||||
|
||||
If you are creating content in a [CJK]^(Chinese/Japanese/Korean) language and want to use Hugo’s automatic summary splitting, set `hasCJKLanguage` to `true` in your [site configuration](../theme-documentation-basics#site-configuration).
|
||||
|
||||
### Manual Summary Splitting
|
||||
|
||||
Alternatively, you may add the `<!--more-->` summary divider where you want to split the article.
|
||||
|
||||
Content that comes before the summary divider will be used as that content’s summary.
|
||||
|
||||
{{< admonition >}}
|
||||
Be careful to enter `<!--more-->` exactly; i.e., all lowercase and with no whitespace.
|
||||
{{< /admonition >}}
|
||||
|
||||
### Front Matter Summary
|
||||
|
||||
You might want your summary to be something other than the text that starts the article. In this case you can provide a separate summary in the `summary` variable of the article front matter.
|
||||
|
||||
### Use Description as Summary
|
||||
|
||||
You might want your description in the `description` variable of the article front matter as the summary.
|
||||
|
||||
You may add the `<!--more-->` summary divider at the start of the article. Keep content that comes before the summary divider empty. Then **LoveIt** theme will use your description as the summary.
|
||||
|
||||
### Priority Order of Summary Selection
|
||||
|
||||
Because there are multiple ways in which a summary can be specified it is useful to understand the order. It is as follows:
|
||||
|
||||
1. If there is a `<!--more-->` summary divider present in the article but no content is before the divider, the description will be used as the summary.
|
||||
2. If there is a `<!--more-->` summary divider present in the article the text up to the divider will be provided as per the manual summary split method.
|
||||
3. If there is a summary variable in the article front matter the value of the variable will be provided as per the front matter summary method.
|
||||
4. The text at the start of the article will be provided as per the automatic summary split method.
|
||||
|
||||
{{< admonition >}}
|
||||
It is not recommended to include rich text block elements in the summary, which will cause typographic errors. Such as code blocks, pictures, tables, etc.
|
||||
{{< /admonition >}}
|
||||
|
||||
## 4 Basic Markdown Syntax
|
||||
|
||||
This part is shown in the [basic markdown syntax page](../basic-markdown-syntax/).
|
||||
|
||||
## 5 Extended Markdown Syntax {#extended-markdown-syntax}
|
||||
|
||||
**LoveIt** theme has some extended syntax elements for you to write articles.
|
||||
|
||||
### Emoji Support
|
||||
|
||||
This part is shown in the [emoji support page](../emoji-support/).
|
||||
|
||||
### Mathematical Formula
|
||||
|
||||
**LoveIt** theme supports mathematical formulas based on [$ \KaTeX $](https://katex.org/).
|
||||
|
||||
Set the property `enable = true` under `[params.math]` in your [site configuration](../theme-documentation-basics#site-configuration)
|
||||
and the property `math: true` of the article front matter to enable the automatic rendering of mathematical formulas.
|
||||
|
||||
{{< admonition tip >}}
|
||||
Here is a list of [$ \TeX $ functions supported by $ \KaTeX $](https://katex.org/docs/supported.html).
|
||||
{{< /admonition >}}
|
||||
|
||||
#### Block Formula
|
||||
|
||||
The default block delimiters are `$$`/`$$` and `\\[`/`\\]`:
|
||||
|
||||
```markdown
|
||||
$$ c = \pm\sqrt{a^2 + b^2} $$
|
||||
|
||||
\\[ f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \\]
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
$$ c = \pm\sqrt{a^2 + b^2} $$
|
||||
|
||||
\\[ f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \\]
|
||||
|
||||
#### Inline Formula
|
||||
|
||||
The default inline delimiters are `$`/`$` and `\\(`/`\\)`:
|
||||
|
||||
```markdown
|
||||
$ c = \pm\sqrt{a^2 + b^2} $ and \\( f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \\)
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
$ c = \pm\sqrt{a^2 + b^2} $ and \\( f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \\)
|
||||
|
||||
{{< admonition tip >}}
|
||||
You can add more block and inline delimiters in your [site configuration](../theme-documentation-basics#site-configuration).
|
||||
{{< /admonition >}}
|
||||
|
||||
#### Copy-tex
|
||||
|
||||
**[Copy-tex](https://github.com/Khan/KaTeX/tree/master/contrib/copy-tex)** is an extension for **$ \KaTeX $**.
|
||||
|
||||
By the extension, when selecting and copying $ \KaTeX $ rendered elements, copies their $ \LaTeX $ source to the clipboard.
|
||||
|
||||
Set the property `copyTex = true` under `[params.math]` in your [site configuration](../theme-documentation-basics#site-configuration) to enable Copy-tex.
|
||||
|
||||
Select and copy the formula rendered in the previous section, and you can find that the copied content is the LaTeX source code.
|
||||
|
||||
#### mhchem
|
||||
|
||||
**[mhchem](https://github.com/Khan/KaTeX/tree/master/contrib/mhchem)** is an extension for **$ \KaTeX $**.
|
||||
|
||||
By the extension, you can write beautiful chemical equations easily in the article.
|
||||
|
||||
Set the property `mhchem = true` under `[params.math]` in your [site configuration](../theme-documentation-basics#site-configuration) to enable mhchem.
|
||||
|
||||
```markdown
|
||||
$$ \ce{CO2 + C -> 2 CO} $$
|
||||
|
||||
$$ \ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-} $$
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
$$ \ce{CO2 + C -> 2 CO} $$
|
||||
|
||||
$$ \ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-} $$
|
||||
|
||||
### Ruby Annotation {#ruby}
|
||||
|
||||
An extended Markdown syntax for **ruby annotation** is supported in **LoveIt** theme:
|
||||
|
||||
```markdown
|
||||
[Hugo]{?^}(An open-source static site generator)
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
[Hugo]^(An open-source static site generator)
|
||||
|
||||
### Fraction {#fraction}
|
||||
|
||||
{{< version 0.2.0 >}}
|
||||
|
||||
An extended Markdown syntax for **fraction** is supported in **LoveIt** theme:
|
||||
|
||||
```markdown
|
||||
[Light]{?/}[Dark]
|
||||
|
||||
[99]{?/}[100]
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
[Light]/[Dark]
|
||||
|
||||
[90]/[100]
|
||||
|
||||
### Font Awesome {#fontawesome}
|
||||
|
||||
**LoveIt** theme uses [Font Awesome](https://fontawesome.com/) as the icon library.
|
||||
You can easily use these icons in your articles.
|
||||
|
||||
Get the `class` of icons you wanted from the [Font Awesome website](https://fontawesome.com/icons?d=gallery).
|
||||
|
||||
```markdown
|
||||
Gone camping! {?:}(fas fa-campground fa-fw): Be back soon.
|
||||
|
||||
That is so funny! {?:}(far fa-grin-tears):
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
Gone camping! :(fas fa-campground fa-fw): Be back soon.
|
||||
|
||||
That is so funny! :(far fa-grin-tears):
|
||||
|
||||
### Escape character {#escape-character}
|
||||
|
||||
In some special cases (when writing this theme documentation :(far fa-grin-squint-tears):),
|
||||
your content will conflict with basic or extended Markdown syntax, and it is inevitable.
|
||||
|
||||
The escape character syntax can help you build the content you wanted:
|
||||
|
||||
```markdown
|
||||
{{??}X} -> X
|
||||
```
|
||||
|
||||
For example, two `:` will enable emoji syntax, which is not the behavior you want. The escape character syntax is like this:
|
||||
|
||||
```markdown
|
||||
{{??}:}joy:
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
**{?:}joy{?:}** instead of **:joy:**
|
||||
|
||||
{{< admonition tip >}}
|
||||
This is related to **[an issue for Hugo](https://github.com/gohugoio/hugo/issues/4978)**, which has not been resolved.
|
||||
{{< /admonition >}}
|
||||
|
||||
Another example is:
|
||||
|
||||
```markdown
|
||||
[link{{??}]}(#escape-character)
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
**[link{?]}(#escape-character)** instead of **[link](#escape-character)**.
|
||||
|
|
@ -0,0 +1,404 @@
|
|||
---
|
||||
weight: 2
|
||||
title: "Thème Documentation - Contenu"
|
||||
date: 2020-03-05T16:30:05+08:00
|
||||
lastmod: 2020-03-05T16:30:05+08:00
|
||||
draft: false
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "Découvrez comment créer et organiser votre contenu rapidement et intuitivement dans le thème LoveIt."
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.jpg"
|
||||
|
||||
tags: ["content", "Markdown"]
|
||||
categories: ["documentation"]
|
||||
|
||||
lightgallery: true
|
||||
|
||||
toc:
|
||||
auto: false
|
||||
math:
|
||||
enable: true
|
||||
---
|
||||
|
||||
Découvrez comment créer et organiser votre contenu rapidement et intuitivement dans le thème **LoveIt**.
|
||||
|
||||
<!--more-->
|
||||
|
||||
{{< admonition warning >}}
|
||||
Sorry, this article has not been completely translated into **French**.
|
||||
Welcome to take the time to propose a translation by [:(fas fa-code-branch fa-fw): making a PR](https://github.com/dillonzq/LoveIt/pulls) to the theme!
|
||||
{{< /admonition >}}
|
||||
|
||||
## 1 Contents Organization {#contents-organization}
|
||||
|
||||
A few suggestions to help you get a good looking site quickly:
|
||||
|
||||
* Keep post pages in the `content/posts` directory, for example: `content/posts/my-first-post.md`
|
||||
* Keep other pages in the `content` directory, for example: `content/about.md`
|
||||
* Local resources organization
|
||||
|
||||
{{< admonition note "Local Resource Reference" >}}
|
||||
{{< version 0.2.10 >}}
|
||||
|
||||
There are three ways to reference local resources such as **images** and **music**:
|
||||
|
||||
1. Using [page resources](https://gohugo.io/content-management/page-resources/) in [page bundles](https://gohugo.io/content-management/page-bundles/).
|
||||
You can reference page resources by the value for `Resources.GetMatch` or the filepath of the resource relative to the page directory directly.
|
||||
2. Store resources in the **assets** directory, which is `/assets` by default.
|
||||
The filepath of the resource to reference in the post is relative to the assets directory.
|
||||
3. Store resources in the **static** directory, which is `/static` by default.
|
||||
The filepath of the resource to reference in the post is relative to the static directory.
|
||||
|
||||
The **priority** of references is also in the above order.
|
||||
|
||||
There are many places in the theme where the above local resource references can be used,
|
||||
such as **links**, **images**, `image` shortcode, `music` shortcode and some params in the **front matter**.
|
||||
|
||||
Images in page resources or assets directory [processing](https://gohugo.io/content-management/image-processing/)
|
||||
will be supported in the future.
|
||||
It's really cool! :(far fa-grin-squint fa-fw):
|
||||
{{< /admonition >}}
|
||||
|
||||
## 2 Front Matter {#front-matter}
|
||||
|
||||
**Hugo** allows you to add front matter in `yaml`, `toml` or `json` to your content files.
|
||||
|
||||
{{< admonition >}}
|
||||
**Not all** of the below front matters need to be set in each of your posts.
|
||||
It is necessary only if the front matters and the `page` part in your [site configuration](../theme-documentation-basics#site-configuration) are inconsistent.
|
||||
{{< /admonition >}}
|
||||
|
||||
Here is a front matter example:
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "My First Post"
|
||||
subtitle: ""
|
||||
date: 2020-03-04T15:58:26+08:00
|
||||
lastmod: 2020-03-04T15:58:26+08:00
|
||||
draft: true
|
||||
author: ""
|
||||
authorLink: ""
|
||||
description: ""
|
||||
license: ""
|
||||
images: []
|
||||
|
||||
tags: []
|
||||
categories: []
|
||||
featuredImage: ""
|
||||
featuredImagePreview: ""
|
||||
|
||||
hiddenFromHomePage: false
|
||||
hiddenFromSearch: false
|
||||
twemoji: false
|
||||
lightgallery: true
|
||||
ruby: true
|
||||
fraction: true
|
||||
fontawesome: true
|
||||
linkToMarkdown: true
|
||||
rssFullText: false
|
||||
|
||||
toc:
|
||||
enable: true
|
||||
auto: true
|
||||
code:
|
||||
copy: true
|
||||
# ...
|
||||
math:
|
||||
enable: true
|
||||
# ...
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
# ...
|
||||
share:
|
||||
enable: true
|
||||
# ...
|
||||
comment:
|
||||
enable: true
|
||||
# ...
|
||||
library:
|
||||
css:
|
||||
# someCSS = "some.css"
|
||||
# located in "assets/"
|
||||
# Or
|
||||
# someCSS = "https://cdn.example.com/some.css"
|
||||
js:
|
||||
# someJS = "some.js"
|
||||
# located in "assets/"
|
||||
# Or
|
||||
# someJS = "https://cdn.example.com/some.js"
|
||||
seo:
|
||||
images: []
|
||||
# ...
|
||||
---
|
||||
```
|
||||
|
||||
* **title**: the title for the content.
|
||||
* **subtitle**: {{< version 0.2.0 >}} the subtitle for the content.
|
||||
* **date**: the datetime assigned to this page, which is usually fetched from the `date` field in front matter, but this behaviour is configurabl in the [site configuration](../theme-documentation-basics#site-configuration).
|
||||
* **lastmod**: the datetime at which the content was last modified.
|
||||
* **draft**: if `true`, the content will not be rendered unless the `--buildDrafts`/`-D` flag is passed to the `hugo` command.
|
||||
* **author**: the author for the content.
|
||||
* **authorLink**: the link of the author.
|
||||
* **description**: the description for the content.
|
||||
* **license**: the special lisence for this content.
|
||||
* **images**: page images for Open Graph and Twitter Cards.
|
||||
|
||||
* **tags**: the tags for the content.
|
||||
* **categories**: the categories for the content.
|
||||
* **featuredImage**: the featured image for the content.
|
||||
* **featuredImagePreview**: the featured image for the content preview in the home page.
|
||||
|
||||
* **hiddenFromHomePage**: if `true`, the content will not be shown in the home page.
|
||||
* **hiddenFromSearch**: {{< version 0.2.0 >}} if `true`, the content will not be shown in the search results.
|
||||
* **twemoji**: {{< version 0.2.0 >}} if `true`, the content will enable the twemoji.
|
||||
* **lightgallery**: if `true`, images in the content will be shown as the gallery.
|
||||
* **ruby**: {{< version 0.2.0 >}} if `true`, the content will enable the [ruby extended syntax](#ruby).
|
||||
* **fraction**: {{< version 0.2.0 >}} if `true`, the content will enable the [fraction extended syntax](#fraction).
|
||||
* **fontawesome**: {{< version 0.2.0 >}} if `true`, the content will enable the [Font Awesome extended syntax](#fontawesome).
|
||||
* **linkToMarkdown**: if `true`, the footer of the content will be shown the link to the orignal Markdown file.
|
||||
* **rssFullText**: {{< version 0.2.4 >}} if `true`, the full text content will be shown in RSS.
|
||||
|
||||
* **toc**: {{< version 0.2.9 changed >}} the same as the `params.page.toc` part in the [site configuration](../theme-documentation-basics#site-configuration).
|
||||
* **code**: {{< version 0.2.0 >}} the same as the `params.page.code` part in the [site configuration](../theme-documentation-basics#site-configuration).
|
||||
* **math**: {{< version 0.2.0 changed >}} the same as the `params.page.math` part in the [site configuration](../theme-documentation-basics#site-configuration).
|
||||
* **mapbox**: {{< version 0.2.0 >}} the same as the `params.page.mapbox` part in the [site configuration](../theme-documentation-basics#site-configuration).
|
||||
* **share**: the same as the `params.page.share` part in the [site configuration](../theme-documentation-basics#site-configuration).
|
||||
* **comment**: {{< version 0.2.0 changed >}} the same as the `params.page.comment` part in the [site configuration](../theme-documentation-basics#site-configuration).
|
||||
* **library**: {{< version 0.2.7 >}} the same as the `params.page.library` part in the [site configuration](../theme-documentation-basics#site-configuration).
|
||||
* **seo**: {{< version 0.2.10 >}} the same as the `params.page.seo` part in the [site configuration](../theme-documentation-basics#site-configuration).
|
||||
|
||||
{{< admonition tip >}}
|
||||
{{< version 0.2.10 >}}
|
||||
|
||||
**featuredImage** and **featuredImagePreview** support the complete usage of [local resource references](#contents-organization).
|
||||
|
||||
If the page resource with `name: featured-image` or `name: featured-image-preview` is set in the front matter,
|
||||
it is not necessary to set the parameter `featuredImage` or `featuredImagePreview`:
|
||||
|
||||
```yaml
|
||||
resources:
|
||||
- name: featured-image
|
||||
src: featured-image.jpg
|
||||
- name: featured-image-preview
|
||||
src: featured-image-preview.jpg
|
||||
```
|
||||
{{< /admonition >}}
|
||||
|
||||
## 3 Content Summaries
|
||||
|
||||
**LoveIt** theme uses the summary of the content to display abstract information in the home page. Hugo can generate summaries of your content.
|
||||
|
||||
|
||||
|
||||
### Automatic Summary Splitting
|
||||
|
||||
By default, Hugo automatically takes the first 70 words of your content as its summary.
|
||||
|
||||
You may customize the summary length by setting `summaryLength` in the [site configuration](../theme-documentation-basics#site-configuration).
|
||||
|
||||
If you are creating content in a [CJK]^(Chinese/Japanese/Korean) language and want to use Hugo’s automatic summary splitting, set `hasCJKLanguage` to `true` in your [site configuration](../theme-documentation-basics#site-configuration).
|
||||
|
||||
### Manual Summary Splitting
|
||||
|
||||
Alternatively, you may add the `<!--more-->` summary divider where you want to split the article.
|
||||
|
||||
Content that comes before the summary divider will be used as that content’s summary.
|
||||
|
||||
{{< admonition >}}
|
||||
Be careful to enter `<!--more-->` exactly; i.e., all lowercase and with no whitespace.
|
||||
{{< /admonition >}}
|
||||
|
||||
### Front Matter Summary
|
||||
|
||||
You might want your summary to be something other than the text that starts the article. In this case you can provide a separate summary in the `summary` variable of the article front matter.
|
||||
|
||||
### Use Description as Summary
|
||||
|
||||
You might want your description in the `description` variable of the article front matter as the summary.
|
||||
|
||||
You may add the `<!--more-->` summary divider at the start of the article. Keep content that comes before the summary divider empty. Then **LoveIt** theme will use your description as the summary.
|
||||
|
||||
### Priority Order of Summary Selection
|
||||
|
||||
Because there are multiple ways in which a summary can be specified it is useful to understand the order. It is as follows:
|
||||
|
||||
1. If there is a `<!--more-->` summary divider present in the article but no content is before the divider, the description will be used as the summary.
|
||||
2. If there is a `<!--more-->` summary divider present in the article the text up to the divider will be provided as per the manual summary split method.
|
||||
3. If there is a summary variable in the article front matter the value of the variable will be provided as per the front matter summary method.
|
||||
4. The text at the start of the article will be provided as per the automatic summary split method.
|
||||
|
||||
{{< admonition >}}
|
||||
It is not recommended to include rich text block elements in the summary, which will cause typographic errors. Such as code blocks, pictures, tables, etc.
|
||||
{{< /admonition >}}
|
||||
|
||||
## 4 Basic Markdown Syntax
|
||||
|
||||
This part is shown in the [basic markdown syntax page](../basic-markdown-syntax/).
|
||||
|
||||
## 5 Extended Markdown Syntax {#extended-markdown-syntax}
|
||||
|
||||
**LoveIt** theme has some extended syntax elements for you to write articles.
|
||||
|
||||
### Emoji Support
|
||||
|
||||
This part is shown in the [emoji support page](../emoji-support/).
|
||||
|
||||
### Mathematical Formula
|
||||
|
||||
**LoveIt** theme supports mathematical formulas based on [$ \KaTeX $](https://katex.org/).
|
||||
|
||||
Set the property `enable = true` under `[params.math]` in your [site configuration](../theme-documentation-basics#site-configuration)
|
||||
and the property `math: true` of the article front matter to enable the automatic rendering of mathematical formulas.
|
||||
|
||||
{{< admonition tip >}}
|
||||
Here is a list of [$ \TeX $ functions supported by $ \KaTeX $](https://katex.org/docs/supported.html).
|
||||
{{< /admonition >}}
|
||||
|
||||
#### Block Formula
|
||||
|
||||
The default block delimiters are `$$`/`$$` and `\\[`/`\\]`:
|
||||
|
||||
```markdown
|
||||
$$ c = \pm\sqrt{a^2 + b^2} $$
|
||||
|
||||
\\[ f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \\]
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
$$ c = \pm\sqrt{a^2 + b^2} $$
|
||||
|
||||
\\[ f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \\]
|
||||
|
||||
#### Inline Formula
|
||||
|
||||
The default inline delimiters are `$`/`$` and `\\(`/`\\)`:
|
||||
|
||||
```markdown
|
||||
$ c = \pm\sqrt{a^2 + b^2} $ and \\( f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \\)
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
$ c = \pm\sqrt{a^2 + b^2} $ and \\( f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \\)
|
||||
|
||||
{{< admonition tip >}}
|
||||
You can add more block and inline delimiters in your [site configuration](../theme-documentation-basics#site-configuration).
|
||||
{{< /admonition >}}
|
||||
|
||||
#### Copy-tex
|
||||
|
||||
**[Copy-tex](https://github.com/Khan/KaTeX/tree/master/contrib/copy-tex)** is an extension for **$ \KaTeX $**.
|
||||
|
||||
By the extension, when selecting and copying $ \KaTeX $ rendered elements, copies their $ \LaTeX $ source to the clipboard.
|
||||
|
||||
Set the property `copyTex = true` under `[params.math]` in your [site configuration](../theme-documentation-basics#site-configuration) to enable Copy-tex.
|
||||
|
||||
Select and copy the formula rendered in the previous section, and you can find that the copied content is the LaTeX source code.
|
||||
|
||||
#### mhchem
|
||||
|
||||
**[mhchem](https://github.com/Khan/KaTeX/tree/master/contrib/mhchem)** is an extension for **$ \KaTeX $**.
|
||||
|
||||
By the extension, you can write beautiful chemical equations easily in the article.
|
||||
|
||||
Set the property `mhchem = true` under `[params.math]` in your [site configuration](../theme-documentation-basics#site-configuration) to enable mhchem.
|
||||
|
||||
```markdown
|
||||
$$ \ce{CO2 + C -> 2 CO} $$
|
||||
|
||||
$$ \ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-} $$
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
$$ \ce{CO2 + C -> 2 CO} $$
|
||||
|
||||
$$ \ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-} $$
|
||||
|
||||
### Ruby Annotation {#ruby}
|
||||
|
||||
An extended Markdown syntax for **ruby annotation** is supported in **LoveIt** theme:
|
||||
|
||||
```markdown
|
||||
[Hugo]{?^}(An open-source static site generator)
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
[Hugo]^(An open-source static site generator)
|
||||
|
||||
### Fraction {#fraction}
|
||||
|
||||
{{< version 0.2.0 >}}
|
||||
|
||||
An extended Markdown syntax for **fraction** is supported in **LoveIt** theme:
|
||||
|
||||
```markdown
|
||||
[Light]{?/}[Dark]
|
||||
|
||||
[99]{?/}[100]
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
[Light]/[Dark]
|
||||
|
||||
[90]/[100]
|
||||
|
||||
### Font Awesome {#fontawesome}
|
||||
|
||||
**LoveIt** theme uses [Font Awesome](https://fontawesome.com/) as the icon library.
|
||||
You can easily use these icons in your articles.
|
||||
|
||||
Get the `class` of icons you wanted from the [Font Awesome website](https://fontawesome.com/icons?d=gallery).
|
||||
|
||||
```markdown
|
||||
Gone camping! {?:}(fas fa-campground fa-fw): Be back soon.
|
||||
|
||||
That is so funny! {?:}(far fa-grin-tears):
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
Gone camping! :(fas fa-campground fa-fw): Be back soon.
|
||||
|
||||
That is so funny! :(far fa-grin-tears):
|
||||
|
||||
### Escape character {#escape-character}
|
||||
|
||||
In some special cases (when writing this theme documentation :(far fa-grin-squint-tears):),
|
||||
your content will conflict with basic or extended Markdown syntax, and it is inevitable.
|
||||
|
||||
The escape character syntax can help you build the content you wanted:
|
||||
|
||||
```markdown
|
||||
{{??}X} -> X
|
||||
```
|
||||
|
||||
For example, two `:` will enable emoji syntax, which is not the behavior you want. The escape character syntax is like this:
|
||||
|
||||
```markdown
|
||||
{{??}:}joy:
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
**{?:}joy{?:}** instead of **:joy:**
|
||||
|
||||
{{< admonition tip >}}
|
||||
This is related to **[an issue for Hugo](https://github.com/gohugoio/hugo/issues/4978)**, which has not been resolved.
|
||||
{{< /admonition >}}
|
||||
|
||||
Another example is:
|
||||
|
||||
```markdown
|
||||
[link{{??}]}(#escape-character)
|
||||
```
|
||||
|
||||
The rendered output looks like this:
|
||||
|
||||
**[link{?]}(#escape-character)** instead of **[link](#escape-character)**.
|
||||
|
|
@ -0,0 +1,398 @@
|
|||
---
|
||||
weight: 2
|
||||
title: "主题文档 - 内容"
|
||||
date: 2020-03-05T16:30:05+08:00
|
||||
lastmod: 2020-03-05T16:30:05+08:00
|
||||
draft: false
|
||||
author: "Dillon"
|
||||
authorLink: "https://dillonzq.com"
|
||||
description: "了解如何在 LoveIt 主题中快速, 直观地创建和组织内容."
|
||||
resources:
|
||||
- name: "featured-image"
|
||||
src: "featured-image.jpg"
|
||||
|
||||
tags: ["content", "Markdown"]
|
||||
categories: ["documentation"]
|
||||
|
||||
lightgallery: true
|
||||
|
||||
toc:
|
||||
auto: false
|
||||
math:
|
||||
enable: true
|
||||
---
|
||||
|
||||
了解如何在 **LoveIt** 主题中快速, 直观地创建和组织内容.
|
||||
|
||||
<!--more-->
|
||||
|
||||
## 1 内容组织 {#contents-organization}
|
||||
|
||||
以下是一些方便你清晰管理和生成文章的目录结构建议:
|
||||
|
||||
* 保持博客文章存放在 `content/posts` 目录, 例如: `content/posts/我的第一篇文章.md`
|
||||
* 保持简单的静态页面存放在 `content` 目录, 例如: `content/about.md`
|
||||
* 本地资源组织
|
||||
|
||||
{{< admonition note "本地资源引用" >}}
|
||||
{{< version 0.2.10 >}}
|
||||
|
||||
有三种方法来引用**图片**和**音乐**等本地资源:
|
||||
|
||||
1. 使用[页面包](https://gohugo.io/content-management/page-bundles/)中的[页面资源](https://gohugo.io/content-management/page-resources/).
|
||||
你可以使用适用于 `Resources.GetMatch` 的值或者直接使用相对于当前页面目录的文件路径来引用页面资源.
|
||||
2. 将本地资源放在 **assets** 目录中, 默认路径是 `/assets`.
|
||||
引用资源的文件路径是相对于 assets 目录的.
|
||||
3. 将本地资源放在 **static** 目录中, 默认路径是 `/static`.
|
||||
引用资源的文件路径是相对于 static 目录的.
|
||||
|
||||
引用的**优先级**符合以上的顺序.
|
||||
|
||||
在这个主题中的很多地方可以使用上面的本地资源引用,
|
||||
例如 **链接**, **图片**, `image` shortcode, `music` shortcode 和**前置参数**中的部分参数.
|
||||
|
||||
页面资源或者 **assets** 目录中的[图片处理](https://gohugo.io/content-management/image-processing/)会在未来的版本中得到支持.
|
||||
非常酷的功能! :(far fa-grin-squint fa-fw):
|
||||
{{< /admonition >}}
|
||||
|
||||
## 2 前置参数 {#front-matter}
|
||||
|
||||
**Hugo** 允许你在文章内容前面添加 `yaml`, `toml` 或者 `json` 格式的前置参数.
|
||||
|
||||
{{< admonition >}}
|
||||
**不是所有**的以下前置参数都必须在你的每篇文章中设置.
|
||||
只有在文章的参数和你的 [网站设置](../theme-documentation-basics#site-configuration) 中的 `page` 部分不一致时才有必要这么做.
|
||||
{{< /admonition >}}
|
||||
|
||||
这是一个前置参数例子:
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "我的第一篇文章"
|
||||
subtitle: ""
|
||||
date: 2020-03-04T15:58:26+08:00
|
||||
lastmod: 2020-03-04T15:58:26+08:00
|
||||
draft: true
|
||||
author: ""
|
||||
authorLink: ""
|
||||
description: ""
|
||||
license: ""
|
||||
images: []
|
||||
|
||||
tags: []
|
||||
categories: []
|
||||
featuredImage: ""
|
||||
featuredImagePreview: ""
|
||||
|
||||
hiddenFromHomePage: false
|
||||
hiddenFromSearch: false
|
||||
twemoji: false
|
||||
lightgallery: true
|
||||
ruby: true
|
||||
fraction: true
|
||||
fontawesome: true
|
||||
linkToMarkdown: true
|
||||
rssFullText: false
|
||||
|
||||
toc:
|
||||
enable: true
|
||||
auto: true
|
||||
code:
|
||||
copy: true
|
||||
# ...
|
||||
math:
|
||||
enable: true
|
||||
# ...
|
||||
mapbox:
|
||||
accessToken: ""
|
||||
# ...
|
||||
share:
|
||||
enable: true
|
||||
# ...
|
||||
comment:
|
||||
enable: true
|
||||
# ...
|
||||
library:
|
||||
css:
|
||||
# someCSS = "some.css"
|
||||
# 位于 "assets/"
|
||||
# 或者
|
||||
# someCSS = "https://cdn.example.com/some.css"
|
||||
js:
|
||||
# someJS = "some.js"
|
||||
# 位于 "assets/"
|
||||
# 或者
|
||||
# someJS = "https://cdn.example.com/some.js"
|
||||
seo:
|
||||
images: []
|
||||
# ...
|
||||
---
|
||||
```
|
||||
|
||||
* **title**: 文章标题.
|
||||
* **subtitle**: {{< version 0.2.0 >}} 文章副标题.
|
||||
* **date**: 这篇文章创建的日期时间. 它通常是从文章的前置参数中的 `date` 字段获取的, 但是也可以在 [网站配置](../theme-documentation-basics#site-configuration) 中设置.
|
||||
* **lastmod**: 上次修改内容的日期时间.
|
||||
* **draft**: 如果设为 `true`, 除非 `hugo` 命令使用了 `--buildDrafts`/`-D` 参数, 这篇文章不会被渲染.
|
||||
* **author**: 文章作者.
|
||||
* **authorLink**: 文章作者的链接.
|
||||
* **description**: 文章内容的描述.
|
||||
* **license**: 这篇文章特殊的许可.
|
||||
* **images**: 页面图片, 用于 Open Graph 和 Twitter Cards.
|
||||
|
||||
* **tags**: 文章的标签.
|
||||
* **categories**: 文章所属的类别.
|
||||
* **featuredImage**: 文章的特色图片.
|
||||
* **featuredImagePreview**: 用在主页预览的文章特色图片.
|
||||
|
||||
* **hiddenFromHomePage**: 如果设为 `true`, 这篇文章将不会显示在主页上.
|
||||
* **hiddenFromSearch**: {{< version 0.2.0 >}} 如果设为 `true`, 这篇文章将不会显示在搜索结果中.
|
||||
* **twemoji**: {{< version 0.2.0 >}} 如果设为 `true`, 这篇文章会使用 twemoji.
|
||||
* **lightgallery**: 如果设为 `true`, 文章中的图片将可以按照画廊形式呈现.
|
||||
* **ruby**: {{< version 0.2.0 >}} 如果设为 `true`, 这篇文章会使用 [上标注释扩展语法](#ruby).
|
||||
* **fraction**: {{< version 0.2.0 >}} 如果设为 `true`, 这篇文章会使用 [分数扩展语法](#fraction).
|
||||
* **fontawesome**: {{< version 0.2.0 >}} 如果设为 `true`, 这篇文章会使用 [Font Awesome 扩展语法](#fontawesome).
|
||||
* **linkToMarkdown**: 如果设为 `true`, 内容的页脚将显示指向原始 Markdown 文件的链接.
|
||||
* **rssFullText**: {{< version 0.2.4 >}} 如果设为 `true`, 在 RSS 中将会显示全文内容.
|
||||
|
||||
* **toc**: {{< version 0.2.9 changed >}} 和 [网站配置](../theme-documentation-basics#site-configuration) 中的 `params.page.toc` 部分相同.
|
||||
* **code**: {{< version 0.2.0 >}} 和 [网站配置](../theme-documentation-basics#site-configuration) 中的 `params.page.code` 部分相同.
|
||||
* **math**: {{< version 0.2.0 changed >}} 和 [网站配置](../theme-documentation-basics#site-configuration) 中的 `params.page.math` 部分相同.
|
||||
* **mapbox**: {{< version 0.2.0 >}} 和 [网站配置](../theme-documentation-basics#site-configuration) 中的 `params.page.mapbox` 部分相同.
|
||||
* **share**: 和 [网站配置](../theme-documentation-basics#site-configuration) 中的 `params.page.share` 部分相同.
|
||||
* **comment**: {{< version 0.2.0 changed >}} 和 [网站配置](../theme-documentation-basics#site-configuration) 中的 `params.page.comment` 部分相同.
|
||||
* **library**: {{< version 0.2.7 >}} 和 [网站配置](../theme-documentation-basics#site-configuration) 中的 `params.page.library` 部分相同.
|
||||
* **seo**: {{< version 0.2.10 >}} 和 [网站配置](../theme-documentation-basics#site-configuration) 中的 `params.page.seo` 部分相同.
|
||||
|
||||
{{< admonition tip >}}
|
||||
{{< version 0.2.10 >}}
|
||||
|
||||
**featuredImage** 和 **featuredImagePreview** 支持[本地资源引用](#contents-organization)的完整用法.
|
||||
|
||||
如果带有在前置参数中设置了 `name: featured-image` 或 `name: featured-image-preview` 属性的页面资源,
|
||||
没有必要在设置 `featuredImage` 或 `featuredImagePreview`:
|
||||
|
||||
```yaml
|
||||
resources:
|
||||
- name: featured-image
|
||||
src: featured-image.jpg
|
||||
- name: featured-image-preview
|
||||
src: featured-image-preview.jpg
|
||||
```
|
||||
{{< /admonition >}}
|
||||
|
||||
## 3 内容摘要
|
||||
|
||||
**LoveIt** 主题使用内容摘要在主页中显示大致文章信息。Hugo 支持生成文章的摘要.
|
||||
|
||||
|
||||
|
||||
### 自动摘要拆分
|
||||
|
||||
默认情况下, Hugo 自动将内容的前 70 个单词作为摘要.
|
||||
|
||||
你可以通过在 [网站配置](../theme-documentation-basics#site-configuration) 中设置 `summaryLength` 来自定义摘要长度.
|
||||
|
||||
如果您要使用 [CJK]^(中文/日语/韩语) 语言创建内容, 并且想使用 Hugo 的自动摘要拆分功能，请在 [网站配置](../theme-documentation-basics#site-configuration) 中将 `hasCJKLanguage` 设置为 `true`.
|
||||
|
||||
### 手动摘要拆分
|
||||
|
||||
另外, 你也可以添加 `<!--more-->` 摘要分割符来拆分文章生成摘要.
|
||||
|
||||
摘要分隔符之前的内容将用作该文章的摘要.
|
||||
|
||||
{{< admonition >}}
|
||||
请小心输入`<!--more-->` ; 即全部为小写且没有空格.
|
||||
{{< /admonition >}}
|
||||
|
||||
### 前置参数摘要
|
||||
|
||||
你可能希望摘要不是文章开头的文字. 在这种情况下, 你可以在文章前置参数的 `summary` 变量中设置单独的摘要.
|
||||
|
||||
### 使用文章描述作为摘要
|
||||
|
||||
你可能希望将文章前置参数中的 `description` 变量的内容作为摘要.
|
||||
|
||||
你仍然需要在文章开头添加 `<!--more-->` 摘要分割符. 将摘要分隔符之前的内容保留为空. 然后 **LoveIt** 主题会将你的文章描述作为摘要.
|
||||
|
||||
### 摘要选择的优先级顺序
|
||||
|
||||
由于可以通过多种方式指定摘要, 因此了解顺序很有用. 如下:
|
||||
|
||||
1. 如果文章中有 `<!--more-->` 摘要分隔符, 但分隔符之前没有内容, 则使用描述作为摘要.
|
||||
2. 如果文章中有 `<!--more-->` 摘要分隔符, 则将按照手动摘要拆分的方法获得摘要.
|
||||
3. 如果文章前置参数中有摘要变量, 那么将以该值作为摘要.
|
||||
4. 按照自动摘要拆分方法.
|
||||
|
||||
{{< admonition >}}
|
||||
不建议在摘要内容中包含富文本块元素, 这会导致渲染错误. 例如代码块, 图片, 表格等.
|
||||
{{< /admonition >}}
|
||||
|
||||
## 4 Markdown 基本语法
|
||||
|
||||
这部分内容在 [Markdown 基本语法页面](../basic-markdown-syntax/) 中介绍.
|
||||
|
||||
## 5 Markdown 扩展语法 {#extended-markdown-syntax}
|
||||
|
||||
**LoveIt** 主题提供了一些扩展的语法便于你撰写文章.
|
||||
|
||||
### Emoji 支持
|
||||
|
||||
这部分内容在 [Emoji 支持页面](../emoji-support/) 中介绍.
|
||||
|
||||
### 数学公式
|
||||
|
||||
**LoveIt** 基于 [$ \KaTeX $](https://katex.org/) 提供数学公式的支持.
|
||||
|
||||
在你的 [网站配置](../theme-documentation-basics#site-configuration) 中的 `[params.math]` 下面设置属性 `enable = true`,
|
||||
并在文章的前置参数中设置属性 `math: true`来启用数学公式的自动渲染.
|
||||
|
||||
{{< admonition tip >}}
|
||||
有一份 [$ \KaTeX $ 中支持的 $ \TeX $ 函数](https://katex.org/docs/supported.html) 清单.
|
||||
{{< /admonition >}}
|
||||
|
||||
#### 公式块
|
||||
|
||||
默认的公式块分割符是 `$$`/`$$` 和 `\\[`/`\\]`:
|
||||
|
||||
```markdown
|
||||
$$ c = \pm\sqrt{a^2 + b^2} $$
|
||||
|
||||
\\[ f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \\]
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
$$ c = \pm\sqrt{a^2 + b^2} $$
|
||||
|
||||
\\[ f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \\]
|
||||
|
||||
#### 行内公式
|
||||
|
||||
默认的行内公式分割符是 `$`/`$` 和 `\\(`/`\\)`:
|
||||
|
||||
```markdown
|
||||
$ c = \pm\sqrt{a^2 + b^2} $ 和 \\( f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \\)
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
$ c = \pm\sqrt{a^2 + b^2} $ 和 \\( f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \\)
|
||||
|
||||
{{< admonition tip >}}
|
||||
你可以在 [网站配置](../theme-documentation-basics#site-configuration) 中自定义公式块和行内公式的分割符.
|
||||
{{< /admonition >}}
|
||||
|
||||
#### Copy-tex
|
||||
|
||||
**[Copy-tex](https://github.com/Khan/KaTeX/tree/master/contrib/copy-tex)** 是一个 **$ \KaTeX $** 的插件.
|
||||
|
||||
通过这个扩展, 在选择并复制 $ \KaTeX $ 渲染的公式时, 会将其 $ \LaTeX $ 源代码复制到剪贴板.
|
||||
|
||||
在你的 [网站配置](../theme-documentation-basics#site-configuration) 中的 `[params.math]` 下面设置属性 `copyTex = true` 来启用 Copy-tex.
|
||||
|
||||
选择并复制上一节中渲染的公式, 可以发现复制的内容为 LaTeX 源代码.
|
||||
|
||||
#### mhchem
|
||||
|
||||
**[mhchem](https://github.com/Khan/KaTeX/tree/master/contrib/mhchem)** 是一个 **$ \KaTeX $** 的插件.
|
||||
|
||||
通过这个扩展, 你可以在文章中轻松编写漂亮的化学方程式.
|
||||
|
||||
在你的 [网站配置](../theme-documentation-basics#site-configuration) 中的 `[params.math]` 下面设置属性 `mhchem = true` 来启用 mhchem.
|
||||
|
||||
```markdown
|
||||
$$ \ce{CO2 + C -> 2 CO} $$
|
||||
|
||||
$$ \ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-} $$
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
$$ \ce{CO2 + C -> 2 CO} $$
|
||||
|
||||
$$ \ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-} $$
|
||||
|
||||
### 字符注音或者注释 {#ruby}
|
||||
|
||||
**LoveIt** 主题支持一种 **字符注音或者注释** Markdown 扩展语法:
|
||||
|
||||
```markdown
|
||||
[Hugo]{?^}(一个开源的静态网站生成工具)
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
[Hugo]^(一个开源的静态网站生成工具)
|
||||
|
||||
### 分数 {#fraction}
|
||||
|
||||
{{< version 0.2.0 >}}
|
||||
|
||||
**LoveIt** 主题支持一种 **分数** Markdown 扩展语法:
|
||||
|
||||
```markdown
|
||||
[浅色]{?/}[深色]
|
||||
|
||||
[99]{?/}[100]
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
[浅色]/[深色]
|
||||
|
||||
[90]/[100]
|
||||
|
||||
### Font Awesome {#fontawesome}
|
||||
|
||||
**LoveIt** 主题使用 [Font Awesome](https://fontawesome.com/) 作为图标库.
|
||||
你同样可以在文章中轻松使用这些图标.
|
||||
|
||||
从 [Font Awesome 网站](https://fontawesome.com/icons?d=gallery) 上获取所需的图标 `class`.
|
||||
|
||||
```markdown
|
||||
去露营啦! {?:}(fas fa-campground fa-fw): 很快就回来.
|
||||
|
||||
真开心! {?:}(far fa-grin-tears):
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
去露营啦! :(fas fa-campground fa-fw): 很快就回来.
|
||||
|
||||
真开心! :(far fa-grin-tears):
|
||||
|
||||
### 转义字符 {#escape-character}
|
||||
|
||||
在某些特殊情况下 (编写这个主题文档时 :(far fa-grin-squint-tears):),
|
||||
你的文章内容会与 Markdown 的基本或者扩展语法冲突, 并且无法避免.
|
||||
|
||||
转义字符语法可以帮助你渲染出想要的内容:
|
||||
|
||||
```markdown
|
||||
{{??}X} -> X
|
||||
```
|
||||
|
||||
例如, 两个 `:` 会启用 emoji 语法. 但有时候这不是你想要的结果. 可以像这样使用转义字符语法:
|
||||
|
||||
```markdown
|
||||
{{??}:}joy:
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
**{?:}joy{?:}** 而不是 **:joy:**
|
||||
|
||||
{{< admonition tip >}}
|
||||
这个方法可以间接解决一个还未解决的 **[Hugo 的 issue](https://github.com/gohugoio/hugo/issues/4978)**.
|
||||
{{< /admonition >}}
|
||||
|
||||
另一个例子是:
|
||||
|
||||
```markdown
|
||||
[link{{??}]}(#escape-character)
|
||||
```
|
||||
|
||||
呈现的输出效果如下:
|
||||
|
||||
**[link{?]}(#escape-character)** 而不是 **[link](#escape-character)**.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 272 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 269 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 160 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -0,0 +1,3 @@
|
|||
---
|
||||
title: "配置"
|
||||
---
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
---
|
||||
title: "contenu"
|
||||
---
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
---
|
||||
title: "内容"
|
||||
---
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
---
|
||||
title: "安装"
|
||||
---
|
||||
Loading…
Add table
Add a link
Reference in a new issue