diff options
| author | Dillon <dillonzq@outlook.com> | 2020-03-08 16:02:21 +0300 |
|---|---|---|
| committer | Dillon <dillonzq@outlook.com> | 2020-03-08 16:02:21 +0300 |
| commit | 296424cded8ad1d548f7e3f891ef1f492b3f85b6 (patch) | |
| tree | 242e33b08f2538e4c5341e39d730d1a6f479de8e | |
| parent | b1f2de1987507c5c9f757b6da7bfb0593ebd3804 (diff) | |
feature(doc): complete all Chinese and English documents and fix many bugs
76 files changed, 13278 insertions, 2445 deletions
@@ -1,8 +1,9 @@ # Hugo default output directory public/ /exampleSite/resources/ -/exampleSite/zh/resources/ + node_modules/ +build/ ## OS Files # Windows @@ -1,8 +1,8 @@ -# LoveIt Theme | Hugo +# LoveIt Theme | Hugo [](https://app.netlify.com/sites/hugo-loveit-en/deploys) -[](https://app.netlify.com/sites/hugo-loveit-en/deploys) +[](https://github.com/dillonzq/LoveIt/releases) [](https://gohugo.io/) [](https://github.com/dillonzq/LoveIt/blob/master/LICENSE) [](https://app.circleci.com/pipelines/github/dillonzq/LoveIt) -English README | [中文说明](README.zh.md) +English README | [中文说明](README.zh-cn.md) **LoveIt** is a **clean**, **elegant** but **advanced** blog theme for [Hugo](https://gohugo.io/). @@ -21,29 +21,29 @@ To see this theme in action, here is a live [demo site](https://hugo-loveit-en.n Compared to the original LeaveIt theme and the KeepIt theme, the LoveIt theme has the following modifications. -* Fixed title bar -* System native fonts -* Home subtitles typewriter effect -* A new list of home posts, compatible with the latest version of Hugo -* Replace all theme icons with [Font Awesome](https://fontawesome.com/) -* A lot of style detail adjustments, including color, font size, margins, code preview style -* More readable dark mode -* Some beautiful CSS animations -* Easy-to-use and self-expanding article catalog, while adapting to the mobile side -* More suitable as a blog theme, the gallery function has been removed, but the image is lazy loaded to improve performance -* Extended markdown syntax for [Font Awesome](https://fontawesome.com/) icons -* Math formula support by [Katex](https://katex.org/) -* Diagram syntax shortcode support by [mermaid](https://github.com/knsv/mermaid) -* Embedded music player support by [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS) -* Bilibili player support -* Kinds of admonitions shortcode support -* Custom align and float style shortcodes support -* CDN for all third-party libraries support +* Custom **Header** +* Custom **CSS Style** +* A new **home page**, compatible with the latest version of Hugo +* A lot of **style detail adjustments,** including color, font size, margins, code preview style +* More readable **dark mode** +* Some beautiful **CSS animations** +* Easy-to-use and self-expanding **table of contents** +* Extended markdown syntax for **[Font Awesome](https://fontawesome.com/) icons** +* Extended markdown syntax for **ruby annotation** +* **Mathematical formula** support by [Katex](https://katex.org/) +* **Diagram syntax** shortcode support by [mermaid](https://github.com/knsv/mermaid) +* **Interactive data visualization** shortcode supported by [ECharts](https://echarts.apache.org/) +* Embedded **music player** support by [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS) +* **Bilibili** player support +* Kinds of **admonitions** shortcode support +* Custom style shortcodes support +* **CDN** for all third-party libraries support +* ... In short, if you prefer the design language and freedom of the LoveIt theme, if you want to use the extended Font Awesome icons conveniently, -if you want to embed math formulas, flowcharts, music or Bilibili videos in your posts, +if you want to embed mathematical formulas, flowcharts, music or Bilibili videos in your posts, the LoveIt theme may be more suitable for you. I hope you will LoveIt ❤️! @@ -52,129 +52,59 @@ I hope you will LoveIt ❤️! ### Performance and SEO -* Optimized for performance: 99/100 on mobile and 100/100 on desktop in [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights) -* Optimized SEO performance with a correct SEO SCHEMA based on JSON-LD -* [Google Analytics](https://analytics.google.com/analytics) support -* Search engine verification support (Google, Bind, Yandex and Baidu) -* CDN for all third-party libraries support -* Automatically converted images with Lazy Load by [lazysizes](https://github.com/aFarkas/lazysizes) +* Optimized for **performance**: 99/100 on mobile and 100/100 on desktop in [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights) +* Optimized SEO performance with a correct **SEO SCHEMA** based on JSON-LD +* [**Google Analytics**](https://analytics.google.com/analytics) support +* Search engine **verification** support (Google, Bind, Yandex and Baidu) +* **CDN** for third-party libraries support +* Automatically converted images with **Lazy Load** by [lazysizes](https://github.com/aFarkas/lazysizes) ### Appearance and Layout -* Desktops/Mobiles Responsive layout -* Dark/Light Mode -* A More coerent style beetwen page and sections -* Pagination support -* Easy-to-use and self-expanding article catalog, while adapting to the mobile side -* Multilanguage support and I18N ready -* Beautiful CSS animation +* **Responsive** layout +* **Dark/Light** mode +* Globally consistent **design language** +* **Pagination** support +* Easy-to-use and self-expanding **table of contents** +* **Multilanguage** support and i18n ready +* Beautiful **CSS animation** ### Social and Comment Systems -* Gravatar support by [Gravatar](https://gravatar.com) -* Local Avatar support -* Up to 54 social sites supported -* Share post support -* Disqus comment system support by [Disqus](https://disqus.com) -* Gitalk comment system support by [Gitalk](https://github.com/gitalk/gitalk) -* Valine comment system support by [Valine](https://valine.js.org/) -* Facebook comment system support by [Facebook](https://developers.facebook.com/docs/plugins/comments/) +* **Gravatar** supported by [Gravatar](https://gravatar.com) +* Local **Avatar** support +* Up to **59** social sites supported +* Up to **28** share sites support +* **Disqus** comment system supported by [Disqus](https://disqus.com) +* **Gitalk** comment system supported by [Gitalk](https://github.com/gitalk/gitalk) +* **Valine** comment system supported by [Valine](https://valine.js.org/) +* **Facebook comments** system supported by [Facebook](https://developers.facebook.com/docs/plugins/comments/) ### Extended Features -* Automatically highlighting code by chroma in Hugo -* Extended markdown syntax for [Font Awesome](https://fontawesome.com/) icons -* Math formula support by [Katex](https://katex.org/) -* Diagram syntax shortcode support by [mermaid](https://github.com/knsv/mermaid) -* Embedded music player support by [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS) -* Bilibili player support -* Kinds of admonitions shortcode support -* Custom align and float style shortcodes support -* Animated typing support by [TypeIt](https://typeitjs.com/) -* Dynamic to top support by [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll) +* Automatically **highlighting** code +* **Images gallery** supported by [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js) +* Extended markdown syntax for **[Font Awesome](https://fontawesome.com/) icons** +* Extended markdown syntax for **ruby annotation** +* **Mathematical formula** supported by [Katex](https://katex.org/) +* **Diagrams** shortcode supported by [mermaid](https://github.com/knsv/mermaid) +* **Interactive data visualization** shortcode supported by [ECharts](https://echarts.apache.org/) +* **Music player** shortcode supported by [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS) +* **Bilibili player** shortcode +* Kinds of **admonitions** shortcode +* **Custom style** shortcode +* **Animated typing** supported by [TypeIt](https://typeitjs.com/) +* **Dynamic scroll** supported by [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll) * ... -## Getting Started - -Clone this repository to your hugo theme directory. - -```bash - cd themes - git clone https://github.com/dillonzq/LoveIt.git -``` - -Or, make this repository a submodule of your site directory. - -```bash - git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt -``` - -Next, open `config.toml` in the base of the Hugo site and ensure the theme option is set to KeepIt: - -```bash - theme = "LoveIt" -``` - -For more information read the [official setup guide](https://gohugo.io/documentation/) of Hugo. - -## Site Configuration - -Take a look in the `exampleSite` folder. - -This directory contains an example config file and the content for the demo for `en` and `zh` languages. -It serves as an example setup for your website. - -Copy the `config.toml` to the root directory of your website. Overwrite the existing config file if necessary. - -## Content Suggestions - -A few suggestions to help you get a good looking site quickly: - -* Keep blog posts in the `content/posts` directory, for example: `content/posts/my-first-post.md` -* Keep static pages in the `content` directory, for example: `content/about.md` -* Keep media like images in the `static` directory, for example: `static/images/2019/9/screenshot.png` - -## Customizing styles for your website - -If you want to change some styling to fit your own website needs, you can edit them: - -* `assets/css/_varibales.scss`: You can override the variables in `_variables.scss` to customize the style -* `assets/css/_custom.scss`: You can put your custom css in this file - -## Favicons, Browserconfig, Manifest - -It is recommended to put your own favicons - -* apple-touch-icon.png (180x180) -* favicon-32x32.png (32x32) -* favicon-16x16.png (16x16) -* mstile-150x150.png (150x150) -* android-chrome-192x192.png (192x192) -* android-chrome-512x512.png (512x512) - -into `/static`. They’re easily created via [https://realfavicongenerator.net/](https://realfavicongenerator.net/). - -Customize `browserconfig.xml` and `site.webmanifest` to set theme-color and background-color. - -## Tips - -### How to toggle dark-light mode - -* You can click the circle icon to toggle dark-light mode. In the desktop version the circle icon is to the right and in the mobile version is positioned to the left, close to the site title. -* If you want to make your own theme toggle-able element, you can create an element with a class `.theme-switch`. See [here](https://github.com/dillonzq/LoveIt/blob/master/assets/js/blog.js#L14) - -### Home Post model - -If you want to show posts on index instead of a personal profile, just open `config.toml`, add the following line: - -```toml - [params] - home_mode = "post" -``` +## Documentation -### Add logo and cover for SEO +* [Documentation Page](https://hugo-loveit-en.netlify.com/categories/documentation/) +* Build Documentation Locally: -Add a logo image (127x40) and a cover image (800x600) in the `static` directory. + ```bash + hugo server --source=exampleSite + ``` ## Questions, ideas, bugs, pull requests @@ -187,17 +117,19 @@ LoveIt is licensed under the MIT license. Check the [LICENSE file](https://githu Thanks to the authors of following resources included in the theme: * [Font Awesome](https://fontawesome.com/) +* [Fork Awesome](https://forkaweso.me/Fork-Awesome/) * [Animate.css](https://daneden.github.io/animate.css/) * [lazysizes](https://github.com/aFarkas/lazysizes) +* [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js) * [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll) * [TypeIt](https://typeitjs.com/) * [Katex](https://katex.org/) * [mermaid](https://github.com/knsv/mermaid) +* [ECharts](https://echarts.apache.org/) * [APlayer](https://github.com/MoePlayer/APlayer) * [MetingJS](https://github.com/metowolf/MetingJS) * [Gitalk](https://github.com/gitalk/gitalk) * [Valine](https://valine.js.org/) -* [Facebook](https://developers.facebook.com/docs/plugins/comments/) ## Author diff --git a/README.zh-cn.md b/README.zh-cn.md new file mode 100644 index 0000000..2a3fa33 --- /dev/null +++ b/README.zh-cn.md @@ -0,0 +1,131 @@ +# LoveIt 主题 | Hugo [](https://app.netlify.com/sites/hugo-loveit-en/deploys) + +[](https://github.com/dillonzq/LoveIt/releases) [](https://gohugo.io/) [](https://github.com/dillonzq/LoveIt/blob/master/LICENSE) [](https://app.circleci.com/pipelines/github/dillonzq/LoveIt) + +[English README](README.md) | 中文说明 + +[LoveIt](https://github.com/dillonzq/LoveIt) 是一个**简洁**、**优雅**且**高效**的 [Hugo](https://gohugo.io/) 博客主题。 + +它的原型基于 [LeaveIt 主题](https://github.com/liuzc/LeaveIt/) 和 [KeepIt 主题](https://github.com/liuzc/LeaveIt/)。 + +由于三个主题外观的相似性，如果你对于它们的不同之处有疑问，请阅读 [为什么选择 LoveIt](#为什么选择-LoveIt)，以便你能选择最适合你的一个。 + + + +## 主题[预览](https://hugo-loveit-en.netlify.com/zh-cn/) + +为了直观地浏览主题特性，这里有一个基于 **LoveIt** 主题渲染的 [预览网站](https://hugo-loveit-zh.netlify.com)。 + +## 为什么选择 LoveIt + +相较于 LeaveIt 主题 和 KeepIt 主题，LoveIt 主题主要有以下修改 + +* 自定义**标题栏** +* 自定义**CSS 样式** +* 焕然一新的**主页**，已经兼容最新版 Hugo +* 大量的**样式细节调整**，包括颜色、字体大小、边距、代码预览样式 +* 可读性更强的**暗黑模式** +* 一些美观的 **CSS 动画** +* 易用和自动展开的**文章目录** +* 支持基于 **[Font Awesome](https://fontawesome.com/) 图标**的扩展 Markdown 语法 +* 支持**上标注释**的扩展 Markdown 语法 +* 支持基于 [Katex](https://katex.org/) 的**数学公式** +* 支持基于 [mermaid](https://github.com/knsv/mermaid) 的**图表**生成功能 +* 支持基于 [ECharts](https://echarts.apache.org/) 的**交互式数据可视化**生成功能 +* 支持基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 的内嵌**音乐播放器** +* 支持内嵌 **Bilibili** 视频 +* 支持多种**注释**的 shortcode +* 支持自定义样式的 shortcode +* 支持所有第三方库的 **CDN** +* ... + +所以，如果你更偏好 LoveIt 主题的设计语言和自由度，如果你想便捷地使用扩展的 Font Awesome 图标，如果你想在文章内嵌数学公式、流程图、音乐或是 Bilibili 视频， +那么，LoveIt 主题可能是更适合你。 +希望你会 LoveIt ❤️! + +## 特性 + +### 性能和 SEO + +* **性能**优化：在 [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights) 中， 99/100 的移动设备得分和 100/100 的桌面设备得分 +* 使用基于 JSON-LD 格式 的 **SEO SCHEMA** 文件进行 SEO 优化 +* 支持 **[Google Analytics](https://analytics.google.com/analytics)** +* 支持搜索引擎的**网站验证** (Google, Bind, Yandex and Baidu) +* 支持所有第三方库的 **CDN** +* 基于 [lazysizes](https://github.com/aFarkas/lazysizes) 自动转换图片为**懒加载** + +### 外观和布局 + +* **响应式**布局 +* **夜晚/白天** 主题模式 +* 全局一致的**设计语言** +* 支持**分页** +* 易用和自动展开的**文章目录** +* 支持**多语言**和国际化 +* 美观的 **CSS 动画** + +### 社交和评论系统 + +* 支持 **[Gravatar](https://gravatar.com)** 头像 +* 支持本地**头像** +* 支持多达 **59** 种社交链接 +* 支持多达 **28** 种网站分享 +* 支持 **[Disqus](https://disqus.com)** 评论系统 +* 支持 **[Gitalk](https://github.com/gitalk/gitalk)** 评论系统 +* 支持 **[Valine](https://valine.js.org/)** 评论系统 +* 支持 **[Facebook](https://developers.facebook.com/docs/plugins/comments/) 评论**系统 + +### 扩展功能 + +* 支持**代码高亮** +* 支持基于 [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js) 的**图片画廊** +* 支持 **[Font Awesome](https://fontawesome.com/) 图标**的扩展 Markdown 语法 +* 支持**上标注释**的扩展 Markdown 语法 +* 支持基于 [Katex](https://katex.org/) 的**数学公式** +* 支持基于 [mermaid](https://github.com/knsv/mermaid) 的**图表** shortcode +* 支持基于 [ECharts](https://echarts.apache.org/) 的**交互式数据可视化** shortcode +* 支持基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 的**音乐播放器** shortcode +* 支持 **Bilibili 视频** shortcode +* 支持多种**注释**的 shortcode +* 支持**自定义样式**的 shortcode +* 支持基于 [TypeIt](https://typeitjs.com/) 的**打字动画** shortcode +* 支持基于 [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll) 的**滚动动画** +* ... + +## 文档 + +* [文档页面](https://hugo-loveit-en.netlify.com/zh-cn/categories/documentation/) +* 在本地构建文档: + + ```bash + hugo server --source=exampleSite + ``` + +## 问题、想法、 bugs 和 PRs + +所有的反馈都是欢迎的！详见 [issue tracker](https://github.com/dillonzq/LoveIt/issues)。 + +## 许可协议 + +LoveIt 根据 MIT 许可协议授权。 更多信息请查看 [LICENSE 文件](https://github.com/dillonzq/LoveIt/blob/master/LICENSE)。 + +LoveIt 主题中用到了以下项目，感谢它们的作者： + +* [Font Awesome](https://fontawesome.com/) +* [Fork Awesome](https://forkaweso.me/Fork-Awesome/) +* [Animate.css](https://daneden.github.io/animate.css/) +* [lazysizes](https://github.com/aFarkas/lazysizes) +* [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js) +* [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll) +* [TypeIt](https://typeitjs.com/) +* [Katex](https://katex.org/) +* [mermaid](https://github.com/knsv/mermaid) +* [ECharts](https://echarts.apache.org/) +* [APlayer](https://github.com/MoePlayer/APlayer) +* [MetingJS](https://github.com/metowolf/MetingJS) +* [Gitalk](https://github.com/gitalk/gitalk) +* [Valine](https://valine.js.org/) + +## 作者 + +[Dillon](https://dillonzq.com) diff --git a/README.zh.md b/README.zh.md deleted file mode 100644 index 2e6374a..0000000 --- a/README.zh.md +++ /dev/null @@ -1,198 +0,0 @@ -# LoveIt 主题 | Hugo - -[](https://app.netlify.com/sites/hugo-loveit-zh/deploys) - -[English README](README.md) | 中文说明 - -[LoveIt](https://github.com/dillonzq/LoveIt) 是一个**简洁**、**优雅**且**高效**的 [Hugo](https://gohugo.io/) 博客主题。 - -它的原型基于 [LeaveIt 主题](https://github.com/liuzc/LeaveIt/) 和 [KeepIt 主题](https://github.com/liuzc/LeaveIt/)。 - -由于三个主题外观的相似性，如果你对于它们的不同之处有疑问，请阅读 [为什么选择 LoveIt](#为什么选择-LoveIt)，以便你能选择最适合你的一个。 - - - -## 主题[预览](https://hugo-loveit-zh.netlify.com) - -为了直观地浏览主题特性，这里有一个基于 **LoveIt** 主题渲染的 [预览网站](https://hugo-loveit-zh.netlify.com)。 - -## 为什么选择 LoveIt - -相较于 LeaveIt 主题 和 KeepIt 主题，LoveIt 主题主要有以下修改 - -* 固定的标题栏 -* 系统原生字体 -* 主页副标题的打字机效果 -* 焕然一新的主页文章列表，已经兼容最新版 Hugo -* 所有主题图标替换为 [Font Awesome](https://fontawesome.com/) -* 大量的样式细节调整，包括颜色、字体大小、边距、代码预览样式 -* 可读性更强的暗黑模式 -* 一些美观的 CSS 动画 -* 易用和自动展开的文章目录，同时适配移动端 -* 为了更适合作为博客主题，去除了画廊功能，但保留了图片懒加载以提高性能 -* 使用 [Font Awesome](https://fontawesome.com/) 图标的扩展 Markdown 语法 -* 支持基于 [Katex](https://katex.org/) 的数学公式 -* 支持基于 [mermaid](https://github.com/knsv/mermaid) 的图表和流程图生成功能 -* 支持基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 的内嵌音乐播放器 -* 支持内嵌 Bilibili 视频 -* 支持多种提醒样式的 shortcode -* 支持自定义对齐和浮动方式的 shortcode -* 支持所有第三方库的 CDN -* 更加丰富的自定义设置 - -所以，如果你更偏好 LoveIt 主题的设计语言和自由度，如果你想便捷地使用扩展的 Font Awesome 图标，如果你想在文章内嵌数学公式、流程图、音乐或是 Bilibili 视频， -那么，LoveIt 主题可能是更适合你。 -希望你会 LoveIt ❤️! - -## 特性 - -### 性能和 SEO - -* 性能优化：在 [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights) 中， 99/100 的移动设备得分和 100/100 的桌面设备得分 -* 使用基于 JSON-LD 格式 的 SEO SCHEMA 文件进行 SEO 优化 -* 支持 [Google Analytics](https://analytics.google.com/analytics) -* 支持搜索引擎的网站验证 (Google, Bind, Yandex and Baidu) -* 支持所有第三方库的 CDN -* 基于 [lazysizes](https://github.com/aFarkas/lazysizes) 自动转换图片为懒加载 - -### 外观和布局 - -* 桌面设备/移动设备 响应式布局 -* 暗黑/明亮 模式 -* 页面和列表保持一致的视觉样式 -* 支持分页 -* 易用和自动展开的文章目录，同时适配移动端 -* 支持多语言和国际化 -* 美观的 CSS 动画 - -### 社交和评论系统 - -* 支持 [Gravatar](https://gravatar.com) 头像 -* 支持本地头像 -* 支持多达 54 种社交链接 -* 支持文章分享 -* 支持 [Disqus](https://disqus.com) 评论系统 -* 支持 [Gitalk](https://github.com/gitalk/gitalk) 评论系统 -* 支持 [Valine](https://valine.js.org/) 评论系统 - -### 扩展功能 - -* 基于 Hugo 使用的 chroma 进行代码高亮 -* 使用 [Font Awesome](https://fontawesome.com/) 图标的扩展 Markdown 语法 -* 支持基于 [Katex](https://katex.org/) 的数学公式 -* 支持基于 [mermaid](https://github.com/knsv/mermaid) 的图表和流程图生成功能 -* 支持基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 的内嵌音乐播放器 -* 支持内嵌 Bilibili 视频 -* 支持多种提醒样式的 shortcode -* 支持自定义对齐和浮动方式的 shortcode -* 支持基于 [TypeIt](https://typeitjs.com/) 的打字动画 -* 支持基于 [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll) 的回到顶部动画 -* ... - -## 快速开始 - -直接克隆这个代码库到你的 Hugo 主题目录， - -```bash - cd themes - git clone https://github.com/dillonzq/LoveIt.git -``` - -或者，把这个代码库作为子模块。 - -```bash - git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt -``` - -下一步， 打开 Hugo 网站的根目录下的 `config.toml` 文件来把 `theme` 设置为 `LoveIt`： - -```bash - theme = "LoveIt" -``` - -更多信息请查看 Hugo 的 [官方安装指南](https://gohugo.io/documentation/)。 - -## 网站设置 - -请看一看 `exampleSite` 目录下的文件。 - -这个目录包含了 `en` 和 `zh` 两种语言的预览网站配置。它可以作为你的网站的配置模板。 - -复制 `config.toml` 文件到你的 Hugo 网站代码根目录。必要的话覆盖原始配置文件。 - -## 目录结构建议 - -以下是一些方便你清晰管理和生成文章的目录结构建议： - -* 保持博客文章存放在 `content/posts` 目录，例如： `content/posts/我的第一篇文章.md` -* 保持简单的静态页面存放在 `content` 目录，例如： `content/about.md` -* 保持图片之类的媒体资源存放在 `static` 目录，例如： `static/images/2019/9/screenshot.png` - -## 为你的网站自定义样式 - -如果你想改变一些网站样式来满足你的需求，你可以编辑： - -* `assets/css/_varibales.scss`： 你可以覆盖 `_variables.scss` 中的变量来自定义样式 -* `assets/css/_custom.scss`： 你可以把自定义的样式放在这个文件 -* 需要使用hugo extended版本编译sass，否则修改css无法生效 - -## 网站图标、浏览器配置、网站清单 - -强烈建议你把： - -* apple-touch-icon.png (180x180) -* favicon-32x32.png (32x32) -* favicon-16x16.png (16x16) -* mstile-150x150.png (150x150) -* android-chrome-192x192.png (192x192) -* android-chrome-512x512.png (512x512) - -放在 `/static` 目录。利用 [https://realfavicongenerator.net/](https://realfavicongenerator.net/) 可以很容易地生成这些文件。 - -可以自定义 `browserconfig.xml` 和 `site.webmanifest` 文件来设置 theme-color 和 background-color。 - -## 小技巧 - -### 怎样切换网站 暗黑-明亮 模式 - -* 你可以点击圆形图标来切换网站 暗黑-明亮 模式。桌面模式下圆形图标在网页右上角，移动设备模式下在网站左上角标题旁边 -* 如果你想自定义切换网站 暗黑-明亮 模式的元素，可以使用一个 class 包含 `.theme-switch` 的元素，详见[此处](https://github.com/dillonzq/LoveIt/blob/master/assets/js/blog.js#L14) - -### 主页预览文章模式 - -如果你想在主页显示文章而不仅仅是个人信息，请打开配置文件 `config.toml`，并增加下面一行： - -```toml - [params] - home_mode = "post" -``` - -### 增加网站 logo 和封面用于 SEO 优化 - -增加一个 logo 图片 (127x40) 和一个封面图片 (800x600) 在 `static` 目录。 - -## 问题、想法、 bugs 和 PRs - -所有的反馈都是欢迎的！详见 [issue tracker](https://github.com/dillonzq/LoveIt/issues)。 - -## 许可协议 - -LoveIt 根据 MIT 许可协议授权。 更多信息请查看 [LICENSE 文件](https://github.com/dillonzq/LoveIt/blob/master/LICENSE)。 - -感谢以下在主题中使用过的项目的作者： - -* [Font Awesome](https://fontawesome.com/) -* [Animate.css](https://daneden.github.io/animate.css/) -* [lazysizes](https://github.com/aFarkas/lazysizes) -* [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll) -* [TypeIt](https://typeitjs.com/) -* [Katex](https://katex.org/) -* [mermaid](https://github.com/knsv/mermaid) -* [APlayer](https://github.com/MoePlayer/APlayer) -* [MetingJS](https://github.com/metowolf/MetingJS) -* [Gitalk](https://github.com/gitalk/gitalk) -* [Valine](https://valine.js.org/) - -## 作者 - -[Dillon](https://dillonzq.com) diff --git a/archetypes/default.md b/archetypes/default.md index b90a085..b1fb410 100644 --- a/archetypes/default.md +++ b/archetypes/default.md @@ -17,8 +17,11 @@ featuredImagePreview: "" toc: false autoCollapseToc: true -lightgallery: true math: false +lightgallery: true +linkToMarkdown: true +share: + enable: true comment: true --- diff --git a/assets/css/_core/_media.scss b/assets/css/_core/_media.scss index f33b05e..dbcade8 100644 --- a/assets/css/_core/_media.scss +++ b/assets/css/_core/_media.scss @@ -48,7 +48,7 @@ } } -@media only screen and (max-width: 560px) { +@media only screen and (max-width: 720px) { #header-desktop { display: none; } diff --git a/assets/css/_page/_single.scss b/assets/css/_page/_single.scss index cd2b03c..a7cd994 100644 --- a/assets/css/_page/_single.scss +++ b/assets/css/_page/_single.scss @@ -88,6 +88,7 @@ a { word-break: break-all; + word-break: break-word; color: $single-link-color; .dark-theme & { @@ -181,20 +182,20 @@ line-height: 1.7; } + img { + display: block; + max-width: 96%; + height: auto; + margin: 0 auto; + overflow: hidden; + transition: all 0.2s ease-in-out; + } + a.lightgallery:hover img { transform: scale(1.02); } } - img { - display: block; - max-width: 96%; - height: auto; - margin: 0 auto; - overflow: hidden; - transition: all 0.2s ease-in-out; - } - .lazyloading { object-fit: none; } diff --git a/assets/css/_partial/_single/_admonition.scss b/assets/css/_partial/_single/_admonition.scss index 96d28fa..69a7913 100644 --- a/assets/css/_partial/_single/_admonition.scss +++ b/assets/css/_partial/_single/_admonition.scss @@ -8,10 +8,9 @@ .admonition-title { margin: 0 -0.75rem; - padding: .5rem .75rem .5rem 2.5rem; - border-bottom: .1rem solid map-get($admonition-background-color-map, 'note'); + padding: .2rem .75rem .2rem 1.8rem; + border-bottom: .05rem solid map-get($admonition-background-color-map, 'note'); background-color: map-get($admonition-background-color-map, 'note'); - font-weight: 700; } .admonition-content { @@ -19,12 +18,12 @@ } i.icon { - font-size: 16px; + font-size: 0.85rem; color: map-get($admonition-color-map, 'note'); cursor: auto; position: absolute; - left: .75rem; - top: .75rem; + left: .6rem; + top: .6rem; } @each $type, $color in $admonition-color-map { @@ -65,8 +64,8 @@ details.admonition { i.details { position: absolute; - top: .75rem; - right: .75rem; + top: .5rem; + right: .5rem; color: $global-font-color; .dark-theme & { diff --git a/assets/css/_partial/_single/_code.scss b/assets/css/_partial/_single/_code.scss index e45b0b9..1bcdb7b 100644 --- a/assets/css/_partial/_single/_code.scss +++ b/assets/css/_partial/_single/_code.scss @@ -19,7 +19,6 @@ code, pre, .highlight table, .highlight tr, .highlight td { .highlight > .chroma { margin: 1rem 0; - line-height: round($code-font-size * 1.4); code, pre { margin: 0; @@ -30,7 +29,6 @@ code, pre, .highlight table, .highlight tr, .highlight td { display: block; padding: .4rem; font-family: $global-font-family; - font-size: $code-font-size; font-weight: bold; color: $code-info-color; background: darken($code-background-color, 3%); @@ -88,6 +86,8 @@ code, pre, .highlight table, .highlight tr, .highlight td { .highlight { font-family: $code-font-family; + font-size: $code-font-size; + line-height: round($code-font-size * 1.4); /* Comment */ .c, /* CommentHashbang */ .ch, /* CommentMultiline */ .cm, diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 6ffb34e..669dc06 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -1,6 +1,6 @@ baseURL = "/" -# [en, zh-CN, ...] determines default content language -# [en, zh-CN, ...] 设置默认的语言 +# [en, zh-CN, fr, ...] determines default content language +# [en, zh-CN, fr, ...] 设置默认的语言 defaultContentLanguage = "en" # theme # 主题 @@ -42,24 +42,41 @@ enableEmoji = true [languages.en.menu] [[languages.en.menu.main]] identifier = "posts" + # you can add extra information before the name (HTML format is allowed), such as icons + pre = "" name = "Posts" url = "/posts/" + # title will be shown when you hover on this menu link. + title = "" weight = 1 [[languages.en.menu.main]] identifier = "tags" + pre = "" name = "Tags" url = "/tags/" + title = "" weight = 2 [[languages.en.menu.main]] identifier = "categories" + pre = "" name = "Categories" url = "/categories/" + title = "" weight = 3 [[languages.en.menu.main]] + identifier = "documentation" + pre = "" + name = "Documentation" + url = "/categories/documentation/" + title = "" + weight = 4 + [[languages.en.menu.main]] identifier = "about" + pre = "" name = "About" url = "/about/" - weight = 4 + title = "" + weight = 5 [languages.en.params] # site description description = "About LoveIt Theme" @@ -207,8 +224,9 @@ enableEmoji = true notify = false verify = true avatar = "mp" - # meta= "" + meta= "" pageSize = 10 + lang = "en" visitor = true recordIP = true # Facebook Comment Config (https://developers.facebook.com/docs/plugins/comments) @@ -241,24 +259,39 @@ enableEmoji = true [languages.zh-CN.menu] [[languages.zh-CN.menu.main]] identifier = "posts" + pre = "" name = "文章" url = "/posts/" + title = "" weight = 1 [[languages.zh-CN.menu.main]] identifier = "tags" + pre = "" name = "标签" url = "/tags/" + title = "" weight = 2 [[languages.zh-CN.menu.main]] identifier = "categories" + pre = "" name = "分类" url = "/categories/" + title = "" weight = 3 [[languages.zh-CN.menu.main]] + identifier = "documentation" + pre = "" + name = "主题文档" + url = "/categories/documentation/" + title = "" + weight = 4 + [[languages.zh-CN.menu.main]] identifier = "about" + pre = "" name = "关于" url = "/about/" - weight = 4 + title = "" + weight = 5 [languages.zh-CN.params] # 网站描述 description = "关于 LoveIt 主题" @@ -406,8 +439,9 @@ enableEmoji = true notify = false verify = true avatar = "mp" - # meta= "" + meta= "" pageSize = 10 + lang = "zh-cn" visitor = true recordIP = true # Facebook 评论系统设置 (https://developers.facebook.com/docs/plugins/comments) @@ -416,7 +450,222 @@ enableEmoji = true width = "100%" numPosts = 10 appId = "" - languageCode = "en_US" + languageCode = "zh_CN" + + [languages.fr] + weight = 3 + # language code + languageCode = "fr" + # website title + title = "LoveIt Thème" + # language name + languageName = "Français" + # whether to include Chinese/Japanese/Korean + hasCJKLanguage = false + # default amount of posts in each pages + paginate = 12 + # [UA-XXXXXXXX-X] google analytics code + googleAnalytics = "" + # copyright description used only for seo schema + copyright = "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License." + # date format + dateFormatToUse = "2006-01-02" + # Menu Info + [languages.fr.menu] + [[languages.fr.menu.main]] + identifier = "posts" + pre = "" + name = "Postes" + url = "/posts/" + title = "" + weight = 1 + [[languages.fr.menu.main]] + identifier = "tags" + pre = "" + name = "Balises" + url = "/tags/" + title = "" + weight = 2 + [[languages.fr.menu.main]] + identifier = "categories" + pre = "" + name = "Catégories" + url = "/categories/" + title = "" + weight = 3 + [[languages.fr.menu.main]] + identifier = "documentation" + pre = "" + name = "Documentation" + url = "/categories/documentation/" + title = "" + weight = 4 + [[languages.fr.menu.main]] + identifier = "about" + pre = "" + name = "À propos" + url = "/about/" + title = "" + weight = 5 + [languages.fr.params] + # site description + description = "À propos du thème LoveIt" + # site keywords + keywords = ["Thème", "Hugo"] + # site default theme ("light", "dark", "auto") + defaultTheme = "auto" + # Home Page Info + [languages.fr.params.home] + # Home Page Profile + [languages.fr.params.home.profile] + enable = true + # Gravatar Email for preferred avatar in home page + gravatarEmail = "" + # URL of avatar shown in home page + avatarURL = "/images/avatar.png" + # subtitle shown in home page + subtitle = "Un thème Hugo simple, élégant et efficace" + # whether to use typeit animation for subtitle + typeit = true + # whether to show social links + social = true + # Home Page Posts + [languages.fr.params.home.posts] + enable = true + # special amount of posts in each home posts page + paginate = 6 + # default behavior when you don't set "hiddenFromHomePage" in front matter + defaultHiddenFromHomePage = false + # Social Info in home page + [languages.fr.params.social] + GitHub = "xxxx" + Linkedin = "xxxx" + Twitter = "xxxx" + Instagram = "xxxx" + Email = "xxxx@xxxx.com" + Facebook = "xxxx" + Telegram = "xxxx" + # Medium = "xxxx" + # Gitlab = "xxxx" + Youtubelegacy = "xxxx" + # Youtubecustom = "xxxx" + # Youtubechannel = "xxxx" + # Tumblr ="xxxx" + # Quora = "xxxx" + # Keybase = "xxxx" + # Pinterest = "xxxx" + # Reddit = "xxxx" + # Codepen = "xxxx" + # FreeCodeCamp = "xxxx" + # Bitbucket = "xxxx" + # Stackoverflow = "xxxx" + # Weibo = "xxxx" + # Odnoklassniki = "xxxx" + # VK = "xxxx" + # Flickr = "xxxx" + # Xing = "xxxx" + # Snapchat = "xxxx" + # Soundcloud = "xxxx" + # Spotify = "xxxx" + # Bandcamp = "xxxx" + # Paypal = "xxxx" + # Fivehundredpx = "xxxx" + # Mix = "xxxx" + # Goodreads = "xxxx" + # Lastfm = "xxxx" + # Foursquare = "xxxx" + # Hackernews = "xxxx" + # Kickstarter = "xxxx" + # Patreon = "xxxx" + # Steam = "xxxx" + # Twitch = "xxxx" + # Strava = "xxxx" + # Skype = "xxxx" + # Whatsapp = "xxxx" + # Zhihu = "xxxx" + # Douban = "xxxx" + # Angellist = "xxxx" + # Slidershare = "xxxx" + # Jsfiddle = "xxxx" + # Deviantart = "xxxx" + # Behance = "xxxx" + # Dribble = "xxxx" + # Wordpress = "xxxx" + # Vine = "xxxx" + # Googlescholar = "xxxx" + # Researchgate = "xxxx" + # Mastodon = "xxxx" + # MastodonPrefix = "https://mastodon.technology/" + # Thingiverse = "xxxx" + # Devto = "xxxx" + # Gitea = "xxxx" + # XMPP = "xxxx" + # Matrix = "xxxx" + # Bilibili = "xxxx" + # Social Share Links in post page + [languages.fr.params.share] + enable = true + Twitter = true + Facebook = true + Linkedin = true + Whatsapp = true + Pinterest = true + # Tumblr = true + HackerNews = true + # Reddit = true + # VK = true + # Buffer = true + # Xing = true + # Line = true + # Instapaper = true + # Pocket = true + # Digg = true + # Stumbleupon = true + # Flipboard = true + # Weibo = true + # Renren = true + # Myspace = true + # Blogger = true + # Baidu = true + # Odnoklassniki = true + # Evernote = true + # Skype = true + # Trello = true + # Mix = true + # Comment Config + [languages.fr.params.comment] + enable = true + # Disqus Comment Config (https://disqus.com/) + [languages.fr.params.comment.disqus] + # Disqus shortname to use Disqus in posts + shortname = "dillonzq" + # Gittalk Comment Config (https://github.com/gitalk/gitalk) + [languages.fr.params.comment.gitalk] + owner = "" + repo = "" + clientId = "" + clientSecret = "" + # Valine Comment Config (https://github.com/xCss/Valine) + [languages.fr.params.comment.valine] + enable = false + appId = "" + appKey = "" + placeholder = "Votre commentaire ..." + notify = false + verify = true + avatar = "mp" + meta= "" + pageSize = 10 + lang = "en" + visitor = true + recordIP = true + # Facebook Comment Config (https://developers.facebook.com/docs/plugins/comments) + [languages.fr.params.comment.facebook] + enable = false + width = "100%" + numPosts = 10 + appId = "" + languageCode = "fr" [params] # LoveIt theme version @@ -455,7 +704,7 @@ enableEmoji = true # whether to show link to Raw Markdown content of the post # 是否在文章页面显示原始 Markdown 文档链接 linkToMarkdown = true - # mathematical formulas (KaTeX) + # mathematical formulas (KaTeX https://katex.org/) # 数学公式 (KaTeX https://katex.org/) [params.math] enable = true @@ -496,7 +745,7 @@ enableEmoji = true width = 127 height = 40 # Website Image Info just for SEO - # 网站图标信息，仅用于 SEO + # 网站图标信息，仅用于 SEO [params.image] url = "cover.png" width = 800 @@ -548,7 +797,7 @@ enableEmoji = true # Hugo 解析文档的配置 [markup] # Syntax Highlighting (https://gohugo.io/content-management/syntax-highlighting) - # 代码高亮设置 (https://gohugo.io/content-management/syntax-highlighting) + # 语法高亮设置 (https://gohugo.io/content-management/syntax-highlighting) [markup.highlight] codeFences = true guessSyntax = true diff --git a/exampleSite/content/about.en.md b/exampleSite/content/about.en.md index b123e94..ed966ae 100644 --- a/exampleSite/content/about.en.md +++ b/exampleSite/content/about.en.md @@ -6,55 +6,69 @@ draft: false lightgallery: true --- +<div class="badge"> + +[](https://github.com/dillonzq/LoveIt/releases) [](https://gohugo.io/) [](https://github.com/dillonzq/LoveIt/blob/master/LICENSE) + +</div> + +<style> + .badge img { height: 1.2rem; } +</style> + [LoveIt :(far fa-heart):](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/liuzc/LeaveIt/). - + ### Features #### Performance and SEO -* :(fas fa-rocket): 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): Optimized SEO performance with a correct SEO SCHEMA based on JSON-LD -* :(fab fa-google): [Google Analytics](https://analytics.google.com/analytics) support -* :(fas fa-search): Search engine verification support (Google, Bind, Yandex and Baidu) -* :(fas fa-tachometer-alt): CDN for all third-party libraries support -* :(far fa-images): Automatically converted images with Lazy Load by [lazysizes](https://github.com/aFarkas/lazysizes) +* :(fas fa-rocket): 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): Optimized SEO performance with a correct **SEO SCHEMA** based on JSON-LD +* :(fab fa-google): [**Google Analytics**](https://analytics.google.com/analytics) support +* :(fas fa-search): Search engine **verification** support (Google, Bind, Yandex and Baidu) +* :(fas fa-tachometer-alt): **CDN** for third-party libraries support +* :(fas fa-cloud-download-alt): 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-moon): / :(fas fa-sun): Mode -* :(fas fa-layer-group): A More coerent style beetwen page and sections -* :(fas fa-ellipsis-h): Pagination support -* :(far fa-list-alt): Easy-to-use and self-expanding article catalog, while adapting to the mobile side -* :(fas fa-language): Multilanguage support and I18N ready -* :(fab fa-css3-alt): Beautiful CSS animation +* :(fas fa-desktop): / :(fas fa-mobile): **Responsive** layout +* :(fas fa-moon): / :(fas fa-sun): **Dark/Light** mode +* :(fas fa-layer-group): Globally consistent **design language** +* :(fas fa-ellipsis-h): **Pagination** support +* :(far fa-list-alt): Easy-to-use and self-expanding **table of contents** +* :(fas fa-language): **Multilanguage** support and i18n ready +* :(fab fa-css3-alt): Beautiful **CSS animation** #### Social and Comment Systems -* :(far fa-user): Gravatar support by [Gravatar](https://gravatar.com) -* :(fas fa-user-circle): Local Avatar support -* :(far fa-id-card): Up to 54 social sites supported -* :(fas fa-share-square): Share post support -* :(far fa-comment): Disqus comment system support by [Disqus](https://disqus.com) -* :(far fa-comment-dots): Gitalk comment system support by [Gitalk](https://github.com/gitalk/gitalk) -* :(far fa-comment-alt): Valine comment system support by [Valine](https://valine.js.org/) +* :(far fa-user): **Gravatar** supported by [Gravatar](https://gravatar.com) +* :(fas fa-user-circle): Local **Avatar** support +* :(far fa-id-card): Up to **59** social sites supported +* :(fas fa-share-square): Up to **28** share sites support +* :(far fa-comment): **Disqus** comment system supported by [Disqus](https://disqus.com) +* :(far fa-comment-dots): **Gitalk** comment system supported by [Gitalk](https://github.com/gitalk/gitalk) +* :(far fa-comment-alt): **Valine** comment system supported by [Valine](https://valine.js.org/) +* :(far fa-comments): **Facebook comments** system supported by [Facebook](https://developers.facebook.com/docs/plugins/comments/) #### Extended Features -* :(fas fa-code): Automatically highlighting code by chroma in Hugo -* :(fab fa-font-awesome): Extended markdown syntax for [Font Awesome](https://fontawesome.com/) icons -* :(fas fa-square-root-alt): Math formula support by [Katex](https://katex.org/) -* :(fas fa-project-diagram): Diagram syntax shortcode support by [mermaid](https://github.com/knsv/mermaid) -* :(fas fa-music): Embedded music player support by [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS) -* :(fas fa-tv): Bilibili player support -* :(far fa-bell): Kinds of admonitions shortcode support -* :(fas fa-align-left): Custom align and float style shortcodes support -* :(fas fa-i-cursor): Animated typing support by [TypeIt](https://typeitjs.com/) -* :(fas fa-arrow-up): Dynamic to top support by [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll) +* :(fas fa-code): Automatically **highlighting** code +* :(far fa-images): **Images gallery** supported by [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js) +* :(fab fa-font-awesome): Extended markdown syntax for **[Font Awesome](https://fontawesome.com/) icons** +* :(far fa-sticky-note): Extended markdown syntax for **ruby annotation** +* :(fas fa-square-root-alt): **Mathematical formula** supported by [Katex](https://katex.org/) +* :(fas fa-project-diagram): **Diagrams** shortcode supported by [mermaid](https://github.com/knsv/mermaid) +* :(fas fa-chart-pie): **Interactive data visualization** shortcode supported by [ECharts](https://echarts.apache.org/) +* :(fas fa-music): **Music player** shortcode supported by [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS) +* :(fas fa-tv): **Bilibili player** shortcode +* :(far fa-bell): Kinds of **admonitions** shortcode +* :(fas fa-align-left): **Custom style** shortcode +* :(fas fa-i-cursor): **Animated typing** supported by [TypeIt](https://typeitjs.com/) +* :(fas fa-arrow-down): **Dynamic scroll** supported by [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll) * ... ### License @@ -66,12 +80,15 @@ Check the [LICENSE file](https://github.com/dillonzq/LoveIt/blob/master/LICENSE) Thanks to the authors of following resources included in the theme: * [Font Awesome](https://fontawesome.com/) +* [Fork Awesome](https://forkaweso.me/Fork-Awesome/) * [Animate.css](https://daneden.github.io/animate.css/) * [lazysizes](https://github.com/aFarkas/lazysizes) +* [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js) * [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll) * [TypeIt](https://typeitjs.com/) * [Katex](https://katex.org/) * [mermaid](https://github.com/knsv/mermaid) +* [ECharts](https://echarts.apache.org/) * [APlayer](https://github.com/MoePlayer/APlayer) * [MetingJS](https://github.com/metowolf/MetingJS) * [Gitalk](https://github.com/gitalk/gitalk) diff --git a/exampleSite/content/about.fr.md b/exampleSite/content/about.fr.md new file mode 100644 index 0000000..0559110 --- /dev/null +++ b/exampleSite/content/about.fr.md @@ -0,0 +1,100 @@ +--- +title: "À propos de LoveIt" +date: 2019-08-02T11:04:49+08:00 +draft: false + +lightgallery: true +--- + +<div class="badge"> + +[](https://github.com/dillonzq/LoveIt/releases) [](https://gohugo.io/) [](https://github.com/dillonzq/LoveIt/blob/master/LICENSE) + +</div> + +<style> + .badge img { height: 1.2rem; } +</style> + +{{< admonition warning >}} +Sorry, this article has not been completely translated into **French**. +Welcome to take the time to propose a translation by [making a PR](https://github.com/dillonzq/LoveIt/pulls) to the theme! +{{< /admonition >}} + +[LoveIt :(far fa-heart):](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/liuzc/LeaveIt/). + + + +### Features + +#### Performance and SEO + +* :(fas fa-rocket): 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): Optimized SEO performance with a correct **SEO SCHEMA** based on JSON-LD +* :(fab fa-google): [**Google Analytics**](https://analytics.google.com/analytics) support +* :(fas fa-search): Search engine **verification** support (Google, Bind, Yandex and Baidu) +* :(fas fa-tachometer-alt): **CDN** for third-party libraries support +* :(fas fa-cloud-download-alt): 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-moon): / :(fas fa-sun): **Dark/Light** mode +* :(fas fa-layer-group): Globally consistent **design language** +* :(fas fa-ellipsis-h): **Pagination** support +* :(far fa-list-alt): Easy-to-use and self-expanding **table of contents** +* :(fas fa-language): **Multilanguage** support and i18n ready +* :(fab fa-css3-alt): Beautiful **CSS animation** + +#### Social and Comment Systems + +* :(far fa-user): **Gravatar** supported by [Gravatar](https://gravatar.com) +* :(fas fa-user-circle): Local **Avatar** support +* :(far fa-id-card): Up to **59** social sites supported +* :(fas fa-share-square): Up to **28** share sites support +* :(far fa-comment): **Disqus** comment system supported by [Disqus](https://disqus.com) +* :(far fa-comment-dots): **Gitalk** comment system supported by [Gitalk](https://github.com/gitalk/gitalk) +* :(far fa-comment-alt): **Valine** comment system supported by [Valine](https://valine.js.org/) +* :(far fa-comments): **Facebook comments** system supported by [Facebook](https://developers.facebook.com/docs/plugins/comments/) + +#### Extended Features + +* :(fas fa-code): Automatically **highlighting** code +* :(far fa-images): **Images gallery** supported by [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js) +* :(fab fa-font-awesome): Extended markdown syntax for **[Font Awesome](https://fontawesome.com/) icons** +* :(far fa-sticky-note): Extended markdown syntax for **ruby annotation** +* :(fas fa-square-root-alt): **Mathematical formula** supported by [Katex](https://katex.org/) +* :(fas fa-project-diagram): **Diagrams** shortcode supported by [mermaid](https://github.com/knsv/mermaid) +* :(fas fa-chart-pie): **Interactive data visualization** shortcode supported by [ECharts](https://echarts.apache.org/) +* :(fas fa-music): **Music player** shortcode supported by [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS) +* :(fas fa-tv): **Bilibili player** shortcode +* :(far fa-bell): Kinds of **admonitions** shortcode +* :(fas fa-align-left): **Custom style** shortcode +* :(fas fa-i-cursor): **Animated typing** supported by [TypeIt](https://typeitjs.com/) +* :(fas fa-arrow-down): **Dynamic scroll** supported by [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll) +* ... + +### 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: + +* [Font Awesome](https://fontawesome.com/) +* [Fork Awesome](https://forkaweso.me/Fork-Awesome/) +* [Animate.css](https://daneden.github.io/animate.css/) +* [lazysizes](https://github.com/aFarkas/lazysizes) +* [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js) +* [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll) +* [TypeIt](https://typeitjs.com/) +* [Katex](https://katex.org/) +* [mermaid](https://github.com/knsv/mermaid) +* [ECharts](https://echarts.apache.org/) +* [APlayer](https://github.com/MoePlayer/APlayer) +* [MetingJS](https://github.com/metowolf/MetingJS) +* [Gitalk](https://github.com/gitalk/gitalk) +* [Valine](https://valine.js.org/) diff --git a/exampleSite/content/about.zh-cn.md b/exampleSite/content/about.zh-cn.md index de8f991..9d10280 100644 --- a/exampleSite/content/about.zh-cn.md +++ b/exampleSite/content/about.zh-cn.md @@ -6,55 +6,69 @@ draft: false lightgallery: true --- +<div class="badge"> + +[](https://github.com/dillonzq/LoveIt/releases) [](https://gohugo.io/) [](https://github.com/dillonzq/LoveIt/blob/master/LICENSE) + +</div> + +<style> + .badge img { height: 1.2rem; } +</style> + [LoveIt :(far fa-heart):](https://github.com/dillonzq/LoveIt) 是一个由 [Dillon](https://dillonzq.com) 开发的**简洁**、**优雅**且**高效**的 [Hugo](https://gohugo.io/) 博客主题。 它的原型基于 [LeaveIt 主题](https://github.com/liuzc/LeaveIt/) 和 [KeepIt 主题](https://github.com/liuzc/LeaveIt/)。 - + ### 特性 #### 性能和 SEO -* :(fas fa-rocket): 性能优化：在 [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights) 中， 99/100 的移动设备得分和 100/100 的桌面设备得分 -* :(fab fa-searchengin): 使用基于 JSON-LD 格式 的 SEO SCHEMA 文件进行 SEO 优化 -* :(fab fa-google): 支持 [Google Analytics](https://analytics.google.com/analytics) -* :(fas fa-search): 支持搜索引擎的网站验证 (Google, Bind, Yandex and Baidu) -* :(fas fa-tachometer-alt): 支持所有第三方库的 CDN -* :(far fa-images): 基于 [lazysizes](https://github.com/aFarkas/lazysizes) 自动转换图片为懒加载 +* :(fas fa-rocket): **性能**优化：在 [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights) 中， 99/100 的移动设备得分和 100/100 的桌面设备得分 +* :(fab fa-searchengin): 使用基于 JSON-LD 格式 的 **SEO SCHEMA** 文件进行 SEO 优化 +* :(fab fa-google): 支持 **[Google Analytics](https://analytics.google.com/analytics)** +* :(fas fa-search): 支持搜索引擎的**网站验证** (Google, Bind, Yandex and Baidu) +* :(fas fa-tachometer-alt): 支持所有第三方库的 **CDN** +* :(fas fa-cloud-download-alt): 基于 [lazysizes](https://github.com/aFarkas/lazysizes) 自动转换图片为**懒加载** #### 外观和布局 -* :(fas fa-desktop): / :(fas fa-mobile): 响应式布局 -* :(fas fa-moon): / :(fas fa-sun): 模式 -* :(fas fa-layer-group): 页面和列表保持一致的视觉样式 -* :(fas fa-ellipsis-h): 支持分页 -* :(far fa-list-alt): 易用和自动展开的文章目录，同时适配移动端 -* :(fas fa-language): 支持多语言和国际化 -* :(fab fa-css3-alt): 美观的 CSS 动画 +* :(fas fa-desktop): / :(fas fa-mobile): **响应式**布局 +* :(fas fa-moon): / :(fas fa-sun): **夜晚/白天** 主题模式 +* :(fas fa-layer-group): 全局一致的**设计语言** +* :(fas fa-ellipsis-h): 支持**分页** +* :(far fa-list-alt): 易用和自动展开的**文章目录** +* :(fas fa-language): 支持**多语言**和国际化 +* :(fab fa-css3-alt): 美观的 **CSS 动画** #### 社交和评论系统 -* :(far fa-user): 支持 [Gravatar](https://gravatar.com) 头像 -* :(fas fa-user-circle): 支持本地头像 -* :(far fa-id-card): 支持多达 54 种社交链接 -* :(fas fa-share-square): 支持文章分享 -* :(far fa-comment): 支持 [Disqus](https://disqus.com) 评论系统 -* :(far fa-comment-dots): 支持 [Gitalk](https://github.com/gitalk/gitalk) 评论系统 -* :(far fa-comment-alt): 支持 [Valine](https://valine.js.org/) 评论系统 +* :(far fa-user): 支持 **[Gravatar](https://gravatar.com)** 头像 +* :(fas fa-user-circle): 支持本地**头像** +* :(far fa-id-card): 支持多达 **59** 种社交链接 +* :(fas fa-share-square): 支持多达 **28** 种网站分享 +* :(far fa-comment): 支持 **[Disqus](https://disqus.com)** 评论系统 +* :(far fa-comment-dots): 支持 **[Gitalk](https://github.com/gitalk/gitalk)** 评论系统 +* :(far fa-comment-alt): 支持 **[Valine](https://valine.js.org/)** 评论系统 +* :(far fa-comments): 支持 **[Facebook](https://developers.facebook.com/docs/plugins/comments/) 评论**系统 #### 扩展功能 -* :(fas fa-code): 基于 Hugo 使用的 chroma 进行代码高亮 -* :(fab fa-font-awesome): 使用 [Font Awesome](https://fontawesome.com/) 图标的扩展 Markdown 语法 -* :(fas fa-square-root-alt): 支持基于 [Katex](https://katex.org/) 的数学公式 -* :(fas fa-project-diagram): 支持基于 [mermaid](https://github.com/knsv/mermaid) 的图表和流程图生成功能 -* :(fas fa-music): 支持基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 的内嵌音乐播放器 -* :(fas fa-tv): 支持内嵌 Bilibili 视频 -* :(far fa-bell): 支持多种提醒样式的 shortcode -* :(fas fa-align-left): 支持自定义对齐和浮动方式的 shortcode -* :(fas fa-i-cursor): 支持基于 [TypeIt](https://typeitjs.com/) 的打字动画 -* :(fas fa-arrow-up): 支持基于 [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll) 的回到顶部动画 +* :(fas fa-code): 支持**代码高亮** +* :(far fa-images): 支持基于 [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js) 的**图片画廊** +* :(fab fa-font-awesome): 支持 **[Font Awesome](https://fontawesome.com/) 图标**的扩展 Markdown 语法 +* :(far fa-sticky-note): 支持**上标注释**的扩展 Markdown 语法 +* :(fas fa-square-root-alt): 支持基于 [Katex](https://katex.org/) 的**数学公式** +* :(fas fa-project-diagram): 支持基于 [mermaid](https://github.com/knsv/mermaid) 的**图表** shortcode +* :(fas fa-chart-pie): 支持基于 [ECharts](https://echarts.apache.org/) 的**交互式数据可视化** shortcode +* :(fas fa-music): 支持基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 的**音乐播放器** shortcode +* :(fas fa-tv): 支持 **Bilibili 视频** shortcode +* :(far fa-bell): 支持多种**注释**的 shortcode +* :(fas fa-align-left): 支持**自定义样式**的 shortcode +* :(fas fa-i-cursor): 支持基于 [TypeIt](https://typeitjs.com/) 的**打字动画** shortcode +* :(fas fa-arrow-down): 支持基于 [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll) 的**滚动动画** * ... ### 许可协议 @@ -63,15 +77,18 @@ LoveIt 根据 MIT 许可协议授权。 更多信息请查看 [LICENSE 文件](https://github.com/dillonzq/LoveIt/blob/master/LICENSE)。 -感谢以下在主题中使用过的项目的作者： +LoveIt 主题中用到了以下项目，感谢它们的作者： * [Font Awesome](https://fontawesome.com/) +* [Fork Awesome](https://forkaweso.me/Fork-Awesome/) * [Animate.css](https://daneden.github.io/animate.css/) * [lazysizes](https://github.com/aFarkas/lazysizes) +* [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js) * [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll) * [TypeIt](https://typeitjs.com/) * [Katex](https://katex.org/) * [mermaid](https://github.com/knsv/mermaid) +* [ECharts](https://echarts.apache.org/) * [APlayer](https://github.com/MoePlayer/APlayer) * [MetingJS](https://github.com/metowolf/MetingJS) * [Gitalk](https://github.com/gitalk/gitalk) diff --git a/exampleSite/content/posts/Basic-Markdown-Preview.zh-cn.md b/exampleSite/content/posts/Basic-Markdown-Preview.zh-cn.md deleted file mode 100644 index 49f8db3..0000000 --- a/exampleSite/content/posts/Basic-Markdown-Preview.zh-cn.md +++ /dev/null @@ -1,922 +0,0 @@ ---- -title: "Markdown 基本语法预览" -date: 2019-08-25T16:22:42+08:00 -lastmod: 2019-08-25T16:22:42+08:00 -draft: false -author: "" -authorLink: "" -description: "这是一篇用于预览 Markdown 基本语法的文章。" -license: "" - -tags: ["Hugo", "主题"] -categories: ["预览"] -hiddenFromHomePage: false - -featuredImage: "" -featuredImagePreview: "" - -toc: true -autoCollapseToc: true -lightgallery: true -math: true -comment: true ---- - -这是一篇用于预览 :(fab fa-markdown): Markdown 基本语法的文章。 - -文章内容基于 [GitHub Flavored Markdown Spec](https://github.github.com/gfm)。 - -不包含复杂的规则说明，仅仅展示 GFM 所约定的 Markdown 基本语法。 - -<!--more--> - -## 1 引言 - -:(fab fa-markdown): **Markdown** 是一种用于编写结构化文档的纯文本格式。它基于电子邮件和论坛文章的格式所约定。 -它由 John Gruber (在 Aaron Swartz 的帮助下)开发，于 2004 年以语法描述和用于将 Markdown 转换为 HTML 的 Perl 脚本 (Markdown.pl) 的形式发布。 - -在接下来的十年中，许多实现被开发出来。一些用脚注、表和其他文档元素的约定扩展了原始 Markdown 语法。 -有些允许 Markdown 文档以 HTML 以外的格式呈现。 像 reddit，StackOverflow 和 GitHub 这样的网站有上百万的用户在使用 Markdown。 -Markdown 开始被应用于网络以外的领域，包括作者书籍、文章、幻灯片、信件和课堂笔记。 - -## 2 块和内联元素 - -我们可以把一个文档看成一系列的块，如段落、引用、列表、标题和代码块。 - -有些块(如引号和列表)可以包含其它的块，即 **容器块**； -其他的块(如标题和段落)则包含内联元素(如文本、链接、强调、图像、内联代码等)，即 **叶子块**。 - -块的符号总是优先于内联元素的符号。例如： - -```markdown -- `one -- two` -``` - -- `one -- two` - -## 3 叶子块 - -本节描述用于组成 Markdown 文档的不同类型的叶子块。 - -### 3.1 换行符 - -```markdown -*** ------- - ____ -``` - -*** ------- - ____ - -### 3.2 标题 - -{{% admonition "note" "关于 ATX 风格标题和 Setext 风格标题" %}} -本文只展示 ATX 风格标题，关于 Setext 风格标题的介绍请参考 [GFM Setext headings 说明](https://github.github.com/gfm/#setext-heading)。 - -笔者不推荐在 Hugo 的 Markdown 文档中使用 Setext 风格标题。 -{{% /admonition %}} - -```markdown -## H2 二级标题 -### H3 三级标题 -#### H4 四级标题 -##### H5 五级标题 -###### H6 六级标题 -``` - -## H2 二级标题 - -### H3 三级标题 - -#### H4 四级标题 - -##### H5 五级标题 - -###### H6 六级标题 - -### 3.3 代码块 - -{{% admonition "note" "关于缩进式代码块和围栏式代码块" %}} -本文只展示围栏式代码块，关于缩进式代码块的介绍请参考 [GFM Indented code blocks 说明](https://github.github.com/gfm/#indented-code-block)。 - -笔者不推荐在 Hugo 的 Markdown 文档中使用缩进式代码块。 -{{% /admonition %}} - -``````markdown -``` -foo() -``` - -~~~ -foo() -~~~ - -```` -foo() -```` - -```ruby -def foo(x) - return 3 -end -``` -`````` - -``` -foo() -``` - -~~~ -foo() -~~~ - -```` -foo() -```` - -```ruby -def foo(x) - return 3 -end -``` - -{{< highlight go "hl_lines=3 5-7,linenostart=20" >}} -package main - -import "fmt" - -func main() { - fmt.Println("Hello, 世界") -} -{{< / highlight >}} - -### 3.4 段落 - -```markdown -这是一个段落。 -这还是之前段落的一部分。 - -这是新的段落。 -``` - -这是一个段落。 -这还是之前段落的一部分。 - -这是新的段落。 - -### 3.5 引用链接的定义 - -```markdown -[foo]: / "title" - -[foo] - -[bar]: / - -[bar] -``` - -[foo]: / "title" - -[foo] - -[bar]: / - -[bar] - -### 3.6 空白行 - -块之间的空白行将被忽略，除了它们在确定列表是紧还是松时所起的作用。 - -文档开头和结尾的空行也会被忽略。 - -## 4 容器块 - -### 4.1 引用 - -```markdown -> Foo -> -> - **bar** -> - baz -``` - -> Foo -> -> - **bar** -> - baz - -### 4.2 无序列表 - -```markdown -- 项目 1 - * 项目 A - - 项目 B - 一些说明 - + 项目 a - * 项目 b - - 项目 c - + 项目 C -+ 项目 2 -* 项目 3 -``` - -- 项目 1 - * 项目 A - - 项目 B - 一些说明 - + 项目 a - * 项目 b - - 项目 c - + 项目 C -+ 项目 2 -* 项目 3 - -### 4.3 有序列表 - -```markdown -1. 项目 1 - 1. 项目 A - 2. 项目 B - 一些说明 - 1. 项目 a - 2. 项目 b - 3. 项目 c - 3. 项目 C -2. 项目 2 -3. 项目 3 -``` - -1. 项目 1 - 1. 项目 A - 2. 项目 B - 一些说明 - 1. 项目 a - 2. 项目 b - 3. 项目 c - 3. 项目 C -2. 项目 2 -3. 项目 3 - -### 4.4 任务列表 - -```markdown -- [ ] 任务 1 - * [X] 任务 A - - 任务 B - + [ ] 任务 a - * [ ] 任务 b - - [X] 任务 c - + [X] 任务 C -+ [ ] 任务 2 -* [X] 任务 3 -``` - -- [ ] 任务 1 - * [X] 任务 A - - 任务 B - + [ ] 任务 a - * [ ] 任务 b - - [X] 任务 c - + [X] 任务 C -+ [ ] 任务 2 -* [X] 任务 3 - -### 4.5 表格 - -```markdown -| _颜色_ | 水果 | 蔬菜 | -| ----------- |:-------------:| ---------- -:| -| 红色 | *苹果* | 辣椒 | -| ~~橙色~~ | 橘子 | **胡萝卜** | -| 绿色 | ~~***梨子***~~ | 菠菜 | -``` - -| _颜色_ | 水果 | 蔬菜 | -| ---------- |:---------------:| -----------:| -| 红色 | *苹果* | 辣椒 | -| ~~橙色~~ | 橘子 | **胡萝卜** | -| 绿色 | ~~***梨子***~~ | 菠菜 | - - -## 3. 页内锚 - -```markdown -[脚注](#footnote) - -## 4. 脚注 {#footnote} -``` - -[脚注](#footnote) - -## 4. 脚注 {#footnote} - -```markdown -这是一个基本的数字脚注[^1] - -带有 "label" 标签的脚注[^label] - -下定义的脚注[^!DEF] - -带有链接的脚注[^pa] - -[^1]: 这是一个基本的数字脚注 -[^label]: 带有 "label" 标签的脚注 -[^pa]: [LoveIt 主题](https://github.com/dillonzq/LoveIt) -[^!DEF]: 下定义的脚注 -``` - -这是一个基本的数字脚注[^1] - -带有 "label" 标签的脚注[^label] - -下定义的脚注[^!DEF] - -带有链接的脚注[^pa] - -[^1]: 这是一个基本的数字脚注 -[^label]: 带有 "label" 标签的脚注 -[^pa]: [LoveIt 主题](https://github.com/dillonzq/LoveIt) -[^!DEF]: 下定义的脚注 - -## 5. 内联格式 - -```markdown -`内联代码块` - -<kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>del</kbd> - -**加粗 1** 和 __加粗 2__ - -*倾斜 1* 和 _倾斜 2_ - -~~删除线~~ - -***加粗 1 和 倾斜 1*** - -___加粗 2 和 倾斜 2___ - -__*加粗 2 和 倾斜 1*__ - -**_加粗 1 和 倾斜 2_** - -~~*删除线 倾斜 1*~~ 和 *~~删除线 倾斜 2~~* - -~~_删除线 倾斜 2_~~ 和 _~~删除线 倾斜 2~~_ - -~~**删除线 加粗 1**~~ 和 **~~删除线 加粗 1~~** - -~~__删除线 加粗 2__~~ 和 __~~删除线 加粗 2~~__ - -~~***删除线 倾斜 1 加粗 1***~~ 和 ***~~删除线 倾斜 1 加粗 1~~*** - -~~___删除线 倾斜 2 加粗 2___~~ 和 ___~~删除线 倾斜 2 加粗 2~~___ - -**~~*删除线 倾斜 1 加粗 1*~~** 和 *~~**删除线 倾斜 1 加粗 1**~~* - -__~~_删除线 倾斜 2 加粗 2_~~__ 和 _~~__删除线 倾斜 2 加粗 2__~~_ - -**~~_删除线 倾斜 2 加粗 1_~~** 和 _~~**删除线 倾斜 2 加粗 1**~~_ - -__~~*删除线 倾斜 1 加粗 2*~~__ 和 *~~__删除线 倾斜 1 加粗 2__~~* -``` - -`内联代码块` - -<kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>del</kbd> - -**加粗 1** 和 __加粗 2__ - -*倾斜 1* 和 _倾斜 2_ - -~~删除线~~ - -***加粗 1 和 倾斜 1*** - -___加粗 2 和 倾斜 2___ - -__*加粗 2 和 倾斜 1*__ - -**_加粗 1 和 倾斜 2_** - -~~*删除线 倾斜 1*~~ 和 *~~删除线 倾斜 2~~* - -~~_删除线 倾斜 2_~~ 和 _~~删除线 倾斜 2~~_ - -~~**删除线 加粗 1**~~ 和 **~~删除线 加粗 1~~** - -~~__删除线 加粗 2__~~ 和 __~~删除线 加粗 2~~__ - -~~***删除线 倾斜 1 加粗 1***~~ 和 ***~~删除线 倾斜 1 加粗 1~~*** - -~~___删除线 倾斜 2 加粗 2___~~ 和 ___~~删除线 倾斜 2 加粗 2~~___ - -**~~*删除线 倾斜 1 加粗 1*~~** 和 *~~**删除线 倾斜 1 加粗 1**~~* - -__~~_删除线 倾斜 2 加粗 2_~~__ 和 _~~__删除线 倾斜 2 加粗 2__~~_ - -**~~_删除线 倾斜 2 加粗 1_~~** 和 _~~**删除线 倾斜 2 加粗 1**~~_ - -__~~*删除线 倾斜 1 加粗 2*~~__ 和 *~~__删除线 倾斜 1 加粗 2__~~* - -## 6. 图片 - -```markdown -Web image - - -Local image - - -contact@revolunet.com - -@revolunet - -Issue #1 - -https://github.com/revolunet/sublimetext-markdown-preview/ - -This is a link https://github.com/revolunet/sublimetext-markdown-preview/. - -This is a link "https://github.com/revolunet/sublimetext-markdown-preview/". - -With this link (https://github.com/revolunet/sublimetext-markdown-preview/), it still works. -``` - -Web image - - -Local image - - -<https://www.google.com> - -<contact@revolunet.com> - -@revolunet - -Issue #1 - -https://github.com/revolunet/sublimetext-markdown-preview/ - -This is a link https://github.com/revolunet/sublimetext-markdown-preview/. - -This is a link "https://github.com/revolunet/sublimetext-markdown-preview/". - -With this link (https://github.com/revolunet/sublimetext-markdown-preview/), it still works. - -## Abbreviation - -Abbreviations source are found in a separate markdown file specified in frontmatter. -``` -The HTML specification -is maintained by the W3C. - -*[HTML]: Hyper Text Markup Language -*[W3C]: World Wide Web Consortium -``` - -The HTML specification -is maintained by the W3C. - -## Unordered List - -``` -Unordered List - -- item 1 - * item A - * item B - more text - + item a - + item b - + item c - * item C -- item 2 -- item 3 -``` - -Unordered List - -- item 1 - * item A - * item B - more text - + item a - + item b - + item c - * item C -- item 2 -- item 3 - -## Ordered List - -``` -Ordered List - -1. item 1 - 1. item A - 2. item B - more text - 1. item a - 2. item b - 3. item c - 3. item C -2. item 2 -3. item 3 -``` - -Ordered List - -1. item 1 - 1. item A - 2. item B - more text - 1. item a - 2. item b - 3. item c - 3. item C -2. item 2 -3. item 3 - -## Mixed Lists - -`Really Mixed Lists` should break with `sane_lists` on. - -``` -Mixed Lists - -- item 1 - * [X] item A - * [ ] item B - more text - 1. item a - 2. itemb - 3. item c - * [X] item C -- item 2 -- item 3 - - -Really Mixed Lists - -- item 1 - * [X] item A - - item B - more text - 1. item a - + itemb - + [ ] item c - 3. item C -2. item 2 -- [X] item 3 -``` - -Mixed Lists - -- item 1 - * [X] item A - * [ ] item B - more text - 1. item a - 2. itemb - 3. item c - * [X] item C -- item 2 -- item 3 - - -Really Mixed Lists - -- item 1 - * [X] item A - - item B - more text - 1. item a - + itemb - + [ ] item c - 3. item C -2. item 2 -- [X] item 3 - -## Blocks - -``` - This is a block. - - This is more of a block. - -``` - - This is a block. - - This is more of a block. - -## Block Quotes - -``` -> This is a block quote ->> How does it look? -``` - -> This is a block quote. ->> How does it look? -> I think it looks good. - -## Fenced Block - -Assuming guessing is not enabled. - -````` -``` -// Fenced **without** highlighting -function doIt() { - for (var i = 1; i <= slen ; i^^) { - setTimeout("document.z.textdisplay.value = newMake()", i*300); - setTimeout("window.status = newMake()", i*300); - } -} -``` - -```javascript -// Fenced **with** highlighting -function doIt() { - for (var i = 1; i <= slen ; i^^) { - setTimeout("document.z.textdisplay.value = newMake()", i*300); - setTimeout("window.status = newMake()", i*300); - } -} -``` -````` - -``` -// Fenced **without** highlighting -function doIt() { - for (var i = 1; i <= slen ; i^^) { - setTimeout("document.z.textdisplay.value = newMake()", i*300); - setTimeout("window.status = newMake()", i*300); - } -} -``` - -```javascript -// Fenced **with** highlighting -function doIt() { - for (var i = 1; i <= slen ; i^^) { - setTimeout("document.z.textdisplay.value = newMake()", i*300); - setTimeout("window.status = newMake()", i*300); - } -} -``` - -## Tables - -``` -| _颜色_ | 水果 | 蔬菜 | -| ------------- |:---------------:| -----------------:| -| red | *苹果* | [辣椒](#) | -| ~~橙色~~ | 橘子 | **胡萝卜** | -| 绿色 | ~~***梨子***~~ | 菠菜 | -``` - -| _颜色_ | 水果 | 蔬菜 | -| ------------- |:---------------:| ------------:| -| red | *苹果* | [辣椒](#) | -| ~~橙色~~ | 橘子 | **胡萝卜** | -| 绿色 | ~~***梨子***~~ | 菠菜 | - -## Smart Strong - -``` -Text with double__underscore__words. - -__Strong__ still works. - -__this__works__too__ -``` - -Text with double__underscore__words. - -__Strong__ still works. - -__this__works__too__ - -## Smarty - -``` -"double quotes" - -'single quotes' - -da--sh - -elipsis... -``` - -"double quotes" - -'single quotes' - -da--sh - -elipsis... - -## Neseted Fences - -```` - ``` - This will still be parsed - as a normal indented code block. - ``` - -``` -This will still be parsed -as a fenced code block. -``` - -- This is a list that contains multiple code blocks. - - - Here is an indented block - - ``` - This will still be parsed - as a normal indented code block. - ``` - - - Here is a fenced code block: - - ``` - This will still be parsed - as a fenced code block. - ``` - - > ``` - > Blockquotes? - > Not a problem! - > ``` -```` - - ``` - This will still be parsed - as a normal indented code block. - ``` - -``` -This will still be parsed -as a fenced code block. -``` - -- This is a list that contains multiple code blocks. - - - Here is an indented block - - ``` - This will still be parsed - as a normal indented code block. - ``` - - - Here is a fenced code block: - - ``` - This will still be parsed - as a fenced code block. - ``` - - > ``` - > Blockquotes? - > Not a problem! - > ``` - -## Github Emoji {#section-7} - -```markdown -This is a test for emoji :smile:. The emojis are images linked to github assets :octocat:. -``` - -This is a test for emoji :smile:. The emojis are images linked to github assets :octocat:. - -### People - -:+1::-1::alien::angel::anger::angry::anguished::astonished::baby::blue_heart::blush::boom::bow::bowtie::boy::bride_with_veil::broken_heart::bust_in_silhouette::busts_in_silhouette::clap::cold_sweat::collision::confounded::confused::construction_worker::cop::couple::couple_with_heart::couplekiss::cry::crying_cat_face::cupid::dancer::dancers::dash::disappointed::disappointed_relieved::dizzy::dizzy_face::droplet::ear::exclamation::expressionless::eyes::facepunch::family::fearful::feelsgood::feet::finnadie::fire::fist::flushed::frowning::fu::girl::goberserk::godmode::green_heart::grey_exclamation::grey_question::grimacing::grin::grinning::guardsman::haircut::hand::hankey::hear_no_evil::heart::heart_eyes::heart_eyes_cat::heartbeat::heartpulse::hurtrealbad::hushed::imp::information_desk_person::innocent::japanese_goblin::japanese_ogre::joy::joy_cat::kiss::kissing::kissing_cat::kissing_closed_eyes::kissing_heart::kissing_smiling_eyes::laughing::lips::love_letter::man::man_with_gua_pi_mao::man_with_turban::mask::massage::metal::muscle::musical_note::nail_care::neckbeard::neutral_face::no_good::no_mouth::nose::notes::ok_hand::ok_woman::older_man::older_woman::open_hands::open_mouth::pensive::persevere::person_frowning::person_with_blond_hair::person_with_pouting_face::point_down::point_left::point_right::point_up::point_up_2::poop::pouting_cat::pray::princess::punch::purple_heart::question::rage::rage1::rage2::rage3::rage4::raised_hand::raised_hands::raising_hand::relaxed::relieved::revolving_hearts::runner::running::satisfied::scream::scream_cat::see_no_evil::shit::skull::sleeping::sleepy::smile::smile_cat::smiley::smiley_cat::smiling_imp::smirk::smirk_cat::sob::sparkles::sparkling_heart::speak_no_evil::speech_balloon::star::star2::stuck_out_tongue::stuck_out_tongue_closed_eyes::stuck_out_tongue_winking_eye::sunglasses::suspect::sweat::sweat_drops::sweat_smile::thought_balloon::thumbsdown::thumbsup::tired_face::tongue::triumph::trollface::two_hearts::two_men_holding_hands::two_women_holding_hands::unamused::v::walking::wave::weary::wink::woman::worried::yellow_heart::yum::zzz: - -### Nature - -:ant::baby_chick::bear::bee::beetle::bird::blossom::blowfish::boar::bouquet::bug::cactus::camel::cat::cat2::cherry_blossom::chestnut::chicken::cloud::cow::cow2::crescent_moon::crocodile::cyclone::deciduous_tree::dog::dog2::dolphin::dragon::dragon_face::dromedary_camel::ear_of_rice::earth_africa::earth_americas::earth_asia::elephant::evergreen_tree::fallen_leaf::first_quarter_moon::first_quarter_moon_with_face::fish::foggy::four_leaf_clover::frog::full_moon::full_moon_with_face::globe_with_meridians::goat::hamster::hatched_chick::hatching_chick::herb::hibiscus::honeybee::horse::koala::last_quarter_moon::last_quarter_moon_with_face::leaves::leopard::maple_leaf::milky_way::monkey::monkey_face::moon::mouse::mouse2::mushroom::new_moon::new_moon_with_face::night_with_stars::ocean::octocat::octopus::ox::palm_tree::panda_face::partly_sunny::paw_prints::penguin::pig::pig2::pig_nose::poodle::rabbit::rabbit2::racehorse::ram::rat::rooster::rose::seedling::sheep::shell::snail::snake::snowflake::snowman::squirrel::sun_with_face::sunflower::sunny::tiger::tiger2::tropical_fish::tulip::turtle::umbrella::volcano::waning_crescent_moon::waning_gibbous_moon::water_buffalo::waxing_crescent_moon::waxing_gibbous_moon::whale::whale2::wolf::zap: - -### Objects - -:8ball::alarm_clock::apple::art::athletic_shoe::baby_bottle::balloon::bamboo::banana::bar_chart::baseball::basketball::bath::bathtub::battery::beer::beers::bell::bento::bicyclist::bikini::birthday::black_joker::black_nib::blue_book::bomb::book::bookmark::bookmark_tabs::books::boot::bowling::bread::briefcase::bulb::cake::calendar::calling::camera::candy::card_index::cd::chart_with_downwards_trend::chart_with_upwards_trend::cherries::chocolate_bar::christmas_tree::clapper::clipboard::closed_book::closed_lock_with_key::closed_umbrella::clubs::cocktail::coffee::computer::confetti_ball::cookie::corn::credit_card::crown::crystal_ball::curry::custard::dango::dart::date::diamonds::dollar::dolls::door::doughnut::dress::dvd::e-mail::egg::eggplant::electric_plug::email::envelope::envelope_with_arrow::euro::eyeglasses::fax::file_folder::fireworks::fish_cake::fishing_pole_and_fish::flags::flashlight::flipper::floppy_disk::flower_playing_cards::football::footprints::fork_and_knife::fried_shrimp::fries::game_die::gem::ghost::gift::gift_heart::golf::grapes::green_apple::green_book::guitar::gun::hamburger::hammer::handbag::headphones::hearts::high_brightness::high_heel::hocho::honey_pot::horse_racing::hourglass::hourglass_flowing_sand::ice_cream::icecream::inbox_tray::incoming_envelope::iphone::jack_o_lantern::jeans::key::kimono::lantern::ledger::lemon::lipstick::lock::lock_with_ink_pen::lollipop::loop::loud_sound::loudspeaker::low_brightness::mag::mag_right::mahjong::mailbox::mailbox_closed::mailbox_with_mail::mailbox_with_no_mail::mans_shoe::meat_on_bone::mega::melon::memo::microphone::microscope::minidisc::money_with_wings::moneybag::mortar_board::mountain_bicyclist::movie_camera::musical_keyboard::musical_score::mute::name_badge::necktie::newspaper::no_bell::notebook::notebook_with_decorative_cover::nut_and_bolt::oden::open_book::open_file_folder::orange_book::outbox_tray::package::page_facing_up::page_with_curl::pager::paperclip::peach::pear::pencil::pencil2::phone::pill::pineapple::pizza::postal_horn::postbox::pouch::poultry_leg::pound::purse::pushpin::radio::ramen::ribbon::rice::rice_ball::rice_cracker::rice_scene::ring::rugby_football::running_shirt_with_sash::sake::sandal::santa::satellite::saxophone::school_satchel::scissors::scroll::seat::shaved_ice::shirt::shoe::shower::ski::smoking::snowboarder::soccer::sound::space_invader::spades::spaghetti::sparkle::sparkler::speaker::stew::straight_ruler::strawberry::surfer::sushi::sweet_potato::swimmer::syringe::tada::tanabata_tree::tangerine::tea::telephone::telephone_receiver::telescope::tennis::toilet::tomato::tophat::triangular_ruler::trophy::tropical_drink::trumpet::tshirt::tv::unlock::vhs::video_camera::video_game::violin::watch::watermelon::wind_chime::wine_glass::womans_clothes::womans_hat::wrench::yen: - -### Places - -:aerial_tramway::airplane::ambulance::anchor::articulated_lorry::atm::bank::barber::beginner::bike::blue_car::boat::bridge_at_night::bullettrain_front::bullettrain_side::bus::busstop::car::carousel_horse::checkered_flag::church::circus_tent::city_sunrise::city_sunset::cn::construction::convenience_store::crossed_flags::de::department_store::es::european_castle::european_post_office::factory::ferris_wheel::fire_engine::fountain::fr::fuelpump::gb::helicopter::hospital::hotel::hotsprings::house::house_with_garden::it::izakaya_lantern::japan::japanese_castle::jp::kr::light_rail::love_hotel::minibus::monorail::mount_fuji::mountain_cableway::mountain_railway::moyai::office::oncoming_automobile::oncoming_bus::oncoming_police_car::oncoming_taxi::performing_arts::police_car::post_office::railway_car::rainbow::red_car::rocket::roller_coaster::rotating_light::round_pushpin::rowboat::ru::sailboat::school::ship::slot_machine::speedboat::stars::station::statue_of_liberty::steam_locomotive::sunrise::sunrise_over_mountains::suspension_railway::taxi::tent::ticket::tokyo_tower::tractor::traffic_light::train::train2::tram::triangular_flag_on_post::trolleybus::truck::uk::us::vertical_traffic_light::warning::wedding: - -### Symbols - -:100::1234::a::ab::abc::abcd::accept::aquarius::aries::arrow_backward::arrow_double_down::arrow_double_up::arrow_down::arrow_down_small::arrow_forward::arrow_heading_down::arrow_heading_up::arrow_left::arrow_lower_left::arrow_lower_right::arrow_right::arrow_right_hook::arrow_up::arrow_up_down::arrow_up_small::arrow_upper_left::arrow_upper_right::arrows_clockwise::arrows_counterclockwise::b::baby_symbol::back::baggage_claim::ballot_box_with_check::bangbang::black_circle::black_large_square::black_medium_small_square::black_medium_square::black_small_square::black_square_button::cancer::capital_abcd::capricorn::chart::children_crossing::cinema::cl::clock1::clock10::clock1030::clock11::clock1130::clock12::clock1230::clock130::clock2::clock230::clock3::clock330::clock4::clock430::clock5::clock530::clock6::clock630::clock7::clock730::clock8::clock830::clock9::clock930::congratulations::cool::copyright::curly_loop::currency_exchange::customs::diamond_shape_with_a_dot_inside::do_not_litter::eight::eight_pointed_black_star::eight_spoked_asterisk::end::fast_forward::five::four::free::gemini::hash::heart_decoration::heavy_check_mark::heavy_division_sign::heavy_dollar_sign::heavy_exclamation_mark::heavy_minus_sign::heavy_multiplication_x::heavy_plus_sign::id::ideograph_advantage::information_source::interrobang::keycap_ten::koko::large_blue_circle::large_blue_diamond::large_orange_diamond::left_luggage::left_right_arrow::leftwards_arrow_with_hook::leo::libra::link::m::mens::metro::mobile_phone_off::negative_squared_cross_mark::new::ng::nine::no_bicycles::no_entry::no_entry_sign::no_mobile_phones::no_pedestrians::no_smoking::non-potable_water::o::o2::ok::on::one::ophiuchus::parking::part_alternation_mark::passport_control::pisces::potable_water::put_litter_in_its_place::radio_button::recycle::red_circle::registered::repeat::repeat_one::restroom::rewind::sa::sagittarius::scorpius::secret::seven::shipit::signal_strength::six::six_pointed_star::small_blue_diamond::small_orange_diamond::small_red_triangle::small_red_triangle_down::soon::sos::symbols::taurus::three::tm::top::trident::twisted_rightwards_arrows::two::u5272::u5408::u55b6::u6307::u6708::u6709::u6e80::u7121::u7533::u7981::u7a7a::underage::up::vibration_mode::virgo::vs::wavy_dash::wc::wheelchair::white_check_mark::white_circle::white_flower::white_large_square::white_medium_small_square::white_medium_square::white_small_square::white_square_button::womens::x::zero: - -## Insert - -``` -^^insert^^ - -^^*insert 倾斜*^^ *^^insert 倾斜 2^^* - -^^_insert 倾斜_^^ _^^insert 倾斜 2^^_ - -^^**insert 加粗**^^ **^^insert 加粗 2^^** - -^^__insert 加粗__^^ __^^insert 加粗 2^^__ - -^^***insert 倾斜 加粗***^^ ***^^insert 倾斜 加粗 2^^*** - -^^___insert 倾斜 加粗___^^ ___^^insert 倾斜 加粗 2^^___ - -**^^*insert 倾斜 加粗*^^** *^^**insert 倾斜 加粗 2**^^* - -__^^_insert 倾斜 加粗_^^__ _^^__insert 倾斜 加粗 2__^^_ - -**^^_insert 倾斜 加粗_^^** _^^**insert 倾斜 加粗 2**^^_ - -__^^*insert 倾斜 加粗*^^__ *^^__insert 倾斜 加粗 2__^^* -``` - -^^insert^^ - -^^*insert 倾斜*^^ *^^insert 倾斜 2^^* - -^^_insert 倾斜_^^ _^^insert 倾斜 2^^_ - -^^**insert 加粗**^^ **^^insert 加粗 2^^** - -^^__insert 加粗__^^ __^^insert 加粗 2^^__ - -^^***insert 倾斜 加粗***^^ ***^^insert 倾斜 加粗 2^^*** - -^^___insert 倾斜 加粗___^^ ___^^insert 倾斜 加粗 2^^___ - -**^^*insert 倾斜 加粗*^^** *^^**insert 倾斜 加粗 2**^^* - -__^^_insert 倾斜 加粗_^^__ _^^__insert 倾斜 加粗 2__^^_ - -**^^_insert 倾斜 加粗_^^** _^^**insert 倾斜 加粗 2**^^_ - -__^^*insert 倾斜 加粗*^^__ *^^__insert 倾斜 加粗 2__^^* - -## Admonition - -{{% admonition "note" "Admonition note" %}} -This is the content of the admonition. -{{% /admonition %}} - -{{% admonition "abstract" "Admonition abstract" %}} -This is the content of the admonition. -{{% /admonition %}} - -{{% admonition "info" "Admonition info" %}} -This is the content of the admonition. -{{% /admonition %}} - -{{% admonition "tip" "Admonition tip" %}} -This is the content of the admonition. -{{% /admonition %}} - -{{% admonition "success" "Admonition success" %}} -This is the content of the admonition. -{{% /admonition %}} - -{{% admonition "question" "Admonition question" %}} -This is the content of the admonition. -{{% /admonition %}} - -{{% admonition "warning" "Admonition warning" %}} -This is the content of the admonition. -{{% /admonition %}} - -{{% admonition "failure" "Admonition failure" %}} -This is the content of the admonition. -{{% /admonition %}} - -{{% admonition "danger" "Admonition danger" %}} -This is the content of the admonition. -{{% /admonition %}} - -{{% admonition "bug" "Admonition bug" %}} -This is the content of the admonition. -{{% /admonition %}} - -{{% admonition "example" "Admonition example" %}} -This is the content of the admonition. -{{% /admonition %}} - -{{% admonition "quote" "Admonition quote" %}} -This is the content of the admonition. -{{% /admonition %}} - -{{% admonition title="Admonition" details="true" %}} -This is the content of the admonition. -{{% /admonition %}} diff --git a/exampleSite/content/posts/basic-markdown-syntax.en.md b/exampleSite/content/posts/basic-markdown-syntax.en.md new file mode 100644 index 0000000..0186cc6 --- /dev/null +++ b/exampleSite/content/posts/basic-markdown-syntax.en.md @@ -0,0 +1,772 @@ +--- +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." +license: "" + +tags: ["markdown"] +categories: ["markdown"] +hiddenFromHomePage: false + +featuredImage: "/images/basic-markdown-syntax/featured-image.png" +featuredImagePreview: "" + +toc: true +autoCollapseToc: true +math: false +lightgallery: true +linkToMarkdown: true +share: + enable: true +comment: 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. +> +> -- _John Gruber_ + +Without further delay, let us go over the main elements of Markdown and what the resulting HTML looks like! + +{{< admonition tip >}} +:(far fa-bookmark): 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 (`[ ]`) in front of 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 "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 + +```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-shortcodes/#image), which provides more features. +{{< /admonition >}} diff --git a/exampleSite/content/posts/basic-markdown-syntax.fr.md b/exampleSite/content/posts/basic-markdown-syntax.fr.md new file mode 100644 index 0000000..55c81fe --- /dev/null +++ b/exampleSite/content/posts/basic-markdown-syntax.fr.md @@ -0,0 +1,777 @@ +--- +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." +license: "" + +tags: ["markdown"] +categories: ["markdown"] +hiddenFromHomePage: false + +featuredImage: "/images/basic-markdown-syntax/featured-image.png" +featuredImagePreview: "" + +toc: true +autoCollapseToc: true +math: false +lightgallery: true +linkToMarkdown: true +share: + enable: true +comment: 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 [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. +> +> -- _John Gruber_ + +Without further delay, let us go over the main elements of Markdown and what the resulting HTML looks like! + +{{< admonition tip >}} +:(far fa-bookmark): 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 (`[ ]`) in front of 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 "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 + +```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-shortcodes/#image), which provides more features. +{{< /admonition >}} diff --git a/exampleSite/content/posts/basic-markdown-syntax.zh-cn.md b/exampleSite/content/posts/basic-markdown-syntax.zh-cn.md new file mode 100644 index 0000000..ab489b9 --- /dev/null +++ b/exampleSite/content/posts/basic-markdown-syntax.zh-cn.md @@ -0,0 +1,779 @@ +--- +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 语法和格式." +license: "" + +tags: ["markdown"] +categories: ["markdown"] +hiddenFromHomePage: false + +featuredImage: "/images/basic-markdown-syntax/featured-image.png" +featuredImagePreview: "" + +toc: true +autoCollapseToc: true +math: false +lightgallery: true +linkToMarkdown: true +share: + enable: true +comment: 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 语法的最大灵感来源是纯文本电子邮件的格式. +> +> -- _John Gruber_ + +话不多说, 我们来回顾一下 Markdown 的主要语法以及生成的 HTML 样式! + +{{< admonition tip >}} +:(far fa-bookmark): 将此页保存为书签，以备将来参考! +{{< /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 +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 +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 "文本右对齐或居中对齐" >}} +在任何标题下方的破折号右侧添加冒号将使该列的文本右对齐. + +在任何标题下方的破折号两边添加冒号将使该列的对齐文本居中. + +```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 链接 + +### 基本链接 + +```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-shortcodes/#image). +{{< /admonition >}} diff --git a/exampleSite/content/posts/emoji-support.en.md b/exampleSite/content/posts/emoji-support.en.md index a457923..01adeac 100644 --- a/exampleSite/content/posts/emoji-support.en.md +++ b/exampleSite/content/posts/emoji-support.en.md @@ -1,24 +1,28 @@ --- +weight: 5 title: "Emoji Support" date: 2019-10-01T17:55:28+08:00 lastmod: 2019-10-01T17:55:28+08:00 draft: false -author: "Hugo Authors" -authorLink: "https://gohugo.io/" -description: "Guide to emoji usage in Hugo" +author: "Dillon" +authorLink: "https://dillonzq.com" +description: "Guide to emoji usage in Hugo and LoveIt." license: "" tags: ["emoji"] -categories: ["theme"] +categories: ["markdown"] hiddenFromHomePage: false -featuredImage: /images/emoji.jpg +featuredImage: "/images/emoji-support/featured-image.jpg" featuredImagePreview: "" -toc: false +toc: true autoCollapseToc: true -lightgallery: true math: false +lightgallery: true +linkToMarkdown: true +share: + enable: true comment: true --- @@ -28,35 +32,1284 @@ Emoji can be enabled in a Hugo project in a number of ways. The [`emojify`](https://gohugo.io/functions/emojify/) function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes). -To enable emoji globally, set `enableEmoji` to `true` in your site’s [configuration](https://gohugo.io/getting-started/configuration/) and then you can type emoji shorthand codes directly in content files; e.g. +To enable emoji globally, set `enableEmoji` to `true` in your site’s [configuration](https://gohugo.io/getting-started/configuration/) and then you can type emoji shorthand codes directly in content files. + +These begin and end with a **colon** and include the **code** of an emoji: + +```markdown +Gone camping! {?:}tent: Be back soon. + +That is so funny! {?:}joy: +``` + +The rendered output looks like this: + +Gone camping! :tent: Be back soon. + +That is so funny! :joy: + +## Emoji Cheat Sheet + +The emoji cheat sheet is a useful reference for emoji shorthand codes. + +### Smileys & Emotion + +#### Face Smiling + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:grinning:</span> | `grinning` | <span class="emoji">:smiley:</span> | `smiley` | +| <span class="emoji">:smile:</span> | `smile` | <span class="emoji">:grin:</span> | `grin` | +| <span class="emoji">:laughing:</span> | `laughing` <br /> `satisfied` | <span class="emoji">:sweat_smile:</span> | `sweat_smile` | +| <span class="emoji">:rofl:</span> | `rofl` | <span class="emoji">:joy:</span> | `joy` | +| <span class="emoji">:slightly_smiling_face:</span> | `slightly_smiling_face` | <span class="emoji">:upside_down_face:</span> | `upside_down_face` | +| <span class="emoji">:wink:</span> | `wink` | <span class="emoji">:blush:</span> | `blush` | +| <span class="emoji">:innocent:</span> | `innocent` | | | + +#### Face Affection + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:heart_eyes:</span> | `heart_eyes` | <span class="emoji">:kissing_heart:</span> | `kissing_heart` | +| <span class="emoji">:kissing:</span> | `kissing` | <span class="emoji">:relaxed:</span> | `relaxed` | +| <span class="emoji">:kissing_closed_eyes:</span> | `kissing_closed_eyes` | <span class="emoji">:kissing_smiling_eyes:</span> | `kissing_smiling_eyes` | + +#### Face Tongue + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:yum:</span> | `yum` | <span class="emoji">:stuck_out_tongue:</span> | `stuck_out_tongue` | +| <span class="emoji">:stuck_out_tongue_winking_eye:</span> | `stuck_out_tongue_winking_eye` | <span class="emoji">:stuck_out_tongue_closed_eyes:</span> | `stuck_out_tongue_closed_eyes` | +| <span class="emoji">:money_mouth_face:</span> | `money_mouth_face` | | | + +#### Face Hand + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:hugs:</span> | `hugs` | <span class="emoji">:thinking:</span> | `thinking` | + +#### Face Neutral Skeptical + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:zipper_mouth_face:</span> | `zipper_mouth_face` | <span class="emoji">:neutral_face:</span> | `neutral_face` | +| <span class="emoji">:expressionless:</span> | `expressionless` | <span class="emoji">:no_mouth:</span> | `no_mouth` | +| <span class="emoji">:smirk:</span> | `smirk` | <span class="emoji">:unamused:</span> | `unamused` | +| <span class="emoji">:roll_eyes:</span> | `roll_eyes` | <span class="emoji">:grimacing:</span> | `grimacing` | +| <span class="emoji">:lying_face:</span> | `lying_face` | | | + +#### Face Sleepy + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:relieved:</span> | `relieved` | <span class="emoji">:pensive:</span> | `pensive` | +| <span class="emoji">:sleepy:</span> | `sleepy` | <span class="emoji">:drooling_face:</span> | `drooling_face` | +| <span class="emoji">:sleeping:</span> | `sleeping` | | | + +#### Face Unwell + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:mask:</span> | `mask` | <span class="emoji">:face_with_thermometer:</span> | `face_with_thermometer` | +| <span class="emoji">:face_with_head_bandage:</span> | `face_with_head_bandage` | <span class="emoji">:nauseated_face:</span> | `nauseated_face` | +| <span class="emoji">:sneezing_face:</span> | `sneezing_face` | <span class="emoji">:dizzy_face:</span> | `dizzy_face` | + +#### Face Hat + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:cowboy_hat_face:</span> | `cowboy_hat_face` | | | + +#### Face Glasses + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:sunglasses:</span> | `sunglasses` | <span class="emoji">:nerd_face:</span> | `nerd_face` | + +#### Face Concerned + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:confused:</span> | `confused` | <span class="emoji">:worried:</span> | `worried` | +| <span class="emoji">:slightly_frowning_face:</span> | `slightly_frowning_face` | <span class="emoji">:frowning_face:</span> | `frowning_face` | +| <span class="emoji">:open_mouth:</span> | `open_mouth` | <span class="emoji">:hushed:</span> | `hushed` | +| <span class="emoji">:astonished:</span> | `astonished` | <span class="emoji">:flushed:</span> | `flushed` | +| <span class="emoji">:frowning:</span> | `frowning` | <span class="emoji">:anguished:</span> | `anguished` | +| <span class="emoji">:fearful:</span> | `fearful` | <span class="emoji">:cold_sweat:</span> | `cold_sweat` | +| <span class="emoji">:disappointed_relieved:</span> | `disappointed_relieved` | <span class="emoji">:cry:</span> | `cry` | +| <span class="emoji">:sob:</span> | `sob` | <span class="emoji">:scream:</span> | `scream` | +| <span class="emoji">:confounded:</span> | `confounded` | <span class="emoji">:persevere:</span> | `persevere` | +| <span class="emoji">:disappointed:</span> | `disappointed` | <span class="emoji">:sweat:</span> | `sweat` | +| <span class="emoji">:weary:</span> | `weary` | <span class="emoji">:tired_face:</span> | `tired_face` | + +#### Face Negative + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:triumph:</span> | `triumph` | <span class="emoji">:pout:</span> | `pout` <br /> `rage` | +| <span class="emoji">:angry:</span> | `angry` | <span class="emoji">:smiling_imp:</span> | `smiling_imp` | +| <span class="emoji">:imp:</span> | `imp` | <span class="emoji">:skull:</span> | `skull` | +| <span class="emoji">:skull_and_crossbones:</span> | `skull_and_crossbones` | | | + +#### Face Costume + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:hankey:</span> | `hankey` <br /> `poop` <br /> `shit` | <span class="emoji">:clown_face:</span> | `clown_face` | +| <span class="emoji">:japanese_ogre:</span> | `japanese_ogre` | <span class="emoji">:japanese_goblin:</span> | `japanese_goblin` | +| <span class="emoji">:ghost:</span> | `ghost` | <span class="emoji">:alien:</span> | `alien` | +| <span class="emoji">:space_invader:</span> | `space_invader` | <span class="emoji">:robot:</span> | `robot` | + +#### Cat Face + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:smiley_cat:</span> | `smiley_cat` | <span class="emoji">:smile_cat:</span> | `smile_cat` | +| <span class="emoji">:joy_cat:</span> | `joy_cat` | <span class="emoji">:heart_eyes_cat:</span> | `heart_eyes_cat` | +| <span class="emoji">:smirk_cat:</span> | `smirk_cat` | <span class="emoji">:kissing_cat:</span> | `kissing_cat` | +| <span class="emoji">:scream_cat:</span> | `scream_cat` | <span class="emoji">:crying_cat_face:</span> | `crying_cat_face` | +| <span class="emoji">:pouting_cat:</span> | `pouting_cat` | | | + +#### Monkey Face + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:see_no_evil:</span> | `see_no_evil` | <span class="emoji">:hear_no_evil:</span> | `hear_no_evil` | +| <span class="emoji">:speak_no_evil:</span> | `speak_no_evil` | | | + +#### Emotion + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:kiss:</span> | `kiss` | <span class="emoji">:love_letter:</span> | `love_letter` | +| <span class="emoji">:cupid:</span> | `cupid` | <span class="emoji">:gift_heart:</span> | `gift_heart` | +| <span class="emoji">:sparkling_heart:</span> | `sparkling_heart` | <span class="emoji">:heartpulse:</span> | `heartpulse` | +| <span class="emoji">:heartbeat:</span> | `heartbeat` | <span class="emoji">:revolving_hearts:</span> | `revolving_hearts` | +| <span class="emoji">:two_hearts:</span> | `two_hearts` | <span class="emoji">:heart_decoration:</span> | `heart_decoration` | +| <span class="emoji">:heavy_heart_exclamation:</span> | `heavy_heart_exclamation` | <span class="emoji">:broken_heart:</span> | `broken_heart` | +| <span class="emoji">:heart:</span> | `heart` | <span class="emoji">:yellow_heart:</span> | `yellow_heart` | +| <span class="emoji">:green_heart:</span> | `green_heart` | <span class="emoji">:blue_heart:</span> | `blue_heart` | +| <span class="emoji">:purple_heart:</span> | `purple_heart` | <span class="emoji">:black_heart:</span> | `black_heart` | +| <span class="emoji">:100:</span> | `100` | <span class="emoji">:anger:</span> | `anger` | +| <span class="emoji">:boom:</span> | `boom` <br /> `collision` | <span class="emoji">:dizzy:</span> | `dizzy` | +| <span class="emoji">:sweat_drops:</span> | `sweat_drops` | <span class="emoji">:dash:</span> | `dash` | +| <span class="emoji">:hole:</span> | `hole` | <span class="emoji">:bomb:</span> | `bomb` | +| <span class="emoji">:speech_balloon:</span> | `speech_balloon` | <span class="emoji">:eye_speech_bubble:</span> | `eye_speech_bubble` | +| <span class="emoji">:right_anger_bubble:</span> | `right_anger_bubble` | <span class="emoji">:thought_balloon:</span> | `thought_balloon` | +| <span class="emoji">:zzz:</span> | `zzz` | | | + +### People & Body + +#### Hand Fingers Open + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:wave:</span> | `wave` | <span class="emoji">:raised_back_of_hand:</span> | `raised_back_of_hand` | +| <span class="emoji">:raised_hand_with_fingers_splayed:</span> | `raised_hand_with_fingers_splayed` | <span class="emoji">:hand:</span> | `hand` <br /> `raised_hand` | +| <span class="emoji">:vulcan_salute:</span> | `vulcan_salute` | | | + +#### Hand Fingers Partial + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:ok_hand:</span> | `ok_hand` | <span class="emoji">:v:</span> | `v` | +| <span class="emoji">:crossed_fingers:</span> | `crossed_fingers` | <span class="emoji">:metal:</span> | `metal` | +| <span class="emoji">:call_me_hand:</span> | `call_me_hand` | | | + +#### Hand Single Finger + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:point_left:</span> | `point_left` | <span class="emoji">:point_right:</span> | `point_right` | +| <span class="emoji">:point_up_2:</span> | `point_up_2` | <span class="emoji">:fu:</span> | `fu` <br /> `middle_finger` | +| <span class="emoji">:point_down:</span> | `point_down` | <span class="emoji">:point_up:</span> | `point_up` | + +#### Hand Fingers Closed + +| icon | code | icon | code | +| :-: | - | :-: | - | +| :+1: | `:+1:` <br /> `thumbsup` | :-1: | `:-1:` <br /> `thumbsdown` | +| <span class="emoji">:fist:</span> | `fist` <br /> `fist_raised` | <span class="emoji">:facepunch:</span> | `facepunch` <br /> `fist_oncoming` <br /> `punch` | +| <span class="emoji">:fist_left:</span> | `fist_left` | <span class="emoji">:fist_right:</span> | `fist_right` | + +#### Hands + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:clap:</span> | `clap` | <span class="emoji">:raised_hands:</span> | `raised_hands` | +| <span class="emoji">:open_hands:</span> | `open_hands` | <span class="emoji">:handshake:</span> | `handshake` | +| <span class="emoji">:pray:</span> | `pray` | | | + +#### Hand Prop + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:writing_hand:</span> | `writing_hand` | <span class="emoji">:nail_care:</span> | `nail_care` | +| <span class="emoji">:selfie:</span> | `selfie` | | | + +#### Body Parts + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:muscle:</span> | `muscle` | <span class="emoji">:ear:</span> | `ear` | +| <span class="emoji">:nose:</span> | `nose` | <span class="emoji">:eyes:</span> | `eyes` | +| <span class="emoji">:eye:</span> | `eye` | <span class="emoji">:tongue:</span> | `tongue` | +| <span class="emoji">:lips:</span> | `lips` | | | + +#### Person + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:baby:</span> | `baby` | <span class="emoji">:boy:</span> | `boy` | +| <span class="emoji">:girl:</span> | `girl` | <span class="emoji">:blonde_man:</span> | `blonde_man` <br /> `person_with_blond_hair` | +| <span class="emoji">:man:</span> | `man` | <span class="emoji">:woman:</span> | `woman` | +| <span class="emoji">:blonde_woman:</span> | `blonde_woman` | <span class="emoji">:older_man:</span> | `older_man` | +| <span class="emoji">:older_woman:</span> | `older_woman` | | | + +#### Person Gesture + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:frowning_woman:</span> | `frowning_woman` <br /> `person_frowning` | <span class="emoji">:frowning_man:</span> | `frowning_man` | +| <span class="emoji">:person_with_pouting_face:</span> | `person_with_pouting_face` <br /> `pouting_woman` | <span class="emoji">:pouting_man:</span> | `pouting_man` | +| <span class="emoji">:ng_woman:</span> | `ng_woman` <br /> `no_good` <br /> `no_good_woman` | <span class="emoji">:ng_man:</span> | `ng_man` <br /> `no_good_man` | +| <span class="emoji">:ok_woman:</span> | `ok_woman` | <span class="emoji">:ok_man:</span> | `ok_man` | +| <span class="emoji">:information_desk_person:</span> | `information_desk_person` <br /> `sassy_woman` <br /> `tipping_hand_woman` | <span class="emoji">:sassy_man:</span> | `sassy_man` <br /> `tipping_hand_man` | +| <span class="emoji">:raising_hand:</span> | `raising_hand` <br /> `raising_hand_woman` | <span class="emoji">:raising_hand_man:</span> | `raising_hand_man` | +| <span class="emoji">:bow:</span> | `bow` <br /> `bowing_man` | <span class="emoji">:bowing_woman:</span> | `bowing_woman` | +| <span class="emoji">:man_facepalming:</span> | `man_facepalming` | <span class="emoji">:woman_facepalming:</span> | `woman_facepalming` | +| <span class="emoji">:man_shrugging:</span> | `man_shrugging` | <span class="emoji">:woman_shrugging:</span> | `woman_shrugging` | + +#### Person Role + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:man_health_worker:</span> | `man_health_worker` | <span class="emoji">:woman_health_worker:</span> | `woman_health_worker` | +| <span class="emoji">:man_student:</span> | `man_student` | <span class="emoji">:woman_student:</span> | `woman_student` | +| <span class="emoji">:man_teacher:</span> | `man_teacher` | <span class="emoji">:woman_teacher:</span> | `woman_teacher` | +| <span class="emoji">:man_judge:</span> | `man_judge` | <span class="emoji">:woman_judge:</span> | `woman_judge` | +| <span class="emoji">:man_farmer:</span> | `man_farmer` | <span class="emoji">:woman_farmer:</span> | `woman_farmer` | +| <span class="emoji">:man_cook:</span> | `man_cook` | <span class="emoji">:woman_cook:</span> | `woman_cook` | +| <span class="emoji">:man_mechanic:</span> | `man_mechanic` | <span class="emoji">:woman_mechanic:</span> | `woman_mechanic` | +| <span class="emoji">:man_factory_worker:</span> | `man_factory_worker` | <span class="emoji">:woman_factory_worker:</span> | `woman_factory_worker` | +| <span class="emoji">:man_office_worker:</span> | `man_office_worker` | <span class="emoji">:woman_office_worker:</span> | `woman_office_worker` | +| <span class="emoji">:man_scientist:</span> | `man_scientist` | <span class="emoji">:woman_scientist:</span> | `woman_scientist` | +| <span class="emoji">:man_technologist:</span> | `man_technologist` | <span class="emoji">:woman_technologist:</span> | `woman_technologist` | +| <span class="emoji">:man_singer:</span> | `man_singer` | <span class="emoji">:woman_singer:</span> | `woman_singer` | +| <span class="emoji">:man_artist:</span> | `man_artist` | <span class="emoji">:woman_artist:</span> | `woman_artist` | +| <span class="emoji">:man_pilot:</span> | `man_pilot` | <span class="emoji">:woman_pilot:</span> | `woman_pilot` | +| <span class="emoji">:man_astronaut:</span> | `man_astronaut` | <span class="emoji">:woman_astronaut:</span> | `woman_astronaut` | +| <span class="emoji">:man_firefighter:</span> | `man_firefighter` | <span class="emoji">:woman_firefighter:</span> | `woman_firefighter` | +| <span class="emoji">:cop:</span> | `cop` <br /> `policeman` | <span class="emoji">:policewoman:</span> | `policewoman` | +| <span class="emoji">:detective:</span> | `detective` <br /> `male_detective` | <span class="emoji">:female_detective:</span> | `female_detective` | +| <span class="emoji">:guardsman:</span> | `guardsman` | <span class="emoji">:guardswoman:</span> | `guardswoman` | +| <span class="emoji">:construction_worker:</span> | `construction_worker` <br /> `construction_worker_man` | <span class="emoji">:construction_worker_woman:</span> | `construction_worker_woman` | +| <span class="emoji">:prince:</span> | `prince` | <span class="emoji">:princess:</span> | `princess` | +| <span class="emoji">:man_with_turban:</span> | `man_with_turban` | <span class="emoji">:woman_with_turban:</span> | `woman_with_turban` | +| <span class="emoji">:man_with_gua_pi_mao:</span> | `man_with_gua_pi_mao` | <span class="emoji">:man_in_tuxedo:</span> | `man_in_tuxedo` | +| <span class="emoji">:bride_with_veil:</span> | `bride_with_veil` | <span class="emoji">:pregnant_woman:</span> | `pregnant_woman` | + +#### Person Fantasy + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:angel:</span> | `angel` | <span class="emoji">:santa:</span> | `santa` | +| <span class="emoji">:mrs_claus:</span> | `mrs_claus` | | | + +#### Person Activity + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:massage:</span> | `massage` <br /> `massage_woman` | <span class="emoji">:massage_man:</span> | `massage_man` | +| <span class="emoji">:haircut:</span> | `haircut` <br /> `haircut_woman` | <span class="emoji">:haircut_man:</span> | `haircut_man` | +| <span class="emoji">:walking:</span> | `walking` <br /> `walking_man` | <span class="emoji">:walking_woman:</span> | `walking_woman` | +| <span class="emoji">:runner:</span> | `runner` <br /> `running` <br /> `running_man` | <span class="emoji">:running_woman:</span> | `running_woman` | +| <span class="emoji">:dancer:</span> | `dancer` | <span class="emoji">:man_dancing:</span> | `man_dancing` | +| <span class="emoji">:business_suit_levitating:</span> | `business_suit_levitating` | <span class="emoji">:dancers:</span> | `dancers` <br /> `dancing_women` | +| <span class="emoji">:dancing_men:</span> | `dancing_men` | | | + +#### Person Sport + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:person_fencing:</span> | `person_fencing` | <span class="emoji">:horse_racing:</span> | `horse_racing` | +| <span class="emoji">:skier:</span> | `skier` | <span class="emoji">:snowboarder:</span> | `snowboarder` | +| <span class="emoji">:golfing_man:</span> | `golfing_man` | <span class="emoji">:golfing_woman:</span> | `golfing_woman` | +| <span class="emoji">:surfer:</span> | `surfer` <br /> `surfing_man` | <span class="emoji">:surfing_woman:</span> | `surfing_woman` | +| <span class="emoji">:rowboat:</span> | `rowboat` <br /> `rowing_man` | <span class="emoji">:rowing_woman:</span> | `rowing_woman` | +| <span class="emoji">:swimmer:</span> | `swimmer` <br /> `swimming_man` | <span class="emoji">:swimming_woman:</span> | `swimming_woman` | +| <span class="emoji">:basketball_man:</span> | `basketball_man` | <span class="emoji">:basketball_woman:</span> | `basketball_woman` | +| <span class="emoji">:weight_lifting_man:</span> | `weight_lifting_man` | <span class="emoji">:weight_lifting_woman:</span> | `weight_lifting_woman` | +| <span class="emoji">:bicyclist:</span> | `bicyclist` <br /> `biking_man` | <span class="emoji">:biking_woman:</span> | `biking_woman` | +| <span class="emoji">:mountain_bicyclist:</span> | `mountain_bicyclist` <br /> `mountain_biking_man` | <span class="emoji">:mountain_biking_woman:</span> | `mountain_biking_woman` | +| <span class="emoji">:man_cartwheeling:</span> | `man_cartwheeling` | <span class="emoji">:woman_cartwheeling:</span> | `woman_cartwheeling` | +| <span class="emoji">:men_wrestling:</span> | `men_wrestling` | <span class="emoji">:women_wrestling:</span> | `women_wrestling` | +| <span class="emoji">:man_playing_water_polo:</span> | `man_playing_water_polo` | <span class="emoji">:woman_playing_water_polo:</span> | `woman_playing_water_polo` | +| <span class="emoji">:man_playing_handball:</span> | `man_playing_handball` | <span class="emoji">:woman_playing_handball:</span> | `woman_playing_handball` | +| <span class="emoji">:man_juggling:</span> | `man_juggling` | <span class="emoji">:woman_juggling:</span> | `woman_juggling` | + +#### Person Resting + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:bath:</span> | `bath` | <span class="emoji">:sleeping_bed:</span> | `sleeping_bed` | + +#### Family + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:two_women_holding_hands:</span> | `two_women_holding_hands` | <span class="emoji">:couple:</span> | `couple` | +| <span class="emoji">:two_men_holding_hands:</span> | `two_men_holding_hands` | <span class="emoji">:couplekiss_man_woman:</span> | `couplekiss_man_woman` | +| <span class="emoji">:couplekiss_man_man:</span> | `couplekiss_man_man` | <span class="emoji">:couplekiss_woman_woman:</span> | `couplekiss_woman_woman` | +| <span class="emoji">:couple_with_heart:</span> | `couple_with_heart` <br /> `couple_with_heart_woman_man` | <span class="emoji">:couple_with_heart_man_man:</span> | `couple_with_heart_man_man` | +| <span class="emoji">:couple_with_heart_woman_woman:</span> | `couple_with_heart_woman_woman` | <span class="emoji">:family:</span> | `family` <br /> `family_man_woman_boy` | +| <span class="emoji">:family_man_woman_girl:</span> | `family_man_woman_girl` | <span class="emoji">:family_man_woman_girl_boy:</span> | `family_man_woman_girl_boy` | +| <span class="emoji">:family_man_woman_boy_boy:</span> | `family_man_woman_boy_boy` | <span class="emoji">:family_man_woman_girl_girl:</span> | `family_man_woman_girl_girl` | +| <span class="emoji">:family_man_man_boy:</span> | `family_man_man_boy` | <span class="emoji">:family_man_man_girl:</span> | `family_man_man_girl` | +| <span class="emoji">:family_man_man_girl_boy:</span> | `family_man_man_girl_boy` | <span class="emoji">:family_man_man_boy_boy:</span> | `family_man_man_boy_boy` | +| <span class="emoji">:family_man_man_girl_girl:</span> | `family_man_man_girl_girl` | <span class="emoji">:family_woman_woman_boy:</span> | `family_woman_woman_boy` | +| <span class="emoji">:family_woman_woman_girl:</span> | `family_woman_woman_girl` | <span class="emoji">:family_woman_woman_girl_boy:</span> | `family_woman_woman_girl_boy` | +| <span class="emoji">:family_woman_woman_boy_boy:</span> | `family_woman_woman_boy_boy` | <span class="emoji">:family_woman_woman_girl_girl:</span> | `family_woman_woman_girl_girl` | +| <span class="emoji">:family_man_boy:</span> | `family_man_boy` | <span class="emoji">:family_man_boy_boy:</span> | `family_man_boy_boy` | +| <span class="emoji">:family_man_girl:</span> | `family_man_girl` | <span class="emoji">:family_man_girl_boy:</span> | `family_man_girl_boy` | +| <span class="emoji">:family_man_girl_girl:</span> | `family_man_girl_girl` | <span class="emoji">:family_woman_boy:</span> | `family_woman_boy` | +| <span class="emoji">:family_woman_boy_boy:</span> | `family_woman_boy_boy` | <span class="emoji">:family_woman_girl:</span> | `family_woman_girl` | +| <span class="emoji">:family_woman_girl_boy:</span> | `family_woman_girl_boy` | <span class="emoji">:family_woman_girl_girl:</span> | `family_woman_girl_girl` | + +#### Person Symbol + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:speaking_head:</span> | `speaking_head` | <span class="emoji">:bust_in_silhouette:</span> | `bust_in_silhouette` | +| <span class="emoji">:busts_in_silhouette:</span> | `busts_in_silhouette` | <span class="emoji">:footprints:</span> | `footprints` | + +### Animals & Nature + +#### Animal Mammal + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:monkey_face:</span> | `monkey_face` | <span class="emoji">:monkey:</span> | `monkey` | +| <span class="emoji">:gorilla:</span> | `gorilla` | <span class="emoji">:dog:</span> | `dog` | +| <span class="emoji">:dog2:</span> | `dog2` | <span class="emoji">:poodle:</span> | `poodle` | +| <span class="emoji">:wolf:</span> | `wolf` | <span class="emoji">:fox_face:</span> | `fox_face` | +| <span class="emoji">:cat:</span> | `cat` | <span class="emoji">:cat2:</span> | `cat2` | +| <span class="emoji">:lion:</span> | `lion` | <span class="emoji">:tiger:</span> | `tiger` | +| <span class="emoji">:tiger2:</span> | `tiger2` | <span class="emoji">:leopard:</span> | `leopard` | +| <span class="emoji">:horse:</span> | `horse` | <span class="emoji">:racehorse:</span> | `racehorse` | +| <span class="emoji">:unicorn:</span> | `unicorn` | <span class="emoji">:deer:</span> | `deer` | +| <span class="emoji">:cow:</span> | `cow` | <span class="emoji">:ox:</span> | `ox` | +| <span class="emoji">:water_buffalo:</span> | `water_buffalo` | <span class="emoji">:cow2:</span> | `cow2` | +| <span class="emoji">:pig:</span> | `pig` | <span class="emoji">:pig2:</span> | `pig2` | +| <span class="emoji">:boar:</span> | `boar` | <span class="emoji">:pig_nose:</span> | `pig_nose` | +| <span class="emoji">:ram:</span> | `ram` | <span class="emoji">:sheep:</span> | `sheep` | +| <span class="emoji">:goat:</span> | `goat` | <span class="emoji">:dromedary_camel:</span> | `dromedary_camel` | +| <span class="emoji">:camel:</span> | `camel` | <span class="emoji">:elephant:</span> | `elephant` | +| <span class="emoji">:rhinoceros:</span> | `rhinoceros` | <span class="emoji">:mouse:</span> | `mouse` | +| <span class="emoji">:mouse2:</span> | `mouse2` | <span class="emoji">:rat:</span> | `rat` | +| <span class="emoji">:hamster:</span> | `hamster` | <span class="emoji">:rabbit:</span> | `rabbit` | +| <span class="emoji">:rabbit2:</span> | `rabbit2` | <span class="emoji">:chipmunk:</span> | `chipmunk` | +| <span class="emoji">:bat:</span> | `bat` | <span class="emoji">:bear:</span> | `bear` | +| <span class="emoji">:koala:</span> | `koala` | <span class="emoji">:panda_face:</span> | `panda_face` | +| <span class="emoji">:feet:</span> | `feet` <br /> `paw_prints` | | | + +#### Animal Bird + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:turkey:</span> | `turkey` | <span class="emoji">:chicken:</span> | `chicken` | +| <span class="emoji">:rooster:</span> | `rooster` | <span class="emoji">:hatching_chick:</span> | `hatching_chick` | +| <span class="emoji">:baby_chick:</span> | `baby_chick` | <span class="emoji">:hatched_chick:</span> | `hatched_chick` | +| <span class="emoji">:bird:</span> | `bird` | <span class="emoji">:penguin:</span> | `penguin` | +| <span class="emoji">:dove:</span> | `dove` | <span class="emoji">:eagle:</span> | `eagle` | +| <span class="emoji">:duck:</span> | `duck` | <span class="emoji">:owl:</span> | `owl` | + +#### Animal Amphibian + +| | icon | code | | +| - | :-: | - | - | +| <span class="emoji">:frog:</span> | `frog` | + +#### Animal Reptile + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:crocodile:</span> | `crocodile` | <span class="emoji">:turtle:</span> | `turtle` | +| <span class="emoji">:lizard:</span> | `lizard` | <span class="emoji">:snake:</span> | `snake` | +| <span class="emoji">:dragon_face:</span> | `dragon_face` | <span class="emoji">:dragon:</span> | `dragon` | + +#### Animal Marine + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:whale:</span> | `whale` | <span class="emoji">:whale2:</span> | `whale2` | +| <span class="emoji">:dolphin:</span> | `dolphin` <br /> `flipper` | <span class="emoji">:fish:</span> | `fish` | +| <span class="emoji">:tropical_fish:</span> | `tropical_fish` | <span class="emoji">:blowfish:</span> | `blowfish` | +| <span class="emoji">:shark:</span> | `shark` | <span class="emoji">:octopus:</span> | `octopus` | +| <span class="emoji">:shell:</span> | `shell` | | | + +#### Animal Bug + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:snail:</span> | `snail` | <span class="emoji">:butterfly:</span> | `butterfly` | +| <span class="emoji">:bug:</span> | `bug` | <span class="emoji">:ant:</span> | `ant` | +| <span class="emoji">:bee:</span> | `bee` <br /> `honeybee` | <span class="emoji">:beetle:</span> | `beetle` | +| <span class="emoji">:spider:</span> | `spider` | <span class="emoji">:spider_web:</span> | `spider_web` | +| <span class="emoji">:scorpion:</span> | `scorpion` | | | + +#### Plant Flower + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:bouquet:</span> | `bouquet` | <span class="emoji">:cherry_blossom:</span> | `cherry_blossom` | +| <span class="emoji">:white_flower:</span> | `white_flower` | <span class="emoji">:rosette:</span> | `rosette` | +| <span class="emoji">:rose:</span> | `rose` | <span class="emoji">:wilted_flower:</span> | `wilted_flower` | +| <span class="emoji">:hibiscus:</span> | `hibiscus` | <span class="emoji">:sunflower:</span> | `sunflower` | +| <span class="emoji">:blossom:</span> | `blossom` | <span class="emoji">:tulip:</span> | `tulip` | + +#### Plant Other + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:seedling:</span> | `seedling` | <span class="emoji">:evergreen_tree:</span> | `evergreen_tree` | +| <span class="emoji">:deciduous_tree:</span> | `deciduous_tree` | <span class="emoji">:palm_tree:</span> | `palm_tree` | +| <span class="emoji">:cactus:</span> | `cactus` | <span class="emoji">:ear_of_rice:</span> | `ear_of_rice` | +| <span class="emoji">:herb:</span> | `herb` | <span class="emoji">:shamrock:</span> | `shamrock` | +| <span class="emoji">:four_leaf_clover:</span> | `four_leaf_clover` | <span class="emoji">:maple_leaf:</span> | `maple_leaf` | +| <span class="emoji">:fallen_leaf:</span> | `fallen_leaf` | <span class="emoji">:leaves:</span> | `leaves` | + +### Food & Drink + +#### Food Fruit + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:grapes:</span> | `grapes` | <span class="emoji">:melon:</span> | `melon` | +| <span class="emoji">:watermelon:</span> | `watermelon` | <span class="emoji">:mandarin:</span> | `mandarin` <br /> `orange` <br /> `tangerine` | +| <span class="emoji">:lemon:</span> | `lemon` | <span class="emoji">:banana:</span> | `banana` | +| <span class="emoji">:pineapple:</span> | `pineapple` | <span class="emoji">:apple:</span> | `apple` | +| <span class="emoji">:green_apple:</span> | `green_apple` | <span class="emoji">:pear:</span> | `pear` | +| <span class="emoji">:peach:</span> | `peach` | <span class="emoji">:cherries:</span> | `cherries` | +| <span class="emoji">:strawberry:</span> | `strawberry` | <span class="emoji">:kiwi_fruit:</span> | `kiwi_fruit` | +| <span class="emoji">:tomato:</span> | `tomato` | | | + +#### Food Vegetable + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:avocado:</span> | `avocado` | <span class="emoji">:eggplant:</span> | `eggplant` | +| <span class="emoji">:potato:</span> | `potato` | <span class="emoji">:carrot:</span> | `carrot` | +| <span class="emoji">:corn:</span> | `corn` | <span class="emoji">:hot_pepper:</span> | `hot_pepper` | +| <span class="emoji">:cucumber:</span> | `cucumber` | <span class="emoji">:mushroom:</span> | `mushroom` | +| <span class="emoji">:peanuts:</span> | `peanuts` | <span class="emoji">:chestnut:</span> | `chestnut` | + +#### Food Prepared + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:bread:</span> | `bread` | <span class="emoji">:croissant:</span> | `croissant` | +| <span class="emoji">:baguette_bread:</span> | `baguette_bread` | <span class="emoji">:pancakes:</span> | `pancakes` | +| <span class="emoji">:cheese:</span> | `cheese` | <span class="emoji">:meat_on_bone:</span> | `meat_on_bone` | +| <span class="emoji">:poultry_leg:</span> | `poultry_leg` | <span class="emoji">:bacon:</span> | `bacon` | +| <span class="emoji">:hamburger:</span> | `hamburger` | <span class="emoji">:fries:</span> | `fries` | +| <span class="emoji">:pizza:</span> | `pizza` | <span class="emoji">:hotdog:</span> | `hotdog` | +| <span class="emoji">:taco:</span> | `taco` | <span class="emoji">:burrito:</span> | `burrito` | +| <span class="emoji">:stuffed_flatbread:</span> | `stuffed_flatbread` | <span class="emoji">:egg:</span> | `egg` | +| <span class="emoji">:fried_egg:</span> | `fried_egg` | <span class="emoji">:shallow_pan_of_food:</span> | `shallow_pan_of_food` | +| <span class="emoji">:stew:</span> | `stew` | <span class="emoji">:green_salad:</span> | `green_salad` | +| <span class="emoji">:popcorn:</span> | `popcorn` | | | + +#### Food Asian + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:bento:</span> | `bento` | <span class="emoji">:rice_cracker:</span> | `rice_cracker` | +| <span class="emoji">:rice_ball:</span> | `rice_ball` | <span class="emoji">:rice:</span> | `rice` | +| <span class="emoji">:curry:</span> | `curry` | <span class="emoji">:ramen:</span> | `ramen` | +| <span class="emoji">:spaghetti:</span> | `spaghetti` | <span class="emoji">:sweet_potato:</span> | `sweet_potato` | +| <span class="emoji">:oden:</span> | `oden` | <span class="emoji">:sushi:</span> | `sushi` | +| <span class="emoji">:fried_shrimp:</span> | `fried_shrimp` | <span class="emoji">:fish_cake:</span> | `fish_cake` | +| <span class="emoji">:dango:</span> | `dango` | | | + +#### Food Marine + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:crab:</span> | `crab` | <span class="emoji">:shrimp:</span> | `shrimp` | +| <span class="emoji">:squid:</span> | `squid` | | | + +#### Food Sweet + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:icecream:</span> | `icecream` | <span class="emoji">:shaved_ice:</span> | `shaved_ice` | +| <span class="emoji">:ice_cream:</span> | `ice_cream` | <span class="emoji">:doughnut:</span> | `doughnut` | +| <span class="emoji">:cookie:</span> | `cookie` | <span class="emoji">:birthday:</span> | `birthday` | +| <span class="emoji">:cake:</span> | `cake` | <span class="emoji">:chocolate_bar:</span> | `chocolate_bar` | +| <span class="emoji">:candy:</span> | `candy` | <span class="emoji">:lollipop:</span> | `lollipop` | +| <span class="emoji">:custard:</span> | `custard` | <span class="emoji">:honey_pot:</span> | `honey_pot` | + +#### Drink + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:baby_bottle:</span> | `baby_bottle` | <span class="emoji">:milk_glass:</span> | `milk_glass` | +| <span class="emoji">:coffee:</span> | `coffee` | <span class="emoji">:tea:</span> | `tea` | +| <span class="emoji">:sake:</span> | `sake` | <span class="emoji">:champagne:</span> | `champagne` | +| <span class="emoji">:wine_glass:</span> | `wine_glass` | <span class="emoji">:cocktail:</span> | `cocktail` | +| <span class="emoji">:tropical_drink:</span> | `tropical_drink` | <span class="emoji">:beer:</span> | `beer` | +| <span class="emoji">:beers:</span> | `beers` | <span class="emoji">:clinking_glasses:</span> | `clinking_glasses` | +| <span class="emoji">:tumbler_glass:</span> | `tumbler_glass` | | | + +#### Dishware + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:plate_with_cutlery:</span> | `plate_with_cutlery` | <span class="emoji">:fork_and_knife:</span> | `fork_and_knife` | +| <span class="emoji">:spoon:</span> | `spoon` | <span class="emoji">:hocho:</span> | `hocho` <br /> `knife` | +| <span class="emoji">:amphora:</span> | `amphora` | | | + +### Travel & Places + +#### Place Map + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:earth_africa:</span> | `earth_africa` | <span class="emoji">:earth_americas:</span> | `earth_americas` | +| <span class="emoji">:earth_asia:</span> | `earth_asia` | <span class="emoji">:globe_with_meridians:</span> | `globe_with_meridians` | +| <span class="emoji">:world_map:</span> | `world_map` | <span class="emoji">:japan:</span> | `japan` | + +#### Place Geographic + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:mountain_snow:</span> | `mountain_snow` | <span class="emoji">:mountain:</span> | `mountain` | +| <span class="emoji">:volcano:</span> | `volcano` | <span class="emoji">:mount_fuji:</span> | `mount_fuji` | +| <span class="emoji">:camping:</span> | `camping` | <span class="emoji">:beach_umbrella:</span> | `beach_umbrella` | +| <span class="emoji">:desert:</span> | `desert` | <span class="emoji">:desert_island:</span> | `desert_island` | +| <span class="emoji">:national_park:</span> | `national_park` | | | + +#### Place Building + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:stadium:</span> | `stadium` | <span class="emoji">:classical_building:</span> | `classical_building` | +| <span class="emoji">:building_construction:</span> | `building_construction` | <span class="emoji">:houses:</span> | `houses` | +| <span class="emoji">:derelict_house:</span> | `derelict_house` | <span class="emoji">:house:</span> | `house` | +| <span class="emoji">:house_with_garden:</span> | `house_with_garden` | <span class="emoji">:office:</span> | `office` | +| <span class="emoji">:post_office:</span> | `post_office` | <span class="emoji">:european_post_office:</span> | `european_post_office` | +| <span class="emoji">:hospital:</span> | `hospital` | <span class="emoji">:bank:</span> | `bank` | +| <span class="emoji">:hotel:</span> | `hotel` | <span class="emoji">:love_hotel:</span> | `love_hotel` | +| <span class="emoji">:convenience_store:</span> | `convenience_store` | <span class="emoji">:school:</span> | `school` | +| <span class="emoji">:department_store:</span> | `department_store` | <span class="emoji">:factory:</span> | `factory` | +| <span class="emoji">:japanese_castle:</span> | `japanese_castle` | <span class="emoji">:european_castle:</span> | `european_castle` | +| <span class="emoji">:wedding:</span> | `wedding` | <span class="emoji">:tokyo_tower:</span> | `tokyo_tower` | +| <span class="emoji">:statue_of_liberty:</span> | `statue_of_liberty` | | | + +#### Place Religious + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:church:</span> | `church` | <span class="emoji">:mosque:</span> | `mosque` | +| <span class="emoji">:synagogue:</span> | `synagogue` | <span class="emoji">:shinto_shrine:</span> | `shinto_shrine` | +| <span class="emoji">:kaaba:</span> | `kaaba` | | | + +#### Place Other + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:fountain:</span> | `fountain` | <span class="emoji">:tent:</span> | `tent` | +| <span class="emoji">:foggy:</span> | `foggy` | <span class="emoji">:night_with_stars:</span> | `night_with_stars` | +| <span class="emoji">:cityscape:</span> | `cityscape` | <span class="emoji">:sunrise_over_mountains:</span> | `sunrise_over_mountains` | +| <span class="emoji">:sunrise:</span> | `sunrise` | <span class="emoji">:city_sunset:</span> | `city_sunset` | +| <span class="emoji">:city_sunrise:</span> | `city_sunrise` | <span class="emoji">:bridge_at_night:</span> | `bridge_at_night` | +| <span class="emoji">:hotsprings:</span> | `hotsprings` | <span class="emoji">:carousel_horse:</span> | `carousel_horse` | +| <span class="emoji">:ferris_wheel:</span> | `ferris_wheel` | <span class="emoji">:roller_coaster:</span> | `roller_coaster` | +| <span class="emoji">:barber:</span> | `barber` | <span class="emoji">:circus_tent:</span> | `circus_tent` | + +#### Transport Ground + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:steam_locomotive:</span> | `steam_locomotive` | <span class="emoji">:railway_car:</span> | `railway_car` | +| <span class="emoji">:bullettrain_side:</span> | `bullettrain_side` | <span class="emoji">:bullettrain_front:</span> | `bullettrain_front` | +| <span class="emoji">:train2:</span> | `train2` | <span class="emoji">:metro:</span> | `metro` | +| <span class="emoji">:light_rail:</span> | `light_rail` | <span class="emoji">:station:</span> | `station` | +| <span class="emoji">:tram:</span> | `tram` | <span class="emoji">:monorail:</span> | `monorail` | +| <span class="emoji">:mountain_railway:</span> | `mountain_railway` | <span class="emoji">:train:</span> | `train` | +| <span class="emoji">:bus:</span> | `bus` | <span class="emoji">:oncoming_bus:</span> | `oncoming_bus` | +| <span class="emoji">:trolleybus:</span> | `trolleybus` | <span class="emoji">:minibus:</span> | `minibus` | +| <span class="emoji">:ambulance:</span> | `ambulance` | <span class="emoji">:fire_engine:</span> | `fire_engine` | +| <span class="emoji">:police_car:</span> | `police_car` | <span class="emoji">:oncoming_police_car:</span> | `oncoming_police_car` | +| <span class="emoji">:taxi:</span> | `taxi` | <span class="emoji">:oncoming_taxi:</span> | `oncoming_taxi` | +| <span class="emoji">:car:</span> | `car` <br /> `red_car` | <span class="emoji">:oncoming_automobile:</span> | `oncoming_automobile` | +| <span class="emoji">:blue_car:</span> | `blue_car` | <span class="emoji">:truck:</span> | `truck` | +| <span class="emoji">:articulated_lorry:</span> | `articulated_lorry` | <span class="emoji">:tractor:</span> | `tractor` | +| <span class="emoji">:racing_car:</span> | `racing_car` | <span class="emoji">:motorcycle:</span> | `motorcycle` | +| <span class="emoji">:motor_scooter:</span> | `motor_scooter` | <span class="emoji">:bike:</span> | `bike` | +| <span class="emoji">:kick_scooter:</span> | `kick_scooter` | <span class="emoji">:busstop:</span> | `busstop` | +| <span class="emoji">:motorway:</span> | `motorway` | <span class="emoji">:railway_track:</span> | `railway_track` | +| <span class="emoji">:oil_drum:</span> | `oil_drum` | <span class="emoji">:fuelpump:</span> | `fuelpump` | +| <span class="emoji">:rotating_light:</span> | `rotating_light` | <span class="emoji">:traffic_light:</span> | `traffic_light` | +| <span class="emoji">:vertical_traffic_light:</span> | `vertical_traffic_light` | <span class="emoji">:stop_sign:</span> | `stop_sign` | +| <span class="emoji">:construction:</span> | `construction` | | | + +#### Transport Water + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:anchor:</span> | `anchor` | <span class="emoji">:boat:</span> | `boat` <br /> `sailboat` | +| <span class="emoji">:canoe:</span> | `canoe` | <span class="emoji">:speedboat:</span> | `speedboat` | +| <span class="emoji">:passenger_ship:</span> | `passenger_ship` | <span class="emoji">:ferry:</span> | `ferry` | +| <span class="emoji">:motor_boat:</span> | `motor_boat` | <span class="emoji">:ship:</span> | `ship` | + +#### Transport Air + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:airplane:</span> | `airplane` | <span class="emoji">:small_airplane:</span> | `small_airplane` | +| <span class="emoji">:flight_departure:</span> | `flight_departure` | <span class="emoji">:flight_arrival:</span> | `flight_arrival` | +| <span class="emoji">:seat:</span> | `seat` | <span class="emoji">:helicopter:</span> | `helicopter` | +| <span class="emoji">:suspension_railway:</span> | `suspension_railway` | <span class="emoji">:mountain_cableway:</span> | `mountain_cableway` | +| <span class="emoji">:aerial_tramway:</span> | `aerial_tramway` | <span class="emoji">:artificial_satellite:</span> | `artificial_satellite` | +| <span class="emoji">:rocket:</span> | `rocket` | | | + +#### Hotel + +| | icon | code | | +| - | :-: | - | - | +| <span class="emoji">:bellhop_bell:</span> | `bellhop_bell` | + +#### Time + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:hourglass:</span> | `hourglass` | <span class="emoji">:hourglass_flowing_sand:</span> | `hourglass_flowing_sand` | +| <span class="emoji">:watch:</span> | `watch` | <span class="emoji">:alarm_clock:</span> | `alarm_clock` | +| <span class="emoji">:stopwatch:</span> | `stopwatch` | <span class="emoji">:timer_clock:</span> | `timer_clock` | +| <span class="emoji">:mantelpiece_clock:</span> | `mantelpiece_clock` | <span class="emoji">:clock12:</span> | `clock12` | +| <span class="emoji">:clock1230:</span> | `clock1230` | <span class="emoji">:clock1:</span> | `clock1` | +| <span class="emoji">:clock130:</span> | `clock130` | <span class="emoji">:clock2:</span> | `clock2` | +| <span class="emoji">:clock230:</span> | `clock230` | <span class="emoji">:clock3:</span> | `clock3` | +| <span class="emoji">:clock330:</span> | `clock330` | <span class="emoji">:clock4:</span> | `clock4` | +| <span class="emoji">:clock430:</span> | `clock430` | <span class="emoji">:clock5:</span> | `clock5` | +| <span class="emoji">:clock530:</span> | `clock530` | <span class="emoji">:clock6:</span> | `clock6` | +| <span class="emoji">:clock630:</span> | `clock630` | <span class="emoji">:clock7:</span> | `clock7` | +| <span class="emoji">:clock730:</span> | `clock730` | <span class="emoji">:clock8:</span> | `clock8` | +| <span class="emoji">:clock830:</span> | `clock830` | <span class="emoji">:clock9:</span> | `clock9` | +| <span class="emoji">:clock930:</span> | `clock930` | <span class="emoji">:clock10:</span> | `clock10` | +| <span class="emoji">:clock1030:</span> | `clock1030` | <span class="emoji">:clock11:</span> | `clock11` | +| <span class="emoji">:clock1130:</span> | `clock1130` | | | + +#### Sky & Weather + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:new_moon:</span> | `new_moon` | <span class="emoji">:waxing_crescent_moon:</span> | `waxing_crescent_moon` | +| <span class="emoji">:first_quarter_moon:</span> | `first_quarter_moon` | <span class="emoji">:moon:</span> | `moon` <br /> `waxing_gibbous_moon` | +| <span class="emoji">:full_moon:</span> | `full_moon` | <span class="emoji">:waning_gibbous_moon:</span> | `waning_gibbous_moon` | +| <span class="emoji">:last_quarter_moon:</span> | `last_quarter_moon` | <span class="emoji">:waning_crescent_moon:</span> | `waning_crescent_moon` | +| <span class="emoji">:crescent_moon:</span> | `crescent_moon` | <span class="emoji">:new_moon_with_face:</span> | `new_moon_with_face` | +| <span class="emoji">:first_quarter_moon_with_face:</span> | `first_quarter_moon_with_face` | <span class="emoji">:last_quarter_moon_with_face:</span> | `last_quarter_moon_with_face` | +| <span class="emoji">:thermometer:</span> | `thermometer` | <span class="emoji">:sunny:</span> | `sunny` | +| <span class="emoji">:full_moon_with_face:</span> | `full_moon_with_face` | <span class="emoji">:sun_with_face:</span> | `sun_with_face` | +| <span class="emoji">:star:</span> | `star` | <span class="emoji">:star2:</span> | `star2` | +| <span class="emoji">:stars:</span> | `stars` | <span class="emoji">:milky_way:</span> | `milky_way` | +| <span class="emoji">:cloud:</span> | `cloud` | <span class="emoji">:partly_sunny:</span> | `partly_sunny` | +| <span class="emoji">:cloud_with_lightning_and_rain:</span> | `cloud_with_lightning_and_rain` | <span class="emoji">:sun_behind_small_cloud:</span> | `sun_behind_small_cloud` | +| <span class="emoji">:sun_behind_large_cloud:</span> | `sun_behind_large_cloud` | <span class="emoji">:sun_behind_rain_cloud:</span> | `sun_behind_rain_cloud` | +| <span class="emoji">:cloud_with_rain:</span> | `cloud_with_rain` | <span class="emoji">:cloud_with_snow:</span> | `cloud_with_snow` | +| <span class="emoji">:cloud_with_lightning:</span> | `cloud_with_lightning` | <span class="emoji">:tornado:</span> | `tornado` | +| <span class="emoji">:fog:</span> | `fog` | <span class="emoji">:wind_face:</span> | `wind_face` | +| <span class="emoji">:cyclone:</span> | `cyclone` | <span class="emoji">:rainbow:</span> | `rainbow` | +| <span class="emoji">:closed_umbrella:</span> | `closed_umbrella` | <span class="emoji">:open_umbrella:</span> | `open_umbrella` | +| <span class="emoji">:umbrella:</span> | `umbrella` | <span class="emoji">:parasol_on_ground:</span> | `parasol_on_ground` | +| <span class="emoji">:zap:</span> | `zap` | <span class="emoji">:snowflake:</span> | `snowflake` | +| <span class="emoji">:snowman_with_snow:</span> | `snowman_with_snow` | <span class="emoji">:snowman:</span> | `snowman` | +| <span class="emoji">:comet:</span> | `comet` | <span class="emoji">:fire:</span> | `fire` | +| <span class="emoji">:droplet:</span> | `droplet` | <span class="emoji">:ocean:</span> | `ocean` | + +### Activities + +#### Event + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:jack_o_lantern:</span> | `jack_o_lantern` | <span class="emoji">:christmas_tree:</span> | `christmas_tree` | +| <span class="emoji">:fireworks:</span> | `fireworks` | <span class="emoji">:sparkler:</span> | `sparkler` | +| <span class="emoji">:sparkles:</span> | `sparkles` | <span class="emoji">:balloon:</span> | `balloon` | +| <span class="emoji">:tada:</span> | `tada` | <span class="emoji">:confetti_ball:</span> | `confetti_ball` | +| <span class="emoji">:tanabata_tree:</span> | `tanabata_tree` | <span class="emoji">:bamboo:</span> | `bamboo` | +| <span class="emoji">:dolls:</span> | `dolls` | <span class="emoji">:flags:</span> | `flags` | +| <span class="emoji">:wind_chime:</span> | `wind_chime` | <span class="emoji">:rice_scene:</span> | `rice_scene` | +| <span class="emoji">:ribbon:</span> | `ribbon` | <span class="emoji">:gift:</span> | `gift` | +| <span class="emoji">:reminder_ribbon:</span> | `reminder_ribbon` | <span class="emoji">:tickets:</span> | `tickets` | +| <span class="emoji">:ticket:</span> | `ticket` | | | + +#### Award Medal + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:medal_military:</span> | `medal_military` | <span class="emoji">:trophy:</span> | `trophy` | +| <span class="emoji">:medal_sports:</span> | `medal_sports` | <span class="emoji">:1st_place_medal:</span> | `1st_place_medal` | +| <span class="emoji">:2nd_place_medal:</span> | `2nd_place_medal` | <span class="emoji">:3rd_place_medal:</span> | `3rd_place_medal` | + +#### Sport + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:soccer:</span> | `soccer` | <span class="emoji">:baseball:</span> | `baseball` | +| <span class="emoji">:basketball:</span> | `basketball` | <span class="emoji">:volleyball:</span> | `volleyball` | +| <span class="emoji">:football:</span> | `football` | <span class="emoji">:rugby_football:</span> | `rugby_football` | +| <span class="emoji">:tennis:</span> | `tennis` | <span class="emoji">:bowling:</span> | `bowling` | +| <span class="emoji">:cricket:</span> | `cricket` | <span class="emoji">:field_hockey:</span> | `field_hockey` | +| <span class="emoji">:ice_hockey:</span> | `ice_hockey` | <span class="emoji">:ping_pong:</span> | `ping_pong` | +| <span class="emoji">:badminton:</span> | `badminton` | <span class="emoji">:boxing_glove:</span> | `boxing_glove` | +| <span class="emoji">:martial_arts_uniform:</span> | `martial_arts_uniform` | <span class="emoji">:goal_net:</span> | `goal_net` | +| <span class="emoji">:golf:</span> | `golf` | <span class="emoji">:ice_skate:</span> | `ice_skate` | +| <span class="emoji">:fishing_pole_and_fish:</span> | `fishing_pole_and_fish` | <span class="emoji">:running_shirt_with_sash:</span> | `running_shirt_with_sash` | +| <span class="emoji">:ski:</span> | `ski` | | | + +#### Game + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:dart:</span> | `dart` | <span class="emoji">:8ball:</span> | `8ball` | +| <span class="emoji">:crystal_ball:</span> | `crystal_ball` | <span class="emoji">:video_game:</span> | `video_game` | +| <span class="emoji">:joystick:</span> | `joystick` | <span class="emoji">:slot_machine:</span> | `slot_machine` | +| <span class="emoji">:game_die:</span> | `game_die` | <span class="emoji">:spades:</span> | `spades` | +| <span class="emoji">:hearts:</span> | `hearts` | <span class="emoji">:diamonds:</span> | `diamonds` | +| <span class="emoji">:clubs:</span> | `clubs` | <span class="emoji">:black_joker:</span> | `black_joker` | +| <span class="emoji">:mahjong:</span> | `mahjong` | <span class="emoji">:flower_playing_cards:</span> | `flower_playing_cards` | + +#### Arts & Crafts + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:performing_arts:</span> | `performing_arts` | <span class="emoji">:framed_picture:</span> | `framed_picture` | +| <span class="emoji">:art:</span> | `art` | | | + +### Objects + +#### Clothing + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:eyeglasses:</span> | `eyeglasses` | <span class="emoji">:dark_sunglasses:</span> | `dark_sunglasses` | +| <span class="emoji">:necktie:</span> | `necktie` | <span class="emoji">:shirt:</span> | `shirt` <br /> `tshirt` | +| <span class="emoji">:jeans:</span> | `jeans` | <span class="emoji">:dress:</span> | `dress` | +| <span class="emoji">:kimono:</span> | `kimono` | <span class="emoji">:bikini:</span> | `bikini` | +| <span class="emoji">:womans_clothes:</span> | `womans_clothes` | <span class="emoji">:purse:</span> | `purse` | +| <span class="emoji">:handbag:</span> | `handbag` | <span class="emoji">:pouch:</span> | `pouch` | +| <span class="emoji">:shopping:</span> | `shopping` | <span class="emoji">:school_satchel:</span> | `school_satchel` | +| <span class="emoji">:mans_shoe:</span> | `mans_shoe` <br /> `shoe` | <span class="emoji">:athletic_shoe:</span> | `athletic_shoe` | +| <span class="emoji">:high_heel:</span> | `high_heel` | <span class="emoji">:sandal:</span> | `sandal` | +| <span class="emoji">:boot:</span> | `boot` | <span class="emoji">:crown:</span> | `crown` | +| <span class="emoji">:womans_hat:</span> | `womans_hat` | <span class="emoji">:tophat:</span> | `tophat` | +| <span class="emoji">:mortar_board:</span> | `mortar_board` | <span class="emoji">:rescue_worker_helmet:</span> | `rescue_worker_helmet` | +| <span class="emoji">:prayer_beads:</span> | `prayer_beads` | <span class="emoji">:lipstick:</span> | `lipstick` | +| <span class="emoji">:ring:</span> | `ring` | <span class="emoji">:gem:</span> | `gem` | + +#### Sound + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:mute:</span> | `mute` | <span class="emoji">:speaker:</span> | `speaker` | +| <span class="emoji">:sound:</span> | `sound` | <span class="emoji">:loud_sound:</span> | `loud_sound` | +| <span class="emoji">:loudspeaker:</span> | `loudspeaker` | <span class="emoji">:mega:</span> | `mega` | +| <span class="emoji">:postal_horn:</span> | `postal_horn` | <span class="emoji">:bell:</span> | `bell` | +| <span class="emoji">:no_bell:</span> | `no_bell` | | | + +#### Music + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:musical_score:</span> | `musical_score` | <span class="emoji">:musical_note:</span> | `musical_note` | +| <span class="emoji">:notes:</span> | `notes` | <span class="emoji">:studio_microphone:</span> | `studio_microphone` | +| <span class="emoji">:level_slider:</span> | `level_slider` | <span class="emoji">:control_knobs:</span> | `control_knobs` | +| <span class="emoji">:microphone:</span> | `microphone` | <span class="emoji">:headphones:</span> | `headphones` | +| <span class="emoji">:radio:</span> | `radio` | | | + +#### Musical Instrument + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:saxophone:</span> | `saxophone` | <span class="emoji">:guitar:</span> | `guitar` | +| <span class="emoji">:musical_keyboard:</span> | `musical_keyboard` | <span class="emoji">:trumpet:</span> | `trumpet` | +| <span class="emoji">:violin:</span> | `violin` | <span class="emoji">:drum:</span> | `drum` | + +#### Phone + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:iphone:</span> | `iphone` | <span class="emoji">:calling:</span> | `calling` | +| <span class="emoji">:phone:</span> | `phone` <br /> `telephone` | <span class="emoji">:telephone_receiver:</span> | `telephone_receiver` | +| <span class="emoji">:pager:</span> | `pager` | <span class="emoji">:fax:</span> | `fax` | + +#### Computer + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:battery:</span> | `battery` | <span class="emoji">:electric_plug:</span> | `electric_plug` | +| <span class="emoji">:computer:</span> | `computer` | <span class="emoji">:desktop_computer:</span> | `desktop_computer` | +| <span class="emoji">:printer:</span> | `printer` | <span class="emoji">:keyboard:</span> | `keyboard` | +| <span class="emoji">:computer_mouse:</span> | `computer_mouse` | <span class="emoji">:trackball:</span> | `trackball` | +| <span class="emoji">:minidisc:</span> | `minidisc` | <span class="emoji">:floppy_disk:</span> | `floppy_disk` | +| <span class="emoji">:cd:</span> | `cd` | <span class="emoji">:dvd:</span> | `dvd` | + +#### Light & Video + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:movie_camera:</span> | `movie_camera` | <span class="emoji">:film_strip:</span> | `film_strip` | +| <span class="emoji">:film_projector:</span> | `film_projector` | <span class="emoji">:clapper:</span> | `clapper` | +| <span class="emoji">:tv:</span> | `tv` | <span class="emoji">:camera:</span> | `camera` | +| <span class="emoji">:camera_flash:</span> | `camera_flash` | <span class="emoji">:video_camera:</span> | `video_camera` | +| <span class="emoji">:vhs:</span> | `vhs` | <span class="emoji">:mag:</span> | `mag` | +| <span class="emoji">:mag_right:</span> | `mag_right` | <span class="emoji">:candle:</span> | `candle` | +| <span class="emoji">:bulb:</span> | `bulb` | <span class="emoji">:flashlight:</span> | `flashlight` | +| <span class="emoji">:izakaya_lantern:</span> | `izakaya_lantern` <br /> `lantern` | | | + +#### Book Paper + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:notebook_with_decorative_cover:</span> | `notebook_with_decorative_cover` | <span class="emoji">:closed_book:</span> | `closed_book` | +| <span class="emoji">:book:</span> | `book` <br /> `open_book` | <span class="emoji">:green_book:</span> | `green_book` | +| <span class="emoji">:blue_book:</span> | `blue_book` | <span class="emoji">:orange_book:</span> | `orange_book` | +| <span class="emoji">:books:</span> | `books` | <span class="emoji">:notebook:</span> | `notebook` | +| <span class="emoji">:ledger:</span> | `ledger` | <span class="emoji">:page_with_curl:</span> | `page_with_curl` | +| <span class="emoji">:scroll:</span> | `scroll` | <span class="emoji">:page_facing_up:</span> | `page_facing_up` | +| <span class="emoji">:newspaper:</span> | `newspaper` | <span class="emoji">:newspaper_roll:</span> | `newspaper_roll` | +| <span class="emoji">:bookmark_tabs:</span> | `bookmark_tabs` | <span class="emoji">:bookmark:</span> | `bookmark` | +| <span class="emoji">:label:</span> | `label` | | | + +#### Money + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:moneybag:</span> | `moneybag` | <span class="emoji">:yen:</span> | `yen` | +| <span class="emoji">:dollar:</span> | `dollar` | <span class="emoji">:euro:</span> | `euro` | +| <span class="emoji">:pound:</span> | `pound` | <span class="emoji">:money_with_wings:</span> | `money_with_wings` | +| <span class="emoji">:credit_card:</span> | `credit_card` | <span class="emoji">:chart:</span> | `chart` | + +#### Mail + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:email:</span> | `email` <br /> `envelope` | :e-mail: | `:e-mail:` | +| <span class="emoji">:incoming_envelope:</span> | `incoming_envelope` | <span class="emoji">:envelope_with_arrow:</span> | `envelope_with_arrow` | +| <span class="emoji">:outbox_tray:</span> | `outbox_tray` | <span class="emoji">:inbox_tray:</span> | `inbox_tray` | +| <span class="emoji">:package:</span> | `package` | <span class="emoji">:mailbox:</span> | `mailbox` | +| <span class="emoji">:mailbox_closed:</span> | `mailbox_closed` | <span class="emoji">:mailbox_with_mail:</span> | `mailbox_with_mail` | +| <span class="emoji">:mailbox_with_no_mail:</span> | `mailbox_with_no_mail` | <span class="emoji">:postbox:</span> | `postbox` | +| <span class="emoji">:ballot_box:</span> | `ballot_box` | | | + +#### Writing + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:pencil2:</span> | `pencil2` | <span class="emoji">:black_nib:</span> | `black_nib` | +| <span class="emoji">:fountain_pen:</span> | `fountain_pen` | <span class="emoji">:pen:</span> | `pen` | +| <span class="emoji">:paintbrush:</span> | `paintbrush` | <span class="emoji">:crayon:</span> | `crayon` | +| <span class="emoji">:memo:</span> | `memo` <br /> `pencil` | | | + +#### Office + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:briefcase:</span> | `briefcase` | <span class="emoji">:file_folder:</span> | `file_folder` | +| <span class="emoji">:open_file_folder:</span> | `open_file_folder` | <span class="emoji">:card_index_dividers:</span> | `card_index_dividers` | +| <span class="emoji">:date:</span> | `date` | <span class="emoji">:calendar:</span> | `calendar` | +| <span class="emoji">:spiral_notepad:</span> | `spiral_notepad` | <span class="emoji">:spiral_calendar:</span> | `spiral_calendar` | +| <span class="emoji">:card_index:</span> | `card_index` | <span class="emoji">:chart_with_upwards_trend:</span> | `chart_with_upwards_trend` | +| <span class="emoji">:chart_with_downwards_trend:</span> | `chart_with_downwards_trend` | <span class="emoji">:bar_chart:</span> | `bar_chart` | +| <span class="emoji">:clipboard:</span> | `clipboard` | <span class="emoji">:pushpin:</span> | `pushpin` | +| <span class="emoji">:round_pushpin:</span> | `round_pushpin` | <span class="emoji">:paperclip:</span> | `paperclip` | +| <span class="emoji">:paperclips:</span> | `paperclips` | <span class="emoji">:straight_ruler:</span> | `straight_ruler` | +| <span class="emoji">:triangular_ruler:</span> | `triangular_ruler` | <span class="emoji">:scissors:</span> | `scissors` | +| <span class="emoji">:card_file_box:</span> | `card_file_box` | <span class="emoji">:file_cabinet:</span> | `file_cabinet` | +| <span class="emoji">:wastebasket:</span> | `wastebasket` | | | + +#### Lock + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:lock:</span> | `lock` | <span class="emoji">:unlock:</span> | `unlock` | +| <span class="emoji">:lock_with_ink_pen:</span> | `lock_with_ink_pen` | <span class="emoji">:closed_lock_with_key:</span> | `closed_lock_with_key` | +| <span class="emoji">:key:</span> | `key` | <span class="emoji">:old_key:</span> | `old_key` | + +#### Tool + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:hammer:</span> | `hammer` | <span class="emoji">:pick:</span> | `pick` | +| <span class="emoji">:hammer_and_pick:</span> | `hammer_and_pick` | <span class="emoji">:hammer_and_wrench:</span> | `hammer_and_wrench` | +| <span class="emoji">:dagger:</span> | `dagger` | <span class="emoji">:crossed_swords:</span> | `crossed_swords` | +| <span class="emoji">:gun:</span> | `gun` | <span class="emoji">:bow_and_arrow:</span> | `bow_and_arrow` | +| <span class="emoji">:shield:</span> | `shield` | <span class="emoji">:wrench:</span> | `wrench` | +| <span class="emoji">:nut_and_bolt:</span> | `nut_and_bolt` | <span class="emoji">:gear:</span> | `gear` | +| <span class="emoji">:clamp:</span> | `clamp` | <span class="emoji">:balance_scale:</span> | `balance_scale` | +| <span class="emoji">:link:</span> | `link` | <span class="emoji">:chains:</span> | `chains` | + +#### Science + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:alembic:</span> | `alembic` | <span class="emoji">:microscope:</span> | `microscope` | +| <span class="emoji">:telescope:</span> | `telescope` | <span class="emoji">:satellite:</span> | `satellite` | + +#### Medical + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:syringe:</span> | `syringe` | <span class="emoji">:pill:</span> | `pill` | + +#### Household + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:door:</span> | `door` | <span class="emoji">:bed:</span> | `bed` | +| <span class="emoji">:couch_and_lamp:</span> | `couch_and_lamp` | <span class="emoji">:toilet:</span> | `toilet` | +| <span class="emoji">:shower:</span> | `shower` | <span class="emoji">:bathtub:</span> | `bathtub` | +| <span class="emoji">:shopping_cart:</span> | `shopping_cart` | | | + +#### Other Object + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:smoking:</span> | `smoking` | <span class="emoji">:coffin:</span> | `coffin` | +| <span class="emoji">:funeral_urn:</span> | `funeral_urn` | <span class="emoji">:moyai:</span> | `moyai` | + +### Symbols + +#### Transport Sign + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:atm:</span> | `atm` | <span class="emoji">:put_litter_in_its_place:</span> | `put_litter_in_its_place` | +| <span class="emoji">:potable_water:</span> | `potable_water` | <span class="emoji">:wheelchair:</span> | `wheelchair` | +| <span class="emoji">:mens:</span> | `mens` | <span class="emoji">:womens:</span> | `womens` | +| <span class="emoji">:restroom:</span> | `restroom` | <span class="emoji">:baby_symbol:</span> | `baby_symbol` | +| <span class="emoji">:wc:</span> | `wc` | <span class="emoji">:passport_control:</span> | `passport_control` | +| <span class="emoji">:customs:</span> | `customs` | <span class="emoji">:baggage_claim:</span> | `baggage_claim` | +| <span class="emoji">:left_luggage:</span> | `left_luggage` | | | + +#### Warning + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:warning:</span> | `warning` | <span class="emoji">:children_crossing:</span> | `children_crossing` | +| <span class="emoji">:no_entry:</span> | `no_entry` | <span class="emoji">:no_entry_sign:</span> | `no_entry_sign` | +| <span class="emoji">:no_bicycles:</span> | `no_bicycles` | <span class="emoji">:no_smoking:</span> | `no_smoking` | +| <span class="emoji">:do_not_litter:</span> | `do_not_litter` | :non-potable_water: | `:non-potable_water:` | +| <span class="emoji">:no_pedestrians:</span> | `no_pedestrians` | <span class="emoji">:no_mobile_phones:</span> | `no_mobile_phones` | +| <span class="emoji">:underage:</span> | `underage` | <span class="emoji">:radioactive:</span> | `radioactive` | +| <span class="emoji">:biohazard:</span> | `biohazard` | | | + +#### Arrow + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:arrow_up:</span> | `arrow_up` | <span class="emoji">:arrow_upper_right:</span> | `arrow_upper_right` | +| <span class="emoji">:arrow_right:</span> | `arrow_right` | <span class="emoji">:arrow_lower_right:</span> | `arrow_lower_right` | +| <span class="emoji">:arrow_down:</span> | `arrow_down` | <span class="emoji">:arrow_lower_left:</span> | `arrow_lower_left` | +| <span class="emoji">:arrow_left:</span> | `arrow_left` | <span class="emoji">:arrow_upper_left:</span> | `arrow_upper_left` | +| <span class="emoji">:arrow_up_down:</span> | `arrow_up_down` | <span class="emoji">:left_right_arrow:</span> | `left_right_arrow` | +| <span class="emoji">:leftwards_arrow_with_hook:</span> | `leftwards_arrow_with_hook` | <span class="emoji">:arrow_right_hook:</span> | `arrow_right_hook` | +| <span class="emoji">:arrow_heading_up:</span> | `arrow_heading_up` | <span class="emoji">:arrow_heading_down:</span> | `arrow_heading_down` | +| <span class="emoji">:arrows_clockwise:</span> | `arrows_clockwise` | <span class="emoji">:arrows_counterclockwise:</span> | `arrows_counterclockwise` | +| <span class="emoji">:back:</span> | `back` | <span class="emoji">:end:</span> | `end` | +| <span class="emoji">:on:</span> | `on` | <span class="emoji">:soon:</span> | `soon` | +| <span class="emoji">:top:</span> | `top` | | | + +#### Religion + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:place_of_worship:</span> | `place_of_worship` | <span class="emoji">:atom_symbol:</span> | `atom_symbol` | +| <span class="emoji">:om:</span> | `om` | <span class="emoji">:star_of_david:</span> | `star_of_david` | +| <span class="emoji">:wheel_of_dharma:</span> | `wheel_of_dharma` | <span class="emoji">:yin_yang:</span> | `yin_yang` | +| <span class="emoji">:latin_cross:</span> | `latin_cross` | <span class="emoji">:orthodox_cross:</span> | `orthodox_cross` | +| <span class="emoji">:star_and_crescent:</span> | `star_and_crescent` | <span class="emoji">:peace_symbol:</span> | `peace_symbol` | +| <span class="emoji">:menorah:</span> | `menorah` | <span class="emoji">:six_pointed_star:</span> | `six_pointed_star` | + +#### Zodiac + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:aries:</span> | `aries` | <span class="emoji">:taurus:</span> | `taurus` | +| <span class="emoji">:gemini:</span> | `gemini` | <span class="emoji">:cancer:</span> | `cancer` | +| <span class="emoji">:leo:</span> | `leo` | <span class="emoji">:virgo:</span> | `virgo` | +| <span class="emoji">:libra:</span> | `libra` | <span class="emoji">:scorpius:</span> | `scorpius` | +| <span class="emoji">:sagittarius:</span> | `sagittarius` | <span class="emoji">:capricorn:</span> | `capricorn` | +| <span class="emoji">:aquarius:</span> | `aquarius` | <span class="emoji">:pisces:</span> | `pisces` | +| <span class="emoji">:ophiuchus:</span> | `ophiuchus` | | | + +#### Av Symbol + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:twisted_rightwards_arrows:</span> | `twisted_rightwards_arrows` | <span class="emoji">:repeat:</span> | `repeat` | +| <span class="emoji">:repeat_one:</span> | `repeat_one` | <span class="emoji">:arrow_forward:</span> | `arrow_forward` | +| <span class="emoji">:fast_forward:</span> | `fast_forward` | <span class="emoji">:next_track_button:</span> | `next_track_button` | +| <span class="emoji">:play_or_pause_button:</span> | `play_or_pause_button` | <span class="emoji">:arrow_backward:</span> | `arrow_backward` | +| <span class="emoji">:rewind:</span> | `rewind` | <span class="emoji">:previous_track_button:</span> | `previous_track_button` | +| <span class="emoji">:arrow_up_small:</span> | `arrow_up_small` | <span class="emoji">:arrow_double_up:</span> | `arrow_double_up` | +| <span class="emoji">:arrow_down_small:</span> | `arrow_down_small` | <span class="emoji">:arrow_double_down:</span> | `arrow_double_down` | +| <span class="emoji">:pause_button:</span> | `pause_button` | <span class="emoji">:stop_button:</span> | `stop_button` | +| <span class="emoji">:record_button:</span> | `record_button` | <span class="emoji">:cinema:</span> | `cinema` | +| <span class="emoji">:low_brightness:</span> | `low_brightness` | <span class="emoji">:high_brightness:</span> | `high_brightness` | +| <span class="emoji">:signal_strength:</span> | `signal_strength` | <span class="emoji">:vibration_mode:</span> | `vibration_mode` | +| <span class="emoji">:mobile_phone_off:</span> | `mobile_phone_off` | | | + +#### Math + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:heavy_multiplication_x:</span> | `heavy_multiplication_x` | <span class="emoji">:heavy_plus_sign:</span> | `heavy_plus_sign` | +| <span class="emoji">:heavy_minus_sign:</span> | `heavy_minus_sign` | <span class="emoji">:heavy_division_sign:</span> | `heavy_division_sign` | + +#### Punctuation + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:bangbang:</span> | `bangbang` | <span class="emoji">:interrobang:</span> | `interrobang` | +| <span class="emoji">:question:</span> | `question` | <span class="emoji">:grey_question:</span> | `grey_question` | +| <span class="emoji">:grey_exclamation:</span> | `grey_exclamation` | <span class="emoji">:exclamation:</span> | `exclamation` <br /> `heavy_exclamation_mark` | +| <span class="emoji">:wavy_dash:</span> | `wavy_dash` | | | + +#### Currency + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:currency_exchange:</span> | `currency_exchange` | <span class="emoji">:heavy_dollar_sign:</span> | `heavy_dollar_sign` | + +#### Keycap + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:hash:</span> | `hash` | <span class="emoji">:asterisk:</span> | `asterisk` | +| <span class="emoji">:zero:</span> | `zero` | <span class="emoji">:one:</span> | `one` | +| <span class="emoji">:two:</span> | `two` | <span class="emoji">:three:</span> | `three` | +| <span class="emoji">:four:</span> | `four` | <span class="emoji">:five:</span> | `five` | +| <span class="emoji">:six:</span> | `six` | <span class="emoji">:seven:</span> | `seven` | +| <span class="emoji">:eight:</span> | `eight` | <span class="emoji">:nine:</span> | `nine` | +| <span class="emoji">:keycap_ten:</span> | `keycap_ten` | | | + +#### Alphabet + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:capital_abcd:</span> | `capital_abcd` | <span class="emoji">:abcd:</span> | `abcd` | +| <span class="emoji">:1234:</span> | `1234` | <span class="emoji">:symbols:</span> | `symbols` | +| <span class="emoji">:abc:</span> | `abc` | <span class="emoji">:a:</span> | `a` | +| <span class="emoji">:ab:</span> | `ab` | <span class="emoji">:b:</span> | `b` | +| <span class="emoji">:cl:</span> | `cl` | <span class="emoji">:cool:</span> | `cool` | +| <span class="emoji">:free:</span> | `free` | <span class="emoji">:information_source:</span> | `information_source` | +| <span class="emoji">:id:</span> | `id` | <span class="emoji">:m:</span> | `m` | +| <span class="emoji">:new:</span> | `new` | <span class="emoji">:ng:</span> | `ng` | +| <span class="emoji">:o2:</span> | `o2` | <span class="emoji">:ok:</span> | `ok` | +| <span class="emoji">:parking:</span> | `parking` | <span class="emoji">:sos:</span> | `sos` | +| <span class="emoji">:up:</span> | `up` | <span class="emoji">:vs:</span> | `vs` | +| <span class="emoji">:koko:</span> | `koko` | <span class="emoji">:sa:</span> | `sa` | +| <span class="emoji">:u6708:</span> | `u6708` | <span class="emoji">:u6709:</span> | `u6709` | +| <span class="emoji">:u6307:</span> | `u6307` | <span class="emoji">:ideograph_advantage:</span> | `ideograph_advantage` | +| <span class="emoji">:u5272:</span> | `u5272` | <span class="emoji">:u7121:</span> | `u7121` | +| <span class="emoji">:u7981:</span> | `u7981` | <span class="emoji">:accept:</span> | `accept` | +| <span class="emoji">:u7533:</span> | `u7533` | <span class="emoji">:u5408:</span> | `u5408` | +| <span class="emoji">:u7a7a:</span> | `u7a7a` | <span class="emoji">:congratulations:</span> | `congratulations` | +| <span class="emoji">:secret:</span> | `secret` | <span class="emoji">:u55b6:</span> | `u55b6` | +| <span class="emoji">:u6e80:</span> | `u6e80` | | | + +#### Geometric + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:red_circle:</span> | `red_circle` | <span class="emoji">:large_blue_circle:</span> | `large_blue_circle` | +| <span class="emoji">:black_circle:</span> | `black_circle` | <span class="emoji">:white_circle:</span> | `white_circle` | +| <span class="emoji">:black_large_square:</span> | `black_large_square` | <span class="emoji">:white_large_square:</span> | `white_large_square` | +| <span class="emoji">:black_medium_square:</span> | `black_medium_square` | <span class="emoji">:white_medium_square:</span> | `white_medium_square` | +| <span class="emoji">:black_medium_small_square:</span> | `black_medium_small_square` | <span class="emoji">:white_medium_small_square:</span> | `white_medium_small_square` | +| <span class="emoji">:black_small_square:</span> | `black_small_square` | <span class="emoji">:white_small_square:</span> | `white_small_square` | +| <span class="emoji">:large_orange_diamond:</span> | `large_orange_diamond` | <span class="emoji">:large_blue_diamond:</span> | `large_blue_diamond` | +| <span class="emoji">:small_orange_diamond:</span> | `small_orange_diamond` | <span class="emoji">:small_blue_diamond:</span> | `small_blue_diamond` | +| <span class="emoji">:small_red_triangle:</span> | `small_red_triangle` | <span class="emoji">:small_red_triangle_down:</span> | `small_red_triangle_down` | +| <span class="emoji">:diamond_shape_with_a_dot_inside:</span> | `diamond_shape_with_a_dot_inside` | <span class="emoji">:radio_button:</span> | `radio_button` | +| <span class="emoji">:white_square_button:</span> | `white_square_button` | <span class="emoji">:black_square_button:</span> | `black_square_button` | + +#### Other Symbol + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:recycle:</span> | `recycle` | <span class="emoji">:fleur_de_lis:</span> | `fleur_de_lis` | +| <span class="emoji">:trident:</span> | `trident` | <span class="emoji">:name_badge:</span> | `name_badge` | +| <span class="emoji">:beginner:</span> | `beginner` | <span class="emoji">:o:</span> | `o` | +| <span class="emoji">:white_check_mark:</span> | `white_check_mark` | <span class="emoji">:ballot_box_with_check:</span> | `ballot_box_with_check` | +| <span class="emoji">:heavy_check_mark:</span> | `heavy_check_mark` | <span class="emoji">:x:</span> | `x` | +| <span class="emoji">:negative_squared_cross_mark:</span> | `negative_squared_cross_mark` | <span class="emoji">:curly_loop:</span> | `curly_loop` | +| <span class="emoji">:loop:</span> | `loop` | <span class="emoji">:part_alternation_mark:</span> | `part_alternation_mark` | +| <span class="emoji">:eight_spoked_asterisk:</span> | `eight_spoked_asterisk` | <span class="emoji">:eight_pointed_black_star:</span> | `eight_pointed_black_star` | +| <span class="emoji">:sparkle:</span> | `sparkle` | <span class="emoji">:copyright:</span> | `copyright` | +| <span class="emoji">:registered:</span> | `registered` | <span class="emoji">:tm:</span> | `tm` | + +### Flags + +#### Common Flags -<p><span class="nowrap"><span class="emojify">🙈</span> <code>:see_no_evil:</code></span> <span class="nowrap"><span class="emojify">🙉</span> <code>:hear_no_evil:</code></span> <span class="nowrap"><span class="emojify">🙊</span> <code>:speak_no_evil:</code></span></p> -<br> +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:checkered_flag:</span> | `checkered_flag` | <span class="emoji">:triangular_flag_on_post:</span> | `triangular_flag_on_post` | +| <span class="emoji">:crossed_flags:</span> | `crossed_flags` | <span class="emoji">:black_flag:</span> | `black_flag` | +| <span class="emoji">:white_flag:</span> | `white_flag` | <span class="emoji">:rainbow_flag:</span> | `rainbow_flag` | -The [Emoji cheat sheet](http://www.emoji-cheat-sheet.com/) is a useful reference for emoji shorthand codes. +#### Country and Region Flags -*** +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:andorra:</span> | `andorra` | <span class="emoji">:united_arab_emirates:</span> | `united_arab_emirates` | +| <span class="emoji">:afghanistan:</span> | `afghanistan` | <span class="emoji">:antigua_barbuda:</span> | `antigua_barbuda` | +| <span class="emoji">:anguilla:</span> | `anguilla` | <span class="emoji">:albania:</span> | `albania` | +| <span class="emoji">:armenia:</span> | `armenia` | <span class="emoji">:angola:</span> | `angola` | +| <span class="emoji">:antarctica:</span> | `antarctica` | <span class="emoji">:argentina:</span> | `argentina` | +| <span class="emoji">:american_samoa:</span> | `american_samoa` | <span class="emoji">:austria:</span> | `austria` | +| <span class="emoji">:australia:</span> | `australia` | <span class="emoji">:aruba:</span> | `aruba` | +| <span class="emoji">:aland_islands:</span> | `aland_islands` | <span class="emoji">:azerbaijan:</span> | `azerbaijan` | +| <span class="emoji">:bosnia_herzegovina:</span> | `bosnia_herzegovina` | <span class="emoji">:barbados:</span> | `barbados` | +| <span class="emoji">:bangladesh:</span> | `bangladesh` | <span class="emoji">:belgium:</span> | `belgium` | +| <span class="emoji">:burkina_faso:</span> | `burkina_faso` | <span class="emoji">:bulgaria:</span> | `bulgaria` | +| <span class="emoji">:bahrain:</span> | `bahrain` | <span class="emoji">:burundi:</span> | `burundi` | +| <span class="emoji">:benin:</span> | `benin` | <span class="emoji">:st_barthelemy:</span> | `st_barthelemy` | +| <span class="emoji">:bermuda:</span> | `bermuda` | <span class="emoji">:brunei:</span> | `brunei` | +| <span class="emoji">:bolivia:</span> | `bolivia` | <span class="emoji">:caribbean_netherlands:</span> | `caribbean_netherlands` | +| <span class="emoji">:brazil:</span> | `brazil` | <span class="emoji">:bahamas:</span> | `bahamas` | +| <span class="emoji">:bhutan:</span> | `bhutan` | <span class="emoji">:botswana:</span> | `botswana` | +| <span class="emoji">:belarus:</span> | `belarus` | <span class="emoji">:belize:</span> | `belize` | +| <span class="emoji">:canada:</span> | `canada` | <span class="emoji">:cocos_islands:</span> | `cocos_islands` | +| <span class="emoji">:congo_kinshasa:</span> | `congo_kinshasa` | <span class="emoji">:central_african_republic:</span> | `central_african_republic` | +| <span class="emoji">:congo_brazzaville:</span> | `congo_brazzaville` | <span class="emoji">:switzerland:</span> | `switzerland` | +| <span class="emoji">:cote_divoire:</span> | `cote_divoire` | <span class="emoji">:cook_islands:</span> | `cook_islands` | +| <span class="emoji">:chile:</span> | `chile` | <span class="emoji">:cameroon:</span> | `cameroon` | +| <span class="emoji">:cn:</span> | `cn` | <span class="emoji">:colombia:</span> | `colombia` | +| <span class="emoji">:costa_rica:</span> | `costa_rica` | <span class="emoji">:cuba:</span> | `cuba` | +| <span class="emoji">:cape_verde:</span> | `cape_verde` | <span class="emoji">:curacao:</span> | `curacao` | +| <span class="emoji">:christmas_island:</span> | `christmas_island` | <span class="emoji">:cyprus:</span> | `cyprus` | +| <span class="emoji">:czech_republic:</span> | `czech_republic` | <span class="emoji">:de:</span> | `de` | +| <span class="emoji">:djibouti:</span> | `djibouti` | <span class="emoji">:denmark:</span> | `denmark` | +| <span class="emoji">:dominica:</span> | `dominica` | <span class="emoji">:dominican_republic:</span> | `dominican_republic` | +| <span class="emoji">:algeria:</span> | `algeria` | <span class="emoji">:ecuador:</span> | `ecuador` | +| <span class="emoji">:estonia:</span> | `estonia` | <span class="emoji">:egypt:</span> | `egypt` | +| <span class="emoji">:western_sahara:</span> | `western_sahara` | <span class="emoji">:eritrea:</span> | `eritrea` | +| <span class="emoji">:es:</span> | `es` | <span class="emoji">:ethiopia:</span> | `ethiopia` | +| <span class="emoji">:eu:</span> | `eu` <br /> `european_union` | <span class="emoji">:finland:</span> | `finland` | +| <span class="emoji">:fiji:</span> | `fiji` | <span class="emoji">:falkland_islands:</span> | `falkland_islands` | +| <span class="emoji">:micronesia:</span> | `micronesia` | <span class="emoji">:faroe_islands:</span> | `faroe_islands` | +| <span class="emoji">:fr:</span> | `fr` | <span class="emoji">:gabon:</span> | `gabon` | +| <span class="emoji">:gb:</span> | `gb` <br /> `uk` | <span class="emoji">:grenada:</span> | `grenada` | +| <span class="emoji">:georgia:</span> | `georgia` | <span class="emoji">:french_guiana:</span> | `french_guiana` | +| <span class="emoji">:guernsey:</span> | `guernsey` | <span class="emoji">:ghana:</span> | `ghana` | +| <span class="emoji">:gibraltar:</span> | `gibraltar` | <span class="emoji">:greenland:</span> | `greenland` | +| <span class="emoji">:gambia:</span> | `gambia` | <span class="emoji">:guinea:</span> | `guinea` | +| <span class="emoji">:guadeloupe:</span> | `guadeloupe` | <span class="emoji">:equatorial_guinea:</span> | `equatorial_guinea` | +| <span class="emoji">:greece:</span> | `greece` | <span class="emoji">:south_georgia_south_sandwich_islands:</span> | `south_georgia_south_sandwich_islands` | +| <span class="emoji">:guatemala:</span> | `guatemala` | <span class="emoji">:guam:</span> | `guam` | +| <span class="emoji">:guinea_bissau:</span> | `guinea_bissau` | <span class="emoji">:guyana:</span> | `guyana` | +| <span class="emoji">:hong_kong:</span> | `hong_kong` | <span class="emoji">:honduras:</span> | `honduras` | +| <span class="emoji">:croatia:</span> | `croatia` | <span class="emoji">:haiti:</span> | `haiti` | +| <span class="emoji">:hungary:</span> | `hungary` | <span class="emoji">:canary_islands:</span> | `canary_islands` | +| <span class="emoji">:indonesia:</span> | `indonesia` | <span class="emoji">:ireland:</span> | `ireland` | +| <span class="emoji">:israel:</span> | `israel` | <span class="emoji">:isle_of_man:</span> | `isle_of_man` | +| <span class="emoji">:india:</span> | `india` | <span class="emoji">:british_indian_ocean_territory:</span> | `british_indian_ocean_territory` | +| <span class="emoji">:iraq:</span> | `iraq` | <span class="emoji">:iran:</span> | `iran` | +| <span class="emoji">:iceland:</span> | `iceland` | <span class="emoji">:it:</span> | `it` | +| <span class="emoji">:jersey:</span> | `jersey` | <span class="emoji">:jamaica:</span> | `jamaica` | +| <span class="emoji">:jordan:</span> | `jordan` | <span class="emoji">:jp:</span> | `jp` | +| <span class="emoji">:kenya:</span> | `kenya` | <span class="emoji">:kyrgyzstan:</span> | `kyrgyzstan` | +| <span class="emoji">:cambodia:</span> | `cambodia` | <span class="emoji">:kiribati:</span> | `kiribati` | +| <span class="emoji">:comoros:</span> | `comoros` | <span class="emoji">:st_kitts_nevis:</span> | `st_kitts_nevis` | +| <span class="emoji">:north_korea:</span> | `north_korea` | <span class="emoji">:kr:</span> | `kr` | +| <span class="emoji">:kuwait:</span> | `kuwait` | <span class="emoji">:cayman_islands:</span> | `cayman_islands` | +| <span class="emoji">:kazakhstan:</span> | `kazakhstan` | <span class="emoji">:laos:</span> | `laos` | +| <span class="emoji">:lebanon:</span> | `lebanon` | <span class="emoji">:st_lucia:</span> | `st_lucia` | +| <span class="emoji">:liechtenstein:</span> | `liechtenstein` | <span class="emoji">:sri_lanka:</span> | `sri_lanka` | +| <span class="emoji">:liberia:</span> | `liberia` | <span class="emoji">:lesotho:</span> | `lesotho` | +| <span class="emoji">:lithuania:</span> | `lithuania` | <span class="emoji">:luxembourg:</span> | `luxembourg` | +| <span class="emoji">:latvia:</span> | `latvia` | <span class="emoji">:libya:</span> | `libya` | +| <span class="emoji">:morocco:</span> | `morocco` | <span class="emoji">:monaco:</span> | `monaco` | +| <span class="emoji">:moldova:</span> | `moldova` | <span class="emoji">:montenegro:</span> | `montenegro` | +| <span class="emoji">:madagascar:</span> | `madagascar` | <span class="emoji">:marshall_islands:</span> | `marshall_islands` | +| <span class="emoji">:macedonia:</span> | `macedonia` | <span class="emoji">:mali:</span> | `mali` | +| <span class="emoji">:myanmar:</span> | `myanmar` | <span class="emoji">:mongolia:</span> | `mongolia` | +| <span class="emoji">:macau:</span> | `macau` | <span class="emoji">:northern_mariana_islands:</span> | `northern_mariana_islands` | +| <span class="emoji">:martinique:</span> | `martinique` | <span class="emoji">:mauritania:</span> | `mauritania` | +| <span class="emoji">:montserrat:</span> | `montserrat` | <span class="emoji">:malta:</span> | `malta` | +| <span class="emoji">:mauritius:</span> | `mauritius` | <span class="emoji">:maldives:</span> | `maldives` | +| <span class="emoji">:malawi:</span> | `malawi` | <span class="emoji">:mexico:</span> | `mexico` | +| <span class="emoji">:malaysia:</span> | `malaysia` | <span class="emoji">:mozambique:</span> | `mozambique` | +| <span class="emoji">:namibia:</span> | `namibia` | <span class="emoji">:new_caledonia:</span> | `new_caledonia` | +| <span class="emoji">:niger:</span> | `niger` | <span class="emoji">:norfolk_island:</span> | `norfolk_island` | +| <span class="emoji">:nigeria:</span> | `nigeria` | <span class="emoji">:nicaragua:</span> | `nicaragua` | +| <span class="emoji">:netherlands:</span> | `netherlands` | <span class="emoji">:norway:</span> | `norway` | +| <span class="emoji">:nepal:</span> | `nepal` | <span class="emoji">:nauru:</span> | `nauru` | +| <span class="emoji">:niue:</span> | `niue` | <span class="emoji">:new_zealand:</span> | `new_zealand` | +| <span class="emoji">:oman:</span> | `oman` | <span class="emoji">:panama:</span> | `panama` | +| <span class="emoji">:peru:</span> | `peru` | <span class="emoji">:french_polynesia:</span> | `french_polynesia` | +| <span class="emoji">:papua_new_guinea:</span> | `papua_new_guinea` | <span class="emoji">:philippines:</span> | `philippines` | +| <span class="emoji">:pakistan:</span> | `pakistan` | <span class="emoji">:poland:</span> | `poland` | +| <span class="emoji">:st_pierre_miquelon:</span> | `st_pierre_miquelon` | <span class="emoji">:pitcairn_islands:</span> | `pitcairn_islands` | +| <span class="emoji">:puerto_rico:</span> | `puerto_rico` | <span class="emoji">:palestinian_territories:</span> | `palestinian_territories` | +| <span class="emoji">:portugal:</span> | `portugal` | <span class="emoji">:palau:</span> | `palau` | +| <span class="emoji">:paraguay:</span> | `paraguay` | <span class="emoji">:qatar:</span> | `qatar` | +| <span class="emoji">:reunion:</span> | `reunion` | <span class="emoji">:romania:</span> | `romania` | +| <span class="emoji">:serbia:</span> | `serbia` | <span class="emoji">:ru:</span> | `ru` | +| <span class="emoji">:rwanda:</span> | `rwanda` | <span class="emoji">:saudi_arabia:</span> | `saudi_arabia` | +| <span class="emoji">:solomon_islands:</span> | `solomon_islands` | <span class="emoji">:seychelles:</span> | `seychelles` | +| <span class="emoji">:sudan:</span> | `sudan` | <span class="emoji">:sweden:</span> | `sweden` | +| <span class="emoji">:singapore:</span> | `singapore` | <span class="emoji">:st_helena:</span> | `st_helena` | +| <span class="emoji">:slovenia:</span> | `slovenia` | <span class="emoji">:slovakia:</span> | `slovakia` | +| <span class="emoji">:sierra_leone:</span> | `sierra_leone` | <span class="emoji">:san_marino:</span> | `san_marino` | +| <span class="emoji">:senegal:</span> | `senegal` | <span class="emoji">:somalia:</span> | `somalia` | +| <span class="emoji">:suriname:</span> | `suriname` | <span class="emoji">:south_sudan:</span> | `south_sudan` | +| <span class="emoji">:sao_tome_principe:</span> | `sao_tome_principe` | <span class="emoji">:el_salvador:</span> | `el_salvador` | +| <span class="emoji">:sint_maarten:</span> | `sint_maarten` | <span class="emoji">:syria:</span> | `syria` | +| <span class="emoji">:swaziland:</span> | `swaziland` | <span class="emoji">:turks_caicos_islands:</span> | `turks_caicos_islands` | +| <span class="emoji">:chad:</span> | `chad` | <span class="emoji">:french_southern_territories:</span> | `french_southern_territories` | +| <span class="emoji">:togo:</span> | `togo` | <span class="emoji">:thailand:</span> | `thailand` | +| <span class="emoji">:tajikistan:</span> | `tajikistan` | <span class="emoji">:tokelau:</span> | `tokelau` | +| <span class="emoji">:timor_leste:</span> | `timor_leste` | <span class="emoji">:turkmenistan:</span> | `turkmenistan` | +| <span class="emoji">:tunisia:</span> | `tunisia` | <span class="emoji">:tonga:</span> | `tonga` | +| <span class="emoji">:tr:</span> | `tr` | <span class="emoji">:trinidad_tobago:</span> | `trinidad_tobago` | +| <span class="emoji">:tuvalu:</span> | `tuvalu` | <span class="emoji">:taiwan:</span> | `taiwan` | +| <span class="emoji">:tanzania:</span> | `tanzania` | <span class="emoji">:ukraine:</span> | `ukraine` | +| <span class="emoji">:uganda:</span> | `uganda` | <span class="emoji">:us:</span> | `us` | +| <span class="emoji">:uruguay:</span> | `uruguay` | <span class="emoji">:uzbekistan:</span> | `uzbekistan` | +| <span class="emoji">:vatican_city:</span> | `vatican_city` | <span class="emoji">:st_vincent_grenadines:</span> | `st_vincent_grenadines` | +| <span class="emoji">:venezuela:</span> | `venezuela` | <span class="emoji">:british_virgin_islands:</span> | `british_virgin_islands` | +| <span class="emoji">:us_virgin_islands:</span> | `us_virgin_islands` | <span class="emoji">:vietnam:</span> | `vietnam` | +| <span class="emoji">:vanuatu:</span> | `vanuatu` | <span class="emoji">:wallis_futuna:</span> | `wallis_futuna` | +| <span class="emoji">:samoa:</span> | `samoa` | <span class="emoji">:kosovo:</span> | `kosovo` | +| <span class="emoji">:yemen:</span> | `yemen` | <span class="emoji">:mayotte:</span> | `mayotte` | +| <span class="emoji">:south_africa:</span> | `south_africa` | <span class="emoji">:zambia:</span> | `zambia` | +| <span class="emoji">:zimbabwe:</span> | `zimbabwe` | | | -**N.B.** The above steps enable Unicode Standard emoji characters and sequences in Hugo, however the rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack; e.g. +### GitHub Custom Emoji -{{< highlight html >}} -.emoji { - font-family: Apple Color Emoji,Segoe UI Emoji,NotoColorEmoji,Segoe UI Symbol,Android Emoji,EmojiSymbols; -} -{{< /highlight >}} +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:atom:</span> | `atom` | <span class="emoji">:basecamp:</span> | `basecamp` | +| <span class="emoji">:basecampy:</span> | `basecampy` | <span class="emoji">:bowtie:</span> | `bowtie` | +| <span class="emoji">:electron:</span> | `electron` | <span class="emoji">:feelsgood:</span> | `feelsgood` | +| <span class="emoji">:finnadie:</span> | `finnadie` | <span class="emoji">:goberserk:</span> | `goberserk` | +| <span class="emoji">:godmode:</span> | `godmode` | <span class="emoji">:hurtrealbad:</span> | `hurtrealbad` | +| <span class="emoji">:neckbeard:</span> | `neckbeard` | <span class="emoji">:octocat:</span> | `octocat` | +| <span class="emoji">:rage1:</span> | `rage1` | <span class="emoji">:rage2:</span> | `rage2` | +| <span class="emoji">:rage3:</span> | `rage3` | <span class="emoji">:rage4:</span> | `rage4` | +| <span class="emoji">:shipit:</span> | `shipit` <br /> `squirrel` | <span class="emoji">:suspect:</span> | `suspect` | +| <span class="emoji">:trollface:</span> | `trollface` | | | -{{< css.inline >}} <style> -.emojify { - font-family: Apple Color Emoji,Segoe UI Emoji,NotoColorEmoji,Segoe UI Symbol,Android Emoji,EmojiSymbols; - font-size: 2rem; - vertical-align: middle; -} -@media screen and (max-width:650px) { - .nowrap { - display: block; - margin: 25px 0; + .emoji { + font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols; } -} </style> -{{< /css.inline >}} diff --git a/exampleSite/content/posts/emoji-support.fr.md b/exampleSite/content/posts/emoji-support.fr.md new file mode 100644 index 0000000..6a931cf --- /dev/null +++ b/exampleSite/content/posts/emoji-support.fr.md @@ -0,0 +1,1320 @@ +--- +weight: 5 +title: "Emoji Support" +date: 2019-10-01T17:55:28+08:00 +lastmod: 2019-10-01T17:55:28+08:00 +draft: false +author: "Dillon" +authorLink: "https://dillonzq.com" +description: "Guide d'utilisation des emoji dans Hugo et LoveIt." +license: "" + +tags: ["emoji"] +categories: ["markdown"] +hiddenFromHomePage: false + +featuredImage: "/images/emoji-support/featured-image.jpg" +featuredImagePreview: "" + +toc: true +autoCollapseToc: true +math: false +lightgallery: true +linkToMarkdown: true +share: + enable: true +comment: true +--- + +Emoji peut être activé dans un projet Hugo de plusieurs façons. + +<!--more--> + +{{< admonition warning >}} +Sorry, this article has not been completely translated into **French**. +Welcome to take the time to propose a translation by [making a PR](https://github.com/dillonzq/LoveIt/pulls) to the theme! +{{< /admonition >}} + +The [`emojify`](https://gohugo.io/functions/emojify/) function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes). + +To enable emoji globally, set `enableEmoji` to `true` in your site’s [configuration](https://gohugo.io/getting-started/configuration/) and then you can type emoji shorthand codes directly in content files. + +These begin and end with a **colon** and include the **code** of an emoji: + +```markdown +Gone camping! {?:}tent: Be back soon. + +That is so funny! {?:}joy: +``` + +The rendered output looks like this: + +Gone camping! :tent: Be back soon. + +That is so funny! :joy: + +## Emoji Cheat Sheet + +The emoji cheat sheet is a useful reference for emoji shorthand codes. + +### Smileys & Emotion + +#### Face Smiling + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:grinning:</span> | `grinning` | <span class="emoji">:smiley:</span> | `smiley` | +| <span class="emoji">:smile:</span> | `smile` | <span class="emoji">:grin:</span> | `grin` | +| <span class="emoji">:laughing:</span> | `laughing` <br /> `satisfied` | <span class="emoji">:sweat_smile:</span> | `sweat_smile` | +| <span class="emoji">:rofl:</span> | `rofl` | <span class="emoji">:joy:</span> | `joy` | +| <span class="emoji">:slightly_smiling_face:</span> | `slightly_smiling_face` | <span class="emoji">:upside_down_face:</span> | `upside_down_face` | +| <span class="emoji">:wink:</span> | `wink` | <span class="emoji">:blush:</span> | `blush` | +| <span class="emoji">:innocent:</span> | `innocent` | | | + +#### Face Affection + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:heart_eyes:</span> | `heart_eyes` | <span class="emoji">:kissing_heart:</span> | `kissing_heart` | +| <span class="emoji">:kissing:</span> | `kissing` | <span class="emoji">:relaxed:</span> | `relaxed` | +| <span class="emoji">:kissing_closed_eyes:</span> | `kissing_closed_eyes` | <span class="emoji">:kissing_smiling_eyes:</span> | `kissing_smiling_eyes` | + +#### Face Tongue + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:yum:</span> | `yum` | <span class="emoji">:stuck_out_tongue:</span> | `stuck_out_tongue` | +| <span class="emoji">:stuck_out_tongue_winking_eye:</span> | `stuck_out_tongue_winking_eye` | <span class="emoji">:stuck_out_tongue_closed_eyes:</span> | `stuck_out_tongue_closed_eyes` | +| <span class="emoji">:money_mouth_face:</span> | `money_mouth_face` | | | + +#### Face Hand + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:hugs:</span> | `hugs` | <span class="emoji">:thinking:</span> | `thinking` | + +#### Face Neutral Skeptical + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:zipper_mouth_face:</span> | `zipper_mouth_face` | <span class="emoji">:neutral_face:</span> | `neutral_face` | +| <span class="emoji">:expressionless:</span> | `expressionless` | <span class="emoji">:no_mouth:</span> | `no_mouth` | +| <span class="emoji">:smirk:</span> | `smirk` | <span class="emoji">:unamused:</span> | `unamused` | +| <span class="emoji">:roll_eyes:</span> | `roll_eyes` | <span class="emoji">:grimacing:</span> | `grimacing` | +| <span class="emoji">:lying_face:</span> | `lying_face` | | | + +#### Face Sleepy + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:relieved:</span> | `relieved` | <span class="emoji">:pensive:</span> | `pensive` | +| <span class="emoji">:sleepy:</span> | `sleepy` | <span class="emoji">:drooling_face:</span> | `drooling_face` | +| <span class="emoji">:sleeping:</span> | `sleeping` | | | + +#### Face Unwell + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:mask:</span> | `mask` | <span class="emoji">:face_with_thermometer:</span> | `face_with_thermometer` | +| <span class="emoji">:face_with_head_bandage:</span> | `face_with_head_bandage` | <span class="emoji">:nauseated_face:</span> | `nauseated_face` | +| <span class="emoji">:sneezing_face:</span> | `sneezing_face` | <span class="emoji">:dizzy_face:</span> | `dizzy_face` | + +#### Face Hat + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:cowboy_hat_face:</span> | `cowboy_hat_face` | | | + +#### Face Glasses + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:sunglasses:</span> | `sunglasses` | <span class="emoji">:nerd_face:</span> | `nerd_face` | + +#### Face Concerned + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:confused:</span> | `confused` | <span class="emoji">:worried:</span> | `worried` | +| <span class="emoji">:slightly_frowning_face:</span> | `slightly_frowning_face` | <span class="emoji">:frowning_face:</span> | `frowning_face` | +| <span class="emoji">:open_mouth:</span> | `open_mouth` | <span class="emoji">:hushed:</span> | `hushed` | +| <span class="emoji">:astonished:</span> | `astonished` | <span class="emoji">:flushed:</span> | `flushed` | +| <span class="emoji">:frowning:</span> | `frowning` | <span class="emoji">:anguished:</span> | `anguished` | +| <span class="emoji">:fearful:</span> | `fearful` | <span class="emoji">:cold_sweat:</span> | `cold_sweat` | +| <span class="emoji">:disappointed_relieved:</span> | `disappointed_relieved` | <span class="emoji">:cry:</span> | `cry` | +| <span class="emoji">:sob:</span> | `sob` | <span class="emoji">:scream:</span> | `scream` | +| <span class="emoji">:confounded:</span> | `confounded` | <span class="emoji">:persevere:</span> | `persevere` | +| <span class="emoji">:disappointed:</span> | `disappointed` | <span class="emoji">:sweat:</span> | `sweat` | +| <span class="emoji">:weary:</span> | `weary` | <span class="emoji">:tired_face:</span> | `tired_face` | + +#### Face Negative + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:triumph:</span> | `triumph` | <span class="emoji">:pout:</span> | `pout` <br /> `rage` | +| <span class="emoji">:angry:</span> | `angry` | <span class="emoji">:smiling_imp:</span> | `smiling_imp` | +| <span class="emoji">:imp:</span> | `imp` | <span class="emoji">:skull:</span> | `skull` | +| <span class="emoji">:skull_and_crossbones:</span> | `skull_and_crossbones` | | | + +#### Face Costume + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:hankey:</span> | `hankey` <br /> `poop` <br /> `shit` | <span class="emoji">:clown_face:</span> | `clown_face` | +| <span class="emoji">:japanese_ogre:</span> | `japanese_ogre` | <span class="emoji">:japanese_goblin:</span> | `japanese_goblin` | +| <span class="emoji">:ghost:</span> | `ghost` | <span class="emoji">:alien:</span> | `alien` | +| <span class="emoji">:space_invader:</span> | `space_invader` | <span class="emoji">:robot:</span> | `robot` | + +#### Cat Face + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:smiley_cat:</span> | `smiley_cat` | <span class="emoji">:smile_cat:</span> | `smile_cat` | +| <span class="emoji">:joy_cat:</span> | `joy_cat` | <span class="emoji">:heart_eyes_cat:</span> | `heart_eyes_cat` | +| <span class="emoji">:smirk_cat:</span> | `smirk_cat` | <span class="emoji">:kissing_cat:</span> | `kissing_cat` | +| <span class="emoji">:scream_cat:</span> | `scream_cat` | <span class="emoji">:crying_cat_face:</span> | `crying_cat_face` | +| <span class="emoji">:pouting_cat:</span> | `pouting_cat` | | | + +#### Monkey Face + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:see_no_evil:</span> | `see_no_evil` | <span class="emoji">:hear_no_evil:</span> | `hear_no_evil` | +| <span class="emoji">:speak_no_evil:</span> | `speak_no_evil` | | | + +#### Emotion + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:kiss:</span> | `kiss` | <span class="emoji">:love_letter:</span> | `love_letter` | +| <span class="emoji">:cupid:</span> | `cupid` | <span class="emoji">:gift_heart:</span> | `gift_heart` | +| <span class="emoji">:sparkling_heart:</span> | `sparkling_heart` | <span class="emoji">:heartpulse:</span> | `heartpulse` | +| <span class="emoji">:heartbeat:</span> | `heartbeat` | <span class="emoji">:revolving_hearts:</span> | `revolving_hearts` | +| <span class="emoji">:two_hearts:</span> | `two_hearts` | <span class="emoji">:heart_decoration:</span> | `heart_decoration` | +| <span class="emoji">:heavy_heart_exclamation:</span> | `heavy_heart_exclamation` | <span class="emoji">:broken_heart:</span> | `broken_heart` | +| <span class="emoji">:heart:</span> | `heart` | <span class="emoji">:yellow_heart:</span> | `yellow_heart` | +| <span class="emoji">:green_heart:</span> | `green_heart` | <span class="emoji">:blue_heart:</span> | `blue_heart` | +| <span class="emoji">:purple_heart:</span> | `purple_heart` | <span class="emoji">:black_heart:</span> | `black_heart` | +| <span class="emoji">:100:</span> | `100` | <span class="emoji">:anger:</span> | `anger` | +| <span class="emoji">:boom:</span> | `boom` <br /> `collision` | <span class="emoji">:dizzy:</span> | `dizzy` | +| <span class="emoji">:sweat_drops:</span> | `sweat_drops` | <span class="emoji">:dash:</span> | `dash` | +| <span class="emoji">:hole:</span> | `hole` | <span class="emoji">:bomb:</span> | `bomb` | +| <span class="emoji">:speech_balloon:</span> | `speech_balloon` | <span class="emoji">:eye_speech_bubble:</span> | `eye_speech_bubble` | +| <span class="emoji">:right_anger_bubble:</span> | `right_anger_bubble` | <span class="emoji">:thought_balloon:</span> | `thought_balloon` | +| <span class="emoji">:zzz:</span> | `zzz` | | | + +### People & Body + +#### Hand Fingers Open + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:wave:</span> | `wave` | <span class="emoji">:raised_back_of_hand:</span> | `raised_back_of_hand` | +| <span class="emoji">:raised_hand_with_fingers_splayed:</span> | `raised_hand_with_fingers_splayed` | <span class="emoji">:hand:</span> | `hand` <br /> `raised_hand` | +| <span class="emoji">:vulcan_salute:</span> | `vulcan_salute` | | | + +#### Hand Fingers Partial + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:ok_hand:</span> | `ok_hand` | <span class="emoji">:v:</span> | `v` | +| <span class="emoji">:crossed_fingers:</span> | `crossed_fingers` | <span class="emoji">:metal:</span> | `metal` | +| <span class="emoji">:call_me_hand:</span> | `call_me_hand` | | | + +#### Hand Single Finger + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:point_left:</span> | `point_left` | <span class="emoji">:point_right:</span> | `point_right` | +| <span class="emoji">:point_up_2:</span> | `point_up_2` | <span class="emoji">:fu:</span> | `fu` <br /> `middle_finger` | +| <span class="emoji">:point_down:</span> | `point_down` | <span class="emoji">:point_up:</span> | `point_up` | + +#### Hand Fingers Closed + +| icon | code | icon | code | +| :-: | - | :-: | - | +| :+1: | `:+1:` <br /> `thumbsup` | :-1: | `:-1:` <br /> `thumbsdown` | +| <span class="emoji">:fist:</span> | `fist` <br /> `fist_raised` | <span class="emoji">:facepunch:</span> | `facepunch` <br /> `fist_oncoming` <br /> `punch` | +| <span class="emoji">:fist_left:</span> | `fist_left` | <span class="emoji">:fist_right:</span> | `fist_right` | + +#### Hands + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:clap:</span> | `clap` | <span class="emoji">:raised_hands:</span> | `raised_hands` | +| <span class="emoji">:open_hands:</span> | `open_hands` | <span class="emoji">:handshake:</span> | `handshake` | +| <span class="emoji">:pray:</span> | `pray` | | | + +#### Hand Prop + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:writing_hand:</span> | `writing_hand` | <span class="emoji">:nail_care:</span> | `nail_care` | +| <span class="emoji">:selfie:</span> | `selfie` | | | + +#### Body Parts + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:muscle:</span> | `muscle` | <span class="emoji">:ear:</span> | `ear` | +| <span class="emoji">:nose:</span> | `nose` | <span class="emoji">:eyes:</span> | `eyes` | +| <span class="emoji">:eye:</span> | `eye` | <span class="emoji">:tongue:</span> | `tongue` | +| <span class="emoji">:lips:</span> | `lips` | | | + +#### Person + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:baby:</span> | `baby` | <span class="emoji">:boy:</span> | `boy` | +| <span class="emoji">:girl:</span> | `girl` | <span class="emoji">:blonde_man:</span> | `blonde_man` <br /> `person_with_blond_hair` | +| <span class="emoji">:man:</span> | `man` | <span class="emoji">:woman:</span> | `woman` | +| <span class="emoji">:blonde_woman:</span> | `blonde_woman` | <span class="emoji">:older_man:</span> | `older_man` | +| <span class="emoji">:older_woman:</span> | `older_woman` | | | + +#### Person Gesture + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:frowning_woman:</span> | `frowning_woman` <br /> `person_frowning` | <span class="emoji">:frowning_man:</span> | `frowning_man` | +| <span class="emoji">:person_with_pouting_face:</span> | `person_with_pouting_face` <br /> `pouting_woman` | <span class="emoji">:pouting_man:</span> | `pouting_man` | +| <span class="emoji">:ng_woman:</span> | `ng_woman` <br /> `no_good` <br /> `no_good_woman` | <span class="emoji">:ng_man:</span> | `ng_man` <br /> `no_good_man` | +| <span class="emoji">:ok_woman:</span> | `ok_woman` | <span class="emoji">:ok_man:</span> | `ok_man` | +| <span class="emoji">:information_desk_person:</span> | `information_desk_person` <br /> `sassy_woman` <br /> `tipping_hand_woman` | <span class="emoji">:sassy_man:</span> | `sassy_man` <br /> `tipping_hand_man` | +| <span class="emoji">:raising_hand:</span> | `raising_hand` <br /> `raising_hand_woman` | <span class="emoji">:raising_hand_man:</span> | `raising_hand_man` | +| <span class="emoji">:bow:</span> | `bow` <br /> `bowing_man` | <span class="emoji">:bowing_woman:</span> | `bowing_woman` | +| <span class="emoji">:man_facepalming:</span> | `man_facepalming` | <span class="emoji">:woman_facepalming:</span> | `woman_facepalming` | +| <span class="emoji">:man_shrugging:</span> | `man_shrugging` | <span class="emoji">:woman_shrugging:</span> | `woman_shrugging` | + +#### Person Role + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:man_health_worker:</span> | `man_health_worker` | <span class="emoji">:woman_health_worker:</span> | `woman_health_worker` | +| <span class="emoji">:man_student:</span> | `man_student` | <span class="emoji">:woman_student:</span> | `woman_student` | +| <span class="emoji">:man_teacher:</span> | `man_teacher` | <span class="emoji">:woman_teacher:</span> | `woman_teacher` | +| <span class="emoji">:man_judge:</span> | `man_judge` | <span class="emoji">:woman_judge:</span> | `woman_judge` | +| <span class="emoji">:man_farmer:</span> | `man_farmer` | <span class="emoji">:woman_farmer:</span> | `woman_farmer` | +| <span class="emoji">:man_cook:</span> | `man_cook` | <span class="emoji">:woman_cook:</span> | `woman_cook` | +| <span class="emoji">:man_mechanic:</span> | `man_mechanic` | <span class="emoji">:woman_mechanic:</span> | `woman_mechanic` | +| <span class="emoji">:man_factory_worker:</span> | `man_factory_worker` | <span class="emoji">:woman_factory_worker:</span> | `woman_factory_worker` | +| <span class="emoji">:man_office_worker:</span> | `man_office_worker` | <span class="emoji">:woman_office_worker:</span> | `woman_office_worker` | +| <span class="emoji">:man_scientist:</span> | `man_scientist` | <span class="emoji">:woman_scientist:</span> | `woman_scientist` | +| <span class="emoji">:man_technologist:</span> | `man_technologist` | <span class="emoji">:woman_technologist:</span> | `woman_technologist` | +| <span class="emoji">:man_singer:</span> | `man_singer` | <span class="emoji">:woman_singer:</span> | `woman_singer` | +| <span class="emoji">:man_artist:</span> | `man_artist` | <span class="emoji">:woman_artist:</span> | `woman_artist` | +| <span class="emoji">:man_pilot:</span> | `man_pilot` | <span class="emoji">:woman_pilot:</span> | `woman_pilot` | +| <span class="emoji">:man_astronaut:</span> | `man_astronaut` | <span class="emoji">:woman_astronaut:</span> | `woman_astronaut` | +| <span class="emoji">:man_firefighter:</span> | `man_firefighter` | <span class="emoji">:woman_firefighter:</span> | `woman_firefighter` | +| <span class="emoji">:cop:</span> | `cop` <br /> `policeman` | <span class="emoji">:policewoman:</span> | `policewoman` | +| <span class="emoji">:detective:</span> | `detective` <br /> `male_detective` | <span class="emoji">:female_detective:</span> | `female_detective` | +| <span class="emoji">:guardsman:</span> | `guardsman` | <span class="emoji">:guardswoman:</span> | `guardswoman` | +| <span class="emoji">:construction_worker:</span> | `construction_worker` <br /> `construction_worker_man` | <span class="emoji">:construction_worker_woman:</span> | `construction_worker_woman` | +| <span class="emoji">:prince:</span> | `prince` | <span class="emoji">:princess:</span> | `princess` | +| <span class="emoji">:man_with_turban:</span> | `man_with_turban` | <span class="emoji">:woman_with_turban:</span> | `woman_with_turban` | +| <span class="emoji">:man_with_gua_pi_mao:</span> | `man_with_gua_pi_mao` | <span class="emoji">:man_in_tuxedo:</span> | `man_in_tuxedo` | +| <span class="emoji">:bride_with_veil:</span> | `bride_with_veil` | <span class="emoji">:pregnant_woman:</span> | `pregnant_woman` | + +#### Person Fantasy + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:angel:</span> | `angel` | <span class="emoji">:santa:</span> | `santa` | +| <span class="emoji">:mrs_claus:</span> | `mrs_claus` | | | + +#### Person Activity + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:massage:</span> | `massage` <br /> `massage_woman` | <span class="emoji">:massage_man:</span> | `massage_man` | +| <span class="emoji">:haircut:</span> | `haircut` <br /> `haircut_woman` | <span class="emoji">:haircut_man:</span> | `haircut_man` | +| <span class="emoji">:walking:</span> | `walking` <br /> `walking_man` | <span class="emoji">:walking_woman:</span> | `walking_woman` | +| <span class="emoji">:runner:</span> | `runner` <br /> `running` <br /> `running_man` | <span class="emoji">:running_woman:</span> | `running_woman` | +| <span class="emoji">:dancer:</span> | `dancer` | <span class="emoji">:man_dancing:</span> | `man_dancing` | +| <span class="emoji">:business_suit_levitating:</span> | `business_suit_levitating` | <span class="emoji">:dancers:</span> | `dancers` <br /> `dancing_women` | +| <span class="emoji">:dancing_men:</span> | `dancing_men` | | | + +#### Person Sport + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:person_fencing:</span> | `person_fencing` | <span class="emoji">:horse_racing:</span> | `horse_racing` | +| <span class="emoji">:skier:</span> | `skier` | <span class="emoji">:snowboarder:</span> | `snowboarder` | +| <span class="emoji">:golfing_man:</span> | `golfing_man` | <span class="emoji">:golfing_woman:</span> | `golfing_woman` | +| <span class="emoji">:surfer:</span> | `surfer` <br /> `surfing_man` | <span class="emoji">:surfing_woman:</span> | `surfing_woman` | +| <span class="emoji">:rowboat:</span> | `rowboat` <br /> `rowing_man` | <span class="emoji">:rowing_woman:</span> | `rowing_woman` | +| <span class="emoji">:swimmer:</span> | `swimmer` <br /> `swimming_man` | <span class="emoji">:swimming_woman:</span> | `swimming_woman` | +| <span class="emoji">:basketball_man:</span> | `basketball_man` | <span class="emoji">:basketball_woman:</span> | `basketball_woman` | +| <span class="emoji">:weight_lifting_man:</span> | `weight_lifting_man` | <span class="emoji">:weight_lifting_woman:</span> | `weight_lifting_woman` | +| <span class="emoji">:bicyclist:</span> | `bicyclist` <br /> `biking_man` | <span class="emoji">:biking_woman:</span> | `biking_woman` | +| <span class="emoji">:mountain_bicyclist:</span> | `mountain_bicyclist` <br /> `mountain_biking_man` | <span class="emoji">:mountain_biking_woman:</span> | `mountain_biking_woman` | +| <span class="emoji">:man_cartwheeling:</span> | `man_cartwheeling` | <span class="emoji">:woman_cartwheeling:</span> | `woman_cartwheeling` | +| <span class="emoji">:men_wrestling:</span> | `men_wrestling` | <span class="emoji">:women_wrestling:</span> | `women_wrestling` | +| <span class="emoji">:man_playing_water_polo:</span> | `man_playing_water_polo` | <span class="emoji">:woman_playing_water_polo:</span> | `woman_playing_water_polo` | +| <span class="emoji">:man_playing_handball:</span> | `man_playing_handball` | <span class="emoji">:woman_playing_handball:</span> | `woman_playing_handball` | +| <span class="emoji">:man_juggling:</span> | `man_juggling` | <span class="emoji">:woman_juggling:</span> | `woman_juggling` | + +#### Person Resting + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:bath:</span> | `bath` | <span class="emoji">:sleeping_bed:</span> | `sleeping_bed` | + +#### Family + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:two_women_holding_hands:</span> | `two_women_holding_hands` | <span class="emoji">:couple:</span> | `couple` | +| <span class="emoji">:two_men_holding_hands:</span> | `two_men_holding_hands` | <span class="emoji">:couplekiss_man_woman:</span> | `couplekiss_man_woman` | +| <span class="emoji">:couplekiss_man_man:</span> | `couplekiss_man_man` | <span class="emoji">:couplekiss_woman_woman:</span> | `couplekiss_woman_woman` | +| <span class="emoji">:couple_with_heart:</span> | `couple_with_heart` <br /> `couple_with_heart_woman_man` | <span class="emoji">:couple_with_heart_man_man:</span> | `couple_with_heart_man_man` | +| <span class="emoji">:couple_with_heart_woman_woman:</span> | `couple_with_heart_woman_woman` | <span class="emoji">:family:</span> | `family` <br /> `family_man_woman_boy` | +| <span class="emoji">:family_man_woman_girl:</span> | `family_man_woman_girl` | <span class="emoji">:family_man_woman_girl_boy:</span> | `family_man_woman_girl_boy` | +| <span class="emoji">:family_man_woman_boy_boy:</span> | `family_man_woman_boy_boy` | <span class="emoji">:family_man_woman_girl_girl:</span> | `family_man_woman_girl_girl` | +| <span class="emoji">:family_man_man_boy:</span> | `family_man_man_boy` | <span class="emoji">:family_man_man_girl:</span> | `family_man_man_girl` | +| <span class="emoji">:family_man_man_girl_boy:</span> | `family_man_man_girl_boy` | <span class="emoji">:family_man_man_boy_boy:</span> | `family_man_man_boy_boy` | +| <span class="emoji">:family_man_man_girl_girl:</span> | `family_man_man_girl_girl` | <span class="emoji">:family_woman_woman_boy:</span> | `family_woman_woman_boy` | +| <span class="emoji">:family_woman_woman_girl:</span> | `family_woman_woman_girl` | <span class="emoji">:family_woman_woman_girl_boy:</span> | `family_woman_woman_girl_boy` | +| <span class="emoji">:family_woman_woman_boy_boy:</span> | `family_woman_woman_boy_boy` | <span class="emoji">:family_woman_woman_girl_girl:</span> | `family_woman_woman_girl_girl` | +| <span class="emoji">:family_man_boy:</span> | `family_man_boy` | <span class="emoji">:family_man_boy_boy:</span> | `family_man_boy_boy` | +| <span class="emoji">:family_man_girl:</span> | `family_man_girl` | <span class="emoji">:family_man_girl_boy:</span> | `family_man_girl_boy` | +| <span class="emoji">:family_man_girl_girl:</span> | `family_man_girl_girl` | <span class="emoji">:family_woman_boy:</span> | `family_woman_boy` | +| <span class="emoji">:family_woman_boy_boy:</span> | `family_woman_boy_boy` | <span class="emoji">:family_woman_girl:</span> | `family_woman_girl` | +| <span class="emoji">:family_woman_girl_boy:</span> | `family_woman_girl_boy` | <span class="emoji">:family_woman_girl_girl:</span> | `family_woman_girl_girl` | + +#### Person Symbol + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:speaking_head:</span> | `speaking_head` | <span class="emoji">:bust_in_silhouette:</span> | `bust_in_silhouette` | +| <span class="emoji">:busts_in_silhouette:</span> | `busts_in_silhouette` | <span class="emoji">:footprints:</span> | `footprints` | + +### Animals & Nature + +#### Animal Mammal + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:monkey_face:</span> | `monkey_face` | <span class="emoji">:monkey:</span> | `monkey` | +| <span class="emoji">:gorilla:</span> | `gorilla` | <span class="emoji">:dog:</span> | `dog` | +| <span class="emoji">:dog2:</span> | `dog2` | <span class="emoji">:poodle:</span> | `poodle` | +| <span class="emoji">:wolf:</span> | `wolf` | <span class="emoji">:fox_face:</span> | `fox_face` | +| <span class="emoji">:cat:</span> | `cat` | <span class="emoji">:cat2:</span> | `cat2` | +| <span class="emoji">:lion:</span> | `lion` | <span class="emoji">:tiger:</span> | `tiger` | +| <span class="emoji">:tiger2:</span> | `tiger2` | <span class="emoji">:leopard:</span> | `leopard` | +| <span class="emoji">:horse:</span> | `horse` | <span class="emoji">:racehorse:</span> | `racehorse` | +| <span class="emoji">:unicorn:</span> | `unicorn` | <span class="emoji">:deer:</span> | `deer` | +| <span class="emoji">:cow:</span> | `cow` | <span class="emoji">:ox:</span> | `ox` | +| <span class="emoji">:water_buffalo:</span> | `water_buffalo` | <span class="emoji">:cow2:</span> | `cow2` | +| <span class="emoji">:pig:</span> | `pig` | <span class="emoji">:pig2:</span> | `pig2` | +| <span class="emoji">:boar:</span> | `boar` | <span class="emoji">:pig_nose:</span> | `pig_nose` | +| <span class="emoji">:ram:</span> | `ram` | <span class="emoji">:sheep:</span> | `sheep` | +| <span class="emoji">:goat:</span> | `goat` | <span class="emoji">:dromedary_camel:</span> | `dromedary_camel` | +| <span class="emoji">:camel:</span> | `camel` | <span class="emoji">:elephant:</span> | `elephant` | +| <span class="emoji">:rhinoceros:</span> | `rhinoceros` | <span class="emoji">:mouse:</span> | `mouse` | +| <span class="emoji">:mouse2:</span> | `mouse2` | <span class="emoji">:rat:</span> | `rat` | +| <span class="emoji">:hamster:</span> | `hamster` | <span class="emoji">:rabbit:</span> | `rabbit` | +| <span class="emoji">:rabbit2:</span> | `rabbit2` | <span class="emoji">:chipmunk:</span> | `chipmunk` | +| <span class="emoji">:bat:</span> | `bat` | <span class="emoji">:bear:</span> | `bear` | +| <span class="emoji">:koala:</span> | `koala` | <span class="emoji">:panda_face:</span> | `panda_face` | +| <span class="emoji">:feet:</span> | `feet` <br /> `paw_prints` | | | + +#### Animal Bird + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:turkey:</span> | `turkey` | <span class="emoji">:chicken:</span> | `chicken` | +| <span class="emoji">:rooster:</span> | `rooster` | <span class="emoji">:hatching_chick:</span> | `hatching_chick` | +| <span class="emoji">:baby_chick:</span> | `baby_chick` | <span class="emoji">:hatched_chick:</span> | `hatched_chick` | +| <span class="emoji">:bird:</span> | `bird` | <span class="emoji">:penguin:</span> | `penguin` | +| <span class="emoji">:dove:</span> | `dove` | <span class="emoji">:eagle:</span> | `eagle` | +| <span class="emoji">:duck:</span> | `duck` | <span class="emoji">:owl:</span> | `owl` | + +#### Animal Amphibian + +| | icon | code | | +| - | :-: | - | - | +| <span class="emoji">:frog:</span> | `frog` | + +#### Animal Reptile + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:crocodile:</span> | `crocodile` | <span class="emoji">:turtle:</span> | `turtle` | +| <span class="emoji">:lizard:</span> | `lizard` | <span class="emoji">:snake:</span> | `snake` | +| <span class="emoji">:dragon_face:</span> | `dragon_face` | <span class="emoji">:dragon:</span> | `dragon` | + +#### Animal Marine + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:whale:</span> | `whale` | <span class="emoji">:whale2:</span> | `whale2` | +| <span class="emoji">:dolphin:</span> | `dolphin` <br /> `flipper` | <span class="emoji">:fish:</span> | `fish` | +| <span class="emoji">:tropical_fish:</span> | `tropical_fish` | <span class="emoji">:blowfish:</span> | `blowfish` | +| <span class="emoji">:shark:</span> | `shark` | <span class="emoji">:octopus:</span> | `octopus` | +| <span class="emoji">:shell:</span> | `shell` | | | + +#### Animal Bug + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:snail:</span> | `snail` | <span class="emoji">:butterfly:</span> | `butterfly` | +| <span class="emoji">:bug:</span> | `bug` | <span class="emoji">:ant:</span> | `ant` | +| <span class="emoji">:bee:</span> | `bee` <br /> `honeybee` | <span class="emoji">:beetle:</span> | `beetle` | +| <span class="emoji">:spider:</span> | `spider` | <span class="emoji">:spider_web:</span> | `spider_web` | +| <span class="emoji">:scorpion:</span> | `scorpion` | | | + +#### Plant Flower + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:bouquet:</span> | `bouquet` | <span class="emoji">:cherry_blossom:</span> | `cherry_blossom` | +| <span class="emoji">:white_flower:</span> | `white_flower` | <span class="emoji">:rosette:</span> | `rosette` | +| <span class="emoji">:rose:</span> | `rose` | <span class="emoji">:wilted_flower:</span> | `wilted_flower` | +| <span class="emoji">:hibiscus:</span> | `hibiscus` | <span class="emoji">:sunflower:</span> | `sunflower` | +| <span class="emoji">:blossom:</span> | `blossom` | <span class="emoji">:tulip:</span> | `tulip` | + +#### Plant Other + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:seedling:</span> | `seedling` | <span class="emoji">:evergreen_tree:</span> | `evergreen_tree` | +| <span class="emoji">:deciduous_tree:</span> | `deciduous_tree` | <span class="emoji">:palm_tree:</span> | `palm_tree` | +| <span class="emoji">:cactus:</span> | `cactus` | <span class="emoji">:ear_of_rice:</span> | `ear_of_rice` | +| <span class="emoji">:herb:</span> | `herb` | <span class="emoji">:shamrock:</span> | `shamrock` | +| <span class="emoji">:four_leaf_clover:</span> | `four_leaf_clover` | <span class="emoji">:maple_leaf:</span> | `maple_leaf` | +| <span class="emoji">:fallen_leaf:</span> | `fallen_leaf` | <span class="emoji">:leaves:</span> | `leaves` | + +### Food & Drink + +#### Food Fruit + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:grapes:</span> | `grapes` | <span class="emoji">:melon:</span> | `melon` | +| <span class="emoji">:watermelon:</span> | `watermelon` | <span class="emoji">:mandarin:</span> | `mandarin` <br /> `orange` <br /> `tangerine` | +| <span class="emoji">:lemon:</span> | `lemon` | <span class="emoji">:banana:</span> | `banana` | +| <span class="emoji">:pineapple:</span> | `pineapple` | <span class="emoji">:apple:</span> | `apple` | +| <span class="emoji">:green_apple:</span> | `green_apple` | <span class="emoji">:pear:</span> | `pear` | +| <span class="emoji">:peach:</span> | `peach` | <span class="emoji">:cherries:</span> | `cherries` | +| <span class="emoji">:strawberry:</span> | `strawberry` | <span class="emoji">:kiwi_fruit:</span> | `kiwi_fruit` | +| <span class="emoji">:tomato:</span> | `tomato` | | | + +#### Food Vegetable + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:avocado:</span> | `avocado` | <span class="emoji">:eggplant:</span> | `eggplant` | +| <span class="emoji">:potato:</span> | `potato` | <span class="emoji">:carrot:</span> | `carrot` | +| <span class="emoji">:corn:</span> | `corn` | <span class="emoji">:hot_pepper:</span> | `hot_pepper` | +| <span class="emoji">:cucumber:</span> | `cucumber` | <span class="emoji">:mushroom:</span> | `mushroom` | +| <span class="emoji">:peanuts:</span> | `peanuts` | <span class="emoji">:chestnut:</span> | `chestnut` | + +#### Food Prepared + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:bread:</span> | `bread` | <span class="emoji">:croissant:</span> | `croissant` | +| <span class="emoji">:baguette_bread:</span> | `baguette_bread` | <span class="emoji">:pancakes:</span> | `pancakes` | +| <span class="emoji">:cheese:</span> | `cheese` | <span class="emoji">:meat_on_bone:</span> | `meat_on_bone` | +| <span class="emoji">:poultry_leg:</span> | `poultry_leg` | <span class="emoji">:bacon:</span> | `bacon` | +| <span class="emoji">:hamburger:</span> | `hamburger` | <span class="emoji">:fries:</span> | `fries` | +| <span class="emoji">:pizza:</span> | `pizza` | <span class="emoji">:hotdog:</span> | `hotdog` | +| <span class="emoji">:taco:</span> | `taco` | <span class="emoji">:burrito:</span> | `burrito` | +| <span class="emoji">:stuffed_flatbread:</span> | `stuffed_flatbread` | <span class="emoji">:egg:</span> | `egg` | +| <span class="emoji">:fried_egg:</span> | `fried_egg` | <span class="emoji">:shallow_pan_of_food:</span> | `shallow_pan_of_food` | +| <span class="emoji">:stew:</span> | `stew` | <span class="emoji">:green_salad:</span> | `green_salad` | +| <span class="emoji">:popcorn:</span> | `popcorn` | | | + +#### Food Asian + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:bento:</span> | `bento` | <span class="emoji">:rice_cracker:</span> | `rice_cracker` | +| <span class="emoji">:rice_ball:</span> | `rice_ball` | <span class="emoji">:rice:</span> | `rice` | +| <span class="emoji">:curry:</span> | `curry` | <span class="emoji">:ramen:</span> | `ramen` | +| <span class="emoji">:spaghetti:</span> | `spaghetti` | <span class="emoji">:sweet_potato:</span> | `sweet_potato` | +| <span class="emoji">:oden:</span> | `oden` | <span class="emoji">:sushi:</span> | `sushi` | +| <span class="emoji">:fried_shrimp:</span> | `fried_shrimp` | <span class="emoji">:fish_cake:</span> | `fish_cake` | +| <span class="emoji">:dango:</span> | `dango` | | | + +#### Food Marine + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:crab:</span> | `crab` | <span class="emoji">:shrimp:</span> | `shrimp` | +| <span class="emoji">:squid:</span> | `squid` | | | + +#### Food Sweet + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:icecream:</span> | `icecream` | <span class="emoji">:shaved_ice:</span> | `shaved_ice` | +| <span class="emoji">:ice_cream:</span> | `ice_cream` | <span class="emoji">:doughnut:</span> | `doughnut` | +| <span class="emoji">:cookie:</span> | `cookie` | <span class="emoji">:birthday:</span> | `birthday` | +| <span class="emoji">:cake:</span> | `cake` | <span class="emoji">:chocolate_bar:</span> | `chocolate_bar` | +| <span class="emoji">:candy:</span> | `candy` | <span class="emoji">:lollipop:</span> | `lollipop` | +| <span class="emoji">:custard:</span> | `custard` | <span class="emoji">:honey_pot:</span> | `honey_pot` | + +#### Drink + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:baby_bottle:</span> | `baby_bottle` | <span class="emoji">:milk_glass:</span> | `milk_glass` | +| <span class="emoji">:coffee:</span> | `coffee` | <span class="emoji">:tea:</span> | `tea` | +| <span class="emoji">:sake:</span> | `sake` | <span class="emoji">:champagne:</span> | `champagne` | +| <span class="emoji">:wine_glass:</span> | `wine_glass` | <span class="emoji">:cocktail:</span> | `cocktail` | +| <span class="emoji">:tropical_drink:</span> | `tropical_drink` | <span class="emoji">:beer:</span> | `beer` | +| <span class="emoji">:beers:</span> | `beers` | <span class="emoji">:clinking_glasses:</span> | `clinking_glasses` | +| <span class="emoji">:tumbler_glass:</span> | `tumbler_glass` | | | + +#### Dishware + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:plate_with_cutlery:</span> | `plate_with_cutlery` | <span class="emoji">:fork_and_knife:</span> | `fork_and_knife` | +| <span class="emoji">:spoon:</span> | `spoon` | <span class="emoji">:hocho:</span> | `hocho` <br /> `knife` | +| <span class="emoji">:amphora:</span> | `amphora` | | | + +### Travel & Places + +#### Place Map + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:earth_africa:</span> | `earth_africa` | <span class="emoji">:earth_americas:</span> | `earth_americas` | +| <span class="emoji">:earth_asia:</span> | `earth_asia` | <span class="emoji">:globe_with_meridians:</span> | `globe_with_meridians` | +| <span class="emoji">:world_map:</span> | `world_map` | <span class="emoji">:japan:</span> | `japan` | + +#### Place Geographic + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:mountain_snow:</span> | `mountain_snow` | <span class="emoji">:mountain:</span> | `mountain` | +| <span class="emoji">:volcano:</span> | `volcano` | <span class="emoji">:mount_fuji:</span> | `mount_fuji` | +| <span class="emoji">:camping:</span> | `camping` | <span class="emoji">:beach_umbrella:</span> | `beach_umbrella` | +| <span class="emoji">:desert:</span> | `desert` | <span class="emoji">:desert_island:</span> | `desert_island` | +| <span class="emoji">:national_park:</span> | `national_park` | | | + +#### Place Building + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:stadium:</span> | `stadium` | <span class="emoji">:classical_building:</span> | `classical_building` | +| <span class="emoji">:building_construction:</span> | `building_construction` | <span class="emoji">:houses:</span> | `houses` | +| <span class="emoji">:derelict_house:</span> | `derelict_house` | <span class="emoji">:house:</span> | `house` | +| <span class="emoji">:house_with_garden:</span> | `house_with_garden` | <span class="emoji">:office:</span> | `office` | +| <span class="emoji">:post_office:</span> | `post_office` | <span class="emoji">:european_post_office:</span> | `european_post_office` | +| <span class="emoji">:hospital:</span> | `hospital` | <span class="emoji">:bank:</span> | `bank` | +| <span class="emoji">:hotel:</span> | `hotel` | <span class="emoji">:love_hotel:</span> | `love_hotel` | +| <span class="emoji">:convenience_store:</span> | `convenience_store` | <span class="emoji">:school:</span> | `school` | +| <span class="emoji">:department_store:</span> | `department_store` | <span class="emoji">:factory:</span> | `factory` | +| <span class="emoji">:japanese_castle:</span> | `japanese_castle` | <span class="emoji">:european_castle:</span> | `european_castle` | +| <span class="emoji">:wedding:</span> | `wedding` | <span class="emoji">:tokyo_tower:</span> | `tokyo_tower` | +| <span class="emoji">:statue_of_liberty:</span> | `statue_of_liberty` | | | + +#### Place Religious + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:church:</span> | `church` | <span class="emoji">:mosque:</span> | `mosque` | +| <span class="emoji">:synagogue:</span> | `synagogue` | <span class="emoji">:shinto_shrine:</span> | `shinto_shrine` | +| <span class="emoji">:kaaba:</span> | `kaaba` | | | + +#### Place Other + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:fountain:</span> | `fountain` | <span class="emoji">:tent:</span> | `tent` | +| <span class="emoji">:foggy:</span> | `foggy` | <span class="emoji">:night_with_stars:</span> | `night_with_stars` | +| <span class="emoji">:cityscape:</span> | `cityscape` | <span class="emoji">:sunrise_over_mountains:</span> | `sunrise_over_mountains` | +| <span class="emoji">:sunrise:</span> | `sunrise` | <span class="emoji">:city_sunset:</span> | `city_sunset` | +| <span class="emoji">:city_sunrise:</span> | `city_sunrise` | <span class="emoji">:bridge_at_night:</span> | `bridge_at_night` | +| <span class="emoji">:hotsprings:</span> | `hotsprings` | <span class="emoji">:carousel_horse:</span> | `carousel_horse` | +| <span class="emoji">:ferris_wheel:</span> | `ferris_wheel` | <span class="emoji">:roller_coaster:</span> | `roller_coaster` | +| <span class="emoji">:barber:</span> | `barber` | <span class="emoji">:circus_tent:</span> | `circus_tent` | + +#### Transport Ground + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:steam_locomotive:</span> | `steam_locomotive` | <span class="emoji">:railway_car:</span> | `railway_car` | +| <span class="emoji">:bullettrain_side:</span> | `bullettrain_side` | <span class="emoji">:bullettrain_front:</span> | `bullettrain_front` | +| <span class="emoji">:train2:</span> | `train2` | <span class="emoji">:metro:</span> | `metro` | +| <span class="emoji">:light_rail:</span> | `light_rail` | <span class="emoji">:station:</span> | `station` | +| <span class="emoji">:tram:</span> | `tram` | <span class="emoji">:monorail:</span> | `monorail` | +| <span class="emoji">:mountain_railway:</span> | `mountain_railway` | <span class="emoji">:train:</span> | `train` | +| <span class="emoji">:bus:</span> | `bus` | <span class="emoji">:oncoming_bus:</span> | `oncoming_bus` | +| <span class="emoji">:trolleybus:</span> | `trolleybus` | <span class="emoji">:minibus:</span> | `minibus` | +| <span class="emoji">:ambulance:</span> | `ambulance` | <span class="emoji">:fire_engine:</span> | `fire_engine` | +| <span class="emoji">:police_car:</span> | `police_car` | <span class="emoji">:oncoming_police_car:</span> | `oncoming_police_car` | +| <span class="emoji">:taxi:</span> | `taxi` | <span class="emoji">:oncoming_taxi:</span> | `oncoming_taxi` | +| <span class="emoji">:car:</span> | `car` <br /> `red_car` | <span class="emoji">:oncoming_automobile:</span> | `oncoming_automobile` | +| <span class="emoji">:blue_car:</span> | `blue_car` | <span class="emoji">:truck:</span> | `truck` | +| <span class="emoji">:articulated_lorry:</span> | `articulated_lorry` | <span class="emoji">:tractor:</span> | `tractor` | +| <span class="emoji">:racing_car:</span> | `racing_car` | <span class="emoji">:motorcycle:</span> | `motorcycle` | +| <span class="emoji">:motor_scooter:</span> | `motor_scooter` | <span class="emoji">:bike:</span> | `bike` | +| <span class="emoji">:kick_scooter:</span> | `kick_scooter` | <span class="emoji">:busstop:</span> | `busstop` | +| <span class="emoji">:motorway:</span> | `motorway` | <span class="emoji">:railway_track:</span> | `railway_track` | +| <span class="emoji">:oil_drum:</span> | `oil_drum` | <span class="emoji">:fuelpump:</span> | `fuelpump` | +| <span class="emoji">:rotating_light:</span> | `rotating_light` | <span class="emoji">:traffic_light:</span> | `traffic_light` | +| <span class="emoji">:vertical_traffic_light:</span> | `vertical_traffic_light` | <span class="emoji">:stop_sign:</span> | `stop_sign` | +| <span class="emoji">:construction:</span> | `construction` | | | + +#### Transport Water + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:anchor:</span> | `anchor` | <span class="emoji">:boat:</span> | `boat` <br /> `sailboat` | +| <span class="emoji">:canoe:</span> | `canoe` | <span class="emoji">:speedboat:</span> | `speedboat` | +| <span class="emoji">:passenger_ship:</span> | `passenger_ship` | <span class="emoji">:ferry:</span> | `ferry` | +| <span class="emoji">:motor_boat:</span> | `motor_boat` | <span class="emoji">:ship:</span> | `ship` | + +#### Transport Air + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:airplane:</span> | `airplane` | <span class="emoji">:small_airplane:</span> | `small_airplane` | +| <span class="emoji">:flight_departure:</span> | `flight_departure` | <span class="emoji">:flight_arrival:</span> | `flight_arrival` | +| <span class="emoji">:seat:</span> | `seat` | <span class="emoji">:helicopter:</span> | `helicopter` | +| <span class="emoji">:suspension_railway:</span> | `suspension_railway` | <span class="emoji">:mountain_cableway:</span> | `mountain_cableway` | +| <span class="emoji">:aerial_tramway:</span> | `aerial_tramway` | <span class="emoji">:artificial_satellite:</span> | `artificial_satellite` | +| <span class="emoji">:rocket:</span> | `rocket` | | | + +#### Hotel + +| | icon | code | | +| - | :-: | - | - | +| <span class="emoji">:bellhop_bell:</span> | `bellhop_bell` | + +#### Time + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:hourglass:</span> | `hourglass` | <span class="emoji">:hourglass_flowing_sand:</span> | `hourglass_flowing_sand` | +| <span class="emoji">:watch:</span> | `watch` | <span class="emoji">:alarm_clock:</span> | `alarm_clock` | +| <span class="emoji">:stopwatch:</span> | `stopwatch` | <span class="emoji">:timer_clock:</span> | `timer_clock` | +| <span class="emoji">:mantelpiece_clock:</span> | `mantelpiece_clock` | <span class="emoji">:clock12:</span> | `clock12` | +| <span class="emoji">:clock1230:</span> | `clock1230` | <span class="emoji">:clock1:</span> | `clock1` | +| <span class="emoji">:clock130:</span> | `clock130` | <span class="emoji">:clock2:</span> | `clock2` | +| <span class="emoji">:clock230:</span> | `clock230` | <span class="emoji">:clock3:</span> | `clock3` | +| <span class="emoji">:clock330:</span> | `clock330` | <span class="emoji">:clock4:</span> | `clock4` | +| <span class="emoji">:clock430:</span> | `clock430` | <span class="emoji">:clock5:</span> | `clock5` | +| <span class="emoji">:clock530:</span> | `clock530` | <span class="emoji">:clock6:</span> | `clock6` | +| <span class="emoji">:clock630:</span> | `clock630` | <span class="emoji">:clock7:</span> | `clock7` | +| <span class="emoji">:clock730:</span> | `clock730` | <span class="emoji">:clock8:</span> | `clock8` | +| <span class="emoji">:clock830:</span> | `clock830` | <span class="emoji">:clock9:</span> | `clock9` | +| <span class="emoji">:clock930:</span> | `clock930` | <span class="emoji">:clock10:</span> | `clock10` | +| <span class="emoji">:clock1030:</span> | `clock1030` | <span class="emoji">:clock11:</span> | `clock11` | +| <span class="emoji">:clock1130:</span> | `clock1130` | | | + +#### Sky & Weather + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:new_moon:</span> | `new_moon` | <span class="emoji">:waxing_crescent_moon:</span> | `waxing_crescent_moon` | +| <span class="emoji">:first_quarter_moon:</span> | `first_quarter_moon` | <span class="emoji">:moon:</span> | `moon` <br /> `waxing_gibbous_moon` | +| <span class="emoji">:full_moon:</span> | `full_moon` | <span class="emoji">:waning_gibbous_moon:</span> | `waning_gibbous_moon` | +| <span class="emoji">:last_quarter_moon:</span> | `last_quarter_moon` | <span class="emoji">:waning_crescent_moon:</span> | `waning_crescent_moon` | +| <span class="emoji">:crescent_moon:</span> | `crescent_moon` | <span class="emoji">:new_moon_with_face:</span> | `new_moon_with_face` | +| <span class="emoji">:first_quarter_moon_with_face:</span> | `first_quarter_moon_with_face` | <span class="emoji">:last_quarter_moon_with_face:</span> | `last_quarter_moon_with_face` | +| <span class="emoji">:thermometer:</span> | `thermometer` | <span class="emoji">:sunny:</span> | `sunny` | +| <span class="emoji">:full_moon_with_face:</span> | `full_moon_with_face` | <span class="emoji">:sun_with_face:</span> | `sun_with_face` | +| <span class="emoji">:star:</span> | `star` | <span class="emoji">:star2:</span> | `star2` | +| <span class="emoji">:stars:</span> | `stars` | <span class="emoji">:milky_way:</span> | `milky_way` | +| <span class="emoji">:cloud:</span> | `cloud` | <span class="emoji">:partly_sunny:</span> | `partly_sunny` | +| <span class="emoji">:cloud_with_lightning_and_rain:</span> | `cloud_with_lightning_and_rain` | <span class="emoji">:sun_behind_small_cloud:</span> | `sun_behind_small_cloud` | +| <span class="emoji">:sun_behind_large_cloud:</span> | `sun_behind_large_cloud` | <span class="emoji">:sun_behind_rain_cloud:</span> | `sun_behind_rain_cloud` | +| <span class="emoji">:cloud_with_rain:</span> | `cloud_with_rain` | <span class="emoji">:cloud_with_snow:</span> | `cloud_with_snow` | +| <span class="emoji">:cloud_with_lightning:</span> | `cloud_with_lightning` | <span class="emoji">:tornado:</span> | `tornado` | +| <span class="emoji">:fog:</span> | `fog` | <span class="emoji">:wind_face:</span> | `wind_face` | +| <span class="emoji">:cyclone:</span> | `cyclone` | <span class="emoji">:rainbow:</span> | `rainbow` | +| <span class="emoji">:closed_umbrella:</span> | `closed_umbrella` | <span class="emoji">:open_umbrella:</span> | `open_umbrella` | +| <span class="emoji">:umbrella:</span> | `umbrella` | <span class="emoji">:parasol_on_ground:</span> | `parasol_on_ground` | +| <span class="emoji">:zap:</span> | `zap` | <span class="emoji">:snowflake:</span> | `snowflake` | +| <span class="emoji">:snowman_with_snow:</span> | `snowman_with_snow` | <span class="emoji">:snowman:</span> | `snowman` | +| <span class="emoji">:comet:</span> | `comet` | <span class="emoji">:fire:</span> | `fire` | +| <span class="emoji">:droplet:</span> | `droplet` | <span class="emoji">:ocean:</span> | `ocean` | + +### Activities + +#### Event + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:jack_o_lantern:</span> | `jack_o_lantern` | <span class="emoji">:christmas_tree:</span> | `christmas_tree` | +| <span class="emoji">:fireworks:</span> | `fireworks` | <span class="emoji">:sparkler:</span> | `sparkler` | +| <span class="emoji">:sparkles:</span> | `sparkles` | <span class="emoji">:balloon:</span> | `balloon` | +| <span class="emoji">:tada:</span> | `tada` | <span class="emoji">:confetti_ball:</span> | `confetti_ball` | +| <span class="emoji">:tanabata_tree:</span> | `tanabata_tree` | <span class="emoji">:bamboo:</span> | `bamboo` | +| <span class="emoji">:dolls:</span> | `dolls` | <span class="emoji">:flags:</span> | `flags` | +| <span class="emoji">:wind_chime:</span> | `wind_chime` | <span class="emoji">:rice_scene:</span> | `rice_scene` | +| <span class="emoji">:ribbon:</span> | `ribbon` | <span class="emoji">:gift:</span> | `gift` | +| <span class="emoji">:reminder_ribbon:</span> | `reminder_ribbon` | <span class="emoji">:tickets:</span> | `tickets` | +| <span class="emoji">:ticket:</span> | `ticket` | | | + +#### Award Medal + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:medal_military:</span> | `medal_military` | <span class="emoji">:trophy:</span> | `trophy` | +| <span class="emoji">:medal_sports:</span> | `medal_sports` | <span class="emoji">:1st_place_medal:</span> | `1st_place_medal` | +| <span class="emoji">:2nd_place_medal:</span> | `2nd_place_medal` | <span class="emoji">:3rd_place_medal:</span> | `3rd_place_medal` | + +#### Sport + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:soccer:</span> | `soccer` | <span class="emoji">:baseball:</span> | `baseball` | +| <span class="emoji">:basketball:</span> | `basketball` | <span class="emoji">:volleyball:</span> | `volleyball` | +| <span class="emoji">:football:</span> | `football` | <span class="emoji">:rugby_football:</span> | `rugby_football` | +| <span class="emoji">:tennis:</span> | `tennis` | <span class="emoji">:bowling:</span> | `bowling` | +| <span class="emoji">:cricket:</span> | `cricket` | <span class="emoji">:field_hockey:</span> | `field_hockey` | +| <span class="emoji">:ice_hockey:</span> | `ice_hockey` | <span class="emoji">:ping_pong:</span> | `ping_pong` | +| <span class="emoji">:badminton:</span> | `badminton` | <span class="emoji">:boxing_glove:</span> | `boxing_glove` | +| <span class="emoji">:martial_arts_uniform:</span> | `martial_arts_uniform` | <span class="emoji">:goal_net:</span> | `goal_net` | +| <span class="emoji">:golf:</span> | `golf` | <span class="emoji">:ice_skate:</span> | `ice_skate` | +| <span class="emoji">:fishing_pole_and_fish:</span> | `fishing_pole_and_fish` | <span class="emoji">:running_shirt_with_sash:</span> | `running_shirt_with_sash` | +| <span class="emoji">:ski:</span> | `ski` | | | + +#### Game + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:dart:</span> | `dart` | <span class="emoji">:8ball:</span> | `8ball` | +| <span class="emoji">:crystal_ball:</span> | `crystal_ball` | <span class="emoji">:video_game:</span> | `video_game` | +| <span class="emoji">:joystick:</span> | `joystick` | <span class="emoji">:slot_machine:</span> | `slot_machine` | +| <span class="emoji">:game_die:</span> | `game_die` | <span class="emoji">:spades:</span> | `spades` | +| <span class="emoji">:hearts:</span> | `hearts` | <span class="emoji">:diamonds:</span> | `diamonds` | +| <span class="emoji">:clubs:</span> | `clubs` | <span class="emoji">:black_joker:</span> | `black_joker` | +| <span class="emoji">:mahjong:</span> | `mahjong` | <span class="emoji">:flower_playing_cards:</span> | `flower_playing_cards` | + +#### Arts & Crafts + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:performing_arts:</span> | `performing_arts` | <span class="emoji">:framed_picture:</span> | `framed_picture` | +| <span class="emoji">:art:</span> | `art` | | | + +### Objects + +#### Clothing + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:eyeglasses:</span> | `eyeglasses` | <span class="emoji">:dark_sunglasses:</span> | `dark_sunglasses` | +| <span class="emoji">:necktie:</span> | `necktie` | <span class="emoji">:shirt:</span> | `shirt` <br /> `tshirt` | +| <span class="emoji">:jeans:</span> | `jeans` | <span class="emoji">:dress:</span> | `dress` | +| <span class="emoji">:kimono:</span> | `kimono` | <span class="emoji">:bikini:</span> | `bikini` | +| <span class="emoji">:womans_clothes:</span> | `womans_clothes` | <span class="emoji">:purse:</span> | `purse` | +| <span class="emoji">:handbag:</span> | `handbag` | <span class="emoji">:pouch:</span> | `pouch` | +| <span class="emoji">:shopping:</span> | `shopping` | <span class="emoji">:school_satchel:</span> | `school_satchel` | +| <span class="emoji">:mans_shoe:</span> | `mans_shoe` <br /> `shoe` | <span class="emoji">:athletic_shoe:</span> | `athletic_shoe` | +| <span class="emoji">:high_heel:</span> | `high_heel` | <span class="emoji">:sandal:</span> | `sandal` | +| <span class="emoji">:boot:</span> | `boot` | <span class="emoji">:crown:</span> | `crown` | +| <span class="emoji">:womans_hat:</span> | `womans_hat` | <span class="emoji">:tophat:</span> | `tophat` | +| <span class="emoji">:mortar_board:</span> | `mortar_board` | <span class="emoji">:rescue_worker_helmet:</span> | `rescue_worker_helmet` | +| <span class="emoji">:prayer_beads:</span> | `prayer_beads` | <span class="emoji">:lipstick:</span> | `lipstick` | +| <span class="emoji">:ring:</span> | `ring` | <span class="emoji">:gem:</span> | `gem` | + +#### Sound + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:mute:</span> | `mute` | <span class="emoji">:speaker:</span> | `speaker` | +| <span class="emoji">:sound:</span> | `sound` | <span class="emoji">:loud_sound:</span> | `loud_sound` | +| <span class="emoji">:loudspeaker:</span> | `loudspeaker` | <span class="emoji">:mega:</span> | `mega` | +| <span class="emoji">:postal_horn:</span> | `postal_horn` | <span class="emoji">:bell:</span> | `bell` | +| <span class="emoji">:no_bell:</span> | `no_bell` | | | + +#### Music + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:musical_score:</span> | `musical_score` | <span class="emoji">:musical_note:</span> | `musical_note` | +| <span class="emoji">:notes:</span> | `notes` | <span class="emoji">:studio_microphone:</span> | `studio_microphone` | +| <span class="emoji">:level_slider:</span> | `level_slider` | <span class="emoji">:control_knobs:</span> | `control_knobs` | +| <span class="emoji">:microphone:</span> | `microphone` | <span class="emoji">:headphones:</span> | `headphones` | +| <span class="emoji">:radio:</span> | `radio` | | | + +#### Musical Instrument + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:saxophone:</span> | `saxophone` | <span class="emoji">:guitar:</span> | `guitar` | +| <span class="emoji">:musical_keyboard:</span> | `musical_keyboard` | <span class="emoji">:trumpet:</span> | `trumpet` | +| <span class="emoji">:violin:</span> | `violin` | <span class="emoji">:drum:</span> | `drum` | + +#### Phone + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:iphone:</span> | `iphone` | <span class="emoji">:calling:</span> | `calling` | +| <span class="emoji">:phone:</span> | `phone` <br /> `telephone` | <span class="emoji">:telephone_receiver:</span> | `telephone_receiver` | +| <span class="emoji">:pager:</span> | `pager` | <span class="emoji">:fax:</span> | `fax` | + +#### Computer + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:battery:</span> | `battery` | <span class="emoji">:electric_plug:</span> | `electric_plug` | +| <span class="emoji">:computer:</span> | `computer` | <span class="emoji">:desktop_computer:</span> | `desktop_computer` | +| <span class="emoji">:printer:</span> | `printer` | <span class="emoji">:keyboard:</span> | `keyboard` | +| <span class="emoji">:computer_mouse:</span> | `computer_mouse` | <span class="emoji">:trackball:</span> | `trackball` | +| <span class="emoji">:minidisc:</span> | `minidisc` | <span class="emoji">:floppy_disk:</span> | `floppy_disk` | +| <span class="emoji">:cd:</span> | `cd` | <span class="emoji">:dvd:</span> | `dvd` | + +#### Light & Video + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:movie_camera:</span> | `movie_camera` | <span class="emoji">:film_strip:</span> | `film_strip` | +| <span class="emoji">:film_projector:</span> | `film_projector` | <span class="emoji">:clapper:</span> | `clapper` | +| <span class="emoji">:tv:</span> | `tv` | <span class="emoji">:camera:</span> | `camera` | +| <span class="emoji">:camera_flash:</span> | `camera_flash` | <span class="emoji">:video_camera:</span> | `video_camera` | +| <span class="emoji">:vhs:</span> | `vhs` | <span class="emoji">:mag:</span> | `mag` | +| <span class="emoji">:mag_right:</span> | `mag_right` | <span class="emoji">:candle:</span> | `candle` | +| <span class="emoji">:bulb:</span> | `bulb` | <span class="emoji">:flashlight:</span> | `flashlight` | +| <span class="emoji">:izakaya_lantern:</span> | `izakaya_lantern` <br /> `lantern` | | | + +#### Book Paper + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:notebook_with_decorative_cover:</span> | `notebook_with_decorative_cover` | <span class="emoji">:closed_book:</span> | `closed_book` | +| <span class="emoji">:book:</span> | `book` <br /> `open_book` | <span class="emoji">:green_book:</span> | `green_book` | +| <span class="emoji">:blue_book:</span> | `blue_book` | <span class="emoji">:orange_book:</span> | `orange_book` | +| <span class="emoji">:books:</span> | `books` | <span class="emoji">:notebook:</span> | `notebook` | +| <span class="emoji">:ledger:</span> | `ledger` | <span class="emoji">:page_with_curl:</span> | `page_with_curl` | +| <span class="emoji">:scroll:</span> | `scroll` | <span class="emoji">:page_facing_up:</span> | `page_facing_up` | +| <span class="emoji">:newspaper:</span> | `newspaper` | <span class="emoji">:newspaper_roll:</span> | `newspaper_roll` | +| <span class="emoji">:bookmark_tabs:</span> | `bookmark_tabs` | <span class="emoji">:bookmark:</span> | `bookmark` | +| <span class="emoji">:label:</span> | `label` | | | + +#### Money + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:moneybag:</span> | `moneybag` | <span class="emoji">:yen:</span> | `yen` | +| <span class="emoji">:dollar:</span> | `dollar` | <span class="emoji">:euro:</span> | `euro` | +| <span class="emoji">:pound:</span> | `pound` | <span class="emoji">:money_with_wings:</span> | `money_with_wings` | +| <span class="emoji">:credit_card:</span> | `credit_card` | <span class="emoji">:chart:</span> | `chart` | + +#### Mail + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:email:</span> | `email` <br /> `envelope` | :e-mail: | `:e-mail:` | +| <span class="emoji">:incoming_envelope:</span> | `incoming_envelope` | <span class="emoji">:envelope_with_arrow:</span> | `envelope_with_arrow` | +| <span class="emoji">:outbox_tray:</span> | `outbox_tray` | <span class="emoji">:inbox_tray:</span> | `inbox_tray` | +| <span class="emoji">:package:</span> | `package` | <span class="emoji">:mailbox:</span> | `mailbox` | +| <span class="emoji">:mailbox_closed:</span> | `mailbox_closed` | <span class="emoji">:mailbox_with_mail:</span> | `mailbox_with_mail` | +| <span class="emoji">:mailbox_with_no_mail:</span> | `mailbox_with_no_mail` | <span class="emoji">:postbox:</span> | `postbox` | +| <span class="emoji">:ballot_box:</span> | `ballot_box` | | | + +#### Writing + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:pencil2:</span> | `pencil2` | <span class="emoji">:black_nib:</span> | `black_nib` | +| <span class="emoji">:fountain_pen:</span> | `fountain_pen` | <span class="emoji">:pen:</span> | `pen` | +| <span class="emoji">:paintbrush:</span> | `paintbrush` | <span class="emoji">:crayon:</span> | `crayon` | +| <span class="emoji">:memo:</span> | `memo` <br /> `pencil` | | | + +#### Office + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:briefcase:</span> | `briefcase` | <span class="emoji">:file_folder:</span> | `file_folder` | +| <span class="emoji">:open_file_folder:</span> | `open_file_folder` | <span class="emoji">:card_index_dividers:</span> | `card_index_dividers` | +| <span class="emoji">:date:</span> | `date` | <span class="emoji">:calendar:</span> | `calendar` | +| <span class="emoji">:spiral_notepad:</span> | `spiral_notepad` | <span class="emoji">:spiral_calendar:</span> | `spiral_calendar` | +| <span class="emoji">:card_index:</span> | `card_index` | <span class="emoji">:chart_with_upwards_trend:</span> | `chart_with_upwards_trend` | +| <span class="emoji">:chart_with_downwards_trend:</span> | `chart_with_downwards_trend` | <span class="emoji">:bar_chart:</span> | `bar_chart` | +| <span class="emoji">:clipboard:</span> | `clipboard` | <span class="emoji">:pushpin:</span> | `pushpin` | +| <span class="emoji">:round_pushpin:</span> | `round_pushpin` | <span class="emoji">:paperclip:</span> | `paperclip` | +| <span class="emoji">:paperclips:</span> | `paperclips` | <span class="emoji">:straight_ruler:</span> | `straight_ruler` | +| <span class="emoji">:triangular_ruler:</span> | `triangular_ruler` | <span class="emoji">:scissors:</span> | `scissors` | +| <span class="emoji">:card_file_box:</span> | `card_file_box` | <span class="emoji">:file_cabinet:</span> | `file_cabinet` | +| <span class="emoji">:wastebasket:</span> | `wastebasket` | | | + +#### Lock + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:lock:</span> | `lock` | <span class="emoji">:unlock:</span> | `unlock` | +| <span class="emoji">:lock_with_ink_pen:</span> | `lock_with_ink_pen` | <span class="emoji">:closed_lock_with_key:</span> | `closed_lock_with_key` | +| <span class="emoji">:key:</span> | `key` | <span class="emoji">:old_key:</span> | `old_key` | + +#### Tool + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:hammer:</span> | `hammer` | <span class="emoji">:pick:</span> | `pick` | +| <span class="emoji">:hammer_and_pick:</span> | `hammer_and_pick` | <span class="emoji">:hammer_and_wrench:</span> | `hammer_and_wrench` | +| <span class="emoji">:dagger:</span> | `dagger` | <span class="emoji">:crossed_swords:</span> | `crossed_swords` | +| <span class="emoji">:gun:</span> | `gun` | <span class="emoji">:bow_and_arrow:</span> | `bow_and_arrow` | +| <span class="emoji">:shield:</span> | `shield` | <span class="emoji">:wrench:</span> | `wrench` | +| <span class="emoji">:nut_and_bolt:</span> | `nut_and_bolt` | <span class="emoji">:gear:</span> | `gear` | +| <span class="emoji">:clamp:</span> | `clamp` | <span class="emoji">:balance_scale:</span> | `balance_scale` | +| <span class="emoji">:link:</span> | `link` | <span class="emoji">:chains:</span> | `chains` | + +#### Science + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:alembic:</span> | `alembic` | <span class="emoji">:microscope:</span> | `microscope` | +| <span class="emoji">:telescope:</span> | `telescope` | <span class="emoji">:satellite:</span> | `satellite` | + +#### Medical + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:syringe:</span> | `syringe` | <span class="emoji">:pill:</span> | `pill` | + +#### Household + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:door:</span> | `door` | <span class="emoji">:bed:</span> | `bed` | +| <span class="emoji">:couch_and_lamp:</span> | `couch_and_lamp` | <span class="emoji">:toilet:</span> | `toilet` | +| <span class="emoji">:shower:</span> | `shower` | <span class="emoji">:bathtub:</span> | `bathtub` | +| <span class="emoji">:shopping_cart:</span> | `shopping_cart` | | | + +#### Other Object + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:smoking:</span> | `smoking` | <span class="emoji">:coffin:</span> | `coffin` | +| <span class="emoji">:funeral_urn:</span> | `funeral_urn` | <span class="emoji">:moyai:</span> | `moyai` | + +### Symbols + +#### Transport Sign + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:atm:</span> | `atm` | <span class="emoji">:put_litter_in_its_place:</span> | `put_litter_in_its_place` | +| <span class="emoji">:potable_water:</span> | `potable_water` | <span class="emoji">:wheelchair:</span> | `wheelchair` | +| <span class="emoji">:mens:</span> | `mens` | <span class="emoji">:womens:</span> | `womens` | +| <span class="emoji">:restroom:</span> | `restroom` | <span class="emoji">:baby_symbol:</span> | `baby_symbol` | +| <span class="emoji">:wc:</span> | `wc` | <span class="emoji">:passport_control:</span> | `passport_control` | +| <span class="emoji">:customs:</span> | `customs` | <span class="emoji">:baggage_claim:</span> | `baggage_claim` | +| <span class="emoji">:left_luggage:</span> | `left_luggage` | | | + +#### Warning + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:warning:</span> | `warning` | <span class="emoji">:children_crossing:</span> | `children_crossing` | +| <span class="emoji">:no_entry:</span> | `no_entry` | <span class="emoji">:no_entry_sign:</span> | `no_entry_sign` | +| <span class="emoji">:no_bicycles:</span> | `no_bicycles` | <span class="emoji">:no_smoking:</span> | `no_smoking` | +| <span class="emoji">:do_not_litter:</span> | `do_not_litter` | :non-potable_water: | `:non-potable_water:` | +| <span class="emoji">:no_pedestrians:</span> | `no_pedestrians` | <span class="emoji">:no_mobile_phones:</span> | `no_mobile_phones` | +| <span class="emoji">:underage:</span> | `underage` | <span class="emoji">:radioactive:</span> | `radioactive` | +| <span class="emoji">:biohazard:</span> | `biohazard` | | | + +#### Arrow + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:arrow_up:</span> | `arrow_up` | <span class="emoji">:arrow_upper_right:</span> | `arrow_upper_right` | +| <span class="emoji">:arrow_right:</span> | `arrow_right` | <span class="emoji">:arrow_lower_right:</span> | `arrow_lower_right` | +| <span class="emoji">:arrow_down:</span> | `arrow_down` | <span class="emoji">:arrow_lower_left:</span> | `arrow_lower_left` | +| <span class="emoji">:arrow_left:</span> | `arrow_left` | <span class="emoji">:arrow_upper_left:</span> | `arrow_upper_left` | +| <span class="emoji">:arrow_up_down:</span> | `arrow_up_down` | <span class="emoji">:left_right_arrow:</span> | `left_right_arrow` | +| <span class="emoji">:leftwards_arrow_with_hook:</span> | `leftwards_arrow_with_hook` | <span class="emoji">:arrow_right_hook:</span> | `arrow_right_hook` | +| <span class="emoji">:arrow_heading_up:</span> | `arrow_heading_up` | <span class="emoji">:arrow_heading_down:</span> | `arrow_heading_down` | +| <span class="emoji">:arrows_clockwise:</span> | `arrows_clockwise` | <span class="emoji">:arrows_counterclockwise:</span> | `arrows_counterclockwise` | +| <span class="emoji">:back:</span> | `back` | <span class="emoji">:end:</span> | `end` | +| <span class="emoji">:on:</span> | `on` | <span class="emoji">:soon:</span> | `soon` | +| <span class="emoji">:top:</span> | `top` | | | + +#### Religion + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:place_of_worship:</span> | `place_of_worship` | <span class="emoji">:atom_symbol:</span> | `atom_symbol` | +| <span class="emoji">:om:</span> | `om` | <span class="emoji">:star_of_david:</span> | `star_of_david` | +| <span class="emoji">:wheel_of_dharma:</span> | `wheel_of_dharma` | <span class="emoji">:yin_yang:</span> | `yin_yang` | +| <span class="emoji">:latin_cross:</span> | `latin_cross` | <span class="emoji">:orthodox_cross:</span> | `orthodox_cross` | +| <span class="emoji">:star_and_crescent:</span> | `star_and_crescent` | <span class="emoji">:peace_symbol:</span> | `peace_symbol` | +| <span class="emoji">:menorah:</span> | `menorah` | <span class="emoji">:six_pointed_star:</span> | `six_pointed_star` | + +#### Zodiac + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:aries:</span> | `aries` | <span class="emoji">:taurus:</span> | `taurus` | +| <span class="emoji">:gemini:</span> | `gemini` | <span class="emoji">:cancer:</span> | `cancer` | +| <span class="emoji">:leo:</span> | `leo` | <span class="emoji">:virgo:</span> | `virgo` | +| <span class="emoji">:libra:</span> | `libra` | <span class="emoji">:scorpius:</span> | `scorpius` | +| <span class="emoji">:sagittarius:</span> | `sagittarius` | <span class="emoji">:capricorn:</span> | `capricorn` | +| <span class="emoji">:aquarius:</span> | `aquarius` | <span class="emoji">:pisces:</span> | `pisces` | +| <span class="emoji">:ophiuchus:</span> | `ophiuchus` | | | + +#### Av Symbol + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:twisted_rightwards_arrows:</span> | `twisted_rightwards_arrows` | <span class="emoji">:repeat:</span> | `repeat` | +| <span class="emoji">:repeat_one:</span> | `repeat_one` | <span class="emoji">:arrow_forward:</span> | `arrow_forward` | +| <span class="emoji">:fast_forward:</span> | `fast_forward` | <span class="emoji">:next_track_button:</span> | `next_track_button` | +| <span class="emoji">:play_or_pause_button:</span> | `play_or_pause_button` | <span class="emoji">:arrow_backward:</span> | `arrow_backward` | +| <span class="emoji">:rewind:</span> | `rewind` | <span class="emoji">:previous_track_button:</span> | `previous_track_button` | +| <span class="emoji">:arrow_up_small:</span> | `arrow_up_small` | <span class="emoji">:arrow_double_up:</span> | `arrow_double_up` | +| <span class="emoji">:arrow_down_small:</span> | `arrow_down_small` | <span class="emoji">:arrow_double_down:</span> | `arrow_double_down` | +| <span class="emoji">:pause_button:</span> | `pause_button` | <span class="emoji">:stop_button:</span> | `stop_button` | +| <span class="emoji">:record_button:</span> | `record_button` | <span class="emoji">:cinema:</span> | `cinema` | +| <span class="emoji">:low_brightness:</span> | `low_brightness` | <span class="emoji">:high_brightness:</span> | `high_brightness` | +| <span class="emoji">:signal_strength:</span> | `signal_strength` | <span class="emoji">:vibration_mode:</span> | `vibration_mode` | +| <span class="emoji">:mobile_phone_off:</span> | `mobile_phone_off` | | | + +#### Math + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:heavy_multiplication_x:</span> | `heavy_multiplication_x` | <span class="emoji">:heavy_plus_sign:</span> | `heavy_plus_sign` | +| <span class="emoji">:heavy_minus_sign:</span> | `heavy_minus_sign` | <span class="emoji">:heavy_division_sign:</span> | `heavy_division_sign` | + +#### Punctuation + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:bangbang:</span> | `bangbang` | <span class="emoji">:interrobang:</span> | `interrobang` | +| <span class="emoji">:question:</span> | `question` | <span class="emoji">:grey_question:</span> | `grey_question` | +| <span class="emoji">:grey_exclamation:</span> | `grey_exclamation` | <span class="emoji">:exclamation:</span> | `exclamation` <br /> `heavy_exclamation_mark` | +| <span class="emoji">:wavy_dash:</span> | `wavy_dash` | | | + +#### Currency + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:currency_exchange:</span> | `currency_exchange` | <span class="emoji">:heavy_dollar_sign:</span> | `heavy_dollar_sign` | + +#### Keycap + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:hash:</span> | `hash` | <span class="emoji">:asterisk:</span> | `asterisk` | +| <span class="emoji">:zero:</span> | `zero` | <span class="emoji">:one:</span> | `one` | +| <span class="emoji">:two:</span> | `two` | <span class="emoji">:three:</span> | `three` | +| <span class="emoji">:four:</span> | `four` | <span class="emoji">:five:</span> | `five` | +| <span class="emoji">:six:</span> | `six` | <span class="emoji">:seven:</span> | `seven` | +| <span class="emoji">:eight:</span> | `eight` | <span class="emoji">:nine:</span> | `nine` | +| <span class="emoji">:keycap_ten:</span> | `keycap_ten` | | | + +#### Alphabet + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:capital_abcd:</span> | `capital_abcd` | <span class="emoji">:abcd:</span> | `abcd` | +| <span class="emoji">:1234:</span> | `1234` | <span class="emoji">:symbols:</span> | `symbols` | +| <span class="emoji">:abc:</span> | `abc` | <span class="emoji">:a:</span> | `a` | +| <span class="emoji">:ab:</span> | `ab` | <span class="emoji">:b:</span> | `b` | +| <span class="emoji">:cl:</span> | `cl` | <span class="emoji">:cool:</span> | `cool` | +| <span class="emoji">:free:</span> | `free` | <span class="emoji">:information_source:</span> | `information_source` | +| <span class="emoji">:id:</span> | `id` | <span class="emoji">:m:</span> | `m` | +| <span class="emoji">:new:</span> | `new` | <span class="emoji">:ng:</span> | `ng` | +| <span class="emoji">:o2:</span> | `o2` | <span class="emoji">:ok:</span> | `ok` | +| <span class="emoji">:parking:</span> | `parking` | <span class="emoji">:sos:</span> | `sos` | +| <span class="emoji">:up:</span> | `up` | <span class="emoji">:vs:</span> | `vs` | +| <span class="emoji">:koko:</span> | `koko` | <span class="emoji">:sa:</span> | `sa` | +| <span class="emoji">:u6708:</span> | `u6708` | <span class="emoji">:u6709:</span> | `u6709` | +| <span class="emoji">:u6307:</span> | `u6307` | <span class="emoji">:ideograph_advantage:</span> | `ideograph_advantage` | +| <span class="emoji">:u5272:</span> | `u5272` | <span class="emoji">:u7121:</span> | `u7121` | +| <span class="emoji">:u7981:</span> | `u7981` | <span class="emoji">:accept:</span> | `accept` | +| <span class="emoji">:u7533:</span> | `u7533` | <span class="emoji">:u5408:</span> | `u5408` | +| <span class="emoji">:u7a7a:</span> | `u7a7a` | <span class="emoji">:congratulations:</span> | `congratulations` | +| <span class="emoji">:secret:</span> | `secret` | <span class="emoji">:u55b6:</span> | `u55b6` | +| <span class="emoji">:u6e80:</span> | `u6e80` | | | + +#### Geometric + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:red_circle:</span> | `red_circle` | <span class="emoji">:large_blue_circle:</span> | `large_blue_circle` | +| <span class="emoji">:black_circle:</span> | `black_circle` | <span class="emoji">:white_circle:</span> | `white_circle` | +| <span class="emoji">:black_large_square:</span> | `black_large_square` | <span class="emoji">:white_large_square:</span> | `white_large_square` | +| <span class="emoji">:black_medium_square:</span> | `black_medium_square` | <span class="emoji">:white_medium_square:</span> | `white_medium_square` | +| <span class="emoji">:black_medium_small_square:</span> | `black_medium_small_square` | <span class="emoji">:white_medium_small_square:</span> | `white_medium_small_square` | +| <span class="emoji">:black_small_square:</span> | `black_small_square` | <span class="emoji">:white_small_square:</span> | `white_small_square` | +| <span class="emoji">:large_orange_diamond:</span> | `large_orange_diamond` | <span class="emoji">:large_blue_diamond:</span> | `large_blue_diamond` | +| <span class="emoji">:small_orange_diamond:</span> | `small_orange_diamond` | <span class="emoji">:small_blue_diamond:</span> | `small_blue_diamond` | +| <span class="emoji">:small_red_triangle:</span> | `small_red_triangle` | <span class="emoji">:small_red_triangle_down:</span> | `small_red_triangle_down` | +| <span class="emoji">:diamond_shape_with_a_dot_inside:</span> | `diamond_shape_with_a_dot_inside` | <span class="emoji">:radio_button:</span> | `radio_button` | +| <span class="emoji">:white_square_button:</span> | `white_square_button` | <span class="emoji">:black_square_button:</span> | `black_square_button` | + +#### Other Symbol + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:recycle:</span> | `recycle` | <span class="emoji">:fleur_de_lis:</span> | `fleur_de_lis` | +| <span class="emoji">:trident:</span> | `trident` | <span class="emoji">:name_badge:</span> | `name_badge` | +| <span class="emoji">:beginner:</span> | `beginner` | <span class="emoji">:o:</span> | `o` | +| <span class="emoji">:white_check_mark:</span> | `white_check_mark` | <span class="emoji">:ballot_box_with_check:</span> | `ballot_box_with_check` | +| <span class="emoji">:heavy_check_mark:</span> | `heavy_check_mark` | <span class="emoji">:x:</span> | `x` | +| <span class="emoji">:negative_squared_cross_mark:</span> | `negative_squared_cross_mark` | <span class="emoji">:curly_loop:</span> | `curly_loop` | +| <span class="emoji">:loop:</span> | `loop` | <span class="emoji">:part_alternation_mark:</span> | `part_alternation_mark` | +| <span class="emoji">:eight_spoked_asterisk:</span> | `eight_spoked_asterisk` | <span class="emoji">:eight_pointed_black_star:</span> | `eight_pointed_black_star` | +| <span class="emoji">:sparkle:</span> | `sparkle` | <span class="emoji">:copyright:</span> | `copyright` | +| <span class="emoji">:registered:</span> | `registered` | <span class="emoji">:tm:</span> | `tm` | + +### Flags + +#### Common Flags + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:checkered_flag:</span> | `checkered_flag` | <span class="emoji">:triangular_flag_on_post:</span> | `triangular_flag_on_post` | +| <span class="emoji">:crossed_flags:</span> | `crossed_flags` | <span class="emoji">:black_flag:</span> | `black_flag` | +| <span class="emoji">:white_flag:</span> | `white_flag` | <span class="emoji">:rainbow_flag:</span> | `rainbow_flag` | + +#### Country and Region Flags + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:andorra:</span> | `andorra` | <span class="emoji">:united_arab_emirates:</span> | `united_arab_emirates` | +| <span class="emoji">:afghanistan:</span> | `afghanistan` | <span class="emoji">:antigua_barbuda:</span> | `antigua_barbuda` | +| <span class="emoji">:anguilla:</span> | `anguilla` | <span class="emoji">:albania:</span> | `albania` | +| <span class="emoji">:armenia:</span> | `armenia` | <span class="emoji">:angola:</span> | `angola` | +| <span class="emoji">:antarctica:</span> | `antarctica` | <span class="emoji">:argentina:</span> | `argentina` | +| <span class="emoji">:american_samoa:</span> | `american_samoa` | <span class="emoji">:austria:</span> | `austria` | +| <span class="emoji">:australia:</span> | `australia` | <span class="emoji">:aruba:</span> | `aruba` | +| <span class="emoji">:aland_islands:</span> | `aland_islands` | <span class="emoji">:azerbaijan:</span> | `azerbaijan` | +| <span class="emoji">:bosnia_herzegovina:</span> | `bosnia_herzegovina` | <span class="emoji">:barbados:</span> | `barbados` | +| <span class="emoji">:bangladesh:</span> | `bangladesh` | <span class="emoji">:belgium:</span> | `belgium` | +| <span class="emoji">:burkina_faso:</span> | `burkina_faso` | <span class="emoji">:bulgaria:</span> | `bulgaria` | +| <span class="emoji">:bahrain:</span> | `bahrain` | <span class="emoji">:burundi:</span> | `burundi` | +| <span class="emoji">:benin:</span> | `benin` | <span class="emoji">:st_barthelemy:</span> | `st_barthelemy` | +| <span class="emoji">:bermuda:</span> | `bermuda` | <span class="emoji">:brunei:</span> | `brunei` | +| <span class="emoji">:bolivia:</span> | `bolivia` | <span class="emoji">:caribbean_netherlands:</span> | `caribbean_netherlands` | +| <span class="emoji">:brazil:</span> | `brazil` | <span class="emoji">:bahamas:</span> | `bahamas` | +| <span class="emoji">:bhutan:</span> | `bhutan` | <span class="emoji">:botswana:</span> | `botswana` | +| <span class="emoji">:belarus:</span> | `belarus` | <span class="emoji">:belize:</span> | `belize` | +| <span class="emoji">:canada:</span> | `canada` | <span class="emoji">:cocos_islands:</span> | `cocos_islands` | +| <span class="emoji">:congo_kinshasa:</span> | `congo_kinshasa` | <span class="emoji">:central_african_republic:</span> | `central_african_republic` | +| <span class="emoji">:congo_brazzaville:</span> | `congo_brazzaville` | <span class="emoji">:switzerland:</span> | `switzerland` | +| <span class="emoji">:cote_divoire:</span> | `cote_divoire` | <span class="emoji">:cook_islands:</span> | `cook_islands` | +| <span class="emoji">:chile:</span> | `chile` | <span class="emoji">:cameroon:</span> | `cameroon` | +| <span class="emoji">:cn:</span> | `cn` | <span class="emoji">:colombia:</span> | `colombia` | +| <span class="emoji">:costa_rica:</span> | `costa_rica` | <span class="emoji">:cuba:</span> | `cuba` | +| <span class="emoji">:cape_verde:</span> | `cape_verde` | <span class="emoji">:curacao:</span> | `curacao` | +| <span class="emoji">:christmas_island:</span> | `christmas_island` | <span class="emoji">:cyprus:</span> | `cyprus` | +| <span class="emoji">:czech_republic:</span> | `czech_republic` | <span class="emoji">:de:</span> | `de` | +| <span class="emoji">:djibouti:</span> | `djibouti` | <span class="emoji">:denmark:</span> | `denmark` | +| <span class="emoji">:dominica:</span> | `dominica` | <span class="emoji">:dominican_republic:</span> | `dominican_republic` | +| <span class="emoji">:algeria:</span> | `algeria` | <span class="emoji">:ecuador:</span> | `ecuador` | +| <span class="emoji">:estonia:</span> | `estonia` | <span class="emoji">:egypt:</span> | `egypt` | +| <span class="emoji">:western_sahara:</span> | `western_sahara` | <span class="emoji">:eritrea:</span> | `eritrea` | +| <span class="emoji">:es:</span> | `es` | <span class="emoji">:ethiopia:</span> | `ethiopia` | +| <span class="emoji">:eu:</span> | `eu` <br /> `european_union` | <span class="emoji">:finland:</span> | `finland` | +| <span class="emoji">:fiji:</span> | `fiji` | <span class="emoji">:falkland_islands:</span> | `falkland_islands` | +| <span class="emoji">:micronesia:</span> | `micronesia` | <span class="emoji">:faroe_islands:</span> | `faroe_islands` | +| <span class="emoji">:fr:</span> | `fr` | <span class="emoji">:gabon:</span> | `gabon` | +| <span class="emoji">:gb:</span> | `gb` <br /> `uk` | <span class="emoji">:grenada:</span> | `grenada` | +| <span class="emoji">:georgia:</span> | `georgia` | <span class="emoji">:french_guiana:</span> | `french_guiana` | +| <span class="emoji">:guernsey:</span> | `guernsey` | <span class="emoji">:ghana:</span> | `ghana` | +| <span class="emoji">:gibraltar:</span> | `gibraltar` | <span class="emoji">:greenland:</span> | `greenland` | +| <span class="emoji">:gambia:</span> | `gambia` | <span class="emoji">:guinea:</span> | `guinea` | +| <span class="emoji">:guadeloupe:</span> | `guadeloupe` | <span class="emoji">:equatorial_guinea:</span> | `equatorial_guinea` | +| <span class="emoji">:greece:</span> | `greece` | <span class="emoji">:south_georgia_south_sandwich_islands:</span> | `south_georgia_south_sandwich_islands` | +| <span class="emoji">:guatemala:</span> | `guatemala` | <span class="emoji">:guam:</span> | `guam` | +| <span class="emoji">:guinea_bissau:</span> | `guinea_bissau` | <span class="emoji">:guyana:</span> | `guyana` | +| <span class="emoji">:hong_kong:</span> | `hong_kong` | <span class="emoji">:honduras:</span> | `honduras` | +| <span class="emoji">:croatia:</span> | `croatia` | <span class="emoji">:haiti:</span> | `haiti` | +| <span class="emoji">:hungary:</span> | `hungary` | <span class="emoji">:canary_islands:</span> | `canary_islands` | +| <span class="emoji">:indonesia:</span> | `indonesia` | <span class="emoji">:ireland:</span> | `ireland` | +| <span class="emoji">:israel:</span> | `israel` | <span class="emoji">:isle_of_man:</span> | `isle_of_man` | +| <span class="emoji">:india:</span> | `india` | <span class="emoji">:british_indian_ocean_territory:</span> | `british_indian_ocean_territory` | +| <span class="emoji">:iraq:</span> | `iraq` | <span class="emoji">:iran:</span> | `iran` | +| <span class="emoji">:iceland:</span> | `iceland` | <span class="emoji">:it:</span> | `it` | +| <span class="emoji">:jersey:</span> | `jersey` | <span class="emoji">:jamaica:</span> | `jamaica` | +| <span class="emoji">:jordan:</span> | `jordan` | <span class="emoji">:jp:</span> | `jp` | +| <span class="emoji">:kenya:</span> | `kenya` | <span class="emoji">:kyrgyzstan:</span> | `kyrgyzstan` | +| <span class="emoji">:cambodia:</span> | `cambodia` | <span class="emoji">:kiribati:</span> | `kiribati` | +| <span class="emoji">:comoros:</span> | `comoros` | <span class="emoji">:st_kitts_nevis:</span> | `st_kitts_nevis` | +| <span class="emoji">:north_korea:</span> | `north_korea` | <span class="emoji">:kr:</span> | `kr` | +| <span class="emoji">:kuwait:</span> | `kuwait` | <span class="emoji">:cayman_islands:</span> | `cayman_islands` | +| <span class="emoji">:kazakhstan:</span> | `kazakhstan` | <span class="emoji">:laos:</span> | `laos` | +| <span class="emoji">:lebanon:</span> | `lebanon` | <span class="emoji">:st_lucia:</span> | `st_lucia` | +| <span class="emoji">:liechtenstein:</span> | `liechtenstein` | <span class="emoji">:sri_lanka:</span> | `sri_lanka` | +| <span class="emoji">:liberia:</span> | `liberia` | <span class="emoji">:lesotho:</span> | `lesotho` | +| <span class="emoji">:lithuania:</span> | `lithuania` | <span class="emoji">:luxembourg:</span> | `luxembourg` | +| <span class="emoji">:latvia:</span> | `latvia` | <span class="emoji">:libya:</span> | `libya` | +| <span class="emoji">:morocco:</span> | `morocco` | <span class="emoji">:monaco:</span> | `monaco` | +| <span class="emoji">:moldova:</span> | `moldova` | <span class="emoji">:montenegro:</span> | `montenegro` | +| <span class="emoji">:madagascar:</span> | `madagascar` | <span class="emoji">:marshall_islands:</span> | `marshall_islands` | +| <span class="emoji">:macedonia:</span> | `macedonia` | <span class="emoji">:mali:</span> | `mali` | +| <span class="emoji">:myanmar:</span> | `myanmar` | <span class="emoji">:mongolia:</span> | `mongolia` | +| <span class="emoji">:macau:</span> | `macau` | <span class="emoji">:northern_mariana_islands:</span> | `northern_mariana_islands` | +| <span class="emoji">:martinique:</span> | `martinique` | <span class="emoji">:mauritania:</span> | `mauritania` | +| <span class="emoji">:montserrat:</span> | `montserrat` | <span class="emoji">:malta:</span> | `malta` | +| <span class="emoji">:mauritius:</span> | `mauritius` | <span class="emoji">:maldives:</span> | `maldives` | +| <span class="emoji">:malawi:</span> | `malawi` | <span class="emoji">:mexico:</span> | `mexico` | +| <span class="emoji">:malaysia:</span> | `malaysia` | <span class="emoji">:mozambique:</span> | `mozambique` | +| <span class="emoji">:namibia:</span> | `namibia` | <span class="emoji">:new_caledonia:</span> | `new_caledonia` | +| <span class="emoji">:niger:</span> | `niger` | <span class="emoji">:norfolk_island:</span> | `norfolk_island` | +| <span class="emoji">:nigeria:</span> | `nigeria` | <span class="emoji">:nicaragua:</span> | `nicaragua` | +| <span class="emoji">:netherlands:</span> | `netherlands` | <span class="emoji">:norway:</span> | `norway` | +| <span class="emoji">:nepal:</span> | `nepal` | <span class="emoji">:nauru:</span> | `nauru` | +| <span class="emoji">:niue:</span> | `niue` | <span class="emoji">:new_zealand:</span> | `new_zealand` | +| <span class="emoji">:oman:</span> | `oman` | <span class="emoji">:panama:</span> | `panama` | +| <span class="emoji">:peru:</span> | `peru` | <span class="emoji">:french_polynesia:</span> | `french_polynesia` | +| <span class="emoji">:papua_new_guinea:</span> | `papua_new_guinea` | <span class="emoji">:philippines:</span> | `philippines` | +| <span class="emoji">:pakistan:</span> | `pakistan` | <span class="emoji">:poland:</span> | `poland` | +| <span class="emoji">:st_pierre_miquelon:</span> | `st_pierre_miquelon` | <span class="emoji">:pitcairn_islands:</span> | `pitcairn_islands` | +| <span class="emoji">:puerto_rico:</span> | `puerto_rico` | <span class="emoji">:palestinian_territories:</span> | `palestinian_territories` | +| <span class="emoji">:portugal:</span> | `portugal` | <span class="emoji">:palau:</span> | `palau` | +| <span class="emoji">:paraguay:</span> | `paraguay` | <span class="emoji">:qatar:</span> | `qatar` | +| <span class="emoji">:reunion:</span> | `reunion` | <span class="emoji">:romania:</span> | `romania` | +| <span class="emoji">:serbia:</span> | `serbia` | <span class="emoji">:ru:</span> | `ru` | +| <span class="emoji">:rwanda:</span> | `rwanda` | <span class="emoji">:saudi_arabia:</span> | `saudi_arabia` | +| <span class="emoji">:solomon_islands:</span> | `solomon_islands` | <span class="emoji">:seychelles:</span> | `seychelles` | +| <span class="emoji">:sudan:</span> | `sudan` | <span class="emoji">:sweden:</span> | `sweden` | +| <span class="emoji">:singapore:</span> | `singapore` | <span class="emoji">:st_helena:</span> | `st_helena` | +| <span class="emoji">:slovenia:</span> | `slovenia` | <span class="emoji">:slovakia:</span> | `slovakia` | +| <span class="emoji">:sierra_leone:</span> | `sierra_leone` | <span class="emoji">:san_marino:</span> | `san_marino` | +| <span class="emoji">:senegal:</span> | `senegal` | <span class="emoji">:somalia:</span> | `somalia` | +| <span class="emoji">:suriname:</span> | `suriname` | <span class="emoji">:south_sudan:</span> | `south_sudan` | +| <span class="emoji">:sao_tome_principe:</span> | `sao_tome_principe` | <span class="emoji">:el_salvador:</span> | `el_salvador` | +| <span class="emoji">:sint_maarten:</span> | `sint_maarten` | <span class="emoji">:syria:</span> | `syria` | +| <span class="emoji">:swaziland:</span> | `swaziland` | <span class="emoji">:turks_caicos_islands:</span> | `turks_caicos_islands` | +| <span class="emoji">:chad:</span> | `chad` | <span class="emoji">:french_southern_territories:</span> | `french_southern_territories` | +| <span class="emoji">:togo:</span> | `togo` | <span class="emoji">:thailand:</span> | `thailand` | +| <span class="emoji">:tajikistan:</span> | `tajikistan` | <span class="emoji">:tokelau:</span> | `tokelau` | +| <span class="emoji">:timor_leste:</span> | `timor_leste` | <span class="emoji">:turkmenistan:</span> | `turkmenistan` | +| <span class="emoji">:tunisia:</span> | `tunisia` | <span class="emoji">:tonga:</span> | `tonga` | +| <span class="emoji">:tr:</span> | `tr` | <span class="emoji">:trinidad_tobago:</span> | `trinidad_tobago` | +| <span class="emoji">:tuvalu:</span> | `tuvalu` | <span class="emoji">:taiwan:</span> | `taiwan` | +| <span class="emoji">:tanzania:</span> | `tanzania` | <span class="emoji">:ukraine:</span> | `ukraine` | +| <span class="emoji">:uganda:</span> | `uganda` | <span class="emoji">:us:</span> | `us` | +| <span class="emoji">:uruguay:</span> | `uruguay` | <span class="emoji">:uzbekistan:</span> | `uzbekistan` | +| <span class="emoji">:vatican_city:</span> | `vatican_city` | <span class="emoji">:st_vincent_grenadines:</span> | `st_vincent_grenadines` | +| <span class="emoji">:venezuela:</span> | `venezuela` | <span class="emoji">:british_virgin_islands:</span> | `british_virgin_islands` | +| <span class="emoji">:us_virgin_islands:</span> | `us_virgin_islands` | <span class="emoji">:vietnam:</span> | `vietnam` | +| <span class="emoji">:vanuatu:</span> | `vanuatu` | <span class="emoji">:wallis_futuna:</span> | `wallis_futuna` | +| <span class="emoji">:samoa:</span> | `samoa` | <span class="emoji">:kosovo:</span> | `kosovo` | +| <span class="emoji">:yemen:</span> | `yemen` | <span class="emoji">:mayotte:</span> | `mayotte` | +| <span class="emoji">:south_africa:</span> | `south_africa` | <span class="emoji">:zambia:</span> | `zambia` | +| <span class="emoji">:zimbabwe:</span> | `zimbabwe` | | | + +### GitHub Custom Emoji + +| icon | code | icon | code | +| :-: | - | :-: | - | +| <span class="emoji">:atom:</span> | `atom` | <span class="emoji">:basecamp:</span> | `basecamp` | +| <span class="emoji">:basecampy:</span> | `basecampy` | <span class="emoji">:bowtie:</span> | `bowtie` | +| <span class="emoji">:electron:</span> | `electron` | <span class="emoji">:feelsgood:</span> | `feelsgood` | +| <span class="emoji">:finnadie:</span> | `finnadie` | <span class="emoji">:goberserk:</span> | `goberserk` | +| <span class="emoji">:godmode:</span> | `godmode` | <span class="emoji">:hurtrealbad:</span> | `hurtrealbad` | +| <span class="emoji">:neckbeard:</span> | `neckbeard` | <span class="emoji">:octocat:</span> | `octocat` | +| <span class="emoji">:rage1:</span> | `rage1` | <span class="emoji">:rage2:</span> | `rage2` | +| <span class="emoji">:rage3:</span> | `rage3` | <span class="emoji">:rage4:</span> | `rage4` | +| <span class="emoji">:shipit:</span> | `shipit` <br /> `squirrel` | <span class="emoji">:suspect:</span> | `suspect` | +| <span class="emoji">:trollface:</span> | `trollface` | | | + +<style> + .emoji { + font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols; + } +</style> diff --git a/exampleSite/content/posts/emoji-support.zh-cn.md b/exampleSite/content/posts/emoji-support.zh-cn.md new file mode 100644 index 0000000..dc1c48b --- /dev/null +++ b/exampleSite/content/posts/emoji-support.zh-cn.md @@ -0,0 +1,1316 @@ +--- +weight: 5 +title: "Emoji 支持" +date: 2019-10-01T17:55:28+08:00 +lastmod: 2019-10-01T17:55:28+08:00 +draft: false +author: "Dillon" +authorLink: "https://dillonzq.com" +description: "Hugo 和 LoveIt 中的 Emoji 的用法指南." +license: "" + +tags: ["emoji"] +categories: ["markdown"] +hiddenFromHomePage: false + +featuredImage: "/images/emoji-support/featured-image.jpg" +featuredImagePreview: "" + +toc: true +autoCollapseToc: true +math: false +lightgallery: true +linkToMarkdown: true +share: + enable: true +comment: true +--- + +Emoji 可以通过多种方式在 Hugo 项目中启用. + +<!--more--> + +[`emojify`](https://gohugo.io/functions/emojify/) 方法可以直接在模板中调用, 或者使用 [内联 Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes). + +要全局使用 emoji, 需要在你的网站 [配置](https://gohugo.io/getting-started/configuration/) 中设置 `enableEmoji` 为 `true`, +然后你就可以直接在文章中输入 emoji 的代码. + +它们以**冒号**开头和结尾，并且包含 emoji 的 **代码**: + +```markdown +去露营啦! {?:}tent: 很快就回来. + +真开心! {?:}joy: +``` + +呈现的输出效果如下: + +去露营啦! :tent: 很快就回来. + +真开心! :joy: + +## Emoji 符号清单 + +Emoji 符号清单是 emoji 代码的非常有用的参考. + +### 表情与情感 + +#### 笑脸表情 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:grinning:</span> | `grinning` | <span class="emoji">:smiley:</span> | `smiley` | +| <span class="emoji">:smile:</span> | `smile` | <span class="emoji">:grin:</span> | `grin` | +| <span class="emoji">:laughing:</span> | `laughing` <br /> `satisfied` | <span class="emoji">:sweat_smile:</span> | `sweat_smile` | +| <span class="emoji">:rofl:</span> | `rofl` | <span class="emoji">:joy:</span> | `joy` | +| <span class="emoji">:slightly_smiling_face:</span> | `slightly_smiling_face` | <span class="emoji">:upside_down_face:</span> | `upside_down_face` | +| <span class="emoji">:wink:</span> | `wink` | <span class="emoji">:blush:</span> | `blush` | +| <span class="emoji">:innocent:</span> | `innocent` | | | + +#### 爱意表情 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:heart_eyes:</span> | `heart_eyes` | <span class="emoji">:kissing_heart:</span> | `kissing_heart` | +| <span class="emoji">:kissing:</span> | `kissing` | <span class="emoji">:relaxed:</span> | `relaxed` | +| <span class="emoji">:kissing_closed_eyes:</span> | `kissing_closed_eyes` | <span class="emoji">:kissing_smiling_eyes:</span> | `kissing_smiling_eyes` | + +#### 吐舌头表情 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:yum:</span> | `yum` | <span class="emoji">:stuck_out_tongue:</span> | `stuck_out_tongue` | +| <span class="emoji">:stuck_out_tongue_winking_eye:</span> | `stuck_out_tongue_winking_eye` | <span class="emoji">:stuck_out_tongue_closed_eyes:</span> | `stuck_out_tongue_closed_eyes` | +| <span class="emoji">:money_mouth_face:</span> | `money_mouth_face` | | | + +#### 带手的表情 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:hugs:</span> | `hugs` | <span class="emoji">:thinking:</span> | `thinking` | + +#### 中性表情 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:zipper_mouth_face:</span> | `zipper_mouth_face` | <span class="emoji">:neutral_face:</span> | `neutral_face` | +| <span class="emoji">:expressionless:</span> | `expressionless` | <span class="emoji">:no_mouth:</span> | `no_mouth` | +| <span class="emoji">:smirk:</span> | `smirk` | <span class="emoji">:unamused:</span> | `unamused` | +| <span class="emoji">:roll_eyes:</span> | `roll_eyes` | <span class="emoji">:grimacing:</span> | `grimacing` | +| <span class="emoji">:lying_face:</span> | `lying_face` | | | + +#### 困倦的表情 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:relieved:</span> | `relieved` | <span class="emoji">:pensive:</span> | `pensive` | +| <span class="emoji">:sleepy:</span> | `sleepy` | <span class="emoji">:drooling_face:</span> | `drooling_face` | +| <span class="emoji">:sleeping:</span> | `sleeping` | | | + +#### 不适的表情 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:mask:</span> | `mask` | <span class="emoji">:face_with_thermometer:</span> | `face_with_thermometer` | +| <span class="emoji">:face_with_head_bandage:</span> | `face_with_head_bandage` | <span class="emoji">:nauseated_face:</span> | `nauseated_face` | +| <span class="emoji">:sneezing_face:</span> | `sneezing_face` | <span class="emoji">:dizzy_face:</span> | `dizzy_face` | + +#### 戴帽子的表情 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:cowboy_hat_face:</span> | `cowboy_hat_face` | | | + +#### 戴眼镜的表情 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:sunglasses:</span> | `sunglasses` | <span class="emoji">:nerd_face:</span> | `nerd_face` | + +#### 担心的表情 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:confused:</span> | `confused` | <span class="emoji">:worried:</span> | `worried` | +| <span class="emoji">:slightly_frowning_face:</span> | `slightly_frowning_face` | <span class="emoji">:frowning_face:</span> | `frowning_face` | +| <span class="emoji">:open_mouth:</span> | `open_mouth` | <span class="emoji">:hushed:</span> | `hushed` | +| <span class="emoji">:astonished:</span> | `astonished` | <span class="emoji">:flushed:</span> | `flushed` | +| <span class="emoji">:frowning:</span> | `frowning` | <span class="emoji">:anguished:</span> | `anguished` | +| <span class="emoji">:fearful:</span> | `fearful` | <span class="emoji">:cold_sweat:</span> | `cold_sweat` | +| <span class="emoji">:disappointed_relieved:</span> | `disappointed_relieved` | <span class="emoji">:cry:</span> | `cry` | +| <span class="emoji">:sob:</span> | `sob` | <span class="emoji">:scream:</span> | `scream` | +| <span class="emoji">:confounded:</span> | `confounded` | <span class="emoji">:persevere:</span> | `persevere` | +| <span class="emoji">:disappointed:</span> | `disappointed` | <span class="emoji">:sweat:</span> | `sweat` | +| <span class="emoji">:weary:</span> | `weary` | <span class="emoji">:tired_face:</span> | `tired_face` | + +#### 否定的表情 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:triumph:</span> | `triumph` | <span class="emoji">:pout:</span> | `pout` <br /> `rage` | +| <span class="emoji">:angry:</span> | `angry` | <span class="emoji">:smiling_imp:</span> | `smiling_imp` | +| <span class="emoji">:imp:</span> | `imp` | <span class="emoji">:skull:</span> | `skull` | +| <span class="emoji">:skull_and_crossbones:</span> | `skull_and_crossbones` | | | + +#### 特殊打扮的表情 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:hankey:</span> | `hankey` <br /> `poop` <br /> `shit` | <span class="emoji">:clown_face:</span> | `clown_face` | +| <span class="emoji">:japanese_ogre:</span> | `japanese_ogre` | <span class="emoji">:japanese_goblin:</span> | `japanese_goblin` | +| <span class="emoji">:ghost:</span> | `ghost` | <span class="emoji">:alien:</span> | `alien` | +| <span class="emoji">:space_invader:</span> | `space_invader` | <span class="emoji">:robot:</span> | `robot` | + +#### 猫脸表情 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:smiley_cat:</span> | `smiley_cat` | <span class="emoji">:smile_cat:</span> | `smile_cat` | +| <span class="emoji">:joy_cat:</span> | `joy_cat` | <span class="emoji">:heart_eyes_cat:</span> | `heart_eyes_cat` | +| <span class="emoji">:smirk_cat:</span> | `smirk_cat` | <span class="emoji">:kissing_cat:</span> | `kissing_cat` | +| <span class="emoji">:scream_cat:</span> | `scream_cat` | <span class="emoji">:crying_cat_face:</span> | `crying_cat_face` | +| <span class="emoji">:pouting_cat:</span> | `pouting_cat` | | | + +#### 猴脸表情 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:see_no_evil:</span> | `see_no_evil` | <span class="emoji">:hear_no_evil:</span> | `hear_no_evil` | +| <span class="emoji">:speak_no_evil:</span> | `speak_no_evil` | | | + +#### 情感 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:kiss:</span> | `kiss` | <span class="emoji">:love_letter:</span> | `love_letter` | +| <span class="emoji">:cupid:</span> | `cupid` | <span class="emoji">:gift_heart:</span> | `gift_heart` | +| <span class="emoji">:sparkling_heart:</span> | `sparkling_heart` | <span class="emoji">:heartpulse:</span> | `heartpulse` | +| <span class="emoji">:heartbeat:</span> | `heartbeat` | <span class="emoji">:revolving_hearts:</span> | `revolving_hearts` | +| <span class="emoji">:two_hearts:</span> | `two_hearts` | <span class="emoji">:heart_decoration:</span> | `heart_decoration` | +| <span class="emoji">:heavy_heart_exclamation:</span> | `heavy_heart_exclamation` | <span class="emoji">:broken_heart:</span> | `broken_heart` | +| <span class="emoji">:heart:</span> | `heart` | <span class="emoji">:yellow_heart:</span> | `yellow_heart` | +| <span class="emoji">:green_heart:</span> | `green_heart` | <span class="emoji">:blue_heart:</span> | `blue_heart` | +| <span class="emoji">:purple_heart:</span> | `purple_heart` | <span class="emoji">:black_heart:</span> | `black_heart` | +| <span class="emoji">:100:</span> | `100` | <span class="emoji">:anger:</span> | `anger` | +| <span class="emoji">:boom:</span> | `boom` <br /> `collision` | <span class="emoji">:dizzy:</span> | `dizzy` | +| <span class="emoji">:sweat_drops:</span> | `sweat_drops` | <span class="emoji">:dash:</span> | `dash` | +| <span class="emoji">:hole:</span> | `hole` | <span class="emoji">:bomb:</span> | `bomb` | +| <span class="emoji">:speech_balloon:</span> | `speech_balloon` | <span class="emoji">:eye_speech_bubble:</span> | `eye_speech_bubble` | +| <span class="emoji">:right_anger_bubble:</span> | `right_anger_bubble` | <span class="emoji">:thought_balloon:</span> | `thought_balloon` | +| <span class="emoji">:zzz:</span> | `zzz` | | | + +### 人与身体 + +#### 张开手掌的手势 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:wave:</span> | `wave` | <span class="emoji">:raised_back_of_hand:</span> | `raised_back_of_hand` | +| <span class="emoji">:raised_hand_with_fingers_splayed:</span> | `raised_hand_with_fingers_splayed` | <span class="emoji">:hand:</span> | `hand` <br /> `raised_hand` | +| <span class="emoji">:vulcan_salute:</span> | `vulcan_salute` | | | + +#### 部分手指的手势 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:ok_hand:</span> | `ok_hand` | <span class="emoji">:v:</span> | `v` | +| <span class="emoji">:crossed_fingers:</span> | `crossed_fingers` | <span class="emoji">:metal:</span> | `metal` | +| <span class="emoji">:call_me_hand:</span> | `call_me_hand` | | | + +#### 一根手指的手势 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:point_left:</span> | `point_left` | <span class="emoji">:point_right:</span> | `point_right` | +| <span class="emoji">:point_up_2:</span> | `point_up_2` | <span class="emoji">:fu:</span> | `fu` <br /> `middle_finger` | +| <span class="emoji">:point_down:</span> | `point_down` | <span class="emoji">:point_up:</span> | `point_up` | + +#### 握紧的手势 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| :+1: | `:+1:` <br /> `thumbsup` | :-1: | `:-1:` <br /> `thumbsdown` | +| <span class="emoji">:fist:</span> | `fist` <br /> `fist_raised` | <span class="emoji">:facepunch:</span> | `facepunch` <br /> `fist_oncoming` <br /> `punch` | +| <span class="emoji">:fist_left:</span> | `fist_left` | <span class="emoji">:fist_right:</span> | `fist_right` | + +#### 两只手 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:clap:</span> | `clap` | <span class="emoji">:raised_hands:</span> | `raised_hands` | +| <span class="emoji">:open_hands:</span> | `open_hands` | <span class="emoji">:handshake:</span> | `handshake` | +| <span class="emoji">:pray:</span> | `pray` | | | + +#### 握住东西的手势 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:writing_hand:</span> | `writing_hand` | <span class="emoji">:nail_care:</span> | `nail_care` | +| <span class="emoji">:selfie:</span> | `selfie` | | | + +#### 身体部位 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:muscle:</span> | `muscle` | <span class="emoji">:ear:</span> | `ear` | +| <span class="emoji">:nose:</span> | `nose` | <span class="emoji">:eyes:</span> | `eyes` | +| <span class="emoji">:eye:</span> | `eye` | <span class="emoji">:tongue:</span> | `tongue` | +| <span class="emoji">:lips:</span> | `lips` | | | + +#### 人 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:baby:</span> | `baby` | <span class="emoji">:boy:</span> | `boy` | +| <span class="emoji">:girl:</span> | `girl` | <span class="emoji">:blonde_man:</span> | `blonde_man` <br /> `person_with_blond_hair` | +| <span class="emoji">:man:</span> | `man` | <span class="emoji">:woman:</span> | `woman` | +| <span class="emoji">:blonde_woman:</span> | `blonde_woman` | <span class="emoji">:older_man:</span> | `older_man` | +| <span class="emoji">:older_woman:</span> | `older_woman` | | | + +#### 身体动作 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:frowning_woman:</span> | `frowning_woman` <br /> `person_frowning` | <span class="emoji">:frowning_man:</span> | `frowning_man` | +| <span class="emoji">:person_with_pouting_face:</span> | `person_with_pouting_face` <br /> `pouting_woman` | <span class="emoji">:pouting_man:</span> | `pouting_man` | +| <span class="emoji">:ng_woman:</span> | `ng_woman` <br /> `no_good` <br /> `no_good_woman` | <span class="emoji">:ng_man:</span> | `ng_man` <br /> `no_good_man` | +| <span class="emoji">:ok_woman:</span> | `ok_woman` | <span class="emoji">:ok_man:</span> | `ok_man` | +| <span class="emoji">:information_desk_person:</span> | `information_desk_person` <br /> `sassy_woman` <br /> `tipping_hand_woman` | <span class="emoji">:sassy_man:</span> | `sassy_man` <br /> `tipping_hand_man` | +| <span class="emoji">:raising_hand:</span> | `raising_hand` <br /> `raising_hand_woman` | <span class="emoji">:raising_hand_man:</span> | `raising_hand_man` | +| <span class="emoji">:bow:</span> | `bow` <br /> `bowing_man` | <span class="emoji">:bowing_woman:</span> | `bowing_woman` | +| <span class="emoji">:man_facepalming:</span> | `man_facepalming` | <span class="emoji">:woman_facepalming:</span> | `woman_facepalming` | +| <span class="emoji">:man_shrugging:</span> | `man_shrugging` | <span class="emoji">:woman_shrugging:</span> | `woman_shrugging` | + +#### 人物角色 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:man_health_worker:</span> | `man_health_worker` | <span class="emoji">:woman_health_worker:</span> | `woman_health_worker` | +| <span class="emoji">:man_student:</span> | `man_student` | <span class="emoji">:woman_student:</span> | `woman_student` | +| <span class="emoji">:man_teacher:</span> | `man_teacher` | <span class="emoji">:woman_teacher:</span> | `woman_teacher` | +| <span class="emoji">:man_judge:</span> | `man_judge` | <span class="emoji">:woman_judge:</span> | `woman_judge` | +| <span class="emoji">:man_farmer:</span> | `man_farmer` | <span class="emoji">:woman_farmer:</span> | `woman_farmer` | +| <span class="emoji">:man_cook:</span> | `man_cook` | <span class="emoji">:woman_cook:</span> | `woman_cook` | +| <span class="emoji">:man_mechanic:</span> | `man_mechanic` | <span class="emoji">:woman_mechanic:</span> | `woman_mechanic` | +| <span class="emoji">:man_factory_worker:</span> | `man_factory_worker` | <span class="emoji">:woman_factory_worker:</span> | `woman_factory_worker` | +| <span class="emoji">:man_office_worker:</span> | `man_office_worker` | <span class="emoji">:woman_office_worker:</span> | `woman_office_worker` | +| <span class="emoji">:man_scientist:</span> | `man_scientist` | <span class="emoji">:woman_scientist:</span> | `woman_scientist` | +| <span class="emoji">:man_technologist:</span> | `man_technologist` | <span class="emoji">:woman_technologist:</span> | `woman_technologist` | +| <span class="emoji">:man_singer:</span> | `man_singer` | <span class="emoji">:woman_singer:</span> | `woman_singer` | +| <span class="emoji">:man_artist:</span> | `man_artist` | <span class="emoji">:woman_artist:</span> | `woman_artist` | +| <span class="emoji">:man_pilot:</span> | `man_pilot` | <span class="emoji">:woman_pilot:</span> | `woman_pilot` | +| <span class="emoji">:man_astronaut:</span> | `man_astronaut` | <span class="emoji">:woman_astronaut:</span> | `woman_astronaut` | +| <span class="emoji">:man_firefighter:</span> | `man_firefighter` | <span class="emoji">:woman_firefighter:</span> | `woman_firefighter` | +| <span class="emoji">:cop:</span> | `cop` <br /> `policeman` | <span class="emoji">:policewoman:</span> | `policewoman` | +| <span class="emoji">:detective:</span> | `detective` <br /> `male_detective` | <span class="emoji">:female_detective:</span> | `female_detective` | +| <span class="emoji">:guardsman:</span> | `guardsman` | <span class="emoji">:guardswoman:</span> | `guardswoman` | +| <span class="emoji">:construction_worker:</span> | `construction_worker` <br /> `construction_worker_man` | <span class="emoji">:construction_worker_woman:</span> | `construction_worker_woman` | +| <span class="emoji">:prince:</span> | `prince` | <span class="emoji">:princess:</span> | `princess` | +| <span class="emoji">:man_with_turban:</span> | `man_with_turban` | <span class="emoji">:woman_with_turban:</span> | `woman_with_turban` | +| <span class="emoji">:man_with_gua_pi_mao:</span> | `man_with_gua_pi_mao` | <span class="emoji">:man_in_tuxedo:</span> | `man_in_tuxedo` | +| <span class="emoji">:bride_with_veil:</span> | `bride_with_veil` | <span class="emoji">:pregnant_woman:</span> | `pregnant_woman` | + +#### 幻想的人物 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:angel:</span> | `angel` | <span class="emoji">:santa:</span> | `santa` | +| <span class="emoji">:mrs_claus:</span> | `mrs_claus` | | | + +#### 人物活动 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:massage:</span> | `massage` <br /> `massage_woman` | <span class="emoji">:massage_man:</span> | `massage_man` | +| <span class="emoji">:haircut:</span> | `haircut` <br /> `haircut_woman` | <span class="emoji">:haircut_man:</span> | `haircut_man` | +| <span class="emoji">:walking:</span> | `walking` <br /> `walking_man` | <span class="emoji">:walking_woman:</span> | `walking_woman` | +| <span class="emoji">:runner:</span> | `runner` <br /> `running` <br /> `running_man` | <span class="emoji">:running_woman:</span> | `running_woman` | +| <span class="emoji">:dancer:</span> | `dancer` | <span class="emoji">:man_dancing:</span> | `man_dancing` | +| <span class="emoji">:business_suit_levitating:</span> | `business_suit_levitating` | <span class="emoji">:dancers:</span> | `dancers` <br /> `dancing_women` | +| <span class="emoji">:dancing_men:</span> | `dancing_men` | | | + +#### 体育 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:person_fencing:</span> | `person_fencing` | <span class="emoji">:horse_racing:</span> | `horse_racing` | +| <span class="emoji">:skier:</span> | `skier` | <span class="emoji">:snowboarder:</span> | `snowboarder` | +| <span class="emoji">:golfing_man:</span> | `golfing_man` | <span class="emoji">:golfing_woman:</span> | `golfing_woman` | +| <span class="emoji">:surfer:</span> | `surfer` <br /> `surfing_man` | <span class="emoji">:surfing_woman:</span> | `surfing_woman` | +| <span class="emoji">:rowboat:</span> | `rowboat` <br /> `rowing_man` | <span class="emoji">:rowing_woman:</span> | `rowing_woman` | +| <span class="emoji">:swimmer:</span> | `swimmer` <br /> `swimming_man` | <span class="emoji">:swimming_woman:</span> | `swimming_woman` | +| <span class="emoji">:basketball_man:</span> | `basketball_man` | <span class="emoji">:basketball_woman:</span> | `basketball_woman` | +| <span class="emoji">:weight_lifting_man:</span> | `weight_lifting_man` | <span class="emoji">:weight_lifting_woman:</span> | `weight_lifting_woman` | +| <span class="emoji">:bicyclist:</span> | `bicyclist` <br /> `biking_man` | <span class="emoji">:biking_woman:</span> | `biking_woman` | +| <span class="emoji">:mountain_bicyclist:</span> | `mountain_bicyclist` <br /> `mountain_biking_man` | <span class="emoji">:mountain_biking_woman:</span> | `mountain_biking_woman` | +| <span class="emoji">:man_cartwheeling:</span> | `man_cartwheeling` | <span class="emoji">:woman_cartwheeling:</span> | `woman_cartwheeling` | +| <span class="emoji">:men_wrestling:</span> | `men_wrestling` | <span class="emoji">:women_wrestling:</span> | `women_wrestling` | +| <span class="emoji">:man_playing_water_polo:</span> | `man_playing_water_polo` | <span class="emoji">:woman_playing_water_polo:</span> | `woman_playing_water_polo` | +| <span class="emoji">:man_playing_handball:</span> | `man_playing_handball` | <span class="emoji">:woman_playing_handball:</span> | `woman_playing_handball` | +| <span class="emoji">:man_juggling:</span> | `man_juggling` | <span class="emoji">:woman_juggling:</span> | `woman_juggling` | + +#### 休息 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:bath:</span> | `bath` | <span class="emoji">:sleeping_bed:</span> | `sleeping_bed` | + +#### 家庭 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:two_women_holding_hands:</span> | `two_women_holding_hands` | <span class="emoji">:couple:</span> | `couple` | +| <span class="emoji">:two_men_holding_hands:</span> | `two_men_holding_hands` | <span class="emoji">:couplekiss_man_woman:</span> | `couplekiss_man_woman` | +| <span class="emoji">:couplekiss_man_man:</span> | `couplekiss_man_man` | <span class="emoji">:couplekiss_woman_woman:</span> | `couplekiss_woman_woman` | +| <span class="emoji">:couple_with_heart:</span> | `couple_with_heart` <br /> `couple_with_heart_woman_man` | <span class="emoji">:couple_with_heart_man_man:</span> | `couple_with_heart_man_man` | +| <span class="emoji">:couple_with_heart_woman_woman:</span> | `couple_with_heart_woman_woman` | <span class="emoji">:family:</span> | `family` <br /> `family_man_woman_boy` | +| <span class="emoji">:family_man_woman_girl:</span> | `family_man_woman_girl` | <span class="emoji">:family_man_woman_girl_boy:</span> | `family_man_woman_girl_boy` | +| <span class="emoji">:family_man_woman_boy_boy:</span> | `family_man_woman_boy_boy` | <span class="emoji">:family_man_woman_girl_girl:</span> | `family_man_woman_girl_girl` | +| <span class="emoji">:family_man_man_boy:</span> | `family_man_man_boy` | <span class="emoji">:family_man_man_girl:</span> | `family_man_man_girl` | +| <span class="emoji">:family_man_man_girl_boy:</span> | `family_man_man_girl_boy` | <span class="emoji">:family_man_man_boy_boy:</span> | `family_man_man_boy_boy` | +| <span class="emoji">:family_man_man_girl_girl:</span> | `family_man_man_girl_girl` | <span class="emoji">:family_woman_woman_boy:</span> | `family_woman_woman_boy` | +| <span class="emoji">:family_woman_woman_girl:</span> | `family_woman_woman_girl` | <span class="emoji">:family_woman_woman_girl_boy:</span> | `family_woman_woman_girl_boy` | +| <span class="emoji">:family_woman_woman_boy_boy:</span> | `family_woman_woman_boy_boy` | <span class="emoji">:family_woman_woman_girl_girl:</span> | `family_woman_woman_girl_girl` | +| <span class="emoji">:family_man_boy:</span> | `family_man_boy` | <span class="emoji">:family_man_boy_boy:</span> | `family_man_boy_boy` | +| <span class="emoji">:family_man_girl:</span> | `family_man_girl` | <span class="emoji">:family_man_girl_boy:</span> | `family_man_girl_boy` | +| <span class="emoji">:family_man_girl_girl:</span> | `family_man_girl_girl` | <span class="emoji">:family_woman_boy:</span> | `family_woman_boy` | +| <span class="emoji">:family_woman_boy_boy:</span> | `family_woman_boy_boy` | <span class="emoji">:family_woman_girl:</span> | `family_woman_girl` | +| <span class="emoji">:family_woman_girl_boy:</span> | `family_woman_girl_boy` | <span class="emoji">:family_woman_girl_girl:</span> | `family_woman_girl_girl` | + +#### 人物符号 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:speaking_head:</span> | `speaking_head` | <span class="emoji">:bust_in_silhouette:</span> | `bust_in_silhouette` | +| <span class="emoji">:busts_in_silhouette:</span> | `busts_in_silhouette` | <span class="emoji">:footprints:</span> | `footprints` | + +### 动物与自然 + +#### 哺乳动物 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:monkey_face:</span> | `monkey_face` | <span class="emoji">:monkey:</span> | `monkey` | +| <span class="emoji">:gorilla:</span> | `gorilla` | <span class="emoji">:dog:</span> | `dog` | +| <span class="emoji">:dog2:</span> | `dog2` | <span class="emoji">:poodle:</span> | `poodle` | +| <span class="emoji">:wolf:</span> | `wolf` | <span class="emoji">:fox_face:</span> | `fox_face` | +| <span class="emoji">:cat:</span> | `cat` | <span class="emoji">:cat2:</span> | `cat2` | +| <span class="emoji">:lion:</span> | `lion` | <span class="emoji">:tiger:</span> | `tiger` | +| <span class="emoji">:tiger2:</span> | `tiger2` | <span class="emoji">:leopard:</span> | `leopard` | +| <span class="emoji">:horse:</span> | `horse` | <span class="emoji">:racehorse:</span> | `racehorse` | +| <span class="emoji">:unicorn:</span> | `unicorn` | <span class="emoji">:deer:</span> | `deer` | +| <span class="emoji">:cow:</span> | `cow` | <span class="emoji">:ox:</span> | `ox` | +| <span class="emoji">:water_buffalo:</span> | `water_buffalo` | <span class="emoji">:cow2:</span> | `cow2` | +| <span class="emoji">:pig:</span> | `pig` | <span class="emoji">:pig2:</span> | `pig2` | +| <span class="emoji">:boar:</span> | `boar` | <span class="emoji">:pig_nose:</span> | `pig_nose` | +| <span class="emoji">:ram:</span> | `ram` | <span class="emoji">:sheep:</span> | `sheep` | +| <span class="emoji">:goat:</span> | `goat` | <span class="emoji">:dromedary_camel:</span> | `dromedary_camel` | +| <span class="emoji">:camel:</span> | `camel` | <span class="emoji">:elephant:</span> | `elephant` | +| <span class="emoji">:rhinoceros:</span> | `rhinoceros` | <span class="emoji">:mouse:</span> | `mouse` | +| <span class="emoji">:mouse2:</span> | `mouse2` | <span class="emoji">:rat:</span> | `rat` | +| <span class="emoji">:hamster:</span> | `hamster` | <span class="emoji">:rabbit:</span> | `rabbit` | +| <span class="emoji">:rabbit2:</span> | `rabbit2` | <span class="emoji">:chipmunk:</span> | `chipmunk` | +| <span class="emoji">:bat:</span> | `bat` | <span class="emoji">:bear:</span> | `bear` | +| <span class="emoji">:koala:</span> | `koala` | <span class="emoji">:panda_face:</span> | `panda_face` | +| <span class="emoji">:feet:</span> | `feet` <br /> `paw_prints` | | | + +#### 鸟类 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:turkey:</span> | `turkey` | <span class="emoji">:chicken:</span> | `chicken` | +| <span class="emoji">:rooster:</span> | `rooster` | <span class="emoji">:hatching_chick:</span> | `hatching_chick` | +| <span class="emoji">:baby_chick:</span> | `baby_chick` | <span class="emoji">:hatched_chick:</span> | `hatched_chick` | +| <span class="emoji">:bird:</span> | `bird` | <span class="emoji">:penguin:</span> | `penguin` | +| <span class="emoji">:dove:</span> | `dove` | <span class="emoji">:eagle:</span> | `eagle` | +| <span class="emoji">:duck:</span> | `duck` | <span class="emoji">:owl:</span> | `owl` | + +#### 两栖动物 + +| | icon | code | | +| - | :-: | - | - | +| <span class="emoji">:frog:</span> | `frog` | + +#### 爬虫类 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:crocodile:</span> | `crocodile` | <span class="emoji">:turtle:</span> | `turtle` | +| <span class="emoji">:lizard:</span> | `lizard` | <span class="emoji">:snake:</span> | `snake` | +| <span class="emoji">:dragon_face:</span> | `dragon_face` | <span class="emoji">:dragon:</span> | `dragon` | + +#### 海洋动物 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:whale:</span> | `whale` | <span class="emoji">:whale2:</span> | `whale2` | +| <span class="emoji">:dolphin:</span> | `dolphin` <br /> `flipper` | <span class="emoji">:fish:</span> | `fish` | +| <span class="emoji">:tropical_fish:</span> | `tropical_fish` | <span class="emoji">:blowfish:</span> | `blowfish` | +| <span class="emoji">:shark:</span> | `shark` | <span class="emoji">:octopus:</span> | `octopus` | +| <span class="emoji">:shell:</span> | `shell` | | | + +#### 虫类 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:snail:</span> | `snail` | <span class="emoji">:butterfly:</span> | `butterfly` | +| <span class="emoji">:bug:</span> | `bug` | <span class="emoji">:ant:</span> | `ant` | +| <span class="emoji">:bee:</span> | `bee` <br /> `honeybee` | <span class="emoji">:beetle:</span> | `beetle` | +| <span class="emoji">:spider:</span> | `spider` | <span class="emoji">:spider_web:</span> | `spider_web` | +| <span class="emoji">:scorpion:</span> | `scorpion` | | | + +#### 花类植物 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:bouquet:</span> | `bouquet` | <span class="emoji">:cherry_blossom:</span> | `cherry_blossom` | +| <span class="emoji">:white_flower:</span> | `white_flower` | <span class="emoji">:rosette:</span> | `rosette` | +| <span class="emoji">:rose:</span> | `rose` | <span class="emoji">:wilted_flower:</span> | `wilted_flower` | +| <span class="emoji">:hibiscus:</span> | `hibiscus` | <span class="emoji">:sunflower:</span> | `sunflower` | +| <span class="emoji">:blossom:</span> | `blossom` | <span class="emoji">:tulip:</span> | `tulip` | + +#### 其它植物 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:seedling:</span> | `seedling` | <span class="emoji">:evergreen_tree:</span> | `evergreen_tree` | +| <span class="emoji">:deciduous_tree:</span> | `deciduous_tree` | <span class="emoji">:palm_tree:</span> | `palm_tree` | +| <span class="emoji">:cactus:</span> | `cactus` | <span class="emoji">:ear_of_rice:</span> | `ear_of_rice` | +| <span class="emoji">:herb:</span> | `herb` | <span class="emoji">:shamrock:</span> | `shamrock` | +| <span class="emoji">:four_leaf_clover:</span> | `four_leaf_clover` | <span class="emoji">:maple_leaf:</span> | `maple_leaf` | +| <span class="emoji">:fallen_leaf:</span> | `fallen_leaf` | <span class="emoji">:leaves:</span> | `leaves` | + +### 食物与饮料 + +#### 水果 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:grapes:</span> | `grapes` | <span class="emoji">:melon:</span> | `melon` | +| <span class="emoji">:watermelon:</span> | `watermelon` | <span class="emoji">:mandarin:</span> | `mandarin` <br /> `orange` <br /> `tangerine` | +| <span class="emoji">:lemon:</span> | `lemon` | <span class="emoji">:banana:</span> | `banana` | +| <span class="emoji">:pineapple:</span> | `pineapple` | <span class="emoji">:apple:</span> | `apple` | +| <span class="emoji">:green_apple:</span> | `green_apple` | <span class="emoji">:pear:</span> | `pear` | +| <span class="emoji">:peach:</span> | `peach` | <span class="emoji">:cherries:</span> | `cherries` | +| <span class="emoji">:strawberry:</span> | `strawberry` | <span class="emoji">:kiwi_fruit:</span> | `kiwi_fruit` | +| <span class="emoji">:tomato:</span> | `tomato` | | | + +#### 蔬菜 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:avocado:</span> | `avocado` | <span class="emoji">:eggplant:</span> | `eggplant` | +| <span class="emoji">:potato:</span> | `potato` | <span class="emoji">:carrot:</span> | `carrot` | +| <span class="emoji">:corn:</span> | `corn` | <span class="emoji">:hot_pepper:</span> | `hot_pepper` | +| <span class="emoji">:cucumber:</span> | `cucumber` | <span class="emoji">:mushroom:</span> | `mushroom` | +| <span class="emoji">:peanuts:</span> | `peanuts` | <span class="emoji">:chestnut:</span> | `chestnut` | + +#### 快餐 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:bread:</span> | `bread` | <span class="emoji">:croissant:</span> | `croissant` | +| <span class="emoji">:baguette_bread:</span> | `baguette_bread` | <span class="emoji">:pancakes:</span> | `pancakes` | +| <span class="emoji">:cheese:</span> | `cheese` | <span class="emoji">:meat_on_bone:</span> | `meat_on_bone` | +| <span class="emoji">:poultry_leg:</span> | `poultry_leg` | <span class="emoji">:bacon:</span> | `bacon` | +| <span class="emoji">:hamburger:</span> | `hamburger` | <span class="emoji">:fries:</span> | `fries` | +| <span class="emoji">:pizza:</span> | `pizza` | <span class="emoji">:hotdog:</span> | `hotdog` | +| <span class="emoji">:taco:</span> | `taco` | <span class="emoji">:burrito:</span> | `burrito` | +| <span class="emoji">:stuffed_flatbread:</span> | `stuffed_flatbread` | <span class="emoji">:egg:</span> | `egg` | +| <span class="emoji">:fried_egg:</span> | `fried_egg` | <span class="emoji">:shallow_pan_of_food:</span> | `shallow_pan_of_food` | +| <span class="emoji">:stew:</span> | `stew` | <span class="emoji">:green_salad:</span> | `green_salad` | +| <span class="emoji">:popcorn:</span> | `popcorn` | | | + +#### 亚洲食物 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:bento:</span> | `bento` | <span class="emoji">:rice_cracker:</span> | `rice_cracker` | +| <span class="emoji">:rice_ball:</span> | `rice_ball` | <span class="emoji">:rice:</span> | `rice` | +| <span class="emoji">:curry:</span> | `curry` | <span class="emoji">:ramen:</span> | `ramen` | +| <span class="emoji">:spaghetti:</span> | `spaghetti` | <span class="emoji">:sweet_potato:</span> | `sweet_potato` | +| <span class="emoji">:oden:</span> | `oden` | <span class="emoji">:sushi:</span> | `sushi` | +| <span class="emoji">:fried_shrimp:</span> | `fried_shrimp` | <span class="emoji">:fish_cake:</span> | `fish_cake` | +| <span class="emoji">:dango:</span> | `dango` | | | + +#### 海鲜 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:crab:</span> | `crab` | <span class="emoji">:shrimp:</span> | `shrimp` | +| <span class="emoji">:squid:</span> | `squid` | | | + +#### 甜点 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:icecream:</span> | `icecream` | <span class="emoji">:shaved_ice:</span> | `shaved_ice` | +| <span class="emoji">:ice_cream:</span> | `ice_cream` | <span class="emoji">:doughnut:</span> | `doughnut` | +| <span class="emoji">:cookie:</span> | `cookie` | <span class="emoji">:birthday:</span> | `birthday` | +| <span class="emoji">:cake:</span> | `cake` | <span class="emoji">:chocolate_bar:</span> | `chocolate_bar` | +| <span class="emoji">:candy:</span> | `candy` | <span class="emoji">:lollipop:</span> | `lollipop` | +| <span class="emoji">:custard:</span> | `custard` | <span class="emoji">:honey_pot:</span> | `honey_pot` | + +#### 饮料 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:baby_bottle:</span> | `baby_bottle` | <span class="emoji">:milk_glass:</span> | `milk_glass` | +| <span class="emoji">:coffee:</span> | `coffee` | <span class="emoji">:tea:</span> | `tea` | +| <span class="emoji">:sake:</span> | `sake` | <span class="emoji">:champagne:</span> | `champagne` | +| <span class="emoji">:wine_glass:</span> | `wine_glass` | <span class="emoji">:cocktail:</span> | `cocktail` | +| <span class="emoji">:tropical_drink:</span> | `tropical_drink` | <span class="emoji">:beer:</span> | `beer` | +| <span class="emoji">:beers:</span> | `beers` | <span class="emoji">:clinking_glasses:</span> | `clinking_glasses` | +| <span class="emoji">:tumbler_glass:</span> | `tumbler_glass` | | | + +#### 餐具 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:plate_with_cutlery:</span> | `plate_with_cutlery` | <span class="emoji">:fork_and_knife:</span> | `fork_and_knife` | +| <span class="emoji">:spoon:</span> | `spoon` | <span class="emoji">:hocho:</span> | `hocho` <br /> `knife` | +| <span class="emoji">:amphora:</span> | `amphora` | | | + +### 旅游与地理 + +#### 地图 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:earth_africa:</span> | `earth_africa` | <span class="emoji">:earth_americas:</span> | `earth_americas` | +| <span class="emoji">:earth_asia:</span> | `earth_asia` | <span class="emoji">:globe_with_meridians:</span> | `globe_with_meridians` | +| <span class="emoji">:world_map:</span> | `world_map` | <span class="emoji">:japan:</span> | `japan` | + +#### 地理现象 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:mountain_snow:</span> | `mountain_snow` | <span class="emoji">:mountain:</span> | `mountain` | +| <span class="emoji">:volcano:</span> | `volcano` | <span class="emoji">:mount_fuji:</span> | `mount_fuji` | +| <span class="emoji">:camping:</span> | `camping` | <span class="emoji">:beach_umbrella:</span> | `beach_umbrella` | +| <span class="emoji">:desert:</span> | `desert` | <span class="emoji">:desert_island:</span> | `desert_island` | +| <span class="emoji">:national_park:</span> | `national_park` | | | + +#### 建筑物 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:stadium:</span> | `stadium` | <span class="emoji">:classical_building:</span> | `classical_building` | +| <span class="emoji">:building_construction:</span> | `building_construction` | <span class="emoji">:houses:</span> | `houses` | +| <span class="emoji">:derelict_house:</span> | `derelict_house` | <span class="emoji">:house:</span> | `house` | +| <span class="emoji">:house_with_garden:</span> | `house_with_garden` | <span class="emoji">:office:</span> | `office` | +| <span class="emoji">:post_office:</span> | `post_office` | <span class="emoji">:european_post_office:</span> | `european_post_office` | +| <span class="emoji">:hospital:</span> | `hospital` | <span class="emoji">:bank:</span> | `bank` | +| <span class="emoji">:hotel:</span> | `hotel` | <span class="emoji">:love_hotel:</span> | `love_hotel` | +| <span class="emoji">:convenience_store:</span> | `convenience_store` | <span class="emoji">:school:</span> | `school` | +| <span class="emoji">:department_store:</span> | `department_store` | <span class="emoji">:factory:</span> | `factory` | +| <span class="emoji">:japanese_castle:</span> | `japanese_castle` | <span class="emoji">:european_castle:</span> | `european_castle` | +| <span class="emoji">:wedding:</span> | `wedding` | <span class="emoji">:tokyo_tower:</span> | `tokyo_tower` | +| <span class="emoji">:statue_of_liberty:</span> | `statue_of_liberty` | | | + +#### 宗教建筑 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:church:</span> | `church` | <span class="emoji">:mosque:</span> | `mosque` | +| <span class="emoji">:synagogue:</span> | `synagogue` | <span class="emoji">:shinto_shrine:</span> | `shinto_shrine` | +| <span class="emoji">:kaaba:</span> | `kaaba` | | | + +#### 其它地点 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:fountain:</span> | `fountain` | <span class="emoji">:tent:</span> | `tent` | +| <span class="emoji">:foggy:</span> | `foggy` | <span class="emoji">:night_with_stars:</span> | `night_with_stars` | +| <span class="emoji">:cityscape:</span> | `cityscape` | <span class="emoji">:sunrise_over_mountains:</span> | `sunrise_over_mountains` | +| <span class="emoji">:sunrise:</span> | `sunrise` | <span class="emoji">:city_sunset:</span> | `city_sunset` | +| <span class="emoji">:city_sunrise:</span> | `city_sunrise` | <span class="emoji">:bridge_at_night:</span> | `bridge_at_night` | +| <span class="emoji">:hotsprings:</span> | `hotsprings` | <span class="emoji">:carousel_horse:</span> | `carousel_horse` | +| <span class="emoji">:ferris_wheel:</span> | `ferris_wheel` | <span class="emoji">:roller_coaster:</span> | `roller_coaster` | +| <span class="emoji">:barber:</span> | `barber` | <span class="emoji">:circus_tent:</span> | `circus_tent` | + +#### 陆路运输 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:steam_locomotive:</span> | `steam_locomotive` | <span class="emoji">:railway_car:</span> | `railway_car` | +| <span class="emoji">:bullettrain_side:</span> | `bullettrain_side` | <span class="emoji">:bullettrain_front:</span> | `bullettrain_front` | +| <span class="emoji">:train2:</span> | `train2` | <span class="emoji">:metro:</span> | `metro` | +| <span class="emoji">:light_rail:</span> | `light_rail` | <span class="emoji">:station:</span> | `station` | +| <span class="emoji">:tram:</span> | `tram` | <span class="emoji">:monorail:</span> | `monorail` | +| <span class="emoji">:mountain_railway:</span> | `mountain_railway` | <span class="emoji">:train:</span> | `train` | +| <span class="emoji">:bus:</span> | `bus` | <span class="emoji">:oncoming_bus:</span> | `oncoming_bus` | +| <span class="emoji">:trolleybus:</span> | `trolleybus` | <span class="emoji">:minibus:</span> | `minibus` | +| <span class="emoji">:ambulance:</span> | `ambulance` | <span class="emoji">:fire_engine:</span> | `fire_engine` | +| <span class="emoji">:police_car:</span> | `police_car` | <span class="emoji">:oncoming_police_car:</span> | `oncoming_police_car` | +| <span class="emoji">:taxi:</span> | `taxi` | <span class="emoji">:oncoming_taxi:</span> | `oncoming_taxi` | +| <span class="emoji">:car:</span> | `car` <br /> `red_car` | <span class="emoji">:oncoming_automobile:</span> | `oncoming_automobile` | +| <span class="emoji">:blue_car:</span> | `blue_car` | <span class="emoji">:truck:</span> | `truck` | +| <span class="emoji">:articulated_lorry:</span> | `articulated_lorry` | <span class="emoji">:tractor:</span> | `tractor` | +| <span class="emoji">:racing_car:</span> | `racing_car` | <span class="emoji">:motorcycle:</span> | `motorcycle` | +| <span class="emoji">:motor_scooter:</span> | `motor_scooter` | <span class="emoji">:bike:</span> | `bike` | +| <span class="emoji">:kick_scooter:</span> | `kick_scooter` | <span class="emoji">:busstop:</span> | `busstop` | +| <span class="emoji">:motorway:</span> | `motorway` | <span class="emoji">:railway_track:</span> | `railway_track` | +| <span class="emoji">:oil_drum:</span> | `oil_drum` | <span class="emoji">:fuelpump:</span> | `fuelpump` | +| <span class="emoji">:rotating_light:</span> | `rotating_light` | <span class="emoji">:traffic_light:</span> | `traffic_light` | +| <span class="emoji">:vertical_traffic_light:</span> | `vertical_traffic_light` | <span class="emoji">:stop_sign:</span> | `stop_sign` | +| <span class="emoji">:construction:</span> | `construction` | | | + +#### 水路运输 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:anchor:</span> | `anchor` | <span class="emoji">:boat:</span> | `boat` <br /> `sailboat` | +| <span class="emoji">:canoe:</span> | `canoe` | <span class="emoji">:speedboat:</span> | `speedboat` | +| <span class="emoji">:passenger_ship:</span> | `passenger_ship` | <span class="emoji">:ferry:</span> | `ferry` | +| <span class="emoji">:motor_boat:</span> | `motor_boat` | <span class="emoji">:ship:</span> | `ship` | + +#### 空中运输 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:airplane:</span> | `airplane` | <span class="emoji">:small_airplane:</span> | `small_airplane` | +| <span class="emoji">:flight_departure:</span> | `flight_departure` | <span class="emoji">:flight_arrival:</span> | `flight_arrival` | +| <span class="emoji">:seat:</span> | `seat` | <span class="emoji">:helicopter:</span> | `helicopter` | +| <span class="emoji">:suspension_railway:</span> | `suspension_railway` | <span class="emoji">:mountain_cableway:</span> | `mountain_cableway` | +| <span class="emoji">:aerial_tramway:</span> | `aerial_tramway` | <span class="emoji">:artificial_satellite:</span> | `artificial_satellite` | +| <span class="emoji">:rocket:</span> | `rocket` | | | + +#### 旅馆 + +| | icon | code | | +| - | :-: | - | - | +| <span class="emoji">:bellhop_bell:</span> | `bellhop_bell` | + +#### 时间 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:hourglass:</span> | `hourglass` | <span class="emoji">:hourglass_flowing_sand:</span> | `hourglass_flowing_sand` | +| <span class="emoji">:watch:</span> | `watch` | <span class="emoji">:alarm_clock:</span> | `alarm_clock` | +| <span class="emoji">:stopwatch:</span> | `stopwatch` | <span class="emoji">:timer_clock:</span> | `timer_clock` | +| <span class="emoji">:mantelpiece_clock:</span> | `mantelpiece_clock` | <span class="emoji">:clock12:</span> | `clock12` | +| <span class="emoji">:clock1230:</span> | `clock1230` | <span class="emoji">:clock1:</span> | `clock1` | +| <span class="emoji">:clock130:</span> | `clock130` | <span class="emoji">:clock2:</span> | `clock2` | +| <span class="emoji">:clock230:</span> | `clock230` | <span class="emoji">:clock3:</span> | `clock3` | +| <span class="emoji">:clock330:</span> | `clock330` | <span class="emoji">:clock4:</span> | `clock4` | +| <span class="emoji">:clock430:</span> | `clock430` | <span class="emoji">:clock5:</span> | `clock5` | +| <span class="emoji">:clock530:</span> | `clock530` | <span class="emoji">:clock6:</span> | `clock6` | +| <span class="emoji">:clock630:</span> | `clock630` | <span class="emoji">:clock7:</span> | `clock7` | +| <span class="emoji">:clock730:</span> | `clock730` | <span class="emoji">:clock8:</span> | `clock8` | +| <span class="emoji">:clock830:</span> | `clock830` | <span class="emoji">:clock9:</span> | `clock9` | +| <span class="emoji">:clock930:</span> | `clock930` | <span class="emoji">:clock10:</span> | `clock10` | +| <span class="emoji">:clock1030:</span> | `clock1030` | <span class="emoji">:clock11:</span> | `clock11` | +| <span class="emoji">:clock1130:</span> | `clock1130` | | | + +#### 天空与天气 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:new_moon:</span> | `new_moon` | <span class="emoji">:waxing_crescent_moon:</span> | `waxing_crescent_moon` | +| <span class="emoji">:first_quarter_moon:</span> | `first_quarter_moon` | <span class="emoji">:moon:</span> | `moon` <br /> `waxing_gibbous_moon` | +| <span class="emoji">:full_moon:</span> | `full_moon` | <span class="emoji">:waning_gibbous_moon:</span> | `waning_gibbous_moon` | +| <span class="emoji">:last_quarter_moon:</span> | `last_quarter_moon` | <span class="emoji">:waning_crescent_moon:</span> | `waning_crescent_moon` | +| <span class="emoji">:crescent_moon:</span> | `crescent_moon` | <span class="emoji">:new_moon_with_face:</span> | `new_moon_with_face` | +| <span class="emoji">:first_quarter_moon_with_face:</span> | `first_quarter_moon_with_face` | <span class="emoji">:last_quarter_moon_with_face:</span> | `last_quarter_moon_with_face` | +| <span class="emoji">:thermometer:</span> | `thermometer` | <span class="emoji">:sunny:</span> | `sunny` | +| <span class="emoji">:full_moon_with_face:</span> | `full_moon_with_face` | <span class="emoji">:sun_with_face:</span> | `sun_with_face` | +| <span class="emoji">:star:</span> | `star` | <span class="emoji">:star2:</span> | `star2` | +| <span class="emoji">:stars:</span> | `stars` | <span class="emoji">:milky_way:</span> | `milky_way` | +| <span class="emoji">:cloud:</span> | `cloud` | <span class="emoji">:partly_sunny:</span> | `partly_sunny` | +| <span class="emoji">:cloud_with_lightning_and_rain:</span> | `cloud_with_lightning_and_rain` | <span class="emoji">:sun_behind_small_cloud:</span> | `sun_behind_small_cloud` | +| <span class="emoji">:sun_behind_large_cloud:</span> | `sun_behind_large_cloud` | <span class="emoji">:sun_behind_rain_cloud:</span> | `sun_behind_rain_cloud` | +| <span class="emoji">:cloud_with_rain:</span> | `cloud_with_rain` | <span class="emoji">:cloud_with_snow:</span> | `cloud_with_snow` | +| <span class="emoji">:cloud_with_lightning:</span> | `cloud_with_lightning` | <span class="emoji">:tornado:</span> | `tornado` | +| <span class="emoji">:fog:</span> | `fog` | <span class="emoji">:wind_face:</span> | `wind_face` | +| <span class="emoji">:cyclone:</span> | `cyclone` | <span class="emoji">:rainbow:</span> | `rainbow` | +| <span class="emoji">:closed_umbrella:</span> | `closed_umbrella` | <span class="emoji">:open_umbrella:</span> | `open_umbrella` | +| <span class="emoji">:umbrella:</span> | `umbrella` | <span class="emoji">:parasol_on_ground:</span> | `parasol_on_ground` | +| <span class="emoji">:zap:</span> | `zap` | <span class="emoji">:snowflake:</span> | `snowflake` | +| <span class="emoji">:snowman_with_snow:</span> | `snowman_with_snow` | <span class="emoji">:snowman:</span> | `snowman` | +| <span class="emoji">:comet:</span> | `comet` | <span class="emoji">:fire:</span> | `fire` | +| <span class="emoji">:droplet:</span> | `droplet` | <span class="emoji">:ocean:</span> | `ocean` | + +### 活动 + +#### 事件 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:jack_o_lantern:</span> | `jack_o_lantern` | <span class="emoji">:christmas_tree:</span> | `christmas_tree` | +| <span class="emoji">:fireworks:</span> | `fireworks` | <span class="emoji">:sparkler:</span> | `sparkler` | +| <span class="emoji">:sparkles:</span> | `sparkles` | <span class="emoji">:balloon:</span> | `balloon` | +| <span class="emoji">:tada:</span> | `tada` | <span class="emoji">:confetti_ball:</span> | `confetti_ball` | +| <span class="emoji">:tanabata_tree:</span> | `tanabata_tree` | <span class="emoji">:bamboo:</span> | `bamboo` | +| <span class="emoji">:dolls:</span> | `dolls` | <span class="emoji">:flags:</span> | `flags` | +| <span class="emoji">:wind_chime:</span> | `wind_chime` | <span class="emoji">:rice_scene:</span> | `rice_scene` | +| <span class="emoji">:ribbon:</span> | `ribbon` | <span class="emoji">:gift:</span> | `gift` | +| <span class="emoji">:reminder_ribbon:</span> | `reminder_ribbon` | <span class="emoji">:tickets:</span> | `tickets` | +| <span class="emoji">:ticket:</span> | `ticket` | | | + +#### 奖杯与奖牌 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:medal_military:</span> | `medal_military` | <span class="emoji">:trophy:</span> | `trophy` | +| <span class="emoji">:medal_sports:</span> | `medal_sports` | <span class="emoji">:1st_place_medal:</span> | `1st_place_medal` | +| <span class="emoji">:2nd_place_medal:</span> | `2nd_place_medal` | <span class="emoji">:3rd_place_medal:</span> | `3rd_place_medal` | + +#### 体育运动 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:soccer:</span> | `soccer` | <span class="emoji">:baseball:</span> | `baseball` | +| <span class="emoji">:basketball:</span> | `basketball` | <span class="emoji">:volleyball:</span> | `volleyball` | +| <span class="emoji">:football:</span> | `football` | <span class="emoji">:rugby_football:</span> | `rugby_football` | +| <span class="emoji">:tennis:</span> | `tennis` | <span class="emoji">:bowling:</span> | `bowling` | +| <span class="emoji">:cricket:</span> | `cricket` | <span class="emoji">:field_hockey:</span> | `field_hockey` | +| <span class="emoji">:ice_hockey:</span> | `ice_hockey` | <span class="emoji">:ping_pong:</span> | `ping_pong` | +| <span class="emoji">:badminton:</span> | `badminton` | <span class="emoji">:boxing_glove:</span> | `boxing_glove` | +| <span class="emoji">:martial_arts_uniform:</span> | `martial_arts_uniform` | <span class="emoji">:goal_net:</span> | `goal_net` | +| <span class="emoji">:golf:</span> | `golf` | <span class="emoji">:ice_skate:</span> | `ice_skate` | +| <span class="emoji">:fishing_pole_and_fish:</span> | `fishing_pole_and_fish` | <span class="emoji">:running_shirt_with_sash:</span> | `running_shirt_with_sash` | +| <span class="emoji">:ski:</span> | `ski` | | | + +#### 游戏 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:dart:</span> | `dart` | <span class="emoji">:8ball:</span> | `8ball` | +| <span class="emoji">:crystal_ball:</span> | `crystal_ball` | <span class="emoji">:video_game:</span> | `video_game` | +| <span class="emoji">:joystick:</span> | `joystick` | <span class="emoji">:slot_machine:</span> | `slot_machine` | +| <span class="emoji">:game_die:</span> | `game_die` | <span class="emoji">:spades:</span> | `spades` | +| <span class="emoji">:hearts:</span> | `hearts` | <span class="emoji">:diamonds:</span> | `diamonds` | +| <span class="emoji">:clubs:</span> | `clubs` | <span class="emoji">:black_joker:</span> | `black_joker` | +| <span class="emoji">:mahjong:</span> | `mahjong` | <span class="emoji">:flower_playing_cards:</span> | `flower_playing_cards` | + +#### 艺术与工艺 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:performing_arts:</span> | `performing_arts` | <span class="emoji">:framed_picture:</span> | `framed_picture` | +| <span class="emoji">:art:</span> | `art` | | | + +### 物品 + +#### 服装 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:eyeglasses:</span> | `eyeglasses` | <span class="emoji">:dark_sunglasses:</span> | `dark_sunglasses` | +| <span class="emoji">:necktie:</span> | `necktie` | <span class="emoji">:shirt:</span> | `shirt` <br /> `tshirt` | +| <span class="emoji">:jeans:</span> | `jeans` | <span class="emoji">:dress:</span> | `dress` | +| <span class="emoji">:kimono:</span> | `kimono` | <span class="emoji">:bikini:</span> | `bikini` | +| <span class="emoji">:womans_clothes:</span> | `womans_clothes` | <span class="emoji">:purse:</span> | `purse` | +| <span class="emoji">:handbag:</span> | `handbag` | <span class="emoji">:pouch:</span> | `pouch` | +| <span class="emoji">:shopping:</span> | `shopping` | <span class="emoji">:school_satchel:</span> | `school_satchel` | +| <span class="emoji">:mans_shoe:</span> | `mans_shoe` <br /> `shoe` | <span class="emoji">:athletic_shoe:</span> | `athletic_shoe` | +| <span class="emoji">:high_heel:</span> | `high_heel` | <span class="emoji">:sandal:</span> | `sandal` | +| <span class="emoji">:boot:</span> | `boot` | <span class="emoji">:crown:</span> | `crown` | +| <span class="emoji">:womans_hat:</span> | `womans_hat` | <span class="emoji">:tophat:</span> | `tophat` | +| <span class="emoji">:mortar_board:</span> | `mortar_board` | <span class="emoji">:rescue_worker_helmet:</span> | `rescue_worker_helmet` | +| <span class="emoji">:prayer_beads:</span> | `prayer_beads` | <span class="emoji">:lipstick:</span> | `lipstick` | +| <span class="emoji">:ring:</span> | `ring` | <span class="emoji">:gem:</span> | `gem` | + +#### 声音 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:mute:</span> | `mute` | <span class="emoji">:speaker:</span> | `speaker` | +| <span class="emoji">:sound:</span> | `sound` | <span class="emoji">:loud_sound:</span> | `loud_sound` | +| <span class="emoji">:loudspeaker:</span> | `loudspeaker` | <span class="emoji">:mega:</span> | `mega` | +| <span class="emoji">:postal_horn:</span> | `postal_horn` | <span class="emoji">:bell:</span> | `bell` | +| <span class="emoji">:no_bell:</span> | `no_bell` | | | + +#### 音乐 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:musical_score:</span> | `musical_score` | <span class="emoji">:musical_note:</span> | `musical_note` | +| <span class="emoji">:notes:</span> | `notes` | <span class="emoji">:studio_microphone:</span> | `studio_microphone` | +| <span class="emoji">:level_slider:</span> | `level_slider` | <span class="emoji">:control_knobs:</span> | `control_knobs` | +| <span class="emoji">:microphone:</span> | `microphone` | <span class="emoji">:headphones:</span> | `headphones` | +| <span class="emoji">:radio:</span> | `radio` | | | + +#### 乐器 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:saxophone:</span> | `saxophone` | <span class="emoji">:guitar:</span> | `guitar` | +| <span class="emoji">:musical_keyboard:</span> | `musical_keyboard` | <span class="emoji">:trumpet:</span> | `trumpet` | +| <span class="emoji">:violin:</span> | `violin` | <span class="emoji">:drum:</span> | `drum` | + +#### 电话 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:iphone:</span> | `iphone` | <span class="emoji">:calling:</span> | `calling` | +| <span class="emoji">:phone:</span> | `phone` <br /> `telephone` | <span class="emoji">:telephone_receiver:</span> | `telephone_receiver` | +| <span class="emoji">:pager:</span> | `pager` | <span class="emoji">:fax:</span> | `fax` | + +#### 电脑 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:battery:</span> | `battery` | <span class="emoji">:electric_plug:</span> | `electric_plug` | +| <span class="emoji">:computer:</span> | `computer` | <span class="emoji">:desktop_computer:</span> | `desktop_computer` | +| <span class="emoji">:printer:</span> | `printer` | <span class="emoji">:keyboard:</span> | `keyboard` | +| <span class="emoji">:computer_mouse:</span> | `computer_mouse` | <span class="emoji">:trackball:</span> | `trackball` | +| <span class="emoji">:minidisc:</span> | `minidisc` | <span class="emoji">:floppy_disk:</span> | `floppy_disk` | +| <span class="emoji">:cd:</span> | `cd` | <span class="emoji">:dvd:</span> | `dvd` | + +#### 灯光与影像 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:movie_camera:</span> | `movie_camera` | <span class="emoji">:film_strip:</span> | `film_strip` | +| <span class="emoji">:film_projector:</span> | `film_projector` | <span class="emoji">:clapper:</span> | `clapper` | +| <span class="emoji">:tv:</span> | `tv` | <span class="emoji">:camera:</span> | `camera` | +| <span class="emoji">:camera_flash:</span> | `camera_flash` | <span class="emoji">:video_camera:</span> | `video_camera` | +| <span class="emoji">:vhs:</span> | `vhs` | <span class="emoji">:mag:</span> | `mag` | +| <span class="emoji">:mag_right:</span> | `mag_right` | <span class="emoji">:candle:</span> | `candle` | +| <span class="emoji">:bulb:</span> | `bulb` | <span class="emoji">:flashlight:</span> | `flashlight` | +| <span class="emoji">:izakaya_lantern:</span> | `izakaya_lantern` <br /> `lantern` | | | + +#### 书与纸张 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:notebook_with_decorative_cover:</span> | `notebook_with_decorative_cover` | <span class="emoji">:closed_book:</span> | `closed_book` | +| <span class="emoji">:book:</span> | `book` <br /> `open_book` | <span class="emoji">:green_book:</span> | `green_book` | +| <span class="emoji">:blue_book:</span> | `blue_book` | <span class="emoji">:orange_book:</span> | `orange_book` | +| <span class="emoji">:books:</span> | `books` | <span class="emoji">:notebook:</span> | `notebook` | +| <span class="emoji">:ledger:</span> | `ledger` | <span class="emoji">:page_with_curl:</span> | `page_with_curl` | +| <span class="emoji">:scroll:</span> | `scroll` | <span class="emoji">:page_facing_up:</span> | `page_facing_up` | +| <span class="emoji">:newspaper:</span> | `newspaper` | <span class="emoji">:newspaper_roll:</span> | `newspaper_roll` | +| <span class="emoji">:bookmark_tabs:</span> | `bookmark_tabs` | <span class="emoji">:bookmark:</span> | `bookmark` | +| <span class="emoji">:label:</span> | `label` | | | + +#### 钱 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:moneybag:</span> | `moneybag` | <span class="emoji">:yen:</span> | `yen` | +| <span class="emoji">:dollar:</span> | `dollar` | <span class="emoji">:euro:</span> | `euro` | +| <span class="emoji">:pound:</span> | `pound` | <span class="emoji">:money_with_wings:</span> | `money_with_wings` | +| <span class="emoji">:credit_card:</span> | `credit_card` | <span class="emoji">:chart:</span> | `chart` | + +#### 邮件 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:email:</span> | `email` <br /> `envelope` | :e-mail: | `:e-mail:` | +| <span class="emoji">:incoming_envelope:</span> | `incoming_envelope` | <span class="emoji">:envelope_with_arrow:</span> | `envelope_with_arrow` | +| <span class="emoji">:outbox_tray:</span> | `outbox_tray` | <span class="emoji">:inbox_tray:</span> | `inbox_tray` | +| <span class="emoji">:package:</span> | `package` | <span class="emoji">:mailbox:</span> | `mailbox` | +| <span class="emoji">:mailbox_closed:</span> | `mailbox_closed` | <span class="emoji">:mailbox_with_mail:</span> | `mailbox_with_mail` | +| <span class="emoji">:mailbox_with_no_mail:</span> | `mailbox_with_no_mail` | <span class="emoji">:postbox:</span> | `postbox` | +| <span class="emoji">:ballot_box:</span> | `ballot_box` | | | + +#### 书写 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:pencil2:</span> | `pencil2` | <span class="emoji">:black_nib:</span> | `black_nib` | +| <span class="emoji">:fountain_pen:</span> | `fountain_pen` | <span class="emoji">:pen:</span> | `pen` | +| <span class="emoji">:paintbrush:</span> | `paintbrush` | <span class="emoji">:crayon:</span> | `crayon` | +| <span class="emoji">:memo:</span> | `memo` <br /> `pencil` | | | + +#### 办公 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:briefcase:</span> | `briefcase` | <span class="emoji">:file_folder:</span> | `file_folder` | +| <span class="emoji">:open_file_folder:</span> | `open_file_folder` | <span class="emoji">:card_index_dividers:</span> | `card_index_dividers` | +| <span class="emoji">:date:</span> | `date` | <span class="emoji">:calendar:</span> | `calendar` | +| <span class="emoji">:spiral_notepad:</span> | `spiral_notepad` | <span class="emoji">:spiral_calendar:</span> | `spiral_calendar` | +| <span class="emoji">:card_index:</span> | `card_index` | <span class="emoji">:chart_with_upwards_trend:</span> | `chart_with_upwards_trend` | +| <span class="emoji">:chart_with_downwards_trend:</span> | `chart_with_downwards_trend` | <span class="emoji">:bar_chart:</span> | `bar_chart` | +| <span class="emoji">:clipboard:</span> | `clipboard` | <span class="emoji">:pushpin:</span> | `pushpin` | +| <span class="emoji">:round_pushpin:</span> | `round_pushpin` | <span class="emoji">:paperclip:</span> | `paperclip` | +| <span class="emoji">:paperclips:</span> | `paperclips` | <span class="emoji">:straight_ruler:</span> | `straight_ruler` | +| <span class="emoji">:triangular_ruler:</span> | `triangular_ruler` | <span class="emoji">:scissors:</span> | `scissors` | +| <span class="emoji">:card_file_box:</span> | `card_file_box` | <span class="emoji">:file_cabinet:</span> | `file_cabinet` | +| <span class="emoji">:wastebasket:</span> | `wastebasket` | | | + +#### 锁 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:lock:</span> | `lock` | <span class="emoji">:unlock:</span> | `unlock` | +| <span class="emoji">:lock_with_ink_pen:</span> | `lock_with_ink_pen` | <span class="emoji">:closed_lock_with_key:</span> | `closed_lock_with_key` | +| <span class="emoji">:key:</span> | `key` | <span class="emoji">:old_key:</span> | `old_key` | + +#### 工具 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:hammer:</span> | `hammer` | <span class="emoji">:pick:</span> | `pick` | +| <span class="emoji">:hammer_and_pick:</span> | `hammer_and_pick` | <span class="emoji">:hammer_and_wrench:</span> | `hammer_and_wrench` | +| <span class="emoji">:dagger:</span> | `dagger` | <span class="emoji">:crossed_swords:</span> | `crossed_swords` | +| <span class="emoji">:gun:</span> | `gun` | <span class="emoji">:bow_and_arrow:</span> | `bow_and_arrow` | +| <span class="emoji">:shield:</span> | `shield` | <span class="emoji">:wrench:</span> | `wrench` | +| <span class="emoji">:nut_and_bolt:</span> | `nut_and_bolt` | <span class="emoji">:gear:</span> | `gear` | +| <span class="emoji">:clamp:</span> | `clamp` | <span class="emoji">:balance_scale:</span> | `balance_scale` | +| <span class="emoji">:link:</span> | `link` | <span class="emoji">:chains:</span> | `chains` | + +#### 科学 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:alembic:</span> | `alembic` | <span class="emoji">:microscope:</span> | `microscope` | +| <span class="emoji">:telescope:</span> | `telescope` | <span class="emoji">:satellite:</span> | `satellite` | + +#### 医疗 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:syringe:</span> | `syringe` | <span class="emoji">:pill:</span> | `pill` | + +#### 生活用品 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:door:</span> | `door` | <span class="emoji">:bed:</span> | `bed` | +| <span class="emoji">:couch_and_lamp:</span> | `couch_and_lamp` | <span class="emoji">:toilet:</span> | `toilet` | +| <span class="emoji">:shower:</span> | `shower` | <span class="emoji">:bathtub:</span> | `bathtub` | +| <span class="emoji">:shopping_cart:</span> | `shopping_cart` | | | + +#### 其它物品 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:smoking:</span> | `smoking` | <span class="emoji">:coffin:</span> | `coffin` | +| <span class="emoji">:funeral_urn:</span> | `funeral_urn` | <span class="emoji">:moyai:</span> | `moyai` | + +### 符号 + +#### 交通标识 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:atm:</span> | `atm` | <span class="emoji">:put_litter_in_its_place:</span> | `put_litter_in_its_place` | +| <span class="emoji">:potable_water:</span> | `potable_water` | <span class="emoji">:wheelchair:</span> | `wheelchair` | +| <span class="emoji">:mens:</span> | `mens` | <span class="emoji">:womens:</span> | `womens` | +| <span class="emoji">:restroom:</span> | `restroom` | <span class="emoji">:baby_symbol:</span> | `baby_symbol` | +| <span class="emoji">:wc:</span> | `wc` | <span class="emoji">:passport_control:</span> | `passport_control` | +| <span class="emoji">:customs:</span> | `customs` | <span class="emoji">:baggage_claim:</span> | `baggage_claim` | +| <span class="emoji">:left_luggage:</span> | `left_luggage` | | | + +#### 警告 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:warning:</span> | `warning` | <span class="emoji">:children_crossing:</span> | `children_crossing` | +| <span class="emoji">:no_entry:</span> | `no_entry` | <span class="emoji">:no_entry_sign:</span> | `no_entry_sign` | +| <span class="emoji">:no_bicycles:</span> | `no_bicycles` | <span class="emoji">:no_smoking:</span> | `no_smoking` | +| <span class="emoji">:do_not_litter:</span> | `do_not_litter` | :non-potable_water: | `:non-potable_water:` | +| <span class="emoji">:no_pedestrians:</span> | `no_pedestrians` | <span class="emoji">:no_mobile_phones:</span> | `no_mobile_phones` | +| <span class="emoji">:underage:</span> | `underage` | <span class="emoji">:radioactive:</span> | `radioactive` | +| <span class="emoji">:biohazard:</span> | `biohazard` | | | + +#### 箭头 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:arrow_up:</span> | `arrow_up` | <span class="emoji">:arrow_upper_right:</span> | `arrow_upper_right` | +| <span class="emoji">:arrow_right:</span> | `arrow_right` | <span class="emoji">:arrow_lower_right:</span> | `arrow_lower_right` | +| <span class="emoji">:arrow_down:</span> | `arrow_down` | <span class="emoji">:arrow_lower_left:</span> | `arrow_lower_left` | +| <span class="emoji">:arrow_left:</span> | `arrow_left` | <span class="emoji">:arrow_upper_left:</span> | `arrow_upper_left` | +| <span class="emoji">:arrow_up_down:</span> | `arrow_up_down` | <span class="emoji">:left_right_arrow:</span> | `left_right_arrow` | +| <span class="emoji">:leftwards_arrow_with_hook:</span> | `leftwards_arrow_with_hook` | <span class="emoji">:arrow_right_hook:</span> | `arrow_right_hook` | +| <span class="emoji">:arrow_heading_up:</span> | `arrow_heading_up` | <span class="emoji">:arrow_heading_down:</span> | `arrow_heading_down` | +| <span class="emoji">:arrows_clockwise:</span> | `arrows_clockwise` | <span class="emoji">:arrows_counterclockwise:</span> | `arrows_counterclockwise` | +| <span class="emoji">:back:</span> | `back` | <span class="emoji">:end:</span> | `end` | +| <span class="emoji">:on:</span> | `on` | <span class="emoji">:soon:</span> | `soon` | +| <span class="emoji">:top:</span> | `top` | | | + +#### 宗教 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:place_of_worship:</span> | `place_of_worship` | <span class="emoji">:atom_symbol:</span> | `atom_symbol` | +| <span class="emoji">:om:</span> | `om` | <span class="emoji">:star_of_david:</span> | `star_of_david` | +| <span class="emoji">:wheel_of_dharma:</span> | `wheel_of_dharma` | <span class="emoji">:yin_yang:</span> | `yin_yang` | +| <span class="emoji">:latin_cross:</span> | `latin_cross` | <span class="emoji">:orthodox_cross:</span> | `orthodox_cross` | +| <span class="emoji">:star_and_crescent:</span> | `star_and_crescent` | <span class="emoji">:peace_symbol:</span> | `peace_symbol` | +| <span class="emoji">:menorah:</span> | `menorah` | <span class="emoji">:six_pointed_star:</span> | `six_pointed_star` | + +#### 生肖 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:aries:</span> | `aries` | <span class="emoji">:taurus:</span> | `taurus` | +| <span class="emoji">:gemini:</span> | `gemini` | <span class="emoji">:cancer:</span> | `cancer` | +| <span class="emoji">:leo:</span> | `leo` | <span class="emoji">:virgo:</span> | `virgo` | +| <span class="emoji">:libra:</span> | `libra` | <span class="emoji">:scorpius:</span> | `scorpius` | +| <span class="emoji">:sagittarius:</span> | `sagittarius` | <span class="emoji">:capricorn:</span> | `capricorn` | +| <span class="emoji">:aquarius:</span> | `aquarius` | <span class="emoji">:pisces:</span> | `pisces` | +| <span class="emoji">:ophiuchus:</span> | `ophiuchus` | | | + +#### 影像符号 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:twisted_rightwards_arrows:</span> | `twisted_rightwards_arrows` | <span class="emoji">:repeat:</span> | `repeat` | +| <span class="emoji">:repeat_one:</span> | `repeat_one` | <span class="emoji">:arrow_forward:</span> | `arrow_forward` | +| <span class="emoji">:fast_forward:</span> | `fast_forward` | <span class="emoji">:next_track_button:</span> | `next_track_button` | +| <span class="emoji">:play_or_pause_button:</span> | `play_or_pause_button` | <span class="emoji">:arrow_backward:</span> | `arrow_backward` | +| <span class="emoji">:rewind:</span> | `rewind` | <span class="emoji">:previous_track_button:</span> | `previous_track_button` | +| <span class="emoji">:arrow_up_small:</span> | `arrow_up_small` | <span class="emoji">:arrow_double_up:</span> | `arrow_double_up` | +| <span class="emoji">:arrow_down_small:</span> | `arrow_down_small` | <span class="emoji">:arrow_double_down:</span> | `arrow_double_down` | +| <span class="emoji">:pause_button:</span> | `pause_button` | <span class="emoji">:stop_button:</span> | `stop_button` | +| <span class="emoji">:record_button:</span> | `record_button` | <span class="emoji">:cinema:</span> | `cinema` | +| <span class="emoji">:low_brightness:</span> | `low_brightness` | <span class="emoji">:high_brightness:</span> | `high_brightness` | +| <span class="emoji">:signal_strength:</span> | `signal_strength` | <span class="emoji">:vibration_mode:</span> | `vibration_mode` | +| <span class="emoji">:mobile_phone_off:</span> | `mobile_phone_off` | | | + +#### 数学 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:heavy_multiplication_x:</span> | `heavy_multiplication_x` | <span class="emoji">:heavy_plus_sign:</span> | `heavy_plus_sign` | +| <span class="emoji">:heavy_minus_sign:</span> | `heavy_minus_sign` | <span class="emoji">:heavy_division_sign:</span> | `heavy_division_sign` | + +#### 标点符号 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:bangbang:</span> | `bangbang` | <span class="emoji">:interrobang:</span> | `interrobang` | +| <span class="emoji">:question:</span> | `question` | <span class="emoji">:grey_question:</span> | `grey_question` | +| <span class="emoji">:grey_exclamation:</span> | `grey_exclamation` | <span class="emoji">:exclamation:</span> | `exclamation` <br /> `heavy_exclamation_mark` | +| <span class="emoji">:wavy_dash:</span> | `wavy_dash` | | | + +#### 货币 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:currency_exchange:</span> | `currency_exchange` | <span class="emoji">:heavy_dollar_sign:</span> | `heavy_dollar_sign` | + +#### 按键符号 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:hash:</span> | `hash` | <span class="emoji">:asterisk:</span> | `asterisk` | +| <span class="emoji">:zero:</span> | `zero` | <span class="emoji">:one:</span> | `one` | +| <span class="emoji">:two:</span> | `two` | <span class="emoji">:three:</span> | `three` | +| <span class="emoji">:four:</span> | `four` | <span class="emoji">:five:</span> | `five` | +| <span class="emoji">:six:</span> | `six` | <span class="emoji">:seven:</span> | `seven` | +| <span class="emoji">:eight:</span> | `eight` | <span class="emoji">:nine:</span> | `nine` | +| <span class="emoji">:keycap_ten:</span> | `keycap_ten` | | | + +#### 字母符号 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:capital_abcd:</span> | `capital_abcd` | <span class="emoji">:abcd:</span> | `abcd` | +| <span class="emoji">:1234:</span> | `1234` | <span class="emoji">:symbols:</span> | `symbols` | +| <span class="emoji">:abc:</span> | `abc` | <span class="emoji">:a:</span> | `a` | +| <span class="emoji">:ab:</span> | `ab` | <span class="emoji">:b:</span> | `b` | +| <span class="emoji">:cl:</span> | `cl` | <span class="emoji">:cool:</span> | `cool` | +| <span class="emoji">:free:</span> | `free` | <span class="emoji">:information_source:</span> | `information_source` | +| <span class="emoji">:id:</span> | `id` | <span class="emoji">:m:</span> | `m` | +| <span class="emoji">:new:</span> | `new` | <span class="emoji">:ng:</span> | `ng` | +| <span class="emoji">:o2:</span> | `o2` | <span class="emoji">:ok:</span> | `ok` | +| <span class="emoji">:parking:</span> | `parking` | <span class="emoji">:sos:</span> | `sos` | +| <span class="emoji">:up:</span> | `up` | <span class="emoji">:vs:</span> | `vs` | +| <span class="emoji">:koko:</span> | `koko` | <span class="emoji">:sa:</span> | `sa` | +| <span class="emoji">:u6708:</span> | `u6708` | <span class="emoji">:u6709:</span> | `u6709` | +| <span class="emoji">:u6307:</span> | `u6307` | <span class="emoji">:ideograph_advantage:</span> | `ideograph_advantage` | +| <span class="emoji">:u5272:</span> | `u5272` | <span class="emoji">:u7121:</span> | `u7121` | +| <span class="emoji">:u7981:</span> | `u7981` | <span class="emoji">:accept:</span> | `accept` | +| <span class="emoji">:u7533:</span> | `u7533` | <span class="emoji">:u5408:</span> | `u5408` | +| <span class="emoji">:u7a7a:</span> | `u7a7a` | <span class="emoji">:congratulations:</span> | `congratulations` | +| <span class="emoji">:secret:</span> | `secret` | <span class="emoji">:u55b6:</span> | `u55b6` | +| <span class="emoji">:u6e80:</span> | `u6e80` | | | + +#### 几何符号 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:red_circle:</span> | `red_circle` | <span class="emoji">:large_blue_circle:</span> | `large_blue_circle` | +| <span class="emoji">:black_circle:</span> | `black_circle` | <span class="emoji">:white_circle:</span> | `white_circle` | +| <span class="emoji">:black_large_square:</span> | `black_large_square` | <span class="emoji">:white_large_square:</span> | `white_large_square` | +| <span class="emoji">:black_medium_square:</span> | `black_medium_square` | <span class="emoji">:white_medium_square:</span> | `white_medium_square` | +| <span class="emoji">:black_medium_small_square:</span> | `black_medium_small_square` | <span class="emoji">:white_medium_small_square:</span> | `white_medium_small_square` | +| <span class="emoji">:black_small_square:</span> | `black_small_square` | <span class="emoji">:white_small_square:</span> | `white_small_square` | +| <span class="emoji">:large_orange_diamond:</span> | `large_orange_diamond` | <span class="emoji">:large_blue_diamond:</span> | `large_blue_diamond` | +| <span class="emoji">:small_orange_diamond:</span> | `small_orange_diamond` | <span class="emoji">:small_blue_diamond:</span> | `small_blue_diamond` | +| <span class="emoji">:small_red_triangle:</span> | `small_red_triangle` | <span class="emoji">:small_red_triangle_down:</span> | `small_red_triangle_down` | +| <span class="emoji">:diamond_shape_with_a_dot_inside:</span> | `diamond_shape_with_a_dot_inside` | <span class="emoji">:radio_button:</span> | `radio_button` | +| <span class="emoji">:white_square_button:</span> | `white_square_button` | <span class="emoji">:black_square_button:</span> | `black_square_button` | + +#### 其它符合 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:recycle:</span> | `recycle` | <span class="emoji">:fleur_de_lis:</span> | `fleur_de_lis` | +| <span class="emoji">:trident:</span> | `trident` | <span class="emoji">:name_badge:</span> | `name_badge` | +| <span class="emoji">:beginner:</span> | `beginner` | <span class="emoji">:o:</span> | `o` | +| <span class="emoji">:white_check_mark:</span> | `white_check_mark` | <span class="emoji">:ballot_box_with_check:</span> | `ballot_box_with_check` | +| <span class="emoji">:heavy_check_mark:</span> | `heavy_check_mark` | <span class="emoji">:x:</span> | `x` | +| <span class="emoji">:negative_squared_cross_mark:</span> | `negative_squared_cross_mark` | <span class="emoji">:curly_loop:</span> | `curly_loop` | +| <span class="emoji">:loop:</span> | `loop` | <span class="emoji">:part_alternation_mark:</span> | `part_alternation_mark` | +| <span class="emoji">:eight_spoked_asterisk:</span> | `eight_spoked_asterisk` | <span class="emoji">:eight_pointed_black_star:</span> | `eight_pointed_black_star` | +| <span class="emoji">:sparkle:</span> | `sparkle` | <span class="emoji">:copyright:</span> | `copyright` | +| <span class="emoji">:registered:</span> | `registered` | <span class="emoji">:tm:</span> | `tm` | + +### 旗帜 + +#### 常用旗帜 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:checkered_flag:</span> | `checkered_flag` | <span class="emoji">:triangular_flag_on_post:</span> | `triangular_flag_on_post` | +| <span class="emoji">:crossed_flags:</span> | `crossed_flags` | <span class="emoji">:black_flag:</span> | `black_flag` | +| <span class="emoji">:white_flag:</span> | `white_flag` | <span class="emoji">:rainbow_flag:</span> | `rainbow_flag` | + +#### 国家和地区旗帜 + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:andorra:</span> | `andorra` | <span class="emoji">:united_arab_emirates:</span> | `united_arab_emirates` | +| <span class="emoji">:afghanistan:</span> | `afghanistan` | <span class="emoji">:antigua_barbuda:</span> | `antigua_barbuda` | +| <span class="emoji">:anguilla:</span> | `anguilla` | <span class="emoji">:albania:</span> | `albania` | +| <span class="emoji">:armenia:</span> | `armenia` | <span class="emoji">:angola:</span> | `angola` | +| <span class="emoji">:antarctica:</span> | `antarctica` | <span class="emoji">:argentina:</span> | `argentina` | +| <span class="emoji">:american_samoa:</span> | `american_samoa` | <span class="emoji">:austria:</span> | `austria` | +| <span class="emoji">:australia:</span> | `australia` | <span class="emoji">:aruba:</span> | `aruba` | +| <span class="emoji">:aland_islands:</span> | `aland_islands` | <span class="emoji">:azerbaijan:</span> | `azerbaijan` | +| <span class="emoji">:bosnia_herzegovina:</span> | `bosnia_herzegovina` | <span class="emoji">:barbados:</span> | `barbados` | +| <span class="emoji">:bangladesh:</span> | `bangladesh` | <span class="emoji">:belgium:</span> | `belgium` | +| <span class="emoji">:burkina_faso:</span> | `burkina_faso` | <span class="emoji">:bulgaria:</span> | `bulgaria` | +| <span class="emoji">:bahrain:</span> | `bahrain` | <span class="emoji">:burundi:</span> | `burundi` | +| <span class="emoji">:benin:</span> | `benin` | <span class="emoji">:st_barthelemy:</span> | `st_barthelemy` | +| <span class="emoji">:bermuda:</span> | `bermuda` | <span class="emoji">:brunei:</span> | `brunei` | +| <span class="emoji">:bolivia:</span> | `bolivia` | <span class="emoji">:caribbean_netherlands:</span> | `caribbean_netherlands` | +| <span class="emoji">:brazil:</span> | `brazil` | <span class="emoji">:bahamas:</span> | `bahamas` | +| <span class="emoji">:bhutan:</span> | `bhutan` | <span class="emoji">:botswana:</span> | `botswana` | +| <span class="emoji">:belarus:</span> | `belarus` | <span class="emoji">:belize:</span> | `belize` | +| <span class="emoji">:canada:</span> | `canada` | <span class="emoji">:cocos_islands:</span> | `cocos_islands` | +| <span class="emoji">:congo_kinshasa:</span> | `congo_kinshasa` | <span class="emoji">:central_african_republic:</span> | `central_african_republic` | +| <span class="emoji">:congo_brazzaville:</span> | `congo_brazzaville` | <span class="emoji">:switzerland:</span> | `switzerland` | +| <span class="emoji">:cote_divoire:</span> | `cote_divoire` | <span class="emoji">:cook_islands:</span> | `cook_islands` | +| <span class="emoji">:chile:</span> | `chile` | <span class="emoji">:cameroon:</span> | `cameroon` | +| <span class="emoji">:cn:</span> | `cn` | <span class="emoji">:colombia:</span> | `colombia` | +| <span class="emoji">:costa_rica:</span> | `costa_rica` | <span class="emoji">:cuba:</span> | `cuba` | +| <span class="emoji">:cape_verde:</span> | `cape_verde` | <span class="emoji">:curacao:</span> | `curacao` | +| <span class="emoji">:christmas_island:</span> | `christmas_island` | <span class="emoji">:cyprus:</span> | `cyprus` | +| <span class="emoji">:czech_republic:</span> | `czech_republic` | <span class="emoji">:de:</span> | `de` | +| <span class="emoji">:djibouti:</span> | `djibouti` | <span class="emoji">:denmark:</span> | `denmark` | +| <span class="emoji">:dominica:</span> | `dominica` | <span class="emoji">:dominican_republic:</span> | `dominican_republic` | +| <span class="emoji">:algeria:</span> | `algeria` | <span class="emoji">:ecuador:</span> | `ecuador` | +| <span class="emoji">:estonia:</span> | `estonia` | <span class="emoji">:egypt:</span> | `egypt` | +| <span class="emoji">:western_sahara:</span> | `western_sahara` | <span class="emoji">:eritrea:</span> | `eritrea` | +| <span class="emoji">:es:</span> | `es` | <span class="emoji">:ethiopia:</span> | `ethiopia` | +| <span class="emoji">:eu:</span> | `eu` <br /> `european_union` | <span class="emoji">:finland:</span> | `finland` | +| <span class="emoji">:fiji:</span> | `fiji` | <span class="emoji">:falkland_islands:</span> | `falkland_islands` | +| <span class="emoji">:micronesia:</span> | `micronesia` | <span class="emoji">:faroe_islands:</span> | `faroe_islands` | +| <span class="emoji">:fr:</span> | `fr` | <span class="emoji">:gabon:</span> | `gabon` | +| <span class="emoji">:gb:</span> | `gb` <br /> `uk` | <span class="emoji">:grenada:</span> | `grenada` | +| <span class="emoji">:georgia:</span> | `georgia` | <span class="emoji">:french_guiana:</span> | `french_guiana` | +| <span class="emoji">:guernsey:</span> | `guernsey` | <span class="emoji">:ghana:</span> | `ghana` | +| <span class="emoji">:gibraltar:</span> | `gibraltar` | <span class="emoji">:greenland:</span> | `greenland` | +| <span class="emoji">:gambia:</span> | `gambia` | <span class="emoji">:guinea:</span> | `guinea` | +| <span class="emoji">:guadeloupe:</span> | `guadeloupe` | <span class="emoji">:equatorial_guinea:</span> | `equatorial_guinea` | +| <span class="emoji">:greece:</span> | `greece` | <span class="emoji">:south_georgia_south_sandwich_islands:</span> | `south_georgia_south_sandwich_islands` | +| <span class="emoji">:guatemala:</span> | `guatemala` | <span class="emoji">:guam:</span> | `guam` | +| <span class="emoji">:guinea_bissau:</span> | `guinea_bissau` | <span class="emoji">:guyana:</span> | `guyana` | +| <span class="emoji">:hong_kong:</span> | `hong_kong` | <span class="emoji">:honduras:</span> | `honduras` | +| <span class="emoji">:croatia:</span> | `croatia` | <span class="emoji">:haiti:</span> | `haiti` | +| <span class="emoji">:hungary:</span> | `hungary` | <span class="emoji">:canary_islands:</span> | `canary_islands` | +| <span class="emoji">:indonesia:</span> | `indonesia` | <span class="emoji">:ireland:</span> | `ireland` | +| <span class="emoji">:israel:</span> | `israel` | <span class="emoji">:isle_of_man:</span> | `isle_of_man` | +| <span class="emoji">:india:</span> | `india` | <span class="emoji">:british_indian_ocean_territory:</span> | `british_indian_ocean_territory` | +| <span class="emoji">:iraq:</span> | `iraq` | <span class="emoji">:iran:</span> | `iran` | +| <span class="emoji">:iceland:</span> | `iceland` | <span class="emoji">:it:</span> | `it` | +| <span class="emoji">:jersey:</span> | `jersey` | <span class="emoji">:jamaica:</span> | `jamaica` | +| <span class="emoji">:jordan:</span> | `jordan` | <span class="emoji">:jp:</span> | `jp` | +| <span class="emoji">:kenya:</span> | `kenya` | <span class="emoji">:kyrgyzstan:</span> | `kyrgyzstan` | +| <span class="emoji">:cambodia:</span> | `cambodia` | <span class="emoji">:kiribati:</span> | `kiribati` | +| <span class="emoji">:comoros:</span> | `comoros` | <span class="emoji">:st_kitts_nevis:</span> | `st_kitts_nevis` | +| <span class="emoji">:north_korea:</span> | `north_korea` | <span class="emoji">:kr:</span> | `kr` | +| <span class="emoji">:kuwait:</span> | `kuwait` | <span class="emoji">:cayman_islands:</span> | `cayman_islands` | +| <span class="emoji">:kazakhstan:</span> | `kazakhstan` | <span class="emoji">:laos:</span> | `laos` | +| <span class="emoji">:lebanon:</span> | `lebanon` | <span class="emoji">:st_lucia:</span> | `st_lucia` | +| <span class="emoji">:liechtenstein:</span> | `liechtenstein` | <span class="emoji">:sri_lanka:</span> | `sri_lanka` | +| <span class="emoji">:liberia:</span> | `liberia` | <span class="emoji">:lesotho:</span> | `lesotho` | +| <span class="emoji">:lithuania:</span> | `lithuania` | <span class="emoji">:luxembourg:</span> | `luxembourg` | +| <span class="emoji">:latvia:</span> | `latvia` | <span class="emoji">:libya:</span> | `libya` | +| <span class="emoji">:morocco:</span> | `morocco` | <span class="emoji">:monaco:</span> | `monaco` | +| <span class="emoji">:moldova:</span> | `moldova` | <span class="emoji">:montenegro:</span> | `montenegro` | +| <span class="emoji">:madagascar:</span> | `madagascar` | <span class="emoji">:marshall_islands:</span> | `marshall_islands` | +| <span class="emoji">:macedonia:</span> | `macedonia` | <span class="emoji">:mali:</span> | `mali` | +| <span class="emoji">:myanmar:</span> | `myanmar` | <span class="emoji">:mongolia:</span> | `mongolia` | +| <span class="emoji">:macau:</span> | `macau` | <span class="emoji">:northern_mariana_islands:</span> | `northern_mariana_islands` | +| <span class="emoji">:martinique:</span> | `martinique` | <span class="emoji">:mauritania:</span> | `mauritania` | +| <span class="emoji">:montserrat:</span> | `montserrat` | <span class="emoji">:malta:</span> | `malta` | +| <span class="emoji">:mauritius:</span> | `mauritius` | <span class="emoji">:maldives:</span> | `maldives` | +| <span class="emoji">:malawi:</span> | `malawi` | <span class="emoji">:mexico:</span> | `mexico` | +| <span class="emoji">:malaysia:</span> | `malaysia` | <span class="emoji">:mozambique:</span> | `mozambique` | +| <span class="emoji">:namibia:</span> | `namibia` | <span class="emoji">:new_caledonia:</span> | `new_caledonia` | +| <span class="emoji">:niger:</span> | `niger` | <span class="emoji">:norfolk_island:</span> | `norfolk_island` | +| <span class="emoji">:nigeria:</span> | `nigeria` | <span class="emoji">:nicaragua:</span> | `nicaragua` | +| <span class="emoji">:netherlands:</span> | `netherlands` | <span class="emoji">:norway:</span> | `norway` | +| <span class="emoji">:nepal:</span> | `nepal` | <span class="emoji">:nauru:</span> | `nauru` | +| <span class="emoji">:niue:</span> | `niue` | <span class="emoji">:new_zealand:</span> | `new_zealand` | +| <span class="emoji">:oman:</span> | `oman` | <span class="emoji">:panama:</span> | `panama` | +| <span class="emoji">:peru:</span> | `peru` | <span class="emoji">:french_polynesia:</span> | `french_polynesia` | +| <span class="emoji">:papua_new_guinea:</span> | `papua_new_guinea` | <span class="emoji">:philippines:</span> | `philippines` | +| <span class="emoji">:pakistan:</span> | `pakistan` | <span class="emoji">:poland:</span> | `poland` | +| <span class="emoji">:st_pierre_miquelon:</span> | `st_pierre_miquelon` | <span class="emoji">:pitcairn_islands:</span> | `pitcairn_islands` | +| <span class="emoji">:puerto_rico:</span> | `puerto_rico` | <span class="emoji">:palestinian_territories:</span> | `palestinian_territories` | +| <span class="emoji">:portugal:</span> | `portugal` | <span class="emoji">:palau:</span> | `palau` | +| <span class="emoji">:paraguay:</span> | `paraguay` | <span class="emoji">:qatar:</span> | `qatar` | +| <span class="emoji">:reunion:</span> | `reunion` | <span class="emoji">:romania:</span> | `romania` | +| <span class="emoji">:serbia:</span> | `serbia` | <span class="emoji">:ru:</span> | `ru` | +| <span class="emoji">:rwanda:</span> | `rwanda` | <span class="emoji">:saudi_arabia:</span> | `saudi_arabia` | +| <span class="emoji">:solomon_islands:</span> | `solomon_islands` | <span class="emoji">:seychelles:</span> | `seychelles` | +| <span class="emoji">:sudan:</span> | `sudan` | <span class="emoji">:sweden:</span> | `sweden` | +| <span class="emoji">:singapore:</span> | `singapore` | <span class="emoji">:st_helena:</span> | `st_helena` | +| <span class="emoji">:slovenia:</span> | `slovenia` | <span class="emoji">:slovakia:</span> | `slovakia` | +| <span class="emoji">:sierra_leone:</span> | `sierra_leone` | <span class="emoji">:san_marino:</span> | `san_marino` | +| <span class="emoji">:senegal:</span> | `senegal` | <span class="emoji">:somalia:</span> | `somalia` | +| <span class="emoji">:suriname:</span> | `suriname` | <span class="emoji">:south_sudan:</span> | `south_sudan` | +| <span class="emoji">:sao_tome_principe:</span> | `sao_tome_principe` | <span class="emoji">:el_salvador:</span> | `el_salvador` | +| <span class="emoji">:sint_maarten:</span> | `sint_maarten` | <span class="emoji">:syria:</span> | `syria` | +| <span class="emoji">:swaziland:</span> | `swaziland` | <span class="emoji">:turks_caicos_islands:</span> | `turks_caicos_islands` | +| <span class="emoji">:chad:</span> | `chad` | <span class="emoji">:french_southern_territories:</span> | `french_southern_territories` | +| <span class="emoji">:togo:</span> | `togo` | <span class="emoji">:thailand:</span> | `thailand` | +| <span class="emoji">:tajikistan:</span> | `tajikistan` | <span class="emoji">:tokelau:</span> | `tokelau` | +| <span class="emoji">:timor_leste:</span> | `timor_leste` | <span class="emoji">:turkmenistan:</span> | `turkmenistan` | +| <span class="emoji">:tunisia:</span> | `tunisia` | <span class="emoji">:tonga:</span> | `tonga` | +| <span class="emoji">:tr:</span> | `tr` | <span class="emoji">:trinidad_tobago:</span> | `trinidad_tobago` | +| <span class="emoji">:tuvalu:</span> | `tuvalu` | <span class="emoji">:taiwan:</span> | `taiwan` | +| <span class="emoji">:tanzania:</span> | `tanzania` | <span class="emoji">:ukraine:</span> | `ukraine` | +| <span class="emoji">:uganda:</span> | `uganda` | <span class="emoji">:us:</span> | `us` | +| <span class="emoji">:uruguay:</span> | `uruguay` | <span class="emoji">:uzbekistan:</span> | `uzbekistan` | +| <span class="emoji">:vatican_city:</span> | `vatican_city` | <span class="emoji">:st_vincent_grenadines:</span> | `st_vincent_grenadines` | +| <span class="emoji">:venezuela:</span> | `venezuela` | <span class="emoji">:british_virgin_islands:</span> | `british_virgin_islands` | +| <span class="emoji">:us_virgin_islands:</span> | `us_virgin_islands` | <span class="emoji">:vietnam:</span> | `vietnam` | +| <span class="emoji">:vanuatu:</span> | `vanuatu` | <span class="emoji">:wallis_futuna:</span> | `wallis_futuna` | +| <span class="emoji">:samoa:</span> | `samoa` | <span class="emoji">:kosovo:</span> | `kosovo` | +| <span class="emoji">:yemen:</span> | `yemen` | <span class="emoji">:mayotte:</span> | `mayotte` | +| <span class="emoji">:south_africa:</span> | `south_africa` | <span class="emoji">:zambia:</span> | `zambia` | +| <span class="emoji">:zimbabwe:</span> | `zimbabwe` | | | + +### GitHub 自定义 Emoji + +| 图标 | 代码 | 图标 | 代码 | +| :-: | - | :-: | - | +| <span class="emoji">:atom:</span> | `atom` | <span class="emoji">:basecamp:</span> | `basecamp` | +| <span class="emoji">:basecampy:</span> | `basecampy` | <span class="emoji">:bowtie:</span> | `bowtie` | +| <span class="emoji">:electron:</span> | `electron` | <span class="emoji">:feelsgood:</span> | `feelsgood` | +| <span class="emoji">:finnadie:</span> | `finnadie` | <span class="emoji">:goberserk:</span> | `goberserk` | +| <span class="emoji">:godmode:</span> | `godmode` | <span class="emoji">:hurtrealbad:</span> | `hurtrealbad` | +| <span class="emoji">:neckbeard:</span> | `neckbeard` | <span class="emoji">:octocat:</span> | `octocat` | +| <span class="emoji">:rage1:</span> | `rage1` | <span class="emoji">:rage2:</span> | `rage2` | +| <span class="emoji">:rage3:</span> | `rage3` | <span class="emoji">:rage4:</span> | `rage4` | +| <span class="emoji">:shipit:</span> | `shipit` <br /> `squirrel` | <span class="emoji">:suspect:</span> | `suspect` | +| <span class="emoji">:trollface:</span> | `trollface` | | | + +<style> + .emoji { + font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols; + } +</style> diff --git a/exampleSite/content/posts/markdown-syntax.en.md b/exampleSite/content/posts/markdown-syntax.en.md deleted file mode 100644 index 50b3805..0000000 --- a/exampleSite/content/posts/markdown-syntax.en.md +++ /dev/null @@ -1,188 +0,0 @@ ---- -title: "Markdown Syntax Guide" -date: 2019-12-01T21:57:40+08:00 -lastmod: 2020-01-01T16:45:40+08:00 -draft: false -author: "Hugo Authors" -authorLink: "https://gohugo.io/" -description: "Sample article showcasing basic Markdown syntax and formatting for HTML elements." -license: "" - -tags: ["markdown", "css", "html"] -categories: ["theme"] -hiddenFromHomePage: false - -featuredImage: /images/markdown.png -featuredImagePreview: "" - -toc: true -autoCollapseToc: true -lightgallery: true -math: true -comment: true ---- - -This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme. -<!--more--> - -## Headings - -The following HTML `<h2>`—`<h6>` elements represent six levels of section headings. `<h2>` is the highest section level while `<h6>` is the lowest. - -## H2 -### H3 -#### H4 -##### H5 -###### H6 - -## Paragraph - -Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, -voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit -peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, -offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, -cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea -corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum -fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate -dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer -sperchicium faceata tiustia prat. - -Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is -sinveli squiatum, core et que aut hariosam ex eat. - -## Blockquotes - -The blockquote element represents content that is quoted from another source, optionally -with a citation which must be within a `footer` or `cite` element, and optionally with -in-line changes such as annotations and abbreviations. - -### Blockquote without attribution - -> Tiam, ad mint andaepu dandae nostion secatur sequo quae. -> **Note** that you can use *Markdown syntax* within a blockquote. - -### Blockquote with attribution - -> Don't communicate by sharing memory, share memory by communicating. -> — <cite>Rob Pike[^1]</cite> - -[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015. - -## Tables - -Tables aren't part of the core Markdown spec, but Hugo supports supports them out-of-the-box. - - Name | Age ---------|------ - Bob | 27 - Alice | 23 - -### Inline Markdown within tables - -| Inline | Markdown | In | Table | -| ---------- | --------- | ----------------- | ---------- | -| *italics* | **bold** | ~~strikethrough~~ | `code` | - -## Code - -### Inline code - -Inline code: `print` - -### Code block with backticks - -```html {hl_lines=["8-9"],linenostart=10} -<!DOCTYPE html> -<html lang="en"> - <head> - <meta charset="UTF-8"> - <title>Example HTML5 Document</title> - </head> - <body> - <p>Test</p> - </body> -</html> -``` - -### Code block indented with four spaces - - <!DOCTYPE html> - <html lang="en"> - <head> - <meta charset="UTF-8"> - <title>Example HTML5 Document</title> - </head> - <body> - <p>Test</p> - </body> - </html> - -### Code block with Hugo's internal highlight shortcode - -{{< highlight html "linenos=false" >}} -<!DOCTYPE html> -<html lang="en"> - <head> - <meta charset="UTF-8"> - <title>Example HTML5 Document</title> - </head> - <body> - <p>Test</p> - </body> -</html> -{{< /highlight >}} - -## List Types - -### Ordered List - -1. First item -2. Second item -3. Third item - -### Unordered List - -* List item -* Another item -* And another item - -### Nested list - -* Item - 1. First Sub-item - 2. Second Sub-item - -## Other Elements — abbr, sub, sup, kbd, mark - -* `abbr` - - <abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format. - -* Or ruby annotation - - [GIF]^(Graphics Interchange Format) is a bitmap image format. - -* `sub`/`sup` - - H<sub>2</sub>O - - X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup> - -* Or `LaTex` formula - - * Block - - $$ H_2O $$ - - $$ X^n+Y^n=Z^n $$ - - * Inline: \\( H_2O \\) \\( X^n+Y^n=Z^n \\) - -* `kbd` - - Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the session. - -* `mark` - - Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, - and other small creatures. diff --git a/exampleSite/content/posts/placeholder-text.en.md b/exampleSite/content/posts/placeholder-text.en.md deleted file mode 100644 index 90747d6..0000000 --- a/exampleSite/content/posts/placeholder-text.en.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: "Placeholder Text" -date: 2019-08-01T18:02:41+08:00 -lastmod: 2019-08-01T18:02:41+08:00 -draft: false -author: "Hugo Authors" -authorLink: "https://gohugo.io/" -description: "Lorem Ipsum Dolor Si Amet" -license: "" - -tags: ["markdown", "text"] -categories: ["theme"] -hiddenFromHomePage: false - -featuredImage: "" -featuredImagePreview: "" - -toc: false -autoCollapseToc: true -lightgallery: true -math: false -comment: true ---- - -Lorem est tota propiore conpellat pectoribus de -pectora summo. <!--more-->Redit teque digerit hominumque toris verebor lumina non cervice -subde tollit usus habet Arctonque, furores quas nec ferunt. Quoque montibus nunc -caluere tempus inhospita parcite confusaque translucet patri vestro qui optatis -lumine cognoscere flos nubis! Fronde ipsamque patulos Dryopen deorum. - -1. Exierant elisi ambit vivere dedere -2. Duce pollice -3. Eris modo -4. Spargitque ferrea quos palude - -Rursus nulli murmur; hastile inridet ut ab gravi sententia! Nomine potitus -silentia flumen, sustinet placuit petis in dilapsa erat sunt. Atria -tractus malis. - -1. Comas hunc haec pietate fetum procerum dixit -2. Post torum vates letum Tiresia -3. Flumen querellas -4. Arcanaque montibus omnes -5. Quidem et - -## Vagus elidunt - -<svg class="canon" xmlns="http://www.w3.org/2000/svg" overflow="visible" viewBox="0 0 496 373" height="373" width="496"><g fill="none"><path stroke="#000" stroke-width=".75" d="M.599 372.348L495.263 1.206M.312.633l494.95 370.853M.312 372.633L247.643.92M248.502.92l246.76 370.566M330.828 123.869V1.134M330.396 1.134L165.104 124.515"></path><path stroke="#ED1C24" stroke-width=".75" d="M275.73 41.616h166.224v249.05H275.73zM54.478 41.616h166.225v249.052H54.478z"></path><path stroke="#000" stroke-width=".75" d="M.479.375h495v372h-495zM247.979.875v372"></path><ellipse cx="498.729" cy="177.625" rx=".75" ry="1.25"></ellipse><ellipse cx="247.229" cy="377.375" rx=".75" ry="1.25"></ellipse></g></svg> - -[The Van de Graaf Canon](https://en.wikipedia.org/wiki/Canons_of_page_construction#Van_de_Graaf_canon) - -### Mane refeci capiebant unda mulcebat - -Victa caducifer, malo vulnere contra -dicere aurato, ludit regale, voca! Retorsit colit est profanae esse virescere -furit nec; iaculi matertera et visa est, viribus. Divesque creatis, tecta novat collumque vulnus est, parvas. **Faces illo pepulere** tempus adest. Tendit flamma, ab opes virum sustinet, sidus sequendo urbis. - -Iubar proles corpore raptos vero auctor imperium; sed et huic: manus caeli -Lelegas tu lux. Verbis obstitit intus oblectamina fixis linguisque ausus sperare -Echionides cornuaque tenent clausit possit. Omnia putatur. Praeteritae refert -ausus; ferebant e primus lora nutat, vici quae mea ipse. Et iter nil spectatae -vulnus haerentia iuste et exercebat, sui et. - -Eurytus Hector, materna ipsumque ut Politen, nec, nate, ignari, vernum cohaesit sequitur. Vel **mitis temploque** vocatus, inque alis, *oculos nomen* non silvis corpore coniunx ne displicet illa. Crescunt non unus, vidit visa quantum inmiti flumina mortis facto sic: undique a alios vincula sunt iactata abdita! Suspenderat ego fuit tendit: luna, ante urbem -Propoetides **parte**. - -{{< css.inline >}} -<style> -.canon { background: white; width: 100%; height: auto;} -</style> -{{< /css.inline >}} diff --git a/exampleSite/content/posts/rich-content.en.md b/exampleSite/content/posts/rich-content.en.md deleted file mode 100644 index d7c02a8..0000000 --- a/exampleSite/content/posts/rich-content.en.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: "Rich Content" -date: 2019-09-01T18:06:32+08:00 -lastmod: 2019-09-01T18:06:32+08:00 -draft: false -author: "Hugo Authors" -authorLink: "https://gohugo.io/" -description: "A brief description of Hugo Shortcodes" -license: "" - -tags: ["shortcodes", "privacy"] -categories: ["theme"] -hiddenFromHomePage: false - -featuredImage: /images/hugo.png -featuredImagePreview: "" - -toc: false -autoCollapseToc: true -lightgallery: true -math: false -comment: true ---- - -Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-management/shortcodes/#use-hugo-s-built-in-shortcodes) for rich content, along with a [Privacy Config](https://gohugo.io/about/hugo-and-gdpr/) and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds. -<!--more--> - ---- - -## Instagram Shortcode - -{{< instagram BGvuInzyFAe hidecaption >}} - -<br> - ---- - -## YouTube Privacy Enhanced Shortcode - -{{< youtube ZJthWmvUzzc >}} - -<br> - ---- - -## Twitter Shortcode - -{{< twitter 1085870671291310081 >}} - -<br> - ---- - -## Vimeo Simple Shortcode - -{{< vimeo_simple 48912912 >}} diff --git a/exampleSite/content/posts/test-mermaid.zh-cn.md b/exampleSite/content/posts/test-mermaid.zh-cn.md deleted file mode 100644 index d4e4cd6..0000000 --- a/exampleSite/content/posts/test-mermaid.zh-cn.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: "Test Mermaid" -date: 2020-02-27T15:41:42+08:00 -lastmod: 2020-02-27T15:41:42+08:00 -draft: true -author: "" -authorLink: "" -description: "" -license: "" - -tags: [] -categories: [] -hiddenFromHomePage: false - -featuredImage: "" -featuredImagePreview: "" - -toc: false -autoCollapseToc: true -lightgallery: true -math: false -comment: true ---- - -<!--more--> - -## Flow - -{{< mermaid >}} -graph TD -A[Hard] -->|Text| B(Round) -B --> C{Decision} -C -->|One| D[Result 1] -C -->|Two| E[Result 2] -{{< /mermaid >}} - -## Sequence - -{{< mermaid >}} -sequenceDiagram -Alice->>John: Hello John, how are you? -loop Healthcheck - John->>John: Fight against hypochondria -end -Note right of John: Rational thoughts! -John-->>Alice: Great! -John->>Bob: How about you? -Bob-->>John: Jolly good! -{{< /mermaid >}} - -## Gantt - -{{< mermaid >}} -gantt - title A Gantt Diagram - dateFormat YYYY-MM-DD - section Section - A task :a1, 2014-01-01, 30d - Another task :after a1 , 20d - section Another - Task in sec :2014-01-12 , 12d - another task : 24d -{{< /mermaid >}} - -## Class - -{{< mermaid >}} -classDiagram -Class01 <|-- AveryLongClass : Cool -<<interface>> Class01 -Class09 --> C2 : Where am i? -Class09 --* C3 -Class09 --|> Class07 -Class07 : equals() -Class07 : Object[] elementData -Class01 : size() -Class01 : int chimp -Class01 : int gorilla -class Class10 { - <<service>> - int id - size() -} -{{< /mermaid >}} - -## State - -{{< mermaid >}} -stateDiagram -[*] --> Still -Still --> [*] -Still --> Moving -Moving --> Still -Moving --> Crash -Crash --> [*] -{{< /mermaid >}} - -## Pie - -{{< mermaid >}} -pie -"Dogs" : 386 -"Cats" : 85 -"Rats" : 15 -{{< /mermaid >}} diff --git a/exampleSite/content/posts/test.zh-cn.md b/exampleSite/content/posts/test.zh-cn.md deleted file mode 100644 index 5c1e15d..0000000 --- a/exampleSite/content/posts/test.zh-cn.md +++ /dev/null @@ -1,412 +0,0 @@ ---- -title: "Test Page" -date: 2019-08-04T22:49:56+08:00 -lastmod: 2019-08-17T22:41:56+08:00 -draft: true -author: "" -authorLink: "" -description: "This is a test page." -license: "" - -tags: ["Hugo", "主题"] -categories: ["预览"] -hiddenFromHomePage: false - -featuredImage: "" -featuredImagePreview: "" - -toc: true -autoCollapseToc: true -lightgallery: true -math: true -comment: false ---- - -## :(fas fa-rocket): This is a test page - -[https://www.aol.com/article/entertainment/2020/02/10/oscars-viewership-hits-new-low-with-236-million-viewers/23923047/](https://www.aol.com/article/entertainment/2020/02/10/oscars-viewership-hits-new-low-with-236-million-viewers/23923047/) - -Test all features in development. - -<!--more--> - -## Test Img - - - - - -## Test Code - -### Inline code - -Inline code: `print` - -### Code block with backticks - -```java -class DataHolder<T>{ - T item; - - public void setData(T t) { - this.item=t; - } - - public T getData() { - return this.item; - } -} -``` - -```go -func (d *Database) GetCollectionByID(id uint) (*model.Collection, error) { - var collection model.Collection - if err := d.DB.Where("deleted = 0"). - First(&collection, id).Error; err != nil { - return nil, err - } - return &collection, nil -} -``` - -```python -class Labels(object): - __slots__ = ('taskid', 'labels') - - def __init__(self, taskid, labels): - # check labels - if isinstance(labels, str): - labels = [labels] - assert isinstance(labels, list), 'labels should be list' - labels = [_check_tag(label) for label in labels] - - self.taskid = taskid - self.labels = labels - - def for_add(self): - return { - 'taskid': self.taskid, - 'tags': self.labels, - } - - @property - def token(self): - _check_credential(self._credential) - return self._credential['token'] - -def scale(scalar: float, vector: Vector) -> Vector: - return [scalar * num for num in vector] -``` - -```js -_Blog.chroma = function () { - const blocks = document.querySelectorAll('.highlight > .chroma'); - for (let i = 0; i < blocks.length; i++) { - const block = blocks[i]; - const codes = block.querySelectorAll('pre.chroma > code'); - const code = codes[codes.length - 1]; - const lang = code ? code.className.toLowerCase() : ''; - block.className += ' ' + lang; - } - - const nolinenosBlocks = document.querySelectorAll('.highlight > pre.chroma'); - for (let i = 0; i < nolinenosBlocks.length; i++) { - const block = nolinenosBlocks[i]; - const chroma = document.createElement('div'); - chroma.className = block.className; - const table = document.createElement('table'); - chroma.appendChild(table); - const tbody = document.createElement('tbody'); - table.appendChild(tbody); - const tr = document.createElement('tr'); - tbody.appendChild(tr); - const td = document.createElement('td'); - tr.appendChild(td); - block.parentElement.replaceChild(chroma, block); - td.appendChild(block); - } -}; -``` - -## Test ECharts - -{{< echarts >}} -title: - text: 某站点用户访问来源 - subtext: 纯属虚构 - x: center -tooltip: - trigger: item - formatter: '{a} <br/>{b} : {c} ({d}%)' -legend: - orient: vertical - left: left - data: - - 直接访问 - - 邮件营销 - - 联盟广告 - - 视频广告 - - 搜索引擎 -series: - - name: 访问来源 - type: pie - radius: 55% - center: - - 50% - - 60% - data: - - value: 335 - name: 直接访问 - - value: 310 - name: 邮件营销 - - value: 234 - name: 联盟广告 - - value: 135 - name: 视频广告 - - value: 1548 - name: 搜索引擎 - itemStyle: - emphasis: - shadowBlur: 10 - shadowOffsetX: 0 - shadowColor: 'rgba(0, 0, 0, 0.5)' -{{< /echarts >}} - -## Test Mermaid - -{{< mermaid >}} -classDiagram - Animal <|-- Duck - Animal <|-- Fish - Animal <|-- Zebra - Animal : +int age - Animal : +String gender - Animal: +isMammal() - Animal: +mate() - class Duck{ - +String beakColor - +swim() - +quack() - } - class Fish{ - -int sizeInFeet - -canEat() - } - class Zebra{ - +bool is_wild - +run() - } -{{< /mermaid >}} - -## Test Ruby - -人最重要的特点是会思考，建站初衷无非是保存思维的电子快照。 -当然各种文档工具亦或是简单的文本编辑器也能随时记录点滴， -选择建个人网站无非是想满足 [技术爱好者]^(Technology enthusiast) 的偏执。 - -## Test Music - -## Test Toc - -Toc - -### Toc1 - -Toc - -#### Toc 1-1 - -Toc - -#### Toc 1-2 - -Toc - -#### Toc 1-3 - -Toc - -### Toc2 - -Toc - -#### Toc 2-1 - -Toc - -#### Toc 2-2 - -Toc - -### Toc3 - -Toc - -## Test Table - -| Tables | Are | Cool | -| :------------ |:-------------:| -----:| -| col 3 is | right-aligned | $1600 | -| col 2 is | centered | $12 | -| zebra stripes | are neat | $1 | - -## Test kbd - -<kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>del</kbd> - -## Test Mixed Lists - -Mixed Lists - -- item 1 - * [X] item A - * [ ] item B - more text - 1. item a - 2. itemb - 3. item c - * [X] item C -- item 2 -- item 3 - -Really Mixed Lists - -- item 1 - * [X] item A - - item B - more text - 1. item a - + itemb - + [ ] item c - 1. item C -1. item 2 -- [X] item 3 - -## Test fa (Font Awesome) - -:(fab fa-weixin fa-2x): - -## Test Footnote - -This is a footnote[^1] - -[^1]: https://www.aol.com/article/entertainment/2020/02/10/oscars-viewership-hits-new-low-with-236-million-viewers/23923047/ - -## Test Admonition - -{{% admonition quote %}} -biu biu biu. -{{% /admonition %}} - -{{% admonition quote "I'm title!" false %}} -biu biu biu. -{{% /admonition %}} - -{{% admonition example "I'm title!" false %}} -biu biu biu. -{{% /admonition %}} - -{{% admonition bug "I'm title!" false %}} -biu biu biu. -{{% /admonition %}} - -{{% admonition danger "I'm title!" false %}} -biu biu biu. -{{% /admonition %}} - -{{% admonition failure "I'm title!" false %}} -biu biu biu. -{{% /admonition %}} - -{{% admonition warning "I'm title!" false %}} -biu biu biu. -{{% /admonition %}} - -{{% admonition question "I'm title!" false %}} -biu biu biu. -{{% /admonition %}} - -{{% admonition success "I'm title!" false %}} -biu biu biu. -{{% /admonition %}} - -{{% admonition tip "I'm title!" false %}} -biu biu biu. -{{% /admonition %}} - -{{% admonition info "I'm title!" true %}} -**biu biu biu.** -{{% /admonition %}} - -{{% admonition note "I'm title!" false %}} -**biu biu biu.** -{{% /admonition %}} - -{{% admonition type="abstract" title="Test Admonition" %}} -This is a Admonition. -{{% /admonition %}} - -## Test Highlight - -`ls` 命令 - -```go -// You can edit this code! -// Click here and start typing. -package main - -import "fmt" - -func main() { - fmt.Println("Hello, 世界", "Hello, 世界", "Hello, 世界", "Hello, 世界", "Hello, 世界", "Hello, 世界", "Hello, 世界", "Hello, 世界") -} -``` - -- This is a list that contains multiple code blocks. - - - Here is an indented block - - ```Code - This will still be parsed - as a normal indented code block. - ``` - - - Here is a fenced code block: - - ```Code - This will still be parsed - as a fenced code block. - ``` - - > ```Code - > Blockquotes? - > Not a problem! - > ``` - -## Test Typeit - -{{< typeit group="test" tag="h3" >}} -Here is a story about love... -{{< /typeit >}} - -{{< typeit group="test" code="java" >}} -int a = 1; -{{< /typeit >}} - -## Test Style - -{{< style "text-align: right">}} -**Test Text** -{{< /style >}} - -## Test Katex - -$$ c = \pm\sqrt{a^2 + b^2} $$ - -Left \\( c = \pm\sqrt{a^2 + b^2} \\) Right - -Left $ c = \pm\sqrt{a^2 + b^2} $ Right - -$ \ce{CO2 + C -> 2 CO} $ - -$ \ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-} $ diff --git a/exampleSite/content/posts/theme-documentation-basics.en.md b/exampleSite/content/posts/theme-documentation-basics.en.md index 5222419..29ba185 100644 --- a/exampleSite/content/posts/theme-documentation-basics.en.md +++ b/exampleSite/content/posts/theme-documentation-basics.en.md @@ -1,28 +1,32 @@ --- +weight: 1 title: "Theme Documentation - Basics" -date: 2020-02-18T21:29:01+08:00 -lastmod: 2020-02-18T21:29:01+08:00 +date: 2020-03-06T21:29:01+08:00 +lastmod: 2020-03-06T21:29:01+08:00 draft: false author: "Dillon" authorLink: "https://dillonzq.com" -description: "Discover what the Hugo LoveIt theme is all about and the core-concepts behind it" +description: "Discover what the Hugo - LoveIt theme is all about and the core-concepts behind it." license: "" tags: ["installation", "configuration"] categories: ["documentation"] hiddenFromHomePage: false -featuredImage: "/images/theme-documentation-basics.webp" +featuredImage: "/images/theme-documentation-basics/featured-image.webp" featuredImagePreview: "" toc: true autoCollapseToc: false +math: false lightgallery: true -math: true +linkToMarkdown: true +share: + enable: true comment: true --- -Discover what the Hugo **LoveIt** theme is all about and the core-concepts behind it. +Discover what the Hugo - **LoveIt** theme is all about and the core-concepts behind it. <!--more--> @@ -30,17 +34,17 @@ Discover what the Hugo **LoveIt** theme is all about and the core-concepts behin Thanks to the simplicity of Hugo, [Hugo](https://gohugo.io/) is the only dependency of this theme. -Just download latest version of [Hugo (> 0.62.0)](https://gohugo.io/getting-started/installing/) for your OS (Windows, Linux, Mac). +Just install latest version of [:(far fa-file-archive): Hugo (> 0.62.0)](https://gohugo.io/getting-started/installing/) for your OS (**Windows**, **Linux**, **macOS**). {{< admonition note "Why not support earlier versions of Hugo?" >}} -Since [Markdown Render Hooks](https://gohugo.io/getting-started/configuration-markup/#markdown-render-hooks) was introduced in the [Hugo Christmas Edition](https://gohugo.io/news/0.62.0-relnotes/), this theme only supports Hugo versions above v0.62.0. +Since [Markdown Render Hooks](https://gohugo.io/getting-started/configuration-markup/#markdown-render-hooks) was introduced in the [Hugo Christmas Edition](https://gohugo.io/news/0.62.0-relnotes/), this theme only supports Hugo versions above **v0.62.0**. {{< /admonition >}} ## 2 Installation The following steps are here to help you initialize your new website. If you don’t know Hugo at all, we strongly suggest you learn more about it by following this [great documentation for beginners](https://gohugo.io/getting-started/quick-start/). -### 2.1 Create your project +### 2.1 Create Your Project Hugo provides a `new` command to create a new website: @@ -49,31 +53,32 @@ hugo new site my_website cd my_website ``` -### 2.2 Install the theme +### 2.2 Install the Theme The **LoveIt** theme’s repository is: [https://github.com/dillonzq/LoveIt](https://github.com/dillonzq/LoveIt). -Clone this repository to your hugo **themes** directory: +You can download the **latest release** of the theme as :(far fa-file-archive): .zip file and extract it in the `themes` directory. + +Alternatively, clone this repository to the `themes` directory: ```bash - git clone -b master https://github.com/dillonzq/LoveIt.git themes/LoveIt +git clone -b master https://github.com/dillonzq/LoveIt.git themes/LoveIt ``` Or, create an empty git repository and make this repository a submodule of your site directory: ```bash - git init - git submodule -b master add https://github.com/dillonzq/LoveIt.git themes/LoveIt +git init +git submodule -b master add https://github.com/dillonzq/LoveIt.git themes/LoveIt ``` -Alternatively, you can download the latest release of the theme as .zip file and extract it in the **themes** directory. - -### 2.3 Basic configuration +### 2.3 Basic Configuration {#basic-configuration} The following is a basic configuration for the LoveIt theme: ```toml baseURL = "http://example.org/" +# language code languageCode = "en" title = "My New Hugo Site" @@ -83,13 +88,45 @@ theme = "LoveIt" [params] # LoveIt theme version version = "0.1.X" + +[menu] + [[menu.main]] + identifier = "posts" + # you can add extra information before the name (HTML format is allowed), such as icons + pre = "" + name = "Posts" + url = "/posts/" + # title will be shown when you hover on this menu link + title = "" + weight = 1 + [[menu.main]] + identifier = "tags" + pre = "" + name = "Tags" + url = "/tags/" + title = "" + weight = 2 + [[menu.main]] + identifier = "categories" + pre = "" + name = "Categories" + url = "/categories/" + title = "" + weight = 3 + [[menu.main]] + identifier = "about" + pre = "" + name = "About" + url = "/about/" + title = "" + weight = 4 ``` -{{< admonition note >}} +{{< admonition >}} When building the website, you can set a theme by using `--theme` option. However, we suggest you modify the configuration file (**config.toml**) and set the theme as the default. {{< /admonition >}} -### 2.4 Create your first post +### 2.4 Create Your First Post Here is the way to create your first post: @@ -99,11 +136,11 @@ Here is the way to create your first post: Feel free to edit the post file by adding some sample content and replacing the title value in the beginning of the file. -{{< admonition note >}} +{{< admonition >}} By default all posts and pages are created as a draft. If you want to render these pages, remove the property `draft: true` from the metadata or set the property `draft: false`. {{< /admonition >}} -### 2.5 Launching the website locally +### 2.5 Launching the Website Locally Launch by using the following command: @@ -113,11 +150,13 @@ hugo serve Go to `http://localhost:1313`. + + {{< admonition tip >}} When you run `hugo serve`, when the contents of the files change, the page automatically refreshes with the changes. {{< /admonition >}} -### 2.6 Build the website +### 2.6 Build the Website When your site is ready to deploy, run the following command: @@ -129,42 +168,20 @@ A `public` folder will be generated, containing all static content and assets fo {{< admonition tip >}} The website can be automatically published and hosted with [Netlify](https://www.netlify.com/) (Read more about [Automated HUGO deployments with Netlify](https://www.netlify.com/blog/2015/07/30/hosting-hugo-on-netlifyinsanely-fast-deploys/)). -Alternatively, you can use [Github pages](https://gohugo.io/hosting-and-deployment/hosting-on-github/). +Alternatively, you can use [AWS Amplify](https://gohugo.io/hosting-and-deployment/hosting-on-aws-amplify/), [Github pages](https://gohugo.io/hosting-and-deployment/hosting-on-github/), [Render](https://gohugo.io/hosting-and-deployment/hosting-on-render/) and more... {{< /admonition >}} ## 3 Configuration -### 3.1 `config.toml` +### 3.1 Site Configuration {#site-configuration} -On top of [Hugo global configuration](https://gohugo.io/overview/configuration/), **LoveIt** lets you define the following parameters in your `config.toml` (here, values are default). +In addition to [Hugo global configuration](https://gohugo.io/overview/configuration/) and [menu configuration](#basic-configuration), **LoveIt** lets you define the following parameters in your site configuration (here is a `config.toml`, whose values are default). {{< admonition >}} Note that some of these parameters are explained in details in other sections of this documentation. {{< /admonition >}} ```toml -[menu] - [[menu.main]] - identifier = "posts" - name = "Posts" - url = "/posts/" - weight = 1 - [[menu.main]] - identifier = "tags" - name = "Tags" - url = "/tags/" - weight = 2 - [[menu.main]] - identifier = "categories" - name = "Categories" - url = "/categories/" - weight = 3 - [[menu.main]] - identifier = "about" - name = "About" - url = "/about/" - weight = 4 - [params] # LoveIt theme version version = "0.1.X" @@ -174,7 +191,7 @@ Note that some of these parameters are explained in details in other sections of keywords = ["Theme", "Hugo"] # site default theme ("light", "dark", "auto") defaultTheme = "auto" - # public git repo url to link lastmod git commit only then enableGitInfo is true + # public git repo url only then enableGitInfo is true gitRepo = "" # Header info [params.header] @@ -200,7 +217,7 @@ Note that some of these parameters are explained in details in other sections of # URL of avatar shown in home page avatarURL = "/images/avatar.png" # subtitle shown in home page - subtitle = "A Clean, Elegant but Advanced Hugo Theme" + subtitle = "This is my new hugo site" # whether to use typeit animation for subtitle typeit = true # whether to show social links @@ -285,7 +302,7 @@ Note that some of these parameters are explained in details in other sections of lightgallery = true # whether to show link to Raw Markdown content of the post linkToMarkdown = true - # mathematical formulas (KaTeX) + # mathematical formulas (KaTeX https://katex.org/) [params.math] enable = true # default block delimiter is $$ ... $$ and \\[ ... \\] @@ -350,8 +367,9 @@ Note that some of these parameters are explained in details in other sections of notify = false verify = true avatar = "mp" - # meta= "" + meta= "" pageSize = 10 + lang = "en" visitor = true recordIP = true # Facebook Comment Config (https://developers.facebook.com/docs/plugins/comments) @@ -502,9 +520,11 @@ Note that some of these parameters are explained in details in other sections of taxonomyTerm = ["HTML"] ``` + + ### 3.2 Favicons, Browserconfig, Manifest -It is recommended to put your own favicons +It is recommended to put your own favicons: * apple-touch-icon.png (180x180) * favicon-32x32.png (32x32) @@ -517,17 +537,17 @@ into `/static`. They’re easily created via [https://realfavicongenerator.net/] Customize `browserconfig.xml` and `site.webmanifest` to set theme-color and background-color. -### 3.3 Add logo and cover for SEO +### 3.3 Add Logo and Cover for SEO Add a logo image (127x40) and a cover image (800x600) in the `static` directory. ### 3.4 Style Customization -**LoveIt** has been built to be as configurable as possible by defining custom `.scss` style files. +**LoveIt** theme has been built to be as configurable as possible by defining custom `.scss` style files. The directory including the custom `.scss` style files is `config/css` relative to **your project path**. -In `_override.scss`, you can override the variables in `assets/css/_variables.scss` relative to **LoveIt directory** to customize the style. +In `_override.scss`, you can override the variables in `themes/LoveIt/assets/css/_variables.scss` to customize the style. Here is a example: @@ -537,3 +557,154 @@ $code-font-family: Fira Mono, Source Code Pro, Menlo, Consolas, Monaco, monospac ``` In `_custom.scss`, you can add some css style code to customize the style. + +## 4 Multilingual and i18n + +**LoveIt** theme is fully compatible with Hugo multilingual mode. + +It provides: + +* Translation strings for default values (**English**, **Chinese** and **French**). **Feel free to contribute!** +* In-browser language switching + + + +### 4.1 Basic Configuration + +After learning [how Hugo handle multilingual websites](https://gohugo.io/content-management/multilingual), define your languages in your [site configuration](#site-configuration). + +For example with English, Chinese and French website: + +```toml +# [en, zh-CN, fr, ...] determines default content language +defaultContentLanguage = "en" + +[languages] + [languages.en] + weight = 1 + title = "My New Hugo Site" + languageCode = "en" + languageName = "English" + [[languages.en.menu.main]] + identifier = "posts" + pre = "" + name = "Posts" + url = "/posts/" + title = "" + weight = 1 + [[languages.en.menu.main]] + identifier = "tags" + pre = "" + name = "Tags" + url = "/tags/" + title = "" + weight = 2 + [[languages.en.menu.main]] + identifier = "categories" + pre = "" + name = "Categories" + url = "/categories/" + title = "" + weight = 3 + [[languages.en.menu.main]] + identifier = "about" + pre = "" + name = "About" + url = "/about/" + title = "" + weight = 4 + + [languages.zh-CN] + weight = 2 + title = "我的全新 Hugo 网站" + languageCode = "zh-CN" + languageName = "简体中文" + # whether to include Chinese/Japanese/Korean + hasCJKLanguage = true + [[languages.zh-CN.menu.main]] + identifier = "posts" + pre = "" + name = "文章" + url = "/posts/" + title = "" + weight = 1 + [[languages.zh-CN.menu.main]] + identifier = "tags" + pre = "" + name = "标签" + url = "/tags/" + title = "" + weight = 2 + [[languages.zh-CN.menu.main]] + identifier = "categories" + pre = "" + name = "分类" + url = "/categories/" + title = "" + weight = 3 + [[languages.zh-CN.menu.main]] + identifier = "about" + pre = "" + name = "关于" + url = "/about/" + title = "" + weight = 4 + + [languages.fr] + weight = 3 + title = "Mon nouveau site Hugo" + languageCode = "fr" + languageName = "Français" + [[languages.fr.menu.main]] + identifier = "posts" + pre = "" + name = "Postes" + url = "/posts/" + title = "" + weight = 1 + [[languages.fr.menu.main]] + identifier = "tags" + pre = "" + name = "Balises" + url = "/tags/" + title = "" + weight = 2 + [[languages.fr.menu.main]] + identifier = "categories" + name = "Catégories" + pre = "" + url = "/categories/" + title = "" + weight = 3 + [[languages.fr.menu.main]] + identifier = "about" + pre = "" + name = "À propos" + url = "/about/" + title = "" + weight = 4 +``` + +Then, for each new page, append the language code to the file name. + +Single file `my-page.md` is split in three files: + +* in English: `my-page.en.md` +* in Chinese: `my-page.zh-cn.md` +* in French: `my-page.fr.md` + +{{< admonition >}} +Be aware that only translated pages are displayed in menu. It’s not replaced with default language content. +{{< /admonition >}} + +{{< admonition tip >}} +Use [Front Matter parameter](https://gohugo.io/content-management/multilingual/#translate-your-content) to translate urls too. +{{< /admonition >}} + +### 4.2 Overwrite Translation Strings + +Translations strings are used for common default values used in the theme. Translations are available in **English**, **Chinese** and **French**, but you may use another language or want to override default values. + +To override these values, create a new file in your local i18n folder `i18n/<languageCode>.toml` and inspire yourself from `themes/LoveIt/i18n/en.toml`. + +By the way, as these translations could be used by other people, please take the time to propose a translation by [making a PR](https://github.com/dillonzq/LoveIt/pulls) to the theme! diff --git a/exampleSite/content/posts/theme-documentation-basics.fr.md b/exampleSite/content/posts/theme-documentation-basics.fr.md new file mode 100644 index 0000000..3143497 --- /dev/null +++ b/exampleSite/content/posts/theme-documentation-basics.fr.md @@ -0,0 +1,715 @@ +--- +weight: 1 +title: "Thème Documentation - Concepts de Base" +date: 2020-03-06T21:40:32+08:00 +lastmod: 2020-03-06T21:40:32+08:00 +draft: false +author: "Dillon" +authorLink: "https://dillonzq.com" +description: "Découvrez en quoi consiste le thème Hugo - LoveIt et les concepts fondamentaux qui le sous-tendent." +license: "" + +tags: ["installation", "configuration"] +categories: ["documentation"] +hiddenFromHomePage: false + +featuredImage: "/images/theme-documentation-basics/featured-image.webp" +featuredImagePreview: "" + +toc: true +autoCollapseToc: false +math: false +lightgallery: true +linkToMarkdown: true +share: + enable: true +comment: true +--- + +Découvrez en quoi consiste le thème Hugo - **LoveIt** et les concepts fondamentaux qui le sous-tendent. + +<!--more--> + +{{< admonition warning >}} +Sorry, this article has not been completely translated into **French**. +Welcome to take the time to propose a translation by [making a PR](https://github.com/dillonzq/LoveIt/pulls) to the theme! +{{< /admonition >}} + +## 1 Requirements + +Thanks to the simplicity of Hugo, [Hugo](https://gohugo.io/) is the only dependency of this theme. + +Just install latest version of [:(far fa-file-archive): Hugo (> 0.62.0)](https://gohugo.io/getting-started/installing/) for your OS (**Windows**, **Linux**, **macOS**). + +{{< admonition note "Why not support earlier versions of Hugo?" >}} +Since [Markdown Render Hooks](https://gohugo.io/getting-started/configuration-markup/#markdown-render-hooks) was introduced in the [Hugo Christmas Edition](https://gohugo.io/news/0.62.0-relnotes/), this theme only supports Hugo versions above **v0.62.0**. +{{< /admonition >}} + +## 2 Installation + +The following steps are here to help you initialize your new website. If you don’t know Hugo at all, we strongly suggest you learn more about it by following this [great documentation for beginners](https://gohugo.io/getting-started/quick-start/). + +### 2.1 Create Your Project + +Hugo provides a `new` command to create a new website: + +```bash +hugo new site my_website +cd my_website +``` + +### 2.2 Install the Theme + +The **LoveIt** theme’s repository is: [https://github.com/dillonzq/LoveIt](https://github.com/dillonzq/LoveIt). + +You can download the **latest release** of the theme as :(far fa-file-archive): .zip file and extract it in the `themes` directory. + +Alternatively, clone this repository to the `themes` directory: + +```bash +git clone -b master https://github.com/dillonzq/LoveIt.git themes/LoveIt +``` + +Or, create an empty git repository and make this repository a submodule of your site directory: + +```bash +git init +git submodule -b master add https://github.com/dillonzq/LoveIt.git themes/LoveIt +``` + +### 2.3 Basic Configuration {#basic-configuration} + +The following is a basic configuration for the LoveIt theme: + +```toml +baseURL = "http://example.org/" +# language code +languageCode = "en" +title = "My New Hugo Site" + +# Change the default theme to be use when building the site with Hugo +theme = "LoveIt" + +[params] + # LoveIt theme version + version = "0.1.X" + +[menu] + [[menu.main]] + identifier = "posts" + # you can add extra information before the name (HTML format is allowed), such as icons + pre = "" + name = "Posts" + url = "/posts/" + # title will be shown when you hover on this menu link + title = "" + weight = 1 + [[menu.main]] + identifier = "tags" + pre = "" + name = "Tags" + url = "/tags/" + title = "" + weight = 2 + [[menu.main]] + identifier = "categories" + pre = "" + name = "Categories" + url = "/categories/" + title = "" + weight = 3 + [[menu.main]] + identifier = "about" + pre = "" + name = "About" + url = "/about/" + title = "" + weight = 4 +``` + +{{< admonition >}} +When building the website, you can set a theme by using `--theme` option. However, we suggest you modify the configuration file (**config.toml**) and set the theme as the default. +{{< /admonition >}} + +### 2.4 Create Your First Post + +Here is the way to create your first post: + +```bash + hugo new posts/first_post.md +``` + +Feel free to edit the post file by adding some sample content and replacing the title value in the beginning of the file. + +{{< admonition >}} +By default all posts and pages are created as a draft. If you want to render these pages, remove the property `draft: true` from the metadata or set the property `draft: false`. +{{< /admonition >}} + +### 2.5 Launching the Website Locally + +Launch by using the following command: + +```bash +hugo serve +``` + +Go to `http://localhost:1313`. + + + +{{< admonition tip >}} +When you run `hugo serve`, when the contents of the files change, the page automatically refreshes with the changes. +{{< /admonition >}} + +### 2.6 Build the Website + +When your site is ready to deploy, run the following command: + +```bash +hugo +``` + +A `public` folder will be generated, containing all static content and assets for your website. It can now be deployed on any web server. + +{{< admonition tip >}} +The website can be automatically published and hosted with [Netlify](https://www.netlify.com/) (Read more about [Automated HUGO deployments with Netlify](https://www.netlify.com/blog/2015/07/30/hosting-hugo-on-netlifyinsanely-fast-deploys/)). +Alternatively, you can use [AWS Amplify](https://gohugo.io/hosting-and-deployment/hosting-on-aws-amplify/), [Github pages](https://gohugo.io/hosting-and-deployment/hosting-on-github/), [Render](https://gohugo.io/hosting-and-deployment/hosting-on-render/) and more... +{{< /admonition >}} + +## 3 Configuration + +### 3.1 Site Configuration {#site-configuration} + +In addition to [Hugo global configuration](https://gohugo.io/overview/configuration/) and [menu configuration](#basic-configuration), **LoveIt** lets you define the following parameters in your site configuration (here is a `config.toml`, whose values are default). + +{{< admonition >}} +Note that some of these parameters are explained in details in other sections of this documentation. +{{< /admonition >}} + +```toml +[params] + # LoveIt theme version + version = "0.1.X" + # site description + description = "About LoveIt Theme" + # site keywords + keywords = ["Theme", "Hugo"] + # site default theme ("light", "dark", "auto") + defaultTheme = "auto" + # public git repo url only then enableGitInfo is true + gitRepo = "" + # Header info + [params.header] + # desktop header mode ("fixed", "normal", "auto") + desktopMode = "fixed" + # mobile header mode ("fixed", "normal", "auto") + mobileMode = "auto" + # Footer Copyright Info + [params.footer] + # Site creation time + since = 2019 + # ICP info only in China (HTML format is allowed) + icp = "" + # license info (HTML format is allowed) + license= '<a rel="license external nofollow noopener noreffer" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a>' + # Home Page Info + [params.home] + # Home Page Profile + [params.home.profile] + enable = true + # Gravatar Email for preferred avatar in home page + gravatarEmail = "" + # URL of avatar shown in home page + avatarURL = "/images/avatar.png" + # subtitle shown in home page + subtitle = "This is my new hugo site" + # whether to use typeit animation for subtitle + typeit = true + # whether to show social links + social = true + # Home Page Posts + [params.home.posts] + enable = true + # special amount of posts in each home posts page + paginate = 6 + # default behavior when you don't set "hiddenFromHomePage" in front matter + defaultHiddenFromHomePage = false + # Social Info in home page + [params.social] + GitHub = "xxxx" + Linkedin = "xxxx" + Twitter = "xxxx" + Instagram = "xxxx" + Email = "xxxx@xxxx.com" + Facebook = "xxxx" + Telegram = "xxxx" + # Medium = "xxxx" + # Gitlab = "xxxx" + Youtubelegacy = "xxxx" + # Youtubecustom = "xxxx" + # Youtubechannel = "xxxx" + # Tumblr ="xxxx" + # Quora = "xxxx" + # Keybase = "xxxx" + # Pinterest = "xxxx" + # Reddit = "xxxx" + # Codepen = "xxxx" + # FreeCodeCamp = "xxxx" + # Bitbucket = "xxxx" + # Stackoverflow = "xxxx" + # Weibo = "xxxx" + # Odnoklassniki = "xxxx" + # VK = "xxxx" + # Flickr = "xxxx" + # Xing = "xxxx" + # Snapchat = "xxxx" + # Soundcloud = "xxxx" + # Spotify = "xxxx" + # Bandcamp = "xxxx" + # Paypal = "xxxx" + # Fivehundredpx = "xxxx" + # Mix = "xxxx" + # Goodreads = "xxxx" + # Lastfm = "xxxx" + # Foursquare = "xxxx" + # Hackernews = "xxxx" + # Kickstarter = "xxxx" + # Patreon = "xxxx" + # Steam = "xxxx" + # Twitch = "xxxx" + # Strava = "xxxx" + # Skype = "xxxx" + # Whatsapp = "xxxx" + # Zhihu = "xxxx" + # Douban = "xxxx" + # Angellist = "xxxx" + # Slidershare = "xxxx" + # Jsfiddle = "xxxx" + # Deviantart = "xxxx" + # Behance = "xxxx" + # Dribble = "xxxx" + # Wordpress = "xxxx" + # Vine = "xxxx" + # Googlescholar = "xxxx" + # Researchgate = "xxxx" + # Mastodon = "xxxx" + # MastodonPrefix = "https://mastodon.technology/" + # Thingiverse = "xxxx" + # Devto = "xxxx" + # Gitea = "xxxx" + # XMPP = "xxxx" + # Matrix = "xxxx" + # Bilibili = "xxxx" + + # Page config + [params.page] + # whether to use lightgallery in the page + lightgallery = true + # whether to show link to Raw Markdown content of the post + linkToMarkdown = true + # mathematical formulas (KaTeX https://katex.org/) + [params.math] + enable = true + # default block delimiter is $$ ... $$ and \\[ ... \\] + blockLeftDelimiter = "" + blockRightDelimiter = "" + # default inline delimiter is $ ... $ and \\( ... \\) + inlineLeftDelimiter = "" + inlineRightDelimiter = "" + # KaTeX extension copy_tex + copyTex = true + # KaTeX extension mhchem + mhchem = true + # Social Share Links in post page + [params.share] + enable = true + Twitter = true + Facebook = true + Linkedin = true + Whatsapp = true + Pinterest = true + # Tumblr = true + HackerNews = true + # Reddit = true + # VK = true + # Buffer = true + # Xing = true + # Line = true + # Instapaper = true + # Pocket = true + # Digg = true + # Stumbleupon = true + # Flipboard = true + # Weibo = true + # Renren = true + # Myspace = true + # Blogger = true + # Baidu = true + # Odnoklassniki = true + # Evernote = true + # Skype = true + # Trello = true + # Mix = true + # Comment Config + [params.comment] + enable = true + # Disqus Comment Config (https://disqus.com/) + [params.comment.disqus] + # Disqus shortname to use Disqus in posts + shortname = "dillonzq" + # Gittalk Comment Config (https://github.com/gitalk/gitalk) + [params.comment.gitalk] + owner = "" + repo = "" + clientId = "" + clientSecret = "" + # Valine Comment Config (https://github.com/xCss/Valine) + [params.comment.valine] + enable = false + appId = "" + appKey = "" + placeholder = "Your comment ..." + notify = false + verify = true + avatar = "mp" + meta= "" + pageSize = 10 + lang = "en" + visitor = true + recordIP = true + # Facebook Comment Config (https://developers.facebook.com/docs/plugins/comments) + [params.comment.facebook] + enable = false + width = "100%" + numPosts = 10 + appId = "" + languageCode = "en_US" + + # site verification code for Google/Bing/Yandex/Pinterest/Baidu + [params.verification] + google = "" + bing = "" + yandex = "" + pinterest = "" + baidu = "" + # Publisher Info just for SEO + [params.publisher] + name = "xxxx" + [params.publisher.logo] + url = "logo.png" + width = 127 + height = 40 + # Website Log Info just for SEO + [params.logo] + url = "logo.png" + width = 127 + height = 40 + # Website Image Info just for SEO + [params.image] + url = "cover.png" + width = 800 + height = 600 + # CSS and JS Files CDN + [params.cdn] + # fontawesome-free@5.12.1 https://fontawesome.com/ + fontawesomeFreeCSS = '' + # animate.css@3.7.2 https://github.com/daneden/animate.css + animateCSS = '' + # smooth-scroll@16.1.2 https://github.com/cferdinandi/smooth-scroll + smoothScrollJS = '' + # sharer@0.4.0 https://github.com/ellisonleao/sharer.js + sharerJS = '' + # lazysizes@5.2.0 https://github.com/aFarkas/lazysizes + lazysizesJS = '' + # lightgallery@1.1.3 lg-thumbnail@1.1.0 lg-zoom@1.1.0 https://github.com/sachinchoolur/lightgallery.js + lightgalleryCSS = '' + lightgalleryJS = '' + lightgalleryThumbnailJS = '' + lightgalleryZoomJS = '' + # typeit@6.5.1 https://github.com/alexmacarthur/typeit + typeitJS = '' + # katex@0.11.1 https://github.com/KaTeX/KaTeX + katexCSS = '' + katexJS = '' + katexAutoRenderJS = '' + katexCopyTexCSS = '' + katexCopyTexJS = '' + katexMhchemJS = '' + # mermaid@8.4.8 https://github.com/knsv/mermaid + mermaidJS = '' + # aplayer@1.10.1 https://github.com/MoePlayer/APlayer + aplayerCSS = '' + aplayerJS = '' + # meting@2.0.1 https://github.com/metowolf/MetingJS + metingJS = '' + # echarts@4.6.0 https://echarts.apache.org/ + echartsJS = '' + echartsMacaronsJS = '' + # gitalk@1.6.0 https://github.com/gitalk/gitalk + gitalkCSS = '' + gitalkJS = '' + # valine@1.3.10 https://valine.js.org/ + valineJS = '' + +# Markup related configuration in Hugo +[markup] + # Syntax Highlighting (https://gohugo.io/content-management/syntax-highlighting) + [markup.highlight] + codeFences = true + guessSyntax = true + lineNoStart = 1 + lineNos = true + lineNumbersInTable = true + noClasses = false + style = "monokai" + tabWidth = 4 + # Goldmark is from Hugo 0.60 the default library used for Markdown + [markup.goldmark] + [markup.goldmark.extensions] + definitionList = true + footnote = true + linkify = true + strikethrough = true + table = true + taskList = true + typographer = true + [markup.goldmark.renderer] + # whether to use HTML tags directly in the document + unsafe = true + # Table Of Contents settings + [markup.tableOfContents] + startLevel = 2 + endLevel = 6 + +# Author Info +[author] + name = "xxxx" + link = "" + +# Sitemap Info +[sitemap] + changefreq = "weekly" + filename = "sitemap.xml" + priority = 0.5 + +# Permalinks Info (https://gohugo.io/content-management/urls/#permalinks) +[Permalinks] + # posts = ":year/:month/:filename" + posts = ":filename" + +# Privacy Info (https://gohugo.io/about/hugo-and-gdpr/) +[privacy] + [privacy.googleAnalytics] + anonymizeIP = true + + [privacy.youtube] + privacyEnhanced = true + +# Options to make output .md files +[mediaTypes] + [mediaTypes."text/plain"] + suffixes = ["md"] + +# Options to make output .md files +[outputFormats.MarkDown] + mediaType = "text/plain" + isPlainText = true + isHTML = false + +# Options to make hugo output files +[outputs] + home = ["HTML", "RSS"] + page = ["HTML", "MarkDown"] + section = ["HTML", "RSS"] + taxonomy = ["HTML", "RSS"] + taxonomyTerm = ["HTML"] +``` + + + +### 3.2 Favicons, Browserconfig, Manifest + +It is recommended to put your own favicons: + +* apple-touch-icon.png (180x180) +* favicon-32x32.png (32x32) +* favicon-16x16.png (16x16) +* mstile-150x150.png (150x150) +* android-chrome-192x192.png (192x192) +* android-chrome-512x512.png (512x512) + +into `/static`. They’re easily created via [https://realfavicongenerator.net/](https://realfavicongenerator.net/). + +Customize `browserconfig.xml` and `site.webmanifest` to set theme-color and background-color. + +### 3.3 Add Logo and Cover for SEO + +Add a logo image (127x40) and a cover image (800x600) in the `static` directory. + +### 3.4 Style Customization + +**LoveIt** theme has been built to be as configurable as possible by defining custom `.scss` style files. + +The directory including the custom `.scss` style files is `config/css` relative to **your project path**. + +In `_override.scss`, you can override the variables in `themes/LoveIt/assets/css/_variables.scss` to customize the style. + +Here is a example: + +```scss +@import url('https://fonts.googleapis.com/css?family=Fira+Mono:400,700&display=swap&subset=latin-ext'); +$code-font-family: Fira Mono, Source Code Pro, Menlo, Consolas, Monaco, monospace; +``` + +In `_custom.scss`, you can add some css style code to customize the style. + +## 4 Multilingual and i18n + +**LoveIt** theme is fully compatible with Hugo multilingual mode. + +It provides: + +* Translation strings for default values (**English**, **Chinese** and **French**). **Feel free to contribute!** +* In-browser language switching + + + +### 4.1 Basic Configuration + +After learning [how Hugo handle multilingual websites](https://gohugo.io/content-management/multilingual), define your languages in your [site configuration](#site-configuration). + +For example with English, Chinese and French website: + +```toml +# [en, zh-CN, fr, ...] determines default content language +defaultContentLanguage = "en" + +[languages] + [languages.en] + weight = 1 + title = "My New Hugo Site" + languageCode = "en" + languageName = "English" + [[languages.en.menu.main]] + identifier = "posts" + pre = "" + name = "Posts" + url = "/posts/" + title = "" + weight = 1 + [[languages.en.menu.main]] + identifier = "tags" + pre = "" + name = "Tags" + url = "/tags/" + title = "" + weight = 2 + [[languages.en.menu.main]] + identifier = "categories" + pre = "" + name = "Categories" + url = "/categories/" + title = "" + weight = 3 + [[languages.en.menu.main]] + identifier = "about" + pre = "" + name = "About" + url = "/about/" + title = "" + weight = 4 + + [languages.zh-CN] + weight = 2 + title = "我的全新 Hugo 网站" + languageCode = "zh-CN" + languageName = "简体中文" + # whether to include Chinese/Japanese/Korean + hasCJKLanguage = true + [[languages.zh-CN.menu.main]] + identifier = "posts" + pre = "" + name = "文章" + url = "/posts/" + title = "" + weight = 1 + [[languages.zh-CN.menu.main]] + identifier = "tags" + pre = "" + name = "标签" + url = "/tags/" + title = "" + weight = 2 + [[languages.zh-CN.menu.main]] + identifier = "categories" + pre = "" + name = "分类" + url = "/categories/" + title = "" + weight = 3 + [[languages.zh-CN.menu.main]] + identifier = "about" + pre = "" + name = "关于" + url = "/about/" + title = "" + weight = 4 + + [languages.fr] + weight = 3 + title = "Mon nouveau site Hugo" + languageCode = "fr" + languageName = "Français" + [[languages.fr.menu.main]] + identifier = "posts" + pre = "" + name = "Postes" + url = "/posts/" + title = "" + weight = 1 + [[languages.fr.menu.main]] + identifier = "tags" + pre = "" + name = "Balises" + url = "/tags/" + title = "" + weight = 2 + [[languages.fr.menu.main]] + identifier = "categories" + name = "Catégories" + pre = "" + url = "/categories/" + title = "" + weight = 3 + [[languages.fr.menu.main]] + identifier = "about" + pre = "" + name = "À propos" + url = "/about/" + title = "" + weight = 4 +``` + +Then, for each new page, append the language code to the file name. + +Single file `my-page.md` is split in three files: + +* in English: `my-page.en.md` +* in Chinese: `my-page.zh-cn.md` +* in French: `my-page.fr.md` + +{{< admonition >}} +Be aware that only translated pages are displayed in menu. It’s not replaced with default language content. +{{< /admonition >}} + +{{< admonition tip >}} +Use [Front Matter parameter](https://gohugo.io/content-management/multilingual/#translate-your-content) to translate urls too. +{{< /admonition >}} + +### 4.2 Overwrite Translation Strings + +Translations strings are used for common default values used in the theme. Translations are available in **English**, **Chinese** and **French**, but you may use another language or want to override default values. + +To override these values, create a new file in your local i18n folder `i18n/<languageCode>.toml` and inspire yourself from `themes/LoveIt/i18n/en.toml`. + +By the way, as these translations could be used by other people, please take the time to propose a translation by [making a PR](https://github.com/dillonzq/LoveIt/pulls) to the theme! diff --git a/exampleSite/content/posts/theme-documentation-basics.zh-cn.md b/exampleSite/content/posts/theme-documentation-basics.zh-cn.md index 4ec72ca..dd7c6b2 100644 --- a/exampleSite/content/posts/theme-documentation-basics.zh-cn.md +++ b/exampleSite/content/posts/theme-documentation-basics.zh-cn.md @@ -1,25 +1,711 @@ --- -title: "Documentation" -date: 2020-02-18T21:40:32+08:00 -lastmod: 2020-02-18T21:40:32+08:00 -draft: true -author: "" -authorLink: "" -description: "" +weight: 1 +title: "主题文档 - 基本概念" +date: 2020-03-06T21:40:32+08:00 +lastmod: 2020-03-06T21:40:32+08:00 +draft: false +author: "Dillon" +authorLink: "https://dillonzq.com" +description: "探索 Hugo - LoveIt 主题的全部内容和背后的核心概念." license: "" -tags: [] -categories: [] +tags: ["安装", "配置"] +categories: ["documentation"] hiddenFromHomePage: false -featuredImage: "" +featuredImage: "/images/theme-documentation-basics/featured-image.webp" featuredImagePreview: "" -toc: false -autoCollapseToc: true -lightgallery: true +toc: true +autoCollapseToc: false math: false +lightgallery: true +linkToMarkdown: true +share: + enable: true comment: true --- +探索 Hugo - **LoveIt** 主题的全部内容和背后的核心概念. + <!--more--> + +## 1 准备 + +由于 Hugo 提供的便利性, [Hugo](https://gohugo.io/) 本身是这个主题唯一的依赖. + +直接安装满足你操作系统 (**Windows**, **Linux**, **macOS**) 的最新版本 [:(far fa-file-archive): Hugo (> 0.62.0)](https://gohugo.io/getting-started/installing/). + +{{< admonition note "为什么不支持早期版本的 Hugo?" >}} +由于 [Markdown 渲染钩子函数](https://gohugo.io/getting-started/configuration-markup/#markdown-render-hooks) 在 [Hugo 圣诞节版本](https://gohugo.io/news/0.62.0-relnotes/) 中被引入, 本主题只支持高于 **v0.62.0** 的 Hugo 版本. +{{< /admonition >}} + +## 2 安装 + +以下步骤可帮助你初始化新网站. 如果你根本不了解 Hugo, 我们强烈建议你按照此 [快速入门文档](https://gohugo.io/getting-started/quick-start/) 进一步了解它. + +### 2.1 创建你的项目 + +Hugo 提供了一个 `new` 命令来创建一个新的网站: + +```bash +hugo new site my_website +cd my_website +``` + +### 2.2 安装主题 + +**LoveIt** 主题的仓库是: [https://github.com/dillonzq/LoveIt](https://github.com/dillonzq/LoveIt). + +你可以下载主题的 :(far fa-file-archive): .zip 文件的 **最新发布版本** 并且解压放到 `themes` 目录. + +另外, 也可以直接把这个主题克隆到 `themes` 目录: + +```bash +git clone -b master https://github.com/dillonzq/LoveIt.git themes/LoveIt +``` + +或者, 初始化你的项目目录为 git 仓库, 并且把主题仓库作为你的网站目录的子模块: + +```bash +git init +git submodule -b master add https://github.com/dillonzq/LoveIt.git themes/LoveIt +``` + +### 2.3 基础配置 {#basic-configuration} + +以下是 LoveIt 主题的基本配置: + +```toml +baseURL = "http://example.org/" +# 语言代码 +languageCode = "en" +title = "My New Hugo Site" + +# 更改使用 Hugo 构建网站时使用的默认主题 +theme = "LoveIt" + +[params] + # LoveIt 主题版本 + version = "0.1.X" + +[menu] + [[menu.main]] + identifier = "posts" + # 你可以在名称 (允许 HTML 格式) 之前添加其他信息, 例如图标 + pre = "" + name = "Posts" + url = "/posts/" + # 当你将鼠标悬停在此菜单链接上时, 将显示的标题 + title = "" + weight = 1 + [[menu.main]] + identifier = "tags" + pre = "" + name = "Tags" + url = "/tags/" + title = "" + weight = 2 + [[menu.main]] + identifier = "categories" + pre = "" + name = "Categories" + url = "/categories/" + title = "" + weight = 3 + [[menu.main]] + identifier = "about" + pre = "" + name = "About" + url = "/about/" + title = "" + weight = 4 +``` + +{{< admonition >}} +在构建网站时, 你可以使用 `--theme` 选项设置主题. 但是, 我建议你修改配置文件 (**config.toml**) 将本主题设置为默认主题. +{{< /admonition >}} + +### 2.4 创建你的第一篇文章 + +以下是创建第一篇文章的方法: + +```bash + hugo new posts/first_post.md +``` + +通过添加一些示例内容并替换文件开头的标题, 你可以随意编辑文章. + +{{< admonition >}} +默认情况下, 所有文章和页面均作为草稿创建. 如果想要渲染这些页面, 请从元数据中删除属性 `draft: true`, 或者设置属性 `draft: false`. +{{< /admonition >}} + +### 2.5 在本地启动网站 + +使用以下命令启动网站: + +```bash +hugo serve +``` + +去查看 `http://localhost:1313`. + + + +{{< admonition tip >}} +当你运行 `hugo serve` 时, 当文件内容更改时, 页面会随着更改自动刷新. +{{< /admonition >}} + +### 2.6 构建网站 + +当你准备好部署你的网站时, 运行以下命令: + +```bash +hugo +``` + +会生成一个 `public` 目录, 其中包含你网站的所有静态内容和资源. 现在可以将其部署在任何 Web 服务器上. + +{{< admonition tip >}} +网站内容可以通过 [Netlify](https://www.netlify.com/) 自动发布和托管 (了解有关[通过 Netlify 进行 HUGO 自动化部署](https://www.netlify.com/blog/2015/07/30/hosting-hugo-on-netlifyinsanely-fast-deploys/) 的更多信息). +或者, 您可以使用 [AWS Amplify](https://gohugo.io/hosting-and-deployment/hosting-on-aws-amplify/), [Github pages](https://gohugo.io/hosting-and-deployment/hosting-on-github/), [Render](https://gohugo.io/hosting-and-deployment/hosting-on-render/) 以及更多... +{{< /admonition >}} + +## 3 配置 + +### 3.1 网站配置 {#site-configuration} + +除了 [Hugo 全局配置](https://gohugo.io/overview/configuration/) 和 [菜单配置](#basic-configuration) 之外, **LoveIt** 主题还允许您在网站配置中定义以下参数 (这是一个示例 `config.toml`, 其内容为默认值). + +{{< admonition >}} +请注意, 本文档其他部分将详细解释其中一些参数. +{{< /admonition >}} + +```toml +[params] + # LoveIt 主题版本 + version = "0.1.X" + # 网站描述 + description = "About LoveIt Theme" + # 网站关键词 + keywords = ["Theme", "Hugo"] + # 网站默认主题样式 ("light", "dark", "auto") + defaultTheme = "auto" + # 公共 git 仓库路径，仅在 enableGitInfo 设为 true 时有效 + gitRepo = "" + # 页面头部导航栏信息 + [params.header] + # 桌面端导航栏模式 ("fixed", "normal", "auto") + desktopMode = "fixed" + # 移动端导航栏模式 ("fixed", "normal", "auto") + mobileMode = "auto" + # 页面底部版权信息设置 + [params.footer] + # 网站创立年份 + since = 2019 + # ICP 备案信息，仅在中国使用 (允许使用 HTML 格式) + icp = "" + # 许可协议信息 (允许使用 HTML 格式) + license= '<a rel="license external nofollow noopener noreffer" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a>' + # 文章页面配置 + [params.home] + # 主页信息设置 + [params.home.profile] + enable = true + # Gravatar 邮箱，用于优先在主页显示的头像 + gravatarEmail = "" + # 主页显示头像的 URL + avatarURL = "/images/avatar.png" + # 主页显示的网站副标题 + subtitle = "This is my new hugo site" + # 是否为副标题显示打字机动画 + typeit = true + # 是否显示社交账号 + social = true + # 主页文章列表 + [params.home.posts] + enable = true + # 主页每页显示文章数量 + paginate = 6 + # 当你没有在文章前置参数中设置 "hiddenFromHomePage" 时的默认行为 + defaultHiddenFromHomePage = false + # 主页的社交信息设置 + [params.social] + GitHub = "xxxx" + Linkedin = "xxxx" + Twitter = "xxxx" + Instagram = "xxxx" + Email = "xxxx@xxxx.com" + Facebook = "xxxx" + Telegram = "xxxx" + # Medium = "xxxx" + # Gitlab = "xxxx" + Youtubelegacy = "xxxx" + # Youtubecustom = "xxxx" + # Youtubechannel = "xxxx" + # Tumblr ="xxxx" + # Quora = "xxxx" + # Keybase = "xxxx" + # Pinterest = "xxxx" + # Reddit = "xxxx" + # Codepen = "xxxx" + # FreeCodeCamp = "xxxx" + # Bitbucket = "xxxx" + # Stackoverflow = "xxxx" + # Weibo = "xxxx" + # Odnoklassniki = "xxxx" + # VK = "xxxx" + # Flickr = "xxxx" + # Xing = "xxxx" + # Snapchat = "xxxx" + # Soundcloud = "xxxx" + # Spotify = "xxxx" + # Bandcamp = "xxxx" + # Paypal = "xxxx" + # Fivehundredpx = "xxxx" + # Mix = "xxxx" + # Goodreads = "xxxx" + # Lastfm = "xxxx" + # Foursquare = "xxxx" + # Hackernews = "xxxx" + # Kickstarter = "xxxx" + # Patreon = "xxxx" + # Steam = "xxxx" + # Twitch = "xxxx" + # Strava = "xxxx" + # Skype = "xxxx" + # Whatsapp = "xxxx" + # Zhihu = "xxxx" + # Douban = "xxxx" + # Angellist = "xxxx" + # Slidershare = "xxxx" + # Jsfiddle = "xxxx" + # Deviantart = "xxxx" + # Behance = "xxxx" + # Dribble = "xxxx" + # Wordpress = "xxxx" + # Vine = "xxxx" + # Googlescholar = "xxxx" + # Researchgate = "xxxx" + # Mastodon = "xxxx" + # MastodonPrefix = "https://mastodon.technology/" + # Thingiverse = "xxxx" + # Devto = "xxxx" + # Gitea = "xxxx" + # XMPP = "xxxx" + # Matrix = "xxxx" + # Bilibili = "xxxx" + + # 文章页面配置 + [params.page] + # 是否在文章页面使用 lightgallery + lightgallery = true + # 是否在文章页面显示原始 Markdown 文档链接 + linkToMarkdown = true + # 数学公式 (KaTeX https://katex.org/) + [params.math] + enable = true + # 默认块定界符是 $$ ... $$ 和 \\[ ... \\] + blockLeftDelimiter = "" + blockRightDelimiter = "" + # 默认内联定界符是 $ ... $ 和 \\( ... \\) + inlineLeftDelimiter = "" + inlineRightDelimiter = "" + # KaTeX 插件 copy_tex + copyTex = true + # KaTeX 插件 mhchem + mhchem = true + # 文章页面的分享信息设置 + [params.share] + enable = true + Twitter = true + Facebook = true + Linkedin = true + Whatsapp = true + Pinterest = true + # Tumblr = true + HackerNews = true + # Reddit = true + # VK = true + # Buffer = true + # Xing = true + # Line = true + # Instapaper = true + # Pocket = true + # Digg = true + # Stumbleupon = true + # Flipboard = true + # Weibo = true + # Renren = true + # Myspace = true + # Blogger = true + # Baidu = true + # Odnoklassniki = true + # Evernote = true + # Skype = true + # Trello = true + # Mix = true + # 评论系统设置 + [params.comment] + enable = true + # Disqus 评论系统设置 (https://disqus.com/) + [params.comment.disqus] + # Disqus 的用户名，用来在文章中启用 Disqus 评论系统 + shortname = "dillonzq" + # Gittalk 评论系统设置 (https://github.com/gitalk/gitalk) + [params.comment.gitalk] + owner = "" + repo = "" + clientId = "" + clientSecret = "" + # Valine 评论系统设置 (https://github.com/xCss/Valine) + [params.comment.valine] + enable = false + appId = "" + appKey = "" + placeholder = "Your comment ..." + notify = false + verify = true + avatar = "mp" + meta= "" + pageSize = 10 + lang = "en" + visitor = true + recordIP = true + # Facebook 评论系统设置 (https://developers.facebook.com/docs/plugins/comments) + [params.comment.facebook] + enable = false + width = "100%" + numPosts = 10 + appId = "" + languageCode = "en_US" + + # 网站验证代码，用于 Google/Bing/Yandex/Pinterest/Baidu + [params.verification] + google = "" + bing = "" + yandex = "" + pinterest = "" + baidu = "" + # 出版者信息，仅用于 SEO + [params.publisher] + name = "xxxx" + [params.publisher.logo] + url = "logo.png" + width = 127 + height = 40 + # 网站 Logo 信息，仅用于 SEO + [params.logo] + url = "logo.png" + width = 127 + height = 40 + # 网站图标信息，仅用于 SEO + [params.image] + url = "cover.png" + width = 800 + height = 600 + # CSS 和 JS 文件的 CDN 设置 + [params.cdn] + # fontawesome-free@5.12.1 https://fontawesome.com/ + fontawesomeFreeCSS = '' + # animate.css@3.7.2 https://github.com/daneden/animate.css + animateCSS = '' + # smooth-scroll@16.1.2 https://github.com/cferdinandi/smooth-scroll + smoothScrollJS = '' + # sharer@0.4.0 https://github.com/ellisonleao/sharer.js + sharerJS = '' + # lazysizes@5.2.0 https://github.com/aFarkas/lazysizes + lazysizesJS = '' + # lightgallery@1.1.3 lg-thumbnail@1.1.0 lg-zoom@1.1.0 https://github.com/sachinchoolur/lightgallery.js + lightgalleryCSS = '' + lightgalleryJS = '' + lightgalleryThumbnailJS = '' + lightgalleryZoomJS = '' + # typeit@6.5.1 https://github.com/alexmacarthur/typeit + typeitJS = '' + # katex@0.11.1 https://github.com/KaTeX/KaTeX + katexCSS = '' + katexJS = '' + katexAutoRenderJS = '' + katexCopyTexCSS = '' + katexCopyTexJS = '' + katexMhchemJS = '' + # mermaid@8.4.8 https://github.com/knsv/mermaid + mermaidJS = '' + # aplayer@1.10.1 https://github.com/MoePlayer/APlayer + aplayerCSS = '' + aplayerJS = '' + # meting@2.0.1 https://github.com/metowolf/MetingJS + metingJS = '' + # echarts@4.6.0 https://echarts.apache.org/ + echartsJS = '' + echartsMacaronsJS = '' + # gitalk@1.6.0 https://github.com/gitalk/gitalk + gitalkCSS = '' + gitalkJS = '' + # valine@1.3.10 https://valine.js.org/ + valineJS = '' + +# Hugo 解析文档的配置 +[markup] + # 语法高亮设置 (https://gohugo.io/content-management/syntax-highlighting) + [markup.highlight] + codeFences = true + guessSyntax = true + lineNoStart = 1 + lineNos = true + lineNumbersInTable = true + noClasses = false + style = "monokai" + tabWidth = 4 + # Goldmark 是 Hugo 0.60 以来的默认 Markdown 解析库 + [markup.goldmark] + [markup.goldmark.extensions] + definitionList = true + footnote = true + linkify = true + strikethrough = true + table = true + taskList = true + typographer = true + [markup.goldmark.renderer] + # 是否在文档中直接使用 HTML 标签 + unsafe = true + # 目录设置 + [markup.tableOfContents] + startLevel = 2 + endLevel = 6 + +# 作者信息 +[author] + name = "xxxx" + link = "" + +# 网站地图信息 +[sitemap] + changefreq = "weekly" + filename = "sitemap.xml" + priority = 0.5 + +# Permalinks 信息 (https://gohugo.io/content-management/urls/#permalinks) +[Permalinks] + # posts = ":year/:month/:filename" + posts = ":filename" + +# 隐私信息设置 (https://gohugo.io/about/hugo-and-gdpr/) +[privacy] + [privacy.googleAnalytics] + anonymizeIP = true + + [privacy.youtube] + privacyEnhanced = true + +# 用于输出 Markdown 格式文档的设置 +[mediaTypes] + [mediaTypes."text/plain"] + suffixes = ["md"] + +# 用于输出 Markdown 格式文档的设置 +[outputFormats.MarkDown] + mediaType = "text/plain" + isPlainText = true + isHTML = false + +# 用于 Hugo 输出文档的设置 +[outputs] + home = ["HTML", "RSS"] + page = ["HTML", "MarkDown"] + section = ["HTML", "RSS"] + taxonomy = ["HTML", "RSS"] + taxonomyTerm = ["HTML"] +``` + + + +### 3.2 网站图标, 浏览器配置, 网站清单 + +强烈建议你把: + +* apple-touch-icon.png (180x180) +* favicon-32x32.png (32x32) +* favicon-16x16.png (16x16) +* mstile-150x150.png (150x150) +* android-chrome-192x192.png (192x192) +* android-chrome-512x512.png (512x512) + +放在 `/static` 目录. 利用 [https://realfavicongenerator.net/](https://realfavicongenerator.net/) 可以很容易地生成这些文件. + +可以自定义 `browserconfig.xml` 和 `site.webmanifest` 文件来设置 theme-color 和 background-color. + +### 3.3 增加网站 logo 和封面用于 SEO 优化 + +在 `static` 目录增加一个 logo 图片 (127x40) 和一个封面图片 (800x600). + +### 3.4 自定义样式 + +通过定义自定义 `.scss` 样式文件, **LoveIt** 主题支持可配置的样式. + +包含自定义 `.scss` 样式文件的目录相对于 **你的项目** 的路径为 `config / css`. + +在 `_override.scss` 中, 你可以覆盖 `themes/LoveIt/assets/css/_variables.scss` 中的变量以自定义样式. + +这是一个例子: + +```scss +@import url('https://fonts.googleapis.com/css?family=Fira+Mono:400,700&display=swap&subset=latin-ext'); +$code-font-family: Fira Mono, Source Code Pro, Menlo, Consolas, Monaco, monospace; +``` + +在 `_custom.scss` 中, 你可以添加一些 CSS 样式代码以自定义样式. + +## 4 多语言和 i18n + +**LoveIt** 主题完全兼容 Hugo 的多语言模式. + +支持: + +* 多种语言的翻译字符串 (**英语**, **中文**和**法语**). **欢迎贡献!** +* 在浏览器内语言切换 + + + +### 4.1 基本配置 + +学习了 [Hugo如何处理多语言网站](https://gohugo.io/content-management/multilingual) 之后, 请在 [站点配置](#site-configuration) 中定义你的网站语言. + +例如, 一个支持英语, 中文和法语的网站配置: + +```toml +# [en, zh-CN, fr, ...] 设置默认的语言 +defaultContentLanguage = "en" + +[languages] + [languages.en] + weight = 1 + title = "My New Hugo Site" + languageCode = "en" + languageName = "English" + [[languages.en.menu.main]] + identifier = "posts" + pre = "" + name = "Posts" + url = "/posts/" + title = "" + weight = 1 + [[languages.en.menu.main]] + identifier = "tags" + pre = "" + name = "Tags" + url = "/tags/" + title = "" + weight = 2 + [[languages.en.menu.main]] + identifier = "categories" + pre = "" + name = "Categories" + url = "/categories/" + title = "" + weight = 3 + [[languages.en.menu.main]] + identifier = "about" + pre = "" + name = "About" + url = "/about/" + title = "" + weight = 4 + + [languages.zh-CN] + weight = 2 + title = "我的全新 Hugo 网站" + languageCode = "zh-CN" + languageName = "简体中文" + # 是否包括中日韩文字 + hasCJKLanguage = true + [[languages.zh-CN.menu.main]] + identifier = "posts" + pre = "" + name = "文章" + url = "/posts/" + title = "" + weight = 1 + [[languages.zh-CN.menu.main]] + identifier = "tags" + pre = "" + name = "标签" + url = "/tags/" + title = "" + weight = 2 + [[languages.zh-CN.menu.main]] + identifier = "categories" + pre = "" + name = "分类" + url = "/categories/" + title = "" + weight = 3 + [[languages.zh-CN.menu.main]] + identifier = "about" + pre = "" + name = "关于" + url = "/about/" + title = "" + weight = 4 + + [languages.fr] + weight = 3 + title = "Mon nouveau site Hugo" + languageCode = "fr" + languageName = "Français" + [[languages.fr.menu.main]] + identifier = "posts" + pre = "" + name = "Postes" + url = "/posts/" + title = "" + weight = 1 + [[languages.fr.menu.main]] + identifier = "tags" + pre = "" + name = "Balises" + url = "/tags/" + title = "" + weight = 2 + [[languages.fr.menu.main]] + identifier = "categories" + name = "Catégories" + pre = "" + url = "/categories/" + title = "" + weight = 3 + [[languages.fr.menu.main]] + identifier = "about" + pre = "" + name = "À propos" + url = "/about/" + title = "" + weight = 4 +``` + +然后, 对于每个新页面, 将语言代码附加到文件名中. + +单个文件 `my-page.md` 需要分为三个文件: + +* 英语: `my-page.en.md` +* 中文: `my-page.zh-cn.md` +* 法语: `my-page.fr.md` + +{{< admonition >}} +请注意, 菜单中仅显示翻译的页面. 它不会替换为默认语言内容. +{{< /admonition >}} + +{{< admonition tip >}} +也可以使用 [文章前置参数](https://gohugo.io/content-management/multilingual/#translate-your-content) 来翻译网址. +{{< /admonition >}} + +### 4.2 修改默认的翻译字符串 + +翻译字符串用于在主题中使用的常见默认值. +目前提供**英语**, **中文**和**法语**翻译, 但你可能自定义其他语言或覆盖默认值. + +要覆盖默认值, 请在项目的 i18n 目录 `i18n/<languageCode>.toml` 中创建一个新文件，并从 `themes/LoveIt/i18n/en.toml` 中获得提示. + +另外, 由于你的翻译可能会帮助到其他人, 请花点时间通过 [创建一个 PR](https://github.com/dillonzq/LoveIt/pulls) 来贡献主题翻译, 谢谢! diff --git a/exampleSite/content/posts/theme-documentation-content.en.md b/exampleSite/content/posts/theme-documentation-content.en.md new file mode 100644 index 0000000..0f9406e --- /dev/null +++ b/exampleSite/content/posts/theme-documentation-content.en.md @@ -0,0 +1,293 @@ +--- +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." +license: "" + +tags: ["content", "markdown"] +categories: ["documentation"] +hiddenFromHomePage: false + +featuredImage: "/images/theme-documentation-content/featured-image.jpg" +featuredImagePreview: "" + +toc: true +autoCollapseToc: false +math: true +lightgallery: true +linkToMarkdown: true +share: + enable: true +comment: true +--- + +Find out how to create and organize your content quickly and intuitively in **LoveIt** theme. + +<!--more--> + +## 1 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 static pages in the `content` directory, for example: `content/about.md` +* Keep media like images in the `static` directory, for example: `static/images/screenshot.png` + +## 2 Front Matter + +**Hugo** allows you to add front matter in `yaml`, `toml` or `json` to your content files. + +Here is a default front matter from the default archetype: + +```yaml +--- +title: "My First Post" +date: 2020-03-04T15:58:26+08:00 +lastmod: 2020-03-04T15:58:26+08:00 +draft: true +author: "" +authorLink: "" +description: "" +license: "" + +tags: [] +categories: [] +hiddenFromHomePage: false + +featuredImage: "" +featuredImagePreview: "" + +toc: false +autoCollapseToc: true +math: true +lightgallery: true +linkToMarkdown: true +share: + enable: true +comment: true +--- +``` + +* **title**: the title 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. +* **tags**: the tags for the content. +* **categories**: the categories for the content. +* **hiddenFromHomePage**: if `true`, the content will not be shown in the home page, but this behaviour is configurabl in the [site configuration](../theme-documentation-basics/#site-configuration). +* **featuredImage**: the featured image for the content. +* **featuredImagePreview**: the featured image for the content preview in the home page. +* **toc**: if `true`, the content will show the table of the contents. +* **autoCollapseToc**: if `true`, the table of the contents will be automatically collapsed. +* **math**: if `true`, the mathematical formula in the content will be automatically rendered. +* **lightgallery**: if `true`, images in the content will be shown as the gallery. +* **linkToMarkdown**: if `true`, the footer of the content will show the link to the orignal Markdown file. +* **share**: the same as `params.share` in the [site configuration](../theme-documentation-basics/#site-configuration). +* **comment**: if `true`, the comment will be used. + +## 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 block 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 + +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) + +### Font Awesome + +**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): Be back soon. + +That is so funny! {?:}(far fa-grin-tears): +``` + +The rendered output looks like this: + +Gone camping! :(fas fa-campground): 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)**. diff --git a/exampleSite/content/posts/theme-documentation-content.fr.md b/exampleSite/content/posts/theme-documentation-content.fr.md new file mode 100644 index 0000000..c04c293 --- /dev/null +++ b/exampleSite/content/posts/theme-documentation-content.fr.md @@ -0,0 +1,298 @@ +--- +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." +license: "" + +tags: ["contenu", "markdown"] +categories: ["documentation"] +hiddenFromHomePage: false + +featuredImage: "/images/theme-documentation-content/featured-image.jpg" +featuredImagePreview: "" + +toc: true +autoCollapseToc: false +math: true +lightgallery: true +linkToMarkdown: true +share: + enable: true +comment: 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 [making a PR](https://github.com/dillonzq/LoveIt/pulls) to the theme! +{{< /admonition >}} + +## 1 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 static pages in the `content` directory, for example: `content/about.md` +* Keep media like images in the `static` directory, for example: `static/images/screenshot.png` + +## 2 Front Matter + +**Hugo** allows you to add front matter in `yaml`, `toml` or `json` to your content files. + +Here is a default front matter from the default archetype: + +```yaml +--- +title: "My First Post" +date: 2020-03-04T15:58:26+08:00 +lastmod: 2020-03-04T15:58:26+08:00 +draft: true +author: "" +authorLink: "" +description: "" +license: "" + +tags: [] +categories: [] +hiddenFromHomePage: false + +featuredImage: "" +featuredImagePreview: "" + +toc: false +autoCollapseToc: true +math: true +lightgallery: true +linkToMarkdown: true +share: + enable: true +comment: true +--- +``` + +* **title**: the title 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. +* **tags**: the tags for the content. +* **categories**: the categories for the content. +* **hiddenFromHomePage**: if `true`, the content will not be shown in the home page, but this behaviour is configurabl in the [site configuration](../theme-documentation-basics/#site-configuration). +* **featuredImage**: the featured image for the content. +* **featuredImagePreview**: the featured image for the content preview in the home page. +* **toc**: if `true`, the content will show the table of the contents. +* **autoCollapseToc**: if `true`, the table of the contents will be automatically collapsed. +* **math**: if `true`, the mathematical formula in the content will be automatically rendered. +* **lightgallery**: if `true`, images in the content will be shown as the gallery. +* **linkToMarkdown**: if `true`, the footer of the content will show the link to the orignal Markdown file. +* **share**: the same as `params.share` in the [site configuration](../theme-documentation-basics/#site-configuration). +* **comment**: if `true`, the comment will be used. + +## 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 block 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 + +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) + +### Font Awesome + +**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): Be back soon. + +That is so funny! {?:}(far fa-grin-tears): +``` + +The rendered output looks like this: + +Gone camping! :(fas fa-campground): 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)**. diff --git a/exampleSite/content/posts/theme-documentation-content.zh-cn.md b/exampleSite/content/posts/theme-documentation-content.zh-cn.md new file mode 100644 index 0000000..4b426bc --- /dev/null +++ b/exampleSite/content/posts/theme-documentation-content.zh-cn.md @@ -0,0 +1,293 @@ +--- +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 主题中快速, 直观地创建和组织内容." +license: "" + +tags: ["内容", "markdown"] +categories: ["documentation"] +hiddenFromHomePage: false + +featuredImage: "/images/theme-documentation-content/featured-image.jpg" +featuredImagePreview: "" + +toc: true +autoCollapseToc: false +math: true +lightgallery: true +linkToMarkdown: true +share: + enable: true +comment: true +--- + +了解如何在 **LoveIt** 主题中快速, 直观地创建和组织内容. + +<!--more--> + +## 1 内容组织 + +以下是一些方便你清晰管理和生成文章的目录结构建议: + +* 保持博客文章存放在 `content/posts` 目录, 例如: `content/posts/我的第一篇文章.md` +* 保持简单的静态页面存放在 `content` 目录, 例如: `content/about.md` +* 保持图片之类的媒体资源存放在 `static` 目录, 例如: `static/images/screenshot.png` + +## 2 前置参数 + +**Hugo** 允许你在文章内容前面添加 `yaml`, `toml` 或者 `json` 格式的前置参数. + +这是默认文章模板中的默认前置参数: + +```yaml +--- +title: "我的第一篇文章" +date: 2020-03-04T15:58:26+08:00 +lastmod: 2020-03-04T15:58:26+08:00 +draft: true +author: "" +authorLink: "" +description: "" +license: "" + +tags: [] +categories: [] +hiddenFromHomePage: false + +featuredImage: "" +featuredImagePreview: "" + +toc: false +autoCollapseToc: true +math: true +lightgallery: true +linkToMarkdown: true +share: + enable: true +comment: true +--- +``` + +* **title**: 文章标题. +* **date**: 这篇文章创建的日期时间. 它通常是从文章的前置参数中的 `date` 字段获取的, 但是也可以在 [网站配置](../theme-documentation-basics/#site-configuration) 中设置. +* **lastmod**: 上次修改内容的日期时间. +* **draft**: 如果设为 `true`, 除非 `hugo` 命令使用了 `--buildDrafts`/`-D` 参数, 这篇文章不会被渲染. +* **author**: 文章作者. +* **authorLink**: 文章作者的链接. +* **description**: 文章内容的描述. +* **license**: 这篇文章特殊的许可. +* **tags**: 文章的标签. +* **categories**: 文章所属的类别. +* **hiddenFromHomePage**: 如果设为 `true`, 这篇文章将不会显示在主页上, 但是此行为可以在 [网站配置](../theme-documentation-basics/#site-configuration) 中设置的. +* **featuredImage**: 文章的特色图片. +* **featuredImagePreview**: 用在主页预览的文章特色图片. +* **toc**: 如果设为 `true`, 这篇文章会显示右侧目录. +* **autoCollapseToc**: 如果设为 `true`, 文章目录会自动折叠. +* **math**: 如果设为 `true`, 将自动渲染文章中的数学公式. +* **lightgallery**: 如果设为 `true`, 文章中的图片将可以按照画廊形式呈现. +* **linkToMarkdown**: 如果设为 `true`, 内容的页脚将显示指向原始 Markdown 文件的链接. +* **share**: 和 [网站配置](../theme-documentation-basics/#site-configuration) 中的 `params.share` 对象相同. +* **comment**: 如果设为 `true`, 将启用评论系统. + +## 3 内容摘要 + +**LoveIt** 主题使用内容摘要在主页中显示大致文章信息。Hugo 支持生成文章的摘要. + +![文章摘要预览] Preview](/images/theme-documentation-content/summary.png "文章摘要预览") + +### 自动摘要拆分 + +默认情况下, 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} $ and \\( f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \\) +``` + +呈现的输出效果如下: + +$ 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 >}} +你可以在 [网站配置](../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-} $$ + +### 字符注音或者注释 + +**LoveIt** 主题支持一种 **字符注音或者注释** Markdown 扩展语法: + +```markdown +[Hugo]{?^}(一个开源的静态网站生成工具) +``` + +呈现的输出效果如下: + +[Hugo]^(一个开源的静态网站生成工具) + +### Font Awesome + +**LoveIt** 主题使用 [Font Awesome](https://fontawesome.com/) 作为图标库. +你同样可以在文章中轻松使用这些图标. + +从 [Font Awesome 网站](https://fontawesome.com/icons?d=gallery) 上获取所需的图标 `class`. + +```markdown +去露营啦! {?:}(fas fa-campground): 很快就回来. + +真开心! {?:}(far fa-grin-tears): +``` + +呈现的输出效果如下: + +去露营啦! :(fas fa-campground): 很快就回来. + +真开心! :(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)**. diff --git a/exampleSite/content/posts/theme-documentation-shortcodes.en.md b/exampleSite/content/posts/theme-documentation-shortcodes.en.md new file mode 100644 index 0000000..8aa9793 --- /dev/null +++ b/exampleSite/content/posts/theme-documentation-shortcodes.en.md @@ -0,0 +1,1172 @@ +--- +weight: 3 +title: "Theme Documentation - 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: "LoveIt theme provides multiple shortcodes on top of built-in ones in Hugo." +license: "" + +tags: ["shortcodes"] +categories: ["documentation"] +hiddenFromHomePage: false + +featuredImage: "/images/theme-documentation-shortcodes/featured-image.jpg" +featuredImagePreview: "" + +toc: true +autoCollapseToc: true +math: false +lightgallery: true +linkToMarkdown: true +share: + enable: true +comment: true +--- + +**LoveIt** theme provides multiple shortcodes on top of built-in ones in Hugo. + +<!--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’s Built-in Shortcodes + +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. + +### `figure` {#figure} + +[Documentation of `figure`](https://gohugo.io/content-management/shortcodes/#figure) + +Example `figure` Input: + +```markdown +{{</* figure src="/images/theme-documentation-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" */>}} +``` + +The rendered output looks like this: + +{{< figure src="/images/theme-documentation-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" >}} + +The HTML looks like this: + +```html +<figure> + <img src="/images/theme-documentation-shortcodes/lighthouse.jpg"/> + <figcaption> + <h4>Lighthouse (figure)</h4> + </figcaption> +</figure> +``` + +### `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> +``` + +### `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 >}} + +### `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 >}} + +### `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 >}} + +### `ref` and `relref` {#ref-and-relref} + +[Documentation of `ref` and `relref`](https://gohugo.io/content-management/shortcodes/#ref-and-relref) + +### `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 >}} + +### `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 >}} + +### `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 >}} + +## LoveIt Shortcodes + +**LoveIt** provides multiple shortcodes on top of existing ones. + +### `style` + +`style` is a shortcode to insert custom style in your post. + +The `style` shortcode can use two parameters. The first is the custom style content and the second is the HTML tag around the content you want to change style, and whose default value is `p`. + +Example `style` Input: + +```markdown +{{</* style "text-align: right" */>}} +This is a right-aligned paragraph. +{{</* /style */>}} +``` + +The rendered output looks like this: + +{{< style "text-align: right" >}} +This is a right-aligned paragraph. +{{< /style >}} + +### `image` + +`image` shortcode is an alternative to [`figure` shortcode](#figure). `image` shortcode can take full advantage of the dependent libraries of [lazysizes](https://github.com/aFarkas/lazysizes) and [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js). + +The `image` shortcode can use the following named parameters: + +* **src** + + URL of the image to be displayed. + +* **description** + + Image description. + +* **title** + + Image title. + +* **class** + + `class` attribute of the HTML `figure` tag. + +* **src_s** + + URL of the image thumbnail, used for lightgallery. + +* **src_l** + + URL of the HD image, used for lightgallery. + +Example `image` Input: + +```markdown +{{</* image src="/images/theme-documentation-shortcodes/lighthouse.jpg" title="Lighthouse (`image`)" src-s="/images/theme-documentation-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-shortcodes/lighthouse-large.jpg" */>}} +``` + +The rendered output looks like this: + +{{< image src="/images/theme-documentation-shortcodes/lighthouse.jpg" title="Lighthouse (`image`)" src-s="/images/theme-documentation-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-shortcodes/lighthouse-large.jpg" >}} + +### `admonition` + +The `admonition` shortcode supports **12** types of banners to help you put notice in your page and `Markdown` format is supported. + +{{< admonition >}} +A **note** banner +{{< /admonition >}} + +{{< admonition abstract >}} +An **abstract** banner +{{< /admonition >}} + +{{< admonition info >}} +A **info** banner +{{< /admonition >}} + +{{< admonition tip >}} +A **tip** banner +{{< /admonition >}} + +{{< admonition success >}} +A **success** banner +{{< /admonition >}} + +{{< admonition question >}} +A **question** banner +{{< /admonition >}} + +{{< admonition warning >}} +A **warning** banner +{{< /admonition >}} + +{{< admonition failure >}} +A **failure** banner +{{< /admonition >}} + +{{< admonition danger >}} +A **danger** banner +{{< /admonition >}} + +{{< admonition bug >}} +A **bug** banner +{{< /admonition >}} + +{{< admonition example >}} +An **example** banner +{{< /admonition >}} + +{{< admonition quote >}} +A **quote** banner +{{< /admonition >}} + +The `admonition` shortcode can use the following named parameters: + +* **type** + + Type of the `admonition` banner, default is **note** + +* **title** + + Title of the `admonition` banner, default is the type name of the banner + +* **details** + + if `true`, the content will be expandable/collapsible. + +You can also use the positional parameters in the order of **type**, **title** and **details**. + +Example `admonition` Input: + +```markdown +{{</* admonition type=tip title="This is a tip" details=true */>}} +A **tip** banner +{{</* /admonition */>}} +Or +{{</* admonition tip "This is a tip" true */>}} +A **tip** banner +{{</* /admonition */>}} +``` + +The rendered output looks like this: + +{{< admonition tip "This is a tip" true >}} +A **tip** banner +{{< /admonition >}} + +### `mermaid` + +[mermaid](https://mermaidjs.github.io/) is a library helping you to generate diagram and flowcharts from text, in a similar manner as Markdown. + +Just insert your mermaid code in the `mermaid` shortcode and that’s it. + +#### Flowchart {#flowchart} + +Example **flowchart** `mermaid` Input: + +```markdown +{{</* mermaid */>}} +graph LR; + A[Hard edge] -->|Link text| B(Round edge) + B --> C{Decision} + C -->|One| D[Result one] + C -->|Two| E[Result two] +{{</* /mermaid */>}} +``` + +The rendered output looks like this: + +{{< mermaid >}} +graph LR; + A[Hard edge] -->|Link text| B(Round edge) + B --> C{Decision} + C -->|One| D[Result one] + C -->|Two| E[Result two] +{{< /mermaid >}} + +#### Sequence Diagram {#sequence-diagram} + +Example **sequence diagram** `mermaid` Input: + +```markdown +{{</* mermaid */>}} +sequenceDiagram + participant Alice + participant Bob + Alice->>John: Hello John, how are you? + loop Healthcheck + John->John: Fight against hypochondria + end + Note right of John: Rational thoughts <br/>prevail... + John-->Alice: Great! + John->Bob: How about you? + Bob-->John: Jolly good! +{{</* /mermaid */>}} +``` + +The rendered output looks like this: + +{{< mermaid >}} +sequenceDiagram + participant Alice + participant Bob + Alice->>John: Hello John, how are you? + loop Healthcheck + John->John: Fight against hypochondria + end + Note right of John: Rational thoughts <br/>prevail... + John-->Alice: Great! + John->Bob: How about you? + Bob-->John: Jolly good! +{{< /mermaid >}} + +#### GANTT {#gantt} + +Example **GANTT** `mermaid` Input: + +```markdown +{{</* mermaid */>}} +gantt + dateFormat YYYY-MM-DD + title Adding GANTT diagram functionality to mermaid + section A section + Completed task :done, des1, 2014-01-06,2014-01-08 + Active task :active, des2, 2014-01-09, 3d + Future task : des3, after des2, 5d + Future task2 : des4, after des3, 5d + section Critical tasks + Completed task in the critical line :crit, done, 2014-01-06,24h + Implement parser and jison :crit, done, after des1, 2d + Create tests for parser :crit, active, 3d + Future task in critical line :crit, 5d + Create tests for renderer :2d + Add to mermaid :1d +{{</* /mermaid */>}} +``` + +The rendered output looks like this: + +{{< mermaid >}} +gantt + dateFormat YYYY-MM-DD + title Adding GANTT diagram functionality to mermaid + section A section + Completed task :done, des1, 2014-01-06,2014-01-08 + Active task :active, des2, 2014-01-09, 3d + Future task : des3, after des2, 5d + Future task2 : des4, after des3, 5d + section Critical tasks + Completed task in the critical line :crit, done, 2014-01-06,24h + Implement parser and jison :crit, done, after des1, 2d + Create tests for parser :crit, active, 3d + Future task in critical line :crit, 5d + Create tests for renderer :2d + Add to mermaid :1d +{{< /mermaid >}} + +#### Class Diagram {#class-diagram} + +Example **class diagram** `mermaid` Input: + +```markdown +{{</* mermaid */>}} +classDiagram + Class01 <|-- AveryLongClass : Cool + Class03 *-- Class04 + Class05 o-- Class06 + Class07 .. Class08 + Class09 --> C2 : Where am i? + Class09 --* C3 + Class09 --|> Class07 + Class07 : equals() + Class07 : Object[] elementData + Class01 : size() + Class01 : int chimp + Class01 : int gorilla + Class08 <--> C2: Cool label +{{</* /mermaid */>}} +``` + +The rendered output looks like this: + +{{< mermaid >}} +classDiagram + Class01 <|-- AveryLongClass : Cool + Class03 *-- Class04 + Class05 o-- Class06 + Class07 .. Class08 + Class09 --> C2 : Where am i? + Class09 --* C3 + Class09 --|> Class07 + Class07 : equals() + Class07 : Object[] elementData + Class01 : size() + Class01 : int chimp + Class01 : int gorilla + Class08 <--> C2: Cool label +{{< /mermaid >}} + +#### State Diagram {#state-diagram} + +Example **state diagram** `mermaid` Input: + +```markdown +{{</* mermaid */>}} +stateDiagram + [*] --> Still + Still --> [*] + Still --> Moving + Moving --> Still + Moving --> Crash + Crash --> [*] +{{</* /mermaid */>}} +``` + +The rendered output looks like this: + +{{< mermaid >}} +stateDiagram + [*] --> Still + Still --> [*] + Still --> Moving + Moving --> Still + Moving --> Crash + Crash --> [*] +{{< /mermaid >}} + +#### Git Graph {#git-graph} + +Example **git graph** `mermaid` Input: + +```markdown +{{</* mermaid */>}} +gitGraph: +options +{ + "nodeSpacing": 100, + "nodeRadius": 10 +} +end + commit + branch newbranch + checkout newbranch + commit + commit + checkout master + commit + commit + merge newbranch +{{</* /mermaid */>}} +``` + +The rendered output looks like this: + +{{< mermaid >}} +gitGraph: +options +{ + "nodeSpacing": 100, + "nodeRadius": 10 +} +end + commit + branch newbranch + checkout newbranch + commit + commit + checkout master + commit + commit + merge newbranch +{{< /mermaid >}} + +#### Pie {#pie} + +Example **pie** `mermaid` Input: + +```markdown +{{</* mermaid */>}} +pie + "Dogs" : 386 + "Cats" : 85 + "Rats" : 15 +{{</* /mermaid */>}} +``` + +The rendered output looks like this: + +{{< mermaid >}} +pie + "Dogs" : 386 + "Cats" : 85 + "Rats" : 15 +{{< /mermaid >}} + +### `echarts` + +[ECharts](https://echarts.apache.org/) is a library helping you to generate interactive data visualization. + +The basic chart types ECharts supports include [line series](https://echarts.apache.org/en/option.html#series-line), [bar series](https://echarts.apache.org/en/option.html#series-line), [scatter series](https://echarts.apache.org/en/option.html#series-scatter), [pie charts](https://echarts.apache.org/en/option.html#series-pie), [candle-stick series](https://echarts.apache.org/en/option.html#series-candlestick), [boxplot series](https://echarts.apache.org/en/option.html#series-boxplot) for statistics, [map series](https://echarts.apache.org/en/option.html#series-map), [heatmap series](https://echarts.apache.org/en/option.html#series-heatmap), [lines series](https://echarts.apache.org/en/option.html#series-lines) for directional information, [graph series](https://echarts.apache.org/en/option.html#series-graph) for relationships, [treemap series](https://echarts.apache.org/en/option.html#series-treemap), [sunburst series](https://echarts.apache.org/en/option.html#series-sunburst), [parallel series](https://echarts.apache.org/en/option.html#series-parallel) for multi-dimensional data, [funnel series](https://echarts.apache.org/en/option.html#series-funnel), [gauge series](https://echarts.apache.org/en/option.html#series-gauge). And it's extremely easy to create a combinition of them with ECharts. + +Just insert your ECharts option in `JSON`/`YAML`/`TOML` format in the `echarts` shortcode and that’s it. + +Example `echarts` Input in `JSON` format: + +```json +{{/* echarts */}} +{ + "title": { + "text": "Summary Line Chart", + "top": "2%", + "left": "center" + }, + "tooltip": { + "trigger": "axis" + }, + "legend": { + "data": ["Email Marketing", "Affiliate Advertising", "Video Advertising", "Direct View", "Search Engine"], + "top": "10%" + }, + "grid": { + "left": "5%", + "right": "5%", + "bottom": "5%", + "top": "20%", + "containLabel": true + }, + "toolbox": { + "feature": { + "saveAsImage": { + "title": "Save as Image" + } + } + }, + "xAxis": { + "type": "category", + "boundaryGap": false, + "data": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"] + }, + "yAxis": { + "type": "value" + }, + "series": [ + { + "name": "Email Marketing", + "type": "line", + "stack": "Total", + "data": [120, 132, 101, 134, 90, 230, 210] + }, + { + "name": "Affiliate Advertising", + "type": "line", + "stack": "Total", + "data": [220, 182, 191, 234, 290, 330, 310] + }, + { + "name": "Video Advertising", + "type": "line", + "stack": "Total", + "data": [150, 232, 201, 154, 190, 330, 410] + }, + { + "name": "Direct View", + "type": "line", + "stack": "Total", + "data": [320, 332, 301, 334, 390, 330, 320] + }, + { + "name": "Search Engine", + "type": "line", + "stack": "Total", + "data": [820, 932, 901, 934, 1290, 1330, 1320] + } + ] +} +{{</* /echarts */>}} +``` + +The same in `YAML` format: + +```yaml +{{</* echarts */>}} +title: + text: Summary Line Chart + top: 2% + left: center +tooltip: + trigger: axis +legend: + data: + - Email Marketing + - Affiliate Advertising + - Video Advertising + - Direct View + - Search Engine + top: 10% +grid: + left: 5% + right: 5% + bottom: 5% + top: 20% + containLabel: true +toolbox: + feature: + saveAsImage: + title: Save as Image +xAxis: + type: category + boundaryGap: false + data: + - Monday + - Tuesday + - Wednesday + - Thursday + - Friday + - Saturday + - Sunday +yAxis: + type: value +series: + - name: Email Marketing + type: line + stack: Total + data: + - 120 + - 132 + - 101 + - 134 + - 90 + - 230 + - 210 + - name: Affiliate Advertising + type: line + stack: Total + data: + - 220 + - 182 + - 191 + - 234 + - 290 + - 330 + - 310 + - name: Video Advertising + type: line + stack: Total + data: + - 150 + - 232 + - 201 + - 154 + - 190 + - 330 + - 410 + - name: Direct View + type: line + stack: Total + data: + - 320 + - 332 + - 301 + - 334 + - 390 + - 330 + - 320 + - name: Search Engine + type: line + stack: Total + data: + - 820 + - 932 + - 901 + - 934 + - 1290 + - 1330 + - 1320 +{{</* /echarts */>}} +``` + +The same in `TOML` format: + +```toml +{{</* echarts */>}} +[title] +text = "Summary Line Chart" +top = "2%" +left = "center" + +[tooltip] +trigger = "axis" + +[legend] +data = [ + "Email Marketing", + "Affiliate Advertising", + "Video Advertising", + "Direct View", + "Search Engine" +] +top = "10%" + +[grid] +left = "5%" +right = "5%" +bottom = "5%" +top = "20%" +containLabel = true + +[toolbox] +[toolbox.feature] +[toolbox.feature.saveAsImage] +title = "Save as Image" + +[xAxis] +type = "category" +boundaryGap = false +data = [ + "Monday", + "Tuesday", + "Wednesday", + "Thursday", + "Friday", + "Saturday", + "Sunday" +] + +[yAxis] +type = "value" + +[[series]] +name = "Email Marketing" +type = "line" +stack = "Total" +data = [ + 120.0, + 132.0, + 101.0, + 134.0, + 90.0, + 230.0, + 210.0 +] + +[[series]] +name = "Affiliate Advertising" +type = "line" +stack = "Total" +data = [ + 220.0, + 182.0, + 191.0, + 234.0, + 290.0, + 330.0, + 310.0 +] + +[[series]] +name = "Video Advertising" +type = "line" +stack = "Total" +data = [ + 150.0, + 232.0, + 201.0, + 154.0, + 190.0, + 330.0, + 410.0 +] + +[[series]] +name = "Direct View" +type = "line" +stack = "Total" +data = [ + 320.0, + 332.0, + 301.0, + 334.0, + 390.0, + 330.0, + 320.0 +] + +[[series]] +name = "Search Engine" +type = "line" +stack = "Total" +data = [ + 820.0, + 932.0, + 901.0, + 934.0, + 1290.0, + 1330.0, + 1320.0 +] +{{</* /echarts */>}} +``` + +The rendered output looks like this: + +{{< echarts >}} +{ + "title": { + "text": "Summary Line Chart", + "top": "2%", + "left": "center" + }, + "tooltip": { + "trigger": "axis" + }, + "legend": { + "data": ["Email Marketing", "Affiliate Advertising", "Video Advertising", "Direct View", "Search Engine"], + "top": "10%" + }, + "grid": { + "left": "5%", + "right": "5%", + "bottom": "5%", + "top": "20%", + "containLabel": true + }, + "toolbox": { + "feature": { + "saveAsImage": { + "title": "Save as Image" + } + } + }, + "xAxis": { + "type": "category", + "boundaryGap": false, + "data": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"] + }, + "yAxis": { + "type": "value" + }, + "series": [ + { + "name": "Email Marketing", + "type": "line", + "stack": "Total", + "data": [120, 132, 101, 134, 90, 230, 210] + }, + { + "name": "Affiliate Advertising", + "type": "line", + "stack": "Total", + "data": [220, 182, 191, 234, 290, 330, 310] + }, + { + "name": "Video Advertising", + "type": "line", + "stack": "Total", + "data": [150, 232, 201, 154, 190, 330, 410] + }, + { + "name": "Direct View", + "type": "line", + "stack": "Total", + "data": [320, 332, 301, 334, 390, 330, 320] + }, + { + "name": "Search Engine", + "type": "line", + "stack": "Total", + "data": [820, 932, 901, 934, 1290, 1330, 1320] + } + ] +} +{{< /echarts >}} + +### `music` + +The `music` shortcode embeds a responsive music player based on [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS). + +The `music` shortcode can use the following named parameters: + +|parameter |default |description| +|:---------------|:------------:|:----------| +|url |**require** |music URL| +|name |options |music name| +|artist |options |music artist| +|cover |options |music cover URL| +|server |**require** |music platform: `netease`, `tencent`, `kugou`, `xiami`, `baidu`| +|type |**require** |`song`, `playlist`, `album`, `search`, `artist`| +|id |**require** |song id / playlist id / album id / search keyword| +|auto |options |music link, support: `netease`, `tencent`, `xiami`| +|fixed |`false` |enable fixed mode| +|mini |`false` |enable mini mode| +|autoplay |`false` |audio autoplay| +|theme |`#a9a9b3` |main color| +|loop |`all` |player loop play, values: 'all', 'one', 'none'| +|order |`list` |player play order, values: 'list', 'random'| +|volume |`0.7` |default volume, notice that player will remember user setting, default volume will not work after user set volume themselves| +|mutex |`true` |prevent to play multiple player at the same time, pause other players when this player start play| +|list-folded |`false` |indicate whether list should folded at first| +|list-max-height |`340px` |list max height| + +#### Custom Music URL {#custom-music-url} + +Example `music` Input: + +```markdown +{{</* music url="https://rainymood.com/audio1110/0.m4a" name=rainymood artist=rainymood cover="https://rainymood.com/i/badge.jpg" */>}} +``` + +The rendered output looks like this: + +{{< music url="https://rainymood.com/audio1110/0.m4a" name=rainymood artist=rainymood cover="https://rainymood.com/i/badge.jpg" >}} + +#### Music Platform URL Automatic Identification {#automatic-identification} + +Example `music` Input: + +```markdown +{{</* music auto="https://music.163.com/#/playlist?id=60198" */>}} +Or +{{</* music "https://music.163.com/#/playlist?id=60198" */>}} +``` + +The rendered output looks like this: + +{{< music auto="https://music.163.com/#/playlist?id=60198" >}} + +#### Custom Server, Type and ID {#custom-server} + +Example `music` Input: + +```markdown +{{</* music server="netease" type="song" id="1868553" */>}} +Or +{{</* music netease song 1868553 */>}} +``` + +The rendered output looks like this: + +{{< music netease song 1868553 >}} + +### `bilibili` + +The `bilibili` shortcode embeds a responsive video player for bilibili videos. + +When the video only has one part, only the `av` ID of the video is required, e.g.: + +```code +https://www.bilibili.com/video/av47027633 +``` + +Example `bilibili` Input: + +```markdown +{{</* bilibili 47027633 */>}} +Or +{{</* bilibili av=47027633 */>}} +``` + +The rendered output looks like this: + +{{< bilibili av=47027633 >}} + +When the video has multiple parts, in addition to the `av` ID of the video, +`p` is also required, whose default value is `1`, e.g.: + +```code +https://www.bilibili.com/video/av36570401?p=3 +``` + +Example `bilibili` Input with `p`: + +```markdown +{{</* bilibili 36570401 3 */>}} +Or +{{</* bilibili av=36570401 p=3 */>}} +``` + +The rendered output looks like this: + +{{< bilibili av=36570401 p=3 >}} + +### `typeit` + +The `typeit` shortcode provides typing animation based on [TypeIt](https://typeitjs.com/). + +Just insert your content in the `typeit` shortcode and that’s it. + +#### Simple Content {#simple-content} + +Simple content is allowed in `Markdown` format and **without** rich block content such as images and more... + +Example `typeit` Input: + +```markdown +{{</* typeit */>}} +This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)... +{{</* /typeit */>}} +``` + +The rendered output looks like this: + +{{< typeit >}} +This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)... +{{< /typeit >}} + +Alternatively, you can use custom **HTML tags**. + +Example `typeit` Input with `h4` tag: + +```markdown +{{</* typeit tag=h4 */>}} +This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)... +{{</* /typeit */>}} +``` + +The rendered output looks like this: + +{{< typeit tag=h4 >}} +This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)... +{{< /typeit >}} + +#### Code Content {#code-content} + +Code content is allowed and will be highlighted by named parameter `code` for the type of code language. + +Example `typeit` Input with `code`: + +```markdown +{{</* typeit code=java */>}} +public class HelloWorld { + public static void main(String []args) { + System.out.println("Hello World"); + } +} +{{</* /typeit */>}} +``` + +The rendered output looks like this: + +{{< typeit code=java >}} +public class HelloWorld { + public static void main(String []args) { + System.out.println("Hello World"); + } +} +{{< /typeit >}} + +#### Group Content {#group-content} + +All typing animations start at the same time by default. +But sometimes you may want to start a set of `typeit` contents in order. + +A set of `typeit` contents with the same value of named parameter `group` will start typing animation in sequence. + +Example `typeit` Input with `group`: + +```markdown +{{</* typeit group=paragraph */>}} +**First** this paragraph begins +{{</* /typeit */>}} + +{{</* typeit group=paragraph */>}} +**Then** this paragraph begins +{{</* /typeit */>}} +``` + +The rendered output looks like this: + +{{< typeit group=paragraph >}} +**First** this paragraph begins +{{< /typeit >}} + +{{< typeit group=paragraph >}} +**Then** this paragraph begins +{{< /typeit >}} diff --git a/exampleSite/content/posts/theme-documentation-shortcodes.fr.md b/exampleSite/content/posts/theme-documentation-shortcodes.fr.md new file mode 100644 index 0000000..9be2f2e --- /dev/null +++ b/exampleSite/content/posts/theme-documentation-shortcodes.fr.md @@ -0,0 +1,1177 @@ +--- +weight: 3 +title: "Thème Documentation - 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: "Le thème LoveIt fournit plusieurs shortcodes en plus de ceux intégrés dans Hugo." +license: "" + +tags: ["shortcodes"] +categories: ["documentation"] +hiddenFromHomePage: false + +featuredImage: "/images/theme-documentation-shortcodes/featured-image.jpg" +featuredImagePreview: "" + +toc: true +autoCollapseToc: true +math: false +lightgallery: true +linkToMarkdown: true +share: + enable: true +comment: true +--- + +Le thème **LoveIt** fournit plusieurs shortcodes en plus de ceux intégrés dans Hugo. + +<!--more--> + +{{< admonition warning >}} +Sorry, this article has not been completely translated into **French**. +Welcome to take the time to propose a translation by [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’s Built-in Shortcodes + +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. + +### `figure` {#figure} + +[Documentation of `figure`](https://gohugo.io/content-management/shortcodes/#figure) + +Example `figure` Input: + +```markdown +{{</* figure src="/images/theme-documentation-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" */>}} +``` + +The rendered output looks like this: + +{{< figure src="/images/theme-documentation-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" >}} + +The HTML looks like this: + +```html +<figure> + <img src="/images/theme-documentation-shortcodes/lighthouse.jpg"/> + <figcaption> + <h4>Lighthouse (figure)</h4> + </figcaption> +</figure> +``` + +### `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> +``` + +### `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 >}} + +### `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 >}} + +### `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 >}} + +### `ref` and `relref` {#ref-and-relref} + +[Documentation of `ref` and `relref`](https://gohugo.io/content-management/shortcodes/#ref-and-relref) + +### `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 >}} + +### `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 >}} + +### `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 >}} + +## LoveIt Shortcodes + +**LoveIt** provides multiple shortcodes on top of existing ones. + +### `style` + +`style` is a shortcode to insert custom style in your post. + +The `style` shortcode can use two parameters. The first is the custom style content and the second is the HTML tag around the content you want to change style, and whose default value is `p`. + +Example `style` Input: + +```markdown +{{</* style "text-align: right" */>}} +This is a right-aligned paragraph. +{{</* /style */>}} +``` + +The rendered output looks like this: + +{{< style "text-align: right" >}} +This is a right-aligned paragraph. +{{< /style >}} + +### `image` + +`image` shortcode is an alternative to [`figure` shortcode](#figure). `image` shortcode can take full advantage of the dependent libraries of [lazysizes](https://github.com/aFarkas/lazysizes) and [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js). + +The `image` shortcode can use the following named parameters: + +* **src** + + URL of the image to be displayed. + +* **description** + + Image description. + +* **title** + + Image title. + +* **class** + + `class` attribute of the HTML `figure` tag. + +* **src_s** + + URL of the image thumbnail, used for lightgallery. + +* **src_l** + + URL of the HD image, used for lightgallery. + +Example `image` Input: + +```markdown +{{</* image src="/images/theme-documentation-shortcodes/lighthouse.jpg" title="Lighthouse (`image`)" src-s="/images/theme-documentation-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-shortcodes/lighthouse-large.jpg" */>}} +``` + +The rendered output looks like this: + +{{< image src="/images/theme-documentation-shortcodes/lighthouse.jpg" title="Lighthouse (`image`)" src-s="/images/theme-documentation-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-shortcodes/lighthouse-large.jpg" >}} + +### `admonition` + +The `admonition` shortcode supports **12** types of banners to help you put notice in your page and `Markdown` format is supported. + +{{< admonition >}} +A **note** banner +{{< /admonition >}} + +{{< admonition abstract >}} +An **abstract** banner +{{< /admonition >}} + +{{< admonition info >}} +A **info** banner +{{< /admonition >}} + +{{< admonition tip >}} +A **tip** banner +{{< /admonition >}} + +{{< admonition success >}} +A **success** banner +{{< /admonition >}} + +{{< admonition question >}} +A **question** banner +{{< /admonition >}} + +{{< admonition warning >}} +A **warning** banner +{{< /admonition >}} + +{{< admonition failure >}} +A **failure** banner +{{< /admonition >}} + +{{< admonition danger >}} +A **danger** banner +{{< /admonition >}} + +{{< admonition bug >}} +A **bug** banner +{{< /admonition >}} + +{{< admonition example >}} +An **example** banner +{{< /admonition >}} + +{{< admonition quote >}} +A **quote** banner +{{< /admonition >}} + +The `admonition` shortcode can use the following named parameters: + +* **type** + + Type of the `admonition` banner, default is **note** + +* **title** + + Title of the `admonition` banner, default is the type name of the banner + +* **details** + + if `true`, the content will be expandable/collapsible. + +You can also use the positional parameters in the order of **type**, **title** and **details**. + +Example `admonition` Input: + +```markdown +{{</* admonition type=tip title="This is a tip" details=true */>}} +A **tip** banner +{{</* /admonition */>}} +Or +{{</* admonition tip "This is a tip" true */>}} +A **tip** banner +{{</* /admonition */>}} +``` + +The rendered output looks like this: + +{{< admonition tip "This is a tip" true >}} +A **tip** banner +{{< /admonition >}} + +### `mermaid` + +[mermaid](https://mermaidjs.github.io/) is a library helping you to generate diagram and flowcharts from text, in a similar manner as Markdown. + +Just insert your mermaid code in the `mermaid` shortcode and that’s it. + +#### Flowchart {#flowchart} + +Example **flowchart** `mermaid` Input: + +```markdown +{{</* mermaid */>}} +graph LR; + A[Hard edge] -->|Link text| B(Round edge) + B --> C{Decision} + C -->|One| D[Result one] + C -->|Two| E[Result two] +{{</* /mermaid */>}} +``` + +The rendered output looks like this: + +{{< mermaid >}} +graph LR; + A[Hard edge] -->|Link text| B(Round edge) + B --> C{Decision} + C -->|One| D[Result one] + C -->|Two| E[Result two] +{{< /mermaid >}} + +#### Sequence Diagram {#sequence-diagram} + +Example **sequence diagram** `mermaid` Input: + +```markdown +{{</* mermaid */>}} +sequenceDiagram + participant Alice + participant Bob + Alice->>John: Hello John, how are you? + loop Healthcheck + John->John: Fight against hypochondria + end + Note right of John: Rational thoughts <br/>prevail... + John-->Alice: Great! + John->Bob: How about you? + Bob-->John: Jolly good! +{{</* /mermaid */>}} +``` + +The rendered output looks like this: + +{{< mermaid >}} +sequenceDiagram + participant Alice + participant Bob + Alice->>John: Hello John, how are you? + loop Healthcheck + John->John: Fight against hypochondria + end + Note right of John: Rational thoughts <br/>prevail... + John-->Alice: Great! + John->Bob: How about you? + Bob-->John: Jolly good! +{{< /mermaid >}} + +#### GANTT {#gantt} + +Example **GANTT** `mermaid` Input: + +```markdown +{{</* mermaid */>}} +gantt + dateFormat YYYY-MM-DD + title Adding GANTT diagram functionality to mermaid + section A section + Completed task :done, des1, 2014-01-06,2014-01-08 + Active task :active, des2, 2014-01-09, 3d + Future task : des3, after des2, 5d + Future task2 : des4, after des3, 5d + section Critical tasks + Completed task in the critical line :crit, done, 2014-01-06,24h + Implement parser and jison :crit, done, after des1, 2d + Create tests for parser :crit, active, 3d + Future task in critical line :crit, 5d + Create tests for renderer :2d + Add to mermaid :1d +{{</* /mermaid */>}} +``` + +The rendered output looks like this: + +{{< mermaid >}} +gantt + dateFormat YYYY-MM-DD + title Adding GANTT diagram functionality to mermaid + section A section + Completed task :done, des1, 2014-01-06,2014-01-08 + Active task :active, des2, 2014-01-09, 3d + Future task : des3, after des2, 5d + Future task2 : des4, after des3, 5d + section Critical tasks + Completed task in the critical line :crit, done, 2014-01-06,24h + Implement parser and jison :crit, done, after des1, 2d + Create tests for parser :crit, active, 3d + Future task in critical line :crit, 5d + Create tests for renderer :2d + Add to mermaid :1d +{{< /mermaid >}} + +#### Class Diagram {#class-diagram} + +Example **class diagram** `mermaid` Input: + +```markdown +{{</* mermaid */>}} +classDiagram + Class01 <|-- AveryLongClass : Cool + Class03 *-- Class04 + Class05 o-- Class06 + Class07 .. Class08 + Class09 --> C2 : Where am i? + Class09 --* C3 + Class09 --|> Class07 + Class07 : equals() + Class07 : Object[] elementData + Class01 : size() + Class01 : int chimp + Class01 : int gorilla + Class08 <--> C2: Cool label +{{</* /mermaid */>}} +``` + +The rendered output looks like this: + +{{< mermaid >}} +classDiagram + Class01 <|-- AveryLongClass : Cool + Class03 *-- Class04 + Class05 o-- Class06 + Class07 .. Class08 + Class09 --> C2 : Where am i? + Class09 --* C3 + Class09 --|> Class07 + Class07 : equals() + Class07 : Object[] elementData + Class01 : size() + Class01 : int chimp + Class01 : int gorilla + Class08 <--> C2: Cool label +{{< /mermaid >}} + +#### State Diagram {#state-diagram} + +Example **state diagram** `mermaid` Input: + +```markdown +{{</* mermaid */>}} +stateDiagram + [*] --> Still + Still --> [*] + Still --> Moving + Moving --> Still + Moving --> Crash + Crash --> [*] +{{</* /mermaid */>}} +``` + +The rendered output looks like this: + +{{< mermaid >}} +stateDiagram + [*] --> Still + Still --> [*] + Still --> Moving + Moving --> Still + Moving --> Crash + Crash --> [*] +{{< /mermaid >}} + +#### Git Graph {#git-graph} + +Example **git graph** `mermaid` Input: + +```markdown +{{</* mermaid */>}} +gitGraph: +options +{ + "nodeSpacing": 100, + "nodeRadius": 10 +} +end + commit + branch newbranch + checkout newbranch + commit + commit + checkout master + commit + commit + merge newbranch +{{</* /mermaid */>}} +``` + +The rendered output looks like this: + +{{< mermaid >}} +gitGraph: +options +{ + "nodeSpacing": 100, + "nodeRadius": 10 +} +end + commit + branch newbranch + checkout newbranch + commit + commit + checkout master + commit + commit + merge newbranch +{{< /mermaid >}} + +#### Pie {#pie} + +Example **pie** `mermaid` Input: + +```markdown +{{</* mermaid */>}} +pie + "Dogs" : 386 + "Cats" : 85 + "Rats" : 15 +{{</* /mermaid */>}} +``` + +The rendered output looks like this: + +{{< mermaid >}} +pie + "Dogs" : 386 + "Cats" : 85 + "Rats" : 15 +{{< /mermaid >}} + +### `echarts` + +[ECharts](https://echarts.apache.org/) is a library helping you to generate interactive data visualization. + +The basic chart types ECharts supports include [line series](https://echarts.apache.org/en/option.html#series-line), [bar series](https://echarts.apache.org/en/option.html#series-line), [scatter series](https://echarts.apache.org/en/option.html#series-scatter), [pie charts](https://echarts.apache.org/en/option.html#series-pie), [candle-stick series](https://echarts.apache.org/en/option.html#series-candlestick), [boxplot series](https://echarts.apache.org/en/option.html#series-boxplot) for statistics, [map series](https://echarts.apache.org/en/option.html#series-map), [heatmap series](https://echarts.apache.org/en/option.html#series-heatmap), [lines series](https://echarts.apache.org/en/option.html#series-lines) for directional information, [graph series](https://echarts.apache.org/en/option.html#series-graph) for relationships, [treemap series](https://echarts.apache.org/en/option.html#series-treemap), [sunburst series](https://echarts.apache.org/en/option.html#series-sunburst), [parallel series](https://echarts.apache.org/en/option.html#series-parallel) for multi-dimensional data, [funnel series](https://echarts.apache.org/en/option.html#series-funnel), [gauge series](https://echarts.apache.org/en/option.html#series-gauge). And it's extremely easy to create a combinition of them with ECharts. + +Just insert your ECharts option in `JSON`/`YAML`/`TOML` format in the `echarts` shortcode and that’s it. + +Example `echarts` Input in `JSON` format: + +```json +{{/* echarts */}} +{ + "title": { + "text": "Summary Line Chart", + "top": "2%", + "left": "center" + }, + "tooltip": { + "trigger": "axis" + }, + "legend": { + "data": ["Email Marketing", "Affiliate Advertising", "Video Advertising", "Direct View", "Search Engine"], + "top": "10%" + }, + "grid": { + "left": "5%", + "right": "5%", + "bottom": "5%", + "top": "20%", + "containLabel": true + }, + "toolbox": { + "feature": { + "saveAsImage": { + "title": "Save as Image" + } + } + }, + "xAxis": { + "type": "category", + "boundaryGap": false, + "data": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"] + }, + "yAxis": { + "type": "value" + }, + "series": [ + { + "name": "Email Marketing", + "type": "line", + "stack": "Total", + "data": [120, 132, 101, 134, 90, 230, 210] + }, + { + "name": "Affiliate Advertising", + "type": "line", + "stack": "Total", + "data": [220, 182, 191, 234, 290, 330, 310] + }, + { + "name": "Video Advertising", + "type": "line", + "stack": "Total", + "data": [150, 232, 201, 154, 190, 330, 410] + }, + { + "name": "Direct View", + "type": "line", + "stack": "Total", + "data": [320, 332, 301, 334, 390, 330, 320] + }, + { + "name": "Search Engine", + "type": "line", + "stack": "Total", + "data": [820, 932, 901, 934, 1290, 1330, 1320] + } + ] +} +{{</* /echarts */>}} +``` + +The same in `YAML` format: + +```yaml +{{</* echarts */>}} +title: + text: Summary Line Chart + top: 2% + left: center +tooltip: + trigger: axis +legend: + data: + - Email Marketing + - Affiliate Advertising + - Video Advertising + - Direct View + - Search Engine + top: 10% +grid: + left: 5% + right: 5% + bottom: 5% + top: 20% + containLabel: true +toolbox: + feature: + saveAsImage: + title: Save as Image +xAxis: + type: category + boundaryGap: false + data: + - Monday + - Tuesday + - Wednesday + - Thursday + - Friday + - Saturday + - Sunday +yAxis: + type: value +series: + - name: Email Marketing + type: line + stack: Total + data: + - 120 + - 132 + - 101 + - 134 + - 90 + - 230 + - 210 + - name: Affiliate Advertising + type: line + stack: Total + data: + - 220 + - 182 + - 191 + - 234 + - 290 + - 330 + - 310 + - name: Video Advertising + type: line + stack: Total + data: + - 150 + - 232 + - 201 + - 154 + - 190 + - 330 + - 410 + - name: Direct View + type: line + stack: Total + data: + - 320 + - 332 + - 301 + - 334 + - 390 + - 330 + - 320 + - name: Search Engine + type: line + stack: Total + data: + - 820 + - 932 + - 901 + - 934 + - 1290 + - 1330 + - 1320 +{{</* /echarts */>}} +``` + +The same in `TOML` format: + +```toml +{{</* echarts */>}} +[title] +text = "Summary Line Chart" +top = "2%" +left = "center" + +[tooltip] +trigger = "axis" + +[legend] +data = [ + "Email Marketing", + "Affiliate Advertising", + "Video Advertising", + "Direct View", + "Search Engine" +] +top = "10%" + +[grid] +left = "5%" +right = "5%" +bottom = "5%" +top = "20%" +containLabel = true + +[toolbox] +[toolbox.feature] +[toolbox.feature.saveAsImage] +title = "Save as Image" + +[xAxis] +type = "category" +boundaryGap = false +data = [ + "Monday", + "Tuesday", + "Wednesday", + "Thursday", + "Friday", + "Saturday", + "Sunday" +] + +[yAxis] +type = "value" + +[[series]] +name = "Email Marketing" +type = "line" +stack = "Total" +data = [ + 120.0, + 132.0, + 101.0, + 134.0, + 90.0, + 230.0, + 210.0 +] + +[[series]] +name = "Affiliate Advertising" +type = "line" +stack = "Total" +data = [ + 220.0, + 182.0, + 191.0, + 234.0, + 290.0, + 330.0, + 310.0 +] + +[[series]] +name = "Video Advertising" +type = "line" +stack = "Total" +data = [ + 150.0, + 232.0, + 201.0, + 154.0, + 190.0, + 330.0, + 410.0 +] + +[[series]] +name = "Direct View" +type = "line" +stack = "Total" +data = [ + 320.0, + 332.0, + 301.0, + 334.0, + 390.0, + 330.0, + 320.0 +] + +[[series]] +name = "Search Engine" +type = "line" +stack = "Total" +data = [ + 820.0, + 932.0, + 901.0, + 934.0, + 1290.0, + 1330.0, + 1320.0 +] +{{</* /echarts */>}} +``` + +The rendered output looks like this: + +{{< echarts >}} +{ + "title": { + "text": "Summary Line Chart", + "top": "2%", + "left": "center" + }, + "tooltip": { + "trigger": "axis" + }, + "legend": { + "data": ["Email Marketing", "Affiliate Advertising", "Video Advertising", "Direct View", "Search Engine"], + "top": "10%" + }, + "grid": { + "left": "5%", + "right": "5%", + "bottom": "5%", + "top": "20%", + "containLabel": true + }, + "toolbox": { + "feature": { + "saveAsImage": { + "title": "Save as Image" + } + } + }, + "xAxis": { + "type": "category", + "boundaryGap": false, + "data": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"] + }, + "yAxis": { + "type": "value" + }, + "series": [ + { + "name": "Email Marketing", + "type": "line", + "stack": "Total", + "data": [120, 132, 101, 134, 90, 230, 210] + }, + { + "name": "Affiliate Advertising", + "type": "line", + "stack": "Total", + "data": [220, 182, 191, 234, 290, 330, 310] + }, + { + "name": "Video Advertising", + "type": "line", + "stack": "Total", + "data": [150, 232, 201, 154, 190, 330, 410] + }, + { + "name": "Direct View", + "type": "line", + "stack": "Total", + "data": [320, 332, 301, 334, 390, 330, 320] + }, + { + "name": "Search Engine", + "type": "line", + "stack": "Total", + "data": [820, 932, 901, 934, 1290, 1330, 1320] + } + ] +} +{{< /echarts >}} + +### `music` + +The `music` shortcode embeds a responsive music player based on [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS). + +The `music` shortcode can use the following named parameters: + +|parameter |default |description| +|:---------------|:------------:|:----------| +|url |**require** |music URL| +|name |options |music name| +|artist |options |music artist| +|cover |options |music cover URL| +|server |**require** |music platform: `netease`, `tencent`, `kugou`, `xiami`, `baidu`| +|type |**require** |`song`, `playlist`, `album`, `search`, `artist`| +|id |**require** |song id / playlist id / album id / search keyword| +|auto |options |music link, support: `netease`, `tencent`, `xiami`| +|fixed |`false` |enable fixed mode| +|mini |`false` |enable mini mode| +|autoplay |`false` |audio autoplay| +|theme |`#a9a9b3` |main color| +|loop |`all` |player loop play, values: 'all', 'one', 'none'| +|order |`list` |player play order, values: 'list', 'random'| +|volume |`0.7` |default volume, notice that player will remember user setting, default volume will not work after user set volume themselves| +|mutex |`true` |prevent to play multiple player at the same time, pause other players when this player start play| +|list-folded |`false` |indicate whether list should folded at first| +|list-max-height |`340px` |list max height| + +#### Custom Music URL {#custom-music-url} + +Example `music` Input: + +```markdown +{{</* music url="https://rainymood.com/audio1110/0.m4a" name=rainymood artist=rainymood cover="https://rainymood.com/i/badge.jpg" */>}} +``` + +The rendered output looks like this: + +{{< music url="https://rainymood.com/audio1110/0.m4a" name=rainymood artist=rainymood cover="https://rainymood.com/i/badge.jpg" >}} + +#### Music Platform URL Automatic Identification {#automatic-identification} + +Example `music` Input: + +```markdown +{{</* music auto="https://music.163.com/#/playlist?id=60198" */>}} +Or +{{</* music "https://music.163.com/#/playlist?id=60198" */>}} +``` + +The rendered output looks like this: + +{{< music auto="https://music.163.com/#/playlist?id=60198" >}} + +#### Custom Server, Type and ID {#custom-server} + +Example `music` Input: + +```markdown +{{</* music server="netease" type="song" id="1868553" */>}} +Or +{{</* music netease song 1868553 */>}} +``` + +The rendered output looks like this: + +{{< music netease song 1868553 >}} + +### `bilibili` + +The `bilibili` shortcode embeds a responsive video player for bilibili videos. + +When the video only has one part, only the `av` ID of the video is required, e.g.: + +```code +https://www.bilibili.com/video/av47027633 +``` + +Example `bilibili` Input: + +```markdown +{{</* bilibili 47027633 */>}} +Or +{{</* bilibili av=47027633 */>}} +``` + +The rendered output looks like this: + +{{< bilibili av=47027633 >}} + +When the video has multiple parts, in addition to the `av` ID of the video, +`p` is also required, whose default value is `1`, e.g.: + +```code +https://www.bilibili.com/video/av36570401?p=3 +``` + +Example `bilibili` Input with `p`: + +```markdown +{{</* bilibili 36570401 3 */>}} +Or +{{</* bilibili av=36570401 p=3 */>}} +``` + +The rendered output looks like this: + +{{< bilibili av=36570401 p=3 >}} + +### `typeit` + +The `typeit` shortcode provides typing animation based on [TypeIt](https://typeitjs.com/). + +Just insert your content in the `typeit` shortcode and that’s it. + +#### Simple Content {#simple-content} + +Simple content is allowed in `Markdown` format and **without** rich block content such as images and more... + +Example `typeit` Input: + +```markdown +{{</* typeit */>}} +This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)... +{{</* /typeit */>}} +``` + +The rendered output looks like this: + +{{< typeit >}} +This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)... +{{< /typeit >}} + +Alternatively, you can use custom **HTML tags**. + +Example `typeit` Input with `h4` tag: + +```markdown +{{</* typeit tag=h4 */>}} +This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)... +{{</* /typeit */>}} +``` + +The rendered output looks like this: + +{{< typeit tag=h4 >}} +This is a *paragraph* with **typing animation** based on [TypeIt](https://typeitjs.com/)... +{{< /typeit >}} + +#### Code Content {#code-content} + +Code content is allowed and will be highlighted by named parameter `code` for the type of code language. + +Example `typeit` Input with `code`: + +```markdown +{{</* typeit code=java */>}} +public class HelloWorld { + public static void main(String []args) { + System.out.println("Hello World"); + } +} +{{</* /typeit */>}} +``` + +The rendered output looks like this: + +{{< typeit code=java >}} +public class HelloWorld { + public static void main(String []args) { + System.out.println("Hello World"); + } +} +{{< /typeit >}} + +#### Group Content {#group-content} + +All typing animations start at the same time by default. +But sometimes you may want to start a set of `typeit` contents in order. + +A set of `typeit` contents with the same value of named parameter `group` will start typing animation in sequence. + +Example `typeit` Input with `group`: + +```markdown +{{</* typeit group=paragraph */>}} +**First** this paragraph begins +{{</* /typeit */>}} + +{{</* typeit group=paragraph */>}} +**Then** this paragraph begins +{{</* /typeit */>}} +``` + +The rendered output looks like this: + +{{< typeit group=paragraph >}} +**First** this paragraph begins +{{< /typeit >}} + +{{< typeit group=paragraph >}} +**Then** this paragraph begins +{{< /typeit >}} diff --git a/exampleSite/content/posts/theme-documentation-shortcodes.zh-cn.md b/exampleSite/content/posts/theme-documentation-shortcodes.zh-cn.md new file mode 100644 index 0000000..b05861d --- /dev/null +++ b/exampleSite/content/posts/theme-documentation-shortcodes.zh-cn.md @@ -0,0 +1,1173 @@ +--- +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: "LoveIt 主题在 Hugo 内置的 shortcode 的基础上提供多个新的 shortcode." +license: "" + +tags: ["shortcodes"] +categories: ["documentation"] +hiddenFromHomePage: false + +featuredImage: "/images/theme-documentation-shortcodes/featured-image.jpg" +featuredImagePreview: "" + +toc: true +autoCollapseToc: true +math: false +lightgallery: true +linkToMarkdown: true +share: + enable: true +comment: true +--- + +**LoveIt** 主题在 Hugo 内置的 shortcode 的基础上提供多个新的 shortcode. + +<!--more--> + +Hugo 使用 Markdown 为其简单的内容格式. 但是, Markdown 在很多方面都无法很好地支持. 你可以使用纯 HTML 来扩展可能性. + +但这恰好是一个坏主意. 大家使用 Markdown, 正是因为它即使不经过渲染也可以轻松阅读. 应该尽可能避免使用 HTML 以保持内容简洁. + +为了避免这种限制, Hugo 创建了 [shortcodes](https://gohugo.io/extras/shortcodes/). +shortcode 是一个简单代码段, 可以生成合理的 HTML 代码, 并且符合 Markdown 的设计哲学. + +## Hugo 内置 shortcodes {#hugo} + +Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见的用法. +提供这些 shortcodes 是为了方便保持你的 Markdown 内容简洁. + +### `figure` {#figure} + +[`figure` 的文档](https://gohugo.io/content-management/shortcodes/#figure) + +一个 `figure` 示例: + +```markdown +{{</* figure src="/images/theme-documentation-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" */>}} +``` + +呈现的输出效果如下: + +{{< figure src="/images/theme-documentation-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" >}} + +输出的 HTML 看起来像这样: + +```html +<figure> + <img src="/images/theme-documentation-shortcodes/lighthouse.jpg"/> + <figcaption> + <h4>Lighthouse (figure)</h4> + </figcaption> +</figure> +``` + +### `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> +``` + +### `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 >}} + +### `instagram` + +[`instagram` 的文档](https://gohugo.io/content-management/shortcodes/#instagram) + +一个 `instagram` 示例: + +```markdown +{{</* instagram BWNjjyYFxVx hidecaption */>}} +``` + +呈现的输出效果如下: + +{{< instagram BWNjjyYFxVx hidecaption >}} + +### `param` + +[`param` 的文档](https://gohugo.io/content-management/shortcodes/#param) + +一个 `param` 示例: + +```markdown +{{</* param description */>}} +``` + +呈现的输出效果如下: + +{{< param description >}} + +### `ref` 和 `relref` {#ref-and-relref} + +[`ref` 和 `relref` 的文档](https://gohugo.io/content-management/shortcodes/#ref-and-relref) + +### `tweet` + +[`tweet` 的文档](https://gohugo.io/content-management/shortcodes/#tweet) + +一个 `tweet` 示例: + +```markdown +{{</* tweet 877500564405444608 */>}} +``` + +呈现的输出效果如下: + +{{< tweet 877500564405444608 >}} + +### `vimeo` + +[`vimeo` 的文档](https://gohugo.io/content-management/shortcodes/#vimeo) + +一个 `vimeo` 示例: + +```markdown +{{</* vimeo 146022717 */>}} +``` + +呈现的输出效果如下: + +{{< vimeo 146022717 >}} + +### `youtube` + +[`youtube` 的文档](https://gohugo.io/content-management/shortcodes/#youtube) + +一个 `youtube` 示例: + +```markdown +{{</* youtube w7Ft2ymGmfc */>}} +``` + +呈现的输出效果如下: + +{{< youtube w7Ft2ymGmfc >}} + +## LoveIt shortcodes {#loveit} + +**LoveIt** 在现有内置的 shortcodes 的基础上提供了多个 shortcodes. + +### `style` + +`style` shortcode 用来在你的文章中插入自定义样式. + +`style` shortcode 使用两个参数. +第一个是自定义样式的内容, 第二个是包裹你要更改样式的内容的 HTML 标签, 默认值是 `p`. + +一个 `style` 示例: + +```markdown +{{</* style "text-align: right" */>}} +This is a right-aligned paragraph. +{{</* /style */>}} +``` + +呈现的输出效果如下: + +{{< style "text-align: right" >}} +This is a right-aligned paragraph. +{{< /style >}} + +### `image` + +`image` shortcode 是 [`figure` shortcode](#figure) 的替代. `image` shortcode 可以充分利用 [lazysizes](https://github.com/aFarkas/lazysizes) 和 [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js) 两个依赖库. + +`image` shortcode 可以使用以下命名参数: + +* **src** + + 图片的 URL. + +* **description** + + 图片描述. + +* **title** + + 图片标题. + +* **class** + + HTML `figure` 标签的 `class` 属性. + +* **src_s** + + 图片缩略图的 URL, 用在画廊模式中. + +* **src_l** + + 高清图片的 URL, 用在画廊模式中. + +一个 `image` 示例: + +```markdown +{{</* image src="/images/theme-documentation-shortcodes/lighthouse.jpg" title="Lighthouse (`image`)" src-s="/images/theme-documentation-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-shortcodes/lighthouse-large.jpg" */>}} +``` + +呈现的输出效果如下: + +{{< image src="/images/theme-documentation-shortcodes/lighthouse.jpg" title="Lighthouse (`image`)" src-s="/images/theme-documentation-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-shortcodes/lighthouse-large.jpg" >}} + +### `admonition` + +`admonition` shortcode 支持 **12** 种 帮助你在页面中插入提示的横幅. 同时, `Markdown` 格式文本是支持的. + +{{< admonition >}} +一个 **注意** 横幅 +{{< /admonition >}} + +{{< admonition abstract >}} +一个 **摘要** 横幅 +{{< /admonition >}} + +{{< admonition info >}} +一个 **信息** 横幅 +{{< /admonition >}} + +{{< admonition tip >}} +一个 **技巧** 横幅 +{{< /admonition >}} + +{{< admonition success >}} +一个 **成功** 横幅 +{{< /admonition >}} + +{{< admonition question >}} +一个 **问题** 横幅 +{{< /admonition >}} + +{{< admonition warning >}} +一个 **警告** 横幅 +{{< /admonition >}} + +{{< admonition failure >}} +一个 **失败** 横幅 +{{< /admonition >}} + +{{< admonition danger >}} +一个 **危险** 横幅 +{{< /admonition >}} + +{{< admonition bug >}} +一个 **Bug** 横幅 +{{< /admonition >}} + +{{< admonition example >}} +一个 **示例** 横幅 +{{< /admonition >}} + +{{< admonition quote >}} +一个 **引用** 横幅 +{{< /admonition >}} + +`admonition` shortcode 可以使用以下命名参数: + +* **type** + + `admonition` 横幅的类型, 默认值是 **note** + +* **title** + + `admonition` 横幅的标题, 默认值是横幅的类型名称 + +* **details** + + 如果设为 `true`, 横幅内容将是可展开/可折叠. + +你还可以按 **type**, **title** 和 **details** 的顺序使用位置参数. + +一个 `admonition` 示例: + +```markdown +{{</* admonition type=tip title="This is a tip" details=true */>}} +一个 **技巧** 横幅 +{{</* /admonition */>}} +Or +{{</* admonition tip "This is a tip" true */>}} +一个 **技巧** 横幅 +{{</* /admonition */>}} +``` + +呈现的输出效果如下: + +{{< admonition tip "This is a tip" true >}} +一个 **技巧** 横幅 +{{< /admonition >}} + +### `mermaid` + +[mermaid](https://mermaidjs.github.io/) 是一个可以帮助你在文章中生成图表和流程图的库, 类似 Markdown 的语法. + +只需将你的 mermaid 代码插入 `mermaid` shortcode 中即可. + +#### 流程图 {#flowchart} + +一个 **流程图** `mermaid` 示例: + +```markdown +{{</* mermaid */>}} +graph LR; + A[Hard edge] -->|Link text| B(Round edge) + B --> C{Decision} + C -->|One| D[Result one] + C -->|Two| E[Result two] +{{</* /mermaid */>}} +``` + +呈现的输出效果如下: + +{{< mermaid >}} +graph LR; + A[Hard edge] -->|Link text| B(Round edge) + B --> C{Decision} + C -->|One| D[Result one] + C -->|Two| E[Result two] +{{< /mermaid >}} + +#### 时序图 {#sequence-diagram} + +一个 **时序图** `mermaid` 示例: + +```markdown +{{</* mermaid */>}} +sequenceDiagram + participant Alice + participant Bob + Alice->>John: Hello John, how are you? + loop Healthcheck + John->John: Fight against hypochondria + end + Note right of John: Rational thoughts <br/>prevail... + John-->Alice: Great! + John->Bob: How about you? + Bob-->John: Jolly good! +{{</* /mermaid */>}} +``` + +呈现的输出效果如下: + +{{< mermaid >}} +sequenceDiagram + participant Alice + participant Bob + Alice->>John: Hello John, how are you? + loop Healthcheck + John->John: Fight against hypochondria + end + Note right of John: Rational thoughts <br/>prevail... + John-->Alice: Great! + John->Bob: How about you? + Bob-->John: Jolly good! +{{< /mermaid >}} + +#### 甘特图 {#gantt} + +一个 **甘特图** `mermaid` 示例: + +```markdown +{{</* mermaid */>}} +gantt + dateFormat YYYY-MM-DD + title Adding GANTT diagram functionality to mermaid + section A section + Completed task :done, des1, 2014-01-06,2014-01-08 + Active task :active, des2, 2014-01-09, 3d + Future task : des3, after des2, 5d + Future task2 : des4, after des3, 5d + section Critical tasks + Completed task in the critical line :crit, done, 2014-01-06,24h + Implement parser and jison :crit, done, after des1, 2d + Create tests for parser :crit, active, 3d + Future task in critical line :crit, 5d + Create tests for renderer :2d + Add to mermaid :1d +{{</* /mermaid */>}} +``` + +呈现的输出效果如下: + +{{< mermaid >}} +gantt + dateFormat YYYY-MM-DD + title Adding GANTT diagram functionality to mermaid + section A section + Completed task :done, des1, 2014-01-06,2014-01-08 + Active task :active, des2, 2014-01-09, 3d + Future task : des3, after des2, 5d + Future task2 : des4, after des3, 5d + section Critical tasks + Completed task in the critical line :crit, done, 2014-01-06,24h + Implement parser and jison :crit, done, after des1, 2d + Create tests for parser :crit, active, 3d + Future task in critical line :crit, 5d + Create tests for renderer :2d + Add to mermaid :1d +{{< /mermaid >}} + +#### 类图 {#class-diagram} + +一个 **类图** `mermaid` 示例: + +```markdown +{{</* mermaid */>}} +classDiagram + Class01 <|-- AveryLongClass : Cool + Class03 *-- Class04 + Class05 o-- Class06 + Class07 .. Class08 + Class09 --> C2 : Where am i? + Class09 --* C3 + Class09 --|> Class07 + Class07 : equals() + Class07 : Object[] elementData + Class01 : size() + Class01 : int chimp + Class01 : int gorilla + Class08 <--> C2: Cool label +{{</* /mermaid */>}} +``` + +呈现的输出效果如下: + +{{< mermaid >}} +classDiagram + Class01 <|-- AveryLongClass : Cool + Class03 *-- Class04 + Class05 o-- Class06 + Class07 .. Class08 + Class09 --> C2 : Where am i? + Class09 --* C3 + Class09 --|> Class07 + Class07 : equals() + Class07 : Object[] elementData + Class01 : size() + Class01 : int chimp + Class01 : int gorilla + Class08 <--> C2: Cool label +{{< /mermaid >}} + +#### 状态图 {#state-diagram} + +一个 **状态图** `mermaid` 示例: + +```markdown +{{</* mermaid */>}} +stateDiagram + [*] --> Still + Still --> [*] + Still --> Moving + Moving --> Still + Moving --> Crash + Crash --> [*] +{{</* /mermaid */>}} +``` + +呈现的输出效果如下: + +{{< mermaid >}} +stateDiagram + [*] --> Still + Still --> [*] + Still --> Moving + Moving --> Still + Moving --> Crash + Crash --> [*] +{{< /mermaid >}} + +#### Git 图 {#git-graph} + +一个 **Git 图** `mermaid` 示例: + +```markdown +{{</* mermaid */>}} +gitGraph: +options +{ + "nodeSpacing": 100, + "nodeRadius": 10 +} +end + commit + branch newbranch + checkout newbranch + commit + commit + checkout master + commit + commit + merge newbranch +{{</* /mermaid */>}} +``` + +呈现的输出效果如下: + +{{< mermaid >}} +gitGraph: +options +{ + "nodeSpacing": 100, + "nodeRadius": 10 +} +end + commit + branch newbranch + checkout newbranch + commit + commit + checkout master + commit + commit + merge newbranch +{{< /mermaid >}} + +#### 饼图 {#pie} + +一个 **饼图** `mermaid` 示例: + +```markdown +{{</* mermaid */>}} +pie + "Dogs" : 386 + "Cats" : 85 + "Rats" : 15 +{{</* /mermaid */>}} +``` + +呈现的输出效果如下: + +{{< mermaid >}} +pie + "Dogs" : 386 + "Cats" : 85 + "Rats" : 15 +{{< /mermaid >}} + +### `echarts` + +[ECharts](https://echarts.apache.org/) 是一个帮助你生成交互式数据可视化的库. + +ECharts 提供了常规的 [折线图](https://echarts.apache.org/zh/option.html#series-line), [柱状图](https://echarts.apache.org/zh/option.html#series-line), [散点图](https://echarts.apache.org/zh/option.html#series-scatter), [饼图](https://echarts.apache.org/zh/option.html#series-pie), [K线图](https://echarts.apache.org/zh/option.html#series-candlestick), 用于统计的 [盒形图](https://echarts.apache.org/zh/option.html#series-boxplot), 用于地理数据可视化的 [地图](https://echarts.apache.org/zh/option.html#series-map), [热力图](https://echarts.apache.org/zh/option.html#series-heatmap), [线图](https://echarts.apache.org/zh/option.html#series-lines), 用于关系数据可视化的 [关系图](https://echarts.apache.org/zh/option.html#series-graph), [treemap](https://echarts.apache.org/zh/option.html#series-treemap), [旭日图](https://echarts.apache.org/zh/option.html#series-sunburst), 多维数据可视化的 [平行坐标](https://echarts.apache.org/zh/option.html#series-parallel), 还有用于 BI 的 [漏斗图](https://echarts.apache.org/zh/option.html#series-funnel), [仪表盘](https://echarts.apache.org/zh/option.html#series-gauge), 并且支持图与图之间的混搭. + +只需在 `echarts` shortcode 中以 `JSON`/`YAML`/`TO ML`格式插入 ECharts 选项即可. + +一个 `JSON` 格式的 `echarts` 示例: + +```json +{{/* echarts */}} +{ + "title": { + "text": "折线统计图", + "top": "2%", + "left": "center" + }, + "tooltip": { + "trigger": "axis" + }, + "legend": { + "data": ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"], + "top": "10%" + }, + "grid": { + "left": "5%", + "right": "5%", + "bottom": "5%", + "top": "20%", + "containLabel": true + }, + "toolbox": { + "feature": { + "saveAsImage": { + "title": "保存为图片" + } + } + }, + "xAxis": { + "type": "category", + "boundaryGap": false, + "data": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"] + }, + "yAxis": { + "type": "value" + }, + "series": [ + { + "name": "邮件营销", + "type": "line", + "stack": "总量", + "data": [120, 132, 101, 134, 90, 230, 210] + }, + { + "name": "联盟广告", + "type": "line", + "stack": "总量", + "data": [220, 182, 191, 234, 290, 330, 310] + }, + { + "name": "视频广告", + "type": "line", + "stack": "总量", + "data": [150, 232, 201, 154, 190, 330, 410] + }, + { + "name": "直接访问", + "type": "line", + "stack": "总量", + "data": [320, 332, 301, 334, 390, 330, 320] + }, + { + "name": "搜索引擎", + "type": "line", + "stack": "总量", + "data": [820, 932, 901, 934, 1290, 1330, 1320] + } + ] +} +{{</* /echarts */>}} +``` + +一个 `YAML` 格式的 `echarts` 示例: + +```yaml +{{</* echarts */>}} +title: + text: 折线统计图 + top: 2% + left: center +tooltip: + trigger: axis +legend: + data: + - 邮件营销 + - 联盟广告 + - 视频广告 + - 直接访问 + - 搜索引擎 + top: 10% +grid: + left: 5% + right: 5% + bottom: 5% + top: 20% + containLabel: true +toolbox: + feature: + saveAsImage: + title: 保存为图片 +xAxis: + type: category + boundaryGap: false + data: + - 周一 + - 周二 + - 周三 + - 周四 + - 周五 + - 周六 + - 周日 +yAxis: + type: value +series: + - name: 邮件营销 + type: line + stack: 总量 + data: + - 120 + - 132 + - 101 + - 134 + - 90 + - 230 + - 210 + - name: 联盟广告 + type: line + stack: 总量 + data: + - 220 + - 182 + - 191 + - 234 + - 290 + - 330 + - 310 + - name: 视频广告 + type: line + stack: 总量 + data: + - 150 + - 232 + - 201 + - 154 + - 190 + - 330 + - 410 + - name: 直接访问 + type: line + stack: 总量 + data: + - 320 + - 332 + - 301 + - 334 + - 390 + - 330 + - 320 + - name: 搜索引擎 + type: line + stack: 总量 + data: + - 820 + - 932 + - 901 + - 934 + - 1290 + - 1330 + - 1320 +{{</* /echarts */>}} +``` + +一个 `TOML` 格式的 `echarts` 示例: + +```toml +{{</* echarts */>}} +[title] +text = "折线统计图" +top = "2%" +left = "center" + +[tooltip] +trigger = "axis" + +[legend] +data = [ + "邮件营销", + "联盟广告", + "视频广告", + "直接访问", + "搜索引擎" +] +top = "10%" + +[grid] +left = "5%" +right = "5%" +bottom = "5%" +top = "20%" +containLabel = true + +[toolbox] +[toolbox.feature] +[toolbox.feature.saveAsImage] +title = "保存为图片" + +[xAxis] +type = "category" +boundaryGap = false +data = [ + "周一", + "周二", + "周三", + "周四", + "周五", + "周六", + "周日" +] + +[yAxis] +type = "value" + +[[series]] +name = "邮件营销" +type = "line" +stack = "总量" +data = [ + 120.0, + 132.0, + 101.0, + 134.0, + 90.0, + 230.0, + 210.0 +] + +[[series]] +name = "联盟广告" +type = "line" +stack = "总量" +data = [ + 220.0, + 182.0, + 191.0, + 234.0, + 290.0, + 330.0, + 310.0 +] + +[[series]] +name = "视频广告" +type = "line" +stack = "总量" +data = [ + 150.0, + 232.0, + 201.0, + 154.0, + 190.0, + 330.0, + 410.0 +] + +[[series]] +name = "直接访问" +type = "line" +stack = "总量" +data = [ + 320.0, + 332.0, + 301.0, + 334.0, + 390.0, + 330.0, + 320.0 +] + +[[series]] +name = "搜索引擎" +type = "line" +stack = "总量" +data = [ + 820.0, + 932.0, + 901.0, + 934.0, + 1290.0, + 1330.0, + 1320.0 +] +{{</* /echarts */>}} +``` + +呈现的输出效果如下: + +{{< echarts >}} +{ + "title": { + "text": "折线统计图", + "top": "2%", + "left": "center" + }, + "tooltip": { + "trigger": "axis" + }, + "legend": { + "data": ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"], + "top": "10%" + }, + "grid": { + "left": "5%", + "right": "5%", + "bottom": "5%", + "top": "20%", + "containLabel": true + }, + "toolbox": { + "feature": { + "saveAsImage": { + "title": "保存为图片" + } + } + }, + "xAxis": { + "type": "category", + "boundaryGap": false, + "data": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"] + }, + "yAxis": { + "type": "value" + }, + "series": [ + { + "name": "邮件营销", + "type": "line", + "stack": "总量", + "data": [120, 132, 101, 134, 90, 230, 210] + }, + { + "name": "联盟广告", + "type": "line", + "stack": "总量", + "data": [220, 182, 191, 234, 290, 330, 310] + }, + { + "name": "视频广告", + "type": "line", + "stack": "总量", + "data": [150, 232, 201, 154, 190, 330, 410] + }, + { + "name": "直接访问", + "type": "line", + "stack": "总量", + "data": [320, 332, 301, 334, 390, 330, 320] + }, + { + "name": "搜索引擎", + "type": "line", + "stack": "总量", + "data": [820, 932, 901, 934, 1290, 1330, 1320] + } + ] +} +{{< /echarts >}} + +### `music` + +`music` shortcode 基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 提供了一个内嵌的响应式音乐播放器. + +`music` shortcode 可以使用以下命名参数: + +|参数 |默认值 |描述| +|:---------------|:------------:|:----------| +|url |**必须** |音乐的 URL| +|name |可选 |音乐名称| +|artist |可选 |音乐的创作者| +|cover |封面 |音乐封面的 URL| +|server |**必须** |音乐平台: `netease`, `tencent`, `kugou`, `xiami`, `baidu`| +|type |**必须** |`song`, `playlist`, `album`, `search`, `artist`| +|id |**必须** |song id / playlist id / album id / 搜索关键字| +|auto |可选 |音乐链接, 支持平台: `netease`, `tencent`, `xiami`| +|fixed |`false` |启用固定模式| +|mini |`false` |启用迷你模式| +|autoplay |`false` |自动播放| +|theme |`#a9a9b3` |主题色| +|loop |`all` |循环模式, 值: 'all', 'one', 'none'| +|order |`list` |播放顺序, 值: 'list', 'random'| +|volume |`0.7` |默认音量, 请注意, 播放器会记住用户设置, 用户自己设置音量后默认音量将不起作用| +|mutex |`true` |防止同时有多个播放器, 在此播放器开始播放时暂停其他播放器| +|list-folded |`false` |列表默认是否折叠| +|list-max-height |`340px` |列表最大高度| + +#### 自定义音乐 URL {#custom-music-url} + +一个 `music` 示例: + +```markdown +{{</* music url="https://rainymood.com/audio1110/0.m4a" name=rainymood artist=rainymood cover="https://rainymood.com/i/badge.jpg" */>}} +``` + +呈现的输出效果如下: + +{{< music url="https://rainymood.com/audio1110/0.m4a" name=rainymood artist=rainymood cover="https://rainymood.com/i/badge.jpg" >}} + +#### 来自音乐平台的 URL 自动识别 {#automatic-identification} + +一个 `music` 示例: + +```markdown +{{</* music auto="https://music.163.com/#/playlist?id=60198" */>}} +Or +{{</* music "https://music.163.com/#/playlist?id=60198" */>}} +``` + +呈现的输出效果如下: + +{{< music auto="https://music.163.com/#/playlist?id=60198" >}} + +#### 自定义平台, 类型和 ID {#custom-server} + +一个 `music` 示例: + +```markdown +{{</* music server="netease" type="song" id="1868553" */>}} +Or +{{</* music netease song 1868553 */>}} +``` + +呈现的输出效果如下: + +{{< music netease song 1868553 >}} + +### `bilibili` + +`bilibili` shortcode 提供了一个内嵌的用来播放 bilibili 视频的响应式播放器. + +如果视频只有一个部分, 则仅需要视频的 `av` ID, 例如: + +```code +https://www.bilibili.com/video/av47027633 +``` + +一个 `bilibili` 示例: + +```markdown +{{</* bilibili 47027633 */>}} +Or +{{</* bilibili av=47027633 */>}} +``` + +呈现的输出效果如下: + +{{< bilibili av=47027633 >}} + +如果视频包含多个部分, 则除了视频的 `av` ID之外, 还需要 `p`, 默认值为 `1`, 例如: + +```code +https://www.bilibili.com/video/av36570401?p=3 +``` + +一个带有 `p` 参数的 `bilibili` 示例: + +```markdown +{{</* bilibili 36570401 3 */>}} +Or +{{</* bilibili av=36570401 p=3 */>}} +``` + +呈现的输出效果如下: + +{{< bilibili av=36570401 p=3 >}} + +### `typeit` + +`typeit` shortcode 基于 [TypeIt](https://typeitjs.com/) 提供了打字动画. + +只需将你需要打字动画的内容插入 `typeit` shortcode 中即可. + +#### 简单内容 {#simple-content} + +允许使用 `Markdown` 格式的简单内容, 并且 **不包含** 富文本的块内容, 例如图像等等... + +一个 `typeit` 示例: + +```markdown +{{</* typeit */>}} +这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画** 的 *段落*... +{{</* /typeit */>}} +``` + +呈现的输出效果如下: + +{{< typeit >}} +这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画** 的 *段落*... +{{< /typeit >}} + +另外, 你也可以自定义 **HTML 标签**. + +一个带有 `h4` 标签的 `typeit` 示例: + +```markdown +{{</* typeit tag=h4 */>}} +这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画** 的 *段落*... +{{</* /typeit */>}} +``` + +呈现的输出效果如下: + +{{< typeit tag=h4 >}} +这一个带有基于 [TypeIt](https://typeitjs.com/) 的 **打字动画** 的 *段落*... +{{< /typeit >}} + +#### 代码内容 {#code-content} + +代码内容也是允许的, 并且通过使用参数 `code` 指定语言类型可以实习语法高亮. + +一个带有 `code` 参数的 `typeit` 示例: + +```markdown +{{</* typeit code=java */>}} +public class HelloWorld { + public static void main(String []args) { + System.out.println("Hello World"); + } +} +{{</* /typeit */>}} +``` + +呈现的输出效果如下: + +{{< typeit code=java >}} +public class HelloWorld { + public static void main(String []args) { + System.out.println("Hello World"); + } +} +{{< /typeit >}} + +#### 分组内容 {#code-content} + +默认情况下, 所有打字动画都是同时开始的. +但是有时你可能需要按顺序开始一组 `typeit` 内容的打字动画. + +一组具有相同 `group` 参数值的 `typeit` 内容将按顺序开始打字动画. + +一个带有 `group` 参数的 `typeit` 示例: + +```markdown +{{</* typeit group=paragraph */>}} +**首先**, 这个段落开始 +{{</* /typeit */>}} + +{{</* typeit group=paragraph */>}} +**然后**, 这个段落开始 +{{</* /typeit */>}} +``` + +呈现的输出效果如下: + +{{< typeit group=paragraph >}} +**首先**, 这个段落开始 +{{< /typeit >}} + +{{< typeit group=paragraph >}} +**然后**, 这个段落开始 +{{< /typeit >}} diff --git a/exampleSite/static/images/markdown.png b/exampleSite/static/images/basic-markdown-syntax/featured-image.png Binary files differindex b31e1a5..b31e1a5 100644 --- a/exampleSite/static/images/markdown.png +++ b/exampleSite/static/images/basic-markdown-syntax/featured-image.png diff --git a/exampleSite/static/images/emoji.jpg b/exampleSite/static/images/emoji-support/featured-image.jpg Binary files differindex 5758440..5758440 100644 --- a/exampleSite/static/images/emoji.jpg +++ b/exampleSite/static/images/emoji-support/featured-image.jpg diff --git a/exampleSite/static/images/hugo.png b/exampleSite/static/images/hugo.png Binary files differdeleted file mode 100644 index 10265e4..0000000 --- a/exampleSite/static/images/hugo.png +++ /dev/null diff --git a/exampleSite/static/images/theme-documentation-basics/basic-configuration-preview.png b/exampleSite/static/images/theme-documentation-basics/basic-configuration-preview.png Binary files differnew file mode 100644 index 0000000..06424ca --- /dev/null +++ b/exampleSite/static/images/theme-documentation-basics/basic-configuration-preview.png diff --git a/exampleSite/static/images/theme-documentation-basics/complete-configuration-preview.gif b/exampleSite/static/images/theme-documentation-basics/complete-configuration-preview.gif Binary files differnew file mode 100644 index 0000000..fcdef08 --- /dev/null +++ b/exampleSite/static/images/theme-documentation-basics/complete-configuration-preview.gif diff --git a/exampleSite/static/images/theme-documentation-basics.webp b/exampleSite/static/images/theme-documentation-basics/featured-image.webp Binary files differindex a9c9420..a9c9420 100644 --- a/exampleSite/static/images/theme-documentation-basics.webp +++ b/exampleSite/static/images/theme-documentation-basics/featured-image.webp diff --git a/exampleSite/static/images/theme-documentation-basics/language-switch.gif b/exampleSite/static/images/theme-documentation-basics/language-switch.gif Binary files differnew file mode 100644 index 0000000..ce3d8a3 --- /dev/null +++ b/exampleSite/static/images/theme-documentation-basics/language-switch.gif diff --git a/exampleSite/static/images/theme-documentation-content/featured-image.jpg b/exampleSite/static/images/theme-documentation-content/featured-image.jpg Binary files differnew file mode 100644 index 0000000..2fcae9e --- /dev/null +++ b/exampleSite/static/images/theme-documentation-content/featured-image.jpg diff --git a/exampleSite/static/images/theme-documentation-content/summary.png b/exampleSite/static/images/theme-documentation-content/summary.png Binary files differnew file mode 100644 index 0000000..7e040cd --- /dev/null +++ b/exampleSite/static/images/theme-documentation-content/summary.png diff --git a/exampleSite/static/images/theme-documentation-shortcodes/featured-image.jpg b/exampleSite/static/images/theme-documentation-shortcodes/featured-image.jpg Binary files differnew file mode 100644 index 0000000..5fa1383 --- /dev/null +++ b/exampleSite/static/images/theme-documentation-shortcodes/featured-image.jpg diff --git a/exampleSite/static/images/theme-documentation-shortcodes/lighthouse-large.jpg b/exampleSite/static/images/theme-documentation-shortcodes/lighthouse-large.jpg Binary files differnew file mode 100644 index 0000000..f4da68e --- /dev/null +++ b/exampleSite/static/images/theme-documentation-shortcodes/lighthouse-large.jpg diff --git a/exampleSite/static/images/theme-documentation-shortcodes/lighthouse-small.jpg b/exampleSite/static/images/theme-documentation-shortcodes/lighthouse-small.jpg Binary files differnew file mode 100644 index 0000000..f73d5ea --- /dev/null +++ b/exampleSite/static/images/theme-documentation-shortcodes/lighthouse-small.jpg diff --git a/exampleSite/static/images/theme-documentation-shortcodes/lighthouse.jpg b/exampleSite/static/images/theme-documentation-shortcodes/lighthouse.jpg Binary files differnew file mode 100644 index 0000000..d72a27b --- /dev/null +++ b/exampleSite/static/images/theme-documentation-shortcodes/lighthouse.jpg diff --git a/i18n/en.toml b/i18n/en.toml index 62e6c4d..1526ef0 100644 --- a/i18n/en.toml +++ b/i18n/en.toml @@ -7,8 +7,8 @@ other = "Posts" # === Post === # === Taxonomy === -[all] -other = "all " +[allSome] +other = "All %s" [tag] other = "Tag" @@ -33,26 +33,21 @@ other = "More" other = "Switch Theme" # === partials/header.html === -# === partials/comment.html === -[valineLang] -other = "en" -# === partials/comment.html === - # === partials/footer.html === -[powered] +[poweredBySome] other = "Powered by %s" [theme] -other = "Theme - " +other = "Theme" # === partials/footer.html === # === partials/plugin/share.html === -[share] +[shareOn] other = "Share on" # === partials/plugin/share.html === # === posts/single.html === -[toc] +[contents] other = "Contents" [publish] @@ -102,3 +97,41 @@ other = "The page you're looking for doesn't exist. Sorry." [backToHome] other = "Back to Home" # === 404.html === + +# === shortcodes/admonition.html === +[note] +other = "Note" + +[abstract] +other = "Abstract" + +[info] +other = "Info" + +[tip] +other = "Tip" + +[success] +other = "Success" + +[question] +other = "Question" + +[warning] +other = "Warning" + +[failure] +other = "Failure" + +[danger] +other = "Danger" + +[bug] +other = "Bug" + +[example] +other = "Example" + +[quote] +other = "Quote" +# === shortcodes/admonition.html === diff --git a/i18n/fr.toml b/i18n/fr.toml index 394c77f..053db85 100644 --- a/i18n/fr.toml +++ b/i18n/fr.toml @@ -7,14 +7,14 @@ other = "Posts" # === Post === # === Taxonomy === -[all] -other = "tous " +[allSome] +other = "Tous %s" [tag] -other = "Tag" +other = "Balise" [tags] -other = "Tags" +other = "Balises" [category] other = "Catégorie" @@ -33,26 +33,21 @@ other = "Plus" other = "Changer de Thème" # === partials/header.html === -# === partials/comments.html === -[valineLang] -other = "fr" -# === partials/comments.html === - # === partials/footer.html === -[powered] +[poweredBySome] other = "Propulsé par %s" [theme] -other = "Thème - " +other = "Thème" # === partials/footer.html === -# === partials/post/share.html === -[share] +# === partials/plugin/share.html === +[shareOn] other = "Partager sur" -# === partials/post/share.html === +# === partials/plugin/share.html === # === posts/single.html === -[toc] +[contents] other = "Contenu" [publish] @@ -102,3 +97,41 @@ other = "Désolé, la page recherchée n'existe pas." [backToHome] other = "Retour à l'accueil" # === 404.html === + +# === shortcodes/admonition.html === +[note] +other = "Remarque" + +[abstract] +other = "Abstrait" + +[info] +other = "Info" + +[tip] +other = "Astuces" + +[success] +other = "Succès" + +[question] +other = "Question" + +[warning] +other = "Avertissement" + +[failure] +other = "Échec" + +[danger] +other = "Danger" + +[bug] +other = "Bug" + +[example] +other = "Exemple" + +[quote] +other = "Citation" +# === shortcodes/admonition.html === diff --git a/i18n/zh-CN.toml b/i18n/zh-CN.toml index 1bcea34..376a699 100644 --- a/i18n/zh-CN.toml +++ b/i18n/zh-CN.toml @@ -7,8 +7,8 @@ other = "文章" # === Post === # === Taxonomy === -[all] -other = "所有" +[allSome] +other = "所有%s" [tag] other = "标签" @@ -33,26 +33,21 @@ other = "更多" other = "切换主题" # === partials/header.html === -# === partials/comment.html === -[valineLang] -other = "zh-cn" -# === partials/comment.html === - # === partials/footer.html === -[powered] +[poweredBySome] other = "由 %s 强力驱动" [theme] -other = "主题 - " +other = "主题" # === partials/footer.html === # === partials/plugin/share.html === -[share] +[shareOn] other = "分享到" # === partials/plugin/share.html === # === posts/single.html === -[toc] +[contents] other = "目录" [publish] @@ -102,3 +97,41 @@ other = "抱歉，您要查找的页面不存在。" [backToHome] other = "回到主页" # === 404.html === + +# === shortcodes/admonition.html === +[note] +other = "注意" + +[abstract] +other = "摘要" + +[info] +other = "信息" + +[tip] +other = "技巧" + +[success] +other = "成功" + +[question] +other = "问题" + +[warning] +other = "警告" + +[failure] +other = "失败" + +[danger] +other = "危险" + +[bug] +other = "Bug" + +[example] +other = "示例" + +[quote] +other = "引用" +# === shortcodes/admonition.html === diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html index 7c7e389..cfe5ed3 100644 --- a/layouts/_default/_markup/render-image.html +++ b/layouts/_default/_markup/render-image.html @@ -1,9 +1,10 @@ -<figure> - {{- $lightgallery := ne .Page.Site.Params.page.lightgallery false | and (ne .Page.Params.lightgallery false) -}} - {{- partial "plugin/image.html" (dict "src" .Destination "title" .Title "description" .Text "lightgallery" $lightgallery "scratch" (.Page.Scratch.Get "scratch")) -}} - {{- with (.Title | default .Text) -}} +{{- with .Title -}} + <figure> + {{- partial "plugin/image.html" (dict "src" $.Destination "title" $.Title "description" $.Text "lightgallery" true "scratch" ($.Page.Scratch.Get "scratch")) -}} <figcaption class="image-caption"> {{- . | safeHTML -}} </figcaption> - {{- end -}} -</figure> + </figure> +{{- else -}} + {{- partial "plugin/image.html" (dict "src" .Destination "title" .Title "description" .Text "lightgallery" false "scratch" (.Page.Scratch.Get "scratch")) -}} +{{- end -}} diff --git a/layouts/_default/section.html b/layouts/_default/section.html index 5b1bf19..415314b 100644 --- a/layouts/_default/section.html +++ b/layouts/_default/section.html @@ -1,12 +1,12 @@ {{- define "title" }} - {{- T "all" | humanize}}{{ T .Section | default .Section | humanize }} | {{ .Site.Title -}} + {{- T .Section | default .Section | printf (T "allSome") }} | {{ .Site.Title -}} {{- end -}} {{- define "content" -}} <div class="page archive"> {{- /* Title */ -}} <h2 class="single-title animated pulse faster"> - {{- T "all" | humanize}}{{ T .Section | default .Section | humanize -}} + {{- T .Section | default .Section | humanize | printf (T "allSome") -}} </h2> {{- /* Paginate */ -}} diff --git a/layouts/_default/summary.html b/layouts/_default/summary.html index 0fe2c7d..ee74fc7 100644 --- a/layouts/_default/summary.html +++ b/layouts/_default/summary.html @@ -16,7 +16,7 @@ {{- /* Meta */ -}} <div class="post-meta"> - {{- $author := .Params.author | default .Site.Author.name -}} + {{- $author := .Params.author | default .Site.Author.name | default (T "author") -}} {{- $authorLink := .Params.authorLink | default .Site.Author.link | default (relLangURL "/") -}} <span class="post-author"> <a class="author" href="{{ $authorLink }}" rel="author" target="_blank"> diff --git a/layouts/partials/assets.html b/layouts/partials/assets.html index 9a0d4e4..aa901c5 100644 --- a/layouts/partials/assets.html +++ b/layouts/partials/assets.html @@ -28,16 +28,14 @@ {{- end -}} {{- /* lazysizes */ -}} -{{- if $scratch.Get "lazysizes" -}} - {{- with $CDN.lazysizesJS -}} - {{- slice . | $scratch.Add "scriptCDN" -}} - {{- else -}} - {{- slice "lib/lazysizes/lazysizes.min.js" | $scratch.Add "scriptLocal" -}} - {{- end -}} +{{- with $CDN.lazysizesJS -}} + {{- slice . | $scratch.Add "scriptCDN" -}} +{{- else -}} + {{- slice "lib/lazysizes/lazysizes.min.js" | $scratch.Add "scriptLocal" -}} {{- end -}} {{- /* lightgallery.js */ -}} -{{- if $scratch.Get "lightgallery" -}} +{{- if ne .Page.Site.Params.page.lightgallery false | and (ne .Page.Params.lightgallery false) -}} {{- with $CDN.lightgalleryCSS -}} {{- slice . | $scratch.Add "linkCDN" -}} {{- else -}} @@ -139,7 +137,8 @@ {{- if and $math.inlineLeftDelimiter $math.inlineRightDelimiter -}} { left: '{{ $math.inlineLeftDelimiter }}', right: '{{ $math.inlineRightDelimiter }}', display: false }, {{- end -}} - ] + ], + strict: false, }); }); </script> diff --git a/layouts/partials/comment.html b/layouts/partials/comment.html index cb2970f..14b2cf4 100644 --- a/layouts/partials/comment.html +++ b/layouts/partials/comment.html @@ -81,7 +81,7 @@ {{- with $valine.pageSize -}} pageSize: {{ . | safeJS }}, {{- end -}} - lang: '{{ T "valineLang" }}', + lang: '{{ $valine.lang | default "en" }}', {{- if $valine.visitor -}} visitor: true, {{- end -}} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 22cda9e..22bdd65 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -2,7 +2,7 @@ <div class="copyright"> {{- /* Hugo and LoveIt */ -}} <div class="copyright-line"> - {{- printf (T "powered") `<a href="https://gohugo.io/" target="_blank" rel="external nofollow noopener noreffer">Hugo</a>` | safeHTML }} | {{ T "theme" }}<a href="https://github.com/dillonzq/LoveIt" target="_blank" rel="external nofollow noopener noreffer">LoveIt<i class="far fa-heart fa-fw"></i></a> + {{- printf (T "poweredBySome") `<a href="https://gohugo.io/" target="_blank" rel="external nofollow noopener noreffer">Hugo</a>` | safeHTML }} | {{ T "theme" }} - <a href="https://github.com/dillonzq/LoveIt" target="_blank" rel="external nofollow noopener noreffer">LoveIt<i class="far fa-heart fa-fw"></i></a> </div> <div class="copyright-line"> diff --git a/layouts/partials/function/checkbox.html b/layouts/partials/function/checkbox.html index 7d39720..2283592 100644 --- a/layouts/partials/function/checkbox.html +++ b/layouts/partials/function/checkbox.html @@ -1,9 +1,9 @@ {{- /* Checkbox unchecked */ -}} -{{- $REin := `<input disabled="" type="checkbox">` -}} -{{- $REout := `<i class="far fa-square fa-fw"></i>` -}} -{{- $content := replaceRE $REin $REout . -}} +{{- $old := `<input disabled="" type="checkbox">` -}} +{{- $new := `<i class="far fa-square fa-fw"></i>` -}} +{{- $content := replace . $old $new -}} {{- /* Checkbox checked */ -}} -{{- $REin = `<input checked="" disabled="" type="checkbox">` -}} -{{- $REout = `<i class="far fa-check-square fa-fw"></i>` -}} -{{- return replaceRE $REin $REout $content -}} +{{- $old = `<input checked="" disabled="" type="checkbox">` -}} +{{- $new = `<i class="far fa-check-square fa-fw"></i>` -}} +{{- return replace $content $old $new -}} diff --git a/layouts/partials/function/escape.html b/layouts/partials/function/escape.html new file mode 100644 index 0000000..1ff794f --- /dev/null +++ b/layouts/partials/function/escape.html @@ -0,0 +1,5 @@ +{{- /* Escape character */ -}} +{{- /* {?X} -> X */ -}} +{{- $REin := `\{\?(.)\}` -}} +{{- $REout := `$1` -}} +{{- return replaceRE $REin $REout . -}} diff --git a/layouts/partials/function/id.html b/layouts/partials/function/id.html index 081fc67..c702908 100644 --- a/layouts/partials/function/id.html +++ b/layouts/partials/function/id.html @@ -2,5 +2,7 @@ {{- /* Content -> unique ID */ -}} {{- /* shuffle md5 as id */ -}} {{- $id := delimit (split (md5 now.Unix) "" | shuffle | first 6) "" | printf "id-%s" -}} -{{- .scratch.SetInMap "contentMap" $id .content -}} +{{- with .scratch -}} + {{- .SetInMap "contentMap" $id $.content -}} +{{- end -}} {{- return $id -}} diff --git a/layouts/partials/header.html b/layouts/partials/header.html index e938b67..d4b0951 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -14,7 +14,7 @@ {{- end -}} {{- if .Site.IsMultiLingual -}} | - <span class="menu-item"> + <a href="javascript:void(0);" class="menu-item"> <i class="fas fa-language fa-fw"></i> <select class="select-language" onchange="location = this.value;"> {{- range .Page.AllTranslations -}} @@ -30,7 +30,7 @@ {{- end -}} {{- end -}} </select> - </span> + </a> {{- end -}} <a href="javascript:void(0);" class="theme-switch" title="{{ T "switchTheme" }}"> <i class="fas fa-adjust fa-rotate-180 fa-fw"></i> @@ -60,7 +60,7 @@ </a> {{- end -}} {{- if .Site.IsMultiLingual -}} - <span class="menu-item"> + <a href="javascript:void(0);" class="menu-item"> <i class="fas fa-language fa-fw"></i> <select class="select-language" onchange="location = this.value;"> {{- range .Page.AllTranslations -}} @@ -76,7 +76,7 @@ {{- end -}} {{- end -}} </select> - </span> + </a> {{- end -}} <a href="javascript:void(0);" class="theme-switch" title="{{ T "switchTheme" }}"> <i class="fas fa-adjust fa-rotate-180 fa-fw"></i> diff --git a/layouts/partials/plugin/icon.html b/layouts/partials/plugin/icon.html index 6ed4061..9898a08 100644 --- a/layouts/partials/plugin/icon.html +++ b/layouts/partials/plugin/icon.html @@ -11,11 +11,15 @@ {{- end -}} {{- end -}} {{- $classList = $newClassList -}} - {{- .scratch.Set "forkawesome" true -}} + {{- with .scratch -}} + {{- .Set "forkawesome" true -}} + {{- end -}} {{- /* default is Font Awesome */ -}} {{- /* Others */ -}} {{- else if ne $type "fa" -}} - {{- .scratch.Set "iconfont" true -}} + {{- with .scratch -}} + {{- .Set "iconfont" true -}} + {{- end -}} {{- end -}} <i class="{{ delimit $classList ` ` }}"></i> diff --git a/layouts/partials/plugin/image.html b/layouts/partials/plugin/image.html index 18e8e59..99a698d 100644 --- a/layouts/partials/plugin/image.html +++ b/layouts/partials/plugin/image.html @@ -15,7 +15,9 @@ data-src="{{ .src | safeURL }}" alt="{{ .title | default .description }}" /> </a> - {{- .scratch.Set "lightgallery" true -}} + {{- with .scratch -}} + {{- .Set "lightgallery" true -}} + {{- end -}} {{- else -}} <img class="lazyload" @@ -26,4 +28,3 @@ alt="{{ .title | default .description }}" title="{{ .description }}" /> {{- end -}} -{{- .scratch.Set "lazysizes" true -}} diff --git a/layouts/partials/plugin/share.html b/layouts/partials/plugin/share.html index 4996fb8..08eba8f 100644 --- a/layouts/partials/plugin/share.html +++ b/layouts/partials/plugin/share.html @@ -1,200 +1,200 @@ {{- $scratch := .Scratch.Get "scratch" -}} -{{- if ne .Site.Params.share.enable false | and (ne .Params.share false) -}} +{{- if ne .Site.Params.share.enable false | and (ne .Params.share.enable false) -}} {{- $scratch.Set "share" true -}} {{- /* 001: Twitter */ -}} {{- if .Params.Share.Twitter | default .Site.Params.Share.Twitter | eq true -}} - <a href="javascript:void(0);" title="{{ T `share` }} Twitter" data-sharer="twitter" data-url="{{ .Permalink }}" data-title="{{ .Title }}"{{ with .Site.Params.Social.Twitter }} data-via="{{ . }}"{{ end }}{{ with .Params.tags }} data-hashtags="{{ delimit . `,` }}"{{ end }}> + <a href="javascript:void(0);" title="{{ T `shareOn` }} Twitter" data-sharer="twitter" data-url="{{ .Permalink }}" data-title="{{ .Title }}"{{ with .Site.Params.Social.Twitter }} data-via="{{ . }}"{{ end }}{{ with .Params.tags }} data-hashtags="{{ delimit . `,` }}"{{ end }}> {{- partial "plugin/icon.html" (dict "class" "fab fa-twitter fa-fw") -}} </a> {{- end -}} {{- /* 002: Facebook */ -}} {{- if .Params.Share.Facebook | default .Site.Params.Share.Facebook | eq true -}} - <a href="javascript:void(0);" title="{{ T `share` }} Facebook" data-sharer="facebook" data-url="{{ .Permalink }}"{{ with .Params.tags }} data-hashtag="{{ index . 0 }}"{{ end }}> + <a href="javascript:void(0);" title="{{ T `shareOn` }} Facebook" data-sharer="facebook" data-url="{{ .Permalink }}"{{ with .Params.tags }} data-hashtag="{{ index . 0 }}"{{ end }}> {{- partial "plugin/icon.html" (dict "class" "fab fa-facebook-square fa-fw") -}} </a> {{- end -}} {{- /* 003: Linkedin */ -}} {{- if .Params.Share.Linkedin | default .Site.Params.Share.Linkedin | eq true -}} - <a href="javascript:void(0);" title="{{ T `share` }} Linkedin" data-sharer="linkedin" data-url="{{ .Permalink }}"> + <a href="javascript:void(0);" title="{{ T `shareOn` }} Linkedin" data-sharer="linkedin" data-url="{{ .Permalink }}"> {{- partial "plugin/icon.html" (dict "class" "fab fa-linkedin fa-fw") -}} </a> {{- end -}} {{- /* 004: WhatsApp */ -}} {{- if .Params.Share.Whatsapp | default .Site.Params.Share.Whatsapp | eq true -}} - <a href="javascript:void(0);" title="{{ T `share` }} WhatsApp" data-sharer="whatsapp" data-url="{{ .Permalink }}" data-title="{{ .Title }}" data-web> + <a href="javascript:void(0);" title="{{ T `shareOn` }} WhatsApp" data-sharer="whatsapp" data-url="{{ .Permalink }}" data-title="{{ .Title }}" data-web> {{- partial "plugin/icon.html" (dict "class" "fab fa-whatsapp fa-fw") -}} </a> {{- end -}} {{- /* 005: Viber */ -}} {{- if .Params.Share.Viber | default .Site.Params.Share.Viber | eq true -}} - <a href="javascript:void(0);" title="{{ T `share` }} Viber" data-sharer="viber" data-url="{{ .Permalink }}" data-title="{{ .Title }}"> + <a href="javascript:void(0);" title="{{ T `shareOn` }} Viber" data-sharer="viber" data-url="{{ .Permalink }}" data-title="{{ .Title }}"> {{- partial "plugin/icon.html" (dict "class" "fab fa-viber fa-fw") -}} </a> {{- end -}} {{- /* 006: Pinterest */ -}} {{- if .Params.Share.Pinterest | default .Site.Params.Share.Pinterest | eq true -}} - <a href="javascript:void(0);" title="{{ T `share` }} Pinterest" data-sharer="pinterest" data-url="{{ .Permalink }}"{{ with .Description }} data-description="{{ . }}"{{ end }}{{ with .Params.featuredImage }} data-image="{{ . }}"{{ end }}> + <a href="javascript:void(0);" title="{{ T `shareOn` }} Pinterest" data-sharer="pinterest" data-url="{{ .Permalink }}"{{ with .Description }} data-description="{{ . }}"{{ end }}{{ with .Params.featuredImage }} data-image="{{ . }}"{{ end }}> {{- partial "plugin/icon.html" (dict "class" "fab fa-pinterest fa-fw") -}} </a> {{- end -}} {{- /* 007: Tumblr */ -}} {{- if .Params.Share.Tumblr | default .Site.Params.Share.Tumblr | eq true -}} - <a href="javascript:void(0);" title="{{ T `share` }} Tumblr" data-sharer="tumblr" data-url="{{ .Permalink }}" data-title="{{ .Title }}"{{ with .Description }} data-caption="{{ . }}"{{ end }}{{ with .Params.tags }} data-tags="{{ delimit . `,` }}"{{ end }}> + <a href="javascript:void(0);" title="{{ T `shareOn` }} Tumblr" data-sharer="tumblr" data-url="{{ .Permalink }}" data-title="{{ .Title }}"{{ with .Description }} data-caption="{{ . }}"{{ end }}{{ with .Params.tags }} data-tags="{{ delimit . `,` }}"{{ end }}> {{- partial "plugin/icon.html" (dict "class" "fab fa-tumblr fa-fw") -}} </a> {{- end -}} {{- /* 008: Hacker News */ -}} {{- if .Params.Share.Hackernews | default .Site.Params.Share.Hackernews | eq true -}} - <a href="javascript:void(0);" title="{{ T `share` }} Hacker News" data-sharer="hackernews" data-url="{{ .Permalink }}" data-title="{{ .Title }}"> + <a href="javascript:void(0);" title="{{ T `shareOn` }} Hacker News" data-sharer="hackernews" data-url="{{ .Permalink }}" data-title="{{ .Title }}"> {{- partial "plugin/icon.html" (dict "class" "fab fa-hacker-news fa-fw") -}} </a> {{- end -}} {{- /* 009: Reddit */ -}} {{- if .Params.Share.Reddit | default .Site.Params.Share.Reddit | eq true -}} - <a href="javascript:void(0);" title="{{ T `share` }} Reddit" data-sharer="reddit" data-url="{{ .Permalink }}"> + <a href="javascript:void(0);" title="{{ T `shareOn` }} Reddit" data-sharer="reddit" data-url="{{ .Permalink }}"> {{- partial "plugin/icon.html" (dict "class" "fab fa-reddit fa-fw") -}} </a> {{- end -}} {{- /* 010: VK */ -}} {{- if .Params.Share.VK | default .Site.Params.Share.VK | eq true -}} - <a href="javascript:void(0);" title="{{ T `share` }} VK" data-sharer="vk" data-url="{{ .Permalink }}" data-title="{{ .Title }}"{{ with .Description }} data-caption="{{ . }}"{{ end }}{{ with .Params.featuredImage }} data-image="{{ . }}"{{ end }}> + <a href="javascript:void(0);" title="{{ T `shareOn` }} VK" data-sharer="vk" data-url="{{ .Permalink }}" data-title="{{ .Title }}"{{ with .Description }} data-caption="{{ . }}"{{ end }}{{ with .Params.featuredImage }} data-image="{{ . }}"{{ end }}> {{- partial "plugin/icon.html" (dict "class" "fab fa-vk fa-fw") -}} </a> {{- end -}} {{- /* 011: Buffer */ -}} {{- if .Params.Share.Buffer | default .Site.Params.Share.Buffer | eq true -}} - <a href="javascript:void(0);" title="{{ T `share` }} Buffer" data-sharer="buffer" data-url="{{ .Permalink }}" data-title="{{ .Title }}"{{ with .Site.Params.Social.Twitter }} data-via="{{ . }}"{{ end }}{{ with .Params.featuredImage }} data-picture="{{ . }}"{{ end }}> + <a href="javascript:void(0);" title="{{ T `shareOn` }} Buffer" data-sharer="buffer" data-url="{{ .Permalink }}" data-title="{{ .Title }}"{{ with .Site.Params.Social.Twitter }} data-via="{{ . }}"{{ end }}{{ with .Params.featuredImage }} data-picture="{{ . }}"{{ end }}> {{- partial "plugin/icon.html" (dict "class" "fab fa-buffer fa-fw") -}} </a> {{- end -}} {{- /* 012: Xing */ -}} {{- if .Params.Share.Xing | default .Site.Params.Share.Xing | eq true -}} - <a href="javascript:void(0);" title="{{ T `share` }} Xing" data-sharer="xing" data-url="{{ .Permalink }}" data-title="{{ .Title }}"> + <a href="javascript:void(0);" title="{{ T `shareOn` }} Xing" data-sharer="xing" data-url="{{ .Permalink }}" data-title="{{ .Title }}"> {{- partial "plugin/icon.html" (dict "class" "fab fa-xing fa-fw") -}} </a> {{- end -}} {{- /* 013: Line */ -}} {{- if .Params.Share.Line | default .Site.Params.Share.Line | eq true -}} - <a href="javascript:void(0);" title="{{ T `share` }} Line" data-sharer="line" data-url="{{ .Permalink }}" data-title="{{ .Title }}"> + <a href="javascript:void(0);" title="{{ T `shareOn` }} Line" data-sharer="line" data-url="{{ .Permalink }}" data-title="{{ .Title }}"> {{- partial "plugin/icon.html" (dict "class" "fab fa-line fa-fw") -}} </a> {{- end -}} {{- /* 014: Instapaper */ -}} {{- if .Params.Share.Instapaper | default .Site.Params.Share.Instapaper | eq true -}} - <a href="javascript:void(0);" title="{{ T `share` }} Instapaper" data-sharer="instapaper" data-url="{{ .Permalink }}" data-title="{{ .Title }}" data-description="{{ .Description }}"> + <a href="javascript:void(0);" title="{{ T `shareOn` }} Instapaper" data-sharer="instapaper" data-url="{{ .Permalink }}" data-title="{{ .Title }}" data-description="{{ .Description }}"> {{- partial "plugin/icon.html" (dict "class" "loveit it-instapaper-fill" "type" "other" "scratch" $scratch) -}} </a> {{- end -}} {{- /* 015: Pocket */ -}} {{- if .Params.Share.Pocket | default .Site.Params.Share.Pocket | eq true -}} - <a href="javascript:void(0);" title="{{ T `share` }} Pocket" data-sharer="pocket" data-url="{{ .Permalink }}"> + <a href="javascript:void(0);" title="{{ T `shareOn` }} Pocket" data-sharer="pocket" data-url="{{ .Permalink }}"> {{- partial "plugin/icon.html" (dict "class" "fab fa-get-pocket fa-fw") -}} </a> {{- end -}} {{- /* 016: Digg */ -}} {{- if .Params.Share.Digg | default .Site.Params.Share.Digg | eq true -}} - <a href="javascript:void(0);" title="{{ T `share` }} Digg" data-sharer="digg" data-url="{{ .Permalink }}"> + <a href="javascript:void(0);" title="{{ T `shareOn` }} Digg" data-sharer="digg" data-url="{{ .Permalink }}"> {{- partial "plugin/icon.html" (dict "class" "fab fa-digg fa-fw") -}} </a> {{- end -}} {{- /* 017: StumbleUpon */ -}} {{- if .Params.Share.Stumbleupon | default .Site.Params.Share.Stumbleupon | eq true -}} - <a href="javascript:void(0);" title="{{ T `share` }} StumbleUpon" data-sharer="stumbleupon" data-url="{{ .Permalink }}" data-title="{{ .Title }}"> + <a href="javascript:void(0);" title="{{ T `shareOn` }} StumbleUpon" data-sharer="stumbleupon" data-url="{{ .Permalink }}" data-title="{{ .Title }}"> {{- partial "plugin/icon.html" (dict "class" "fab fa-stumbleupon fa-fw") -}} </a> {{- end -}} {{- /* 018: Flipboard */ -}} {{- if .Params.Share.Flipboard | default .Site.Params.Share.Flipboard | eq true -}} - <a href="javascript:void(0);" title="{{ T `share` }} Flipboard" data-sharer="flipboard" data-url="{{ .Permalink }}" data-title="{{ .Title }}"> + <a href="javascript:void(0);" title="{{ T `shareOn` }} Flipboard" data-sharer="flipboard" data-url="{{ .Permalink }}" data-title="{{ .Title }}"> {{- partial "plugin/icon.html" (dict "class" "fab fa-flipboard fa-fw") -}} </a> {{- end -}} {{- /* 019: 微博 */ -}} {{- if .Params.Share.Weibo | default .Site.Params.Share.Weibo | eq true -}} - <a href="javascript:void(0);" title="{{ T `share` }} 微博" data-sharer="weibo" data-url="{{ .Permalink }}" data-title="{{ .Title }}"{{ with .Params.featuredImage }} data-image="{{ . }}"{{ end }}{{ with .Site.Params.Social.Weibo }} data-ralateuid="{{ . }}"{{ end }}> + <a href="javascript:void(0);" title="{{ T `shareOn` }} 微博" data-sharer="weibo" data-url="{{ .Permalink }}" data-title="{{ .Title }}"{{ with .Params.featuredImage }} data-image="{{ . }}"{{ end }}{{ with .Site.Params.Social.Weibo }} data-ralateuid="{{ . }}"{{ end }}> {{- partial "plugin/icon.html" (dict "class" "fab fa-weibo fa-fw") -}} </a> {{- end -}} {{- /* 020: 人人 */ -}} {{- if .Params.Share.Renren | default .Site.Params.Share.Renren | eq true -}} - <a href="javascript:void(0);" title="{{ T `share` }} 人人" data-sharer="renren" data-url="{{ .Permalink }}"> + <a href="javascript:void(0);" title="{{ T `shareOn` }} 人人" data-sharer="renren" data-url="{{ .Permalink }}"> {{- partial "plugin/icon.html" (dict "class" "fab fa-renren fa-fw") -}} </a> {{- end -}} {{- /* 021: Myspace */ -}} {{- if .Params.Share.Myspace | default .Site.Params.Share.Myspace | eq true -}} - <a href="javascript:void(0);" title="{{ T `share` }} Myspace" data-sharer="myspace" data-url="{{ .Permalink }}" data-title="{{ .Title }}" data-description="{{ .Description }}"> + <a href="javascript:void(0);" title="{{ T `shareOn` }} Myspace" data-sharer="myspace" data-url="{{ .Permalink }}" data-title="{{ .Title }}" data-description="{{ .Description }}"> {{- partial "plugin/icon.html" (dict "class" "loveit it-myspace-fill" "type" "other" "scratch" $scratch) -}} </a> {{- end -}} {{- /* 022: Blogger */ -}} {{- if .Params.Share.Blogger | default .Site.Params.Share.Blogger | eq true -}} - <a href="javascript:void(0);" title="{{ T `share` }} Blogger" data-sharer="blogger" data-url="{{ .Permalink }}" data-title="{{ .Title }}" data-description="{{ .Description }}"> + <a href="javascript:void(0);" title="{{ T `shareOn` }} Blogger" data-sharer="blogger" data-url="{{ .Permalink }}" data-title="{{ .Title }}" data-description="{{ .Description }}"> {{- partial "plugin/icon.html" (dict "class" "fab fa-blogger fa-fw") -}} </a> {{- end -}} {{- /* 023: 百度 */ -}} {{- if .Params.Share.Baidu | default .Site.Params.Share.Baidu | eq true -}} - <a href="javascript:void(0);" title="{{ T `share` }} 百度" data-sharer="baidu" data-url="{{ .Permalink }}" data-title="{{ .Title }}"> + <a href="javascript:void(0);" title="{{ T `shareOn` }} 百度" data-sharer="baidu" data-url="{{ .Permalink }}" data-title="{{ .Title }}"> {{- partial "plugin/icon.html" (dict "class" "loveit it-baidu-fill" "type" "other" "scratch" $scratch) -}} </a> {{- end -}} {{- /* 024: OK.RU */ -}} {{- if .Params.Share.Odnoklassniki | default .Site.Params.Share.Odnoklassniki | eq true -}} - <a href="javascript:void(0);" title="{{ T `share` }} OK.RU" data-sharer="okru" data-url="{{ .Permalink }}" data-title="{{ .Title }}"> + <a href="javascript:void(0);" title="{{ T `shareOn` }} OK.RU" data-sharer="okru" data-url="{{ .Permalink }}" data-title="{{ .Title }}"> {{- partial "plugin/icon.html" (dict "class" "fab fa-odnoklassniki fa-fw") -}} </a> {{- end -}} {{- /* 025: Evernote */ -}} {{- if .Params.Share.Evernote | default .Site.Params.Share.Evernote | eq true -}} - <a href="javascript:void(0);" title="{{ T `share` }} Evernote" data-sharer="evernote" data-url="{{ .Permalink }}" data-title="{{ .Title }}"> + <a href="javascript:void(0);" title="{{ T `shareOn` }} Evernote" data-sharer="evernote" data-url="{{ .Permalink }}" data-title="{{ .Title }}"> {{- partial "plugin/icon.html" (dict "class" "fab fa-evernote fa-fw") -}} </a> {{- end -}} {{- /* 026: Skype */ -}} {{- if .Params.Share.Skype | default .Site.Params.Share.Skype | eq true -}} - <a href="javascript:void(0);" title="{{ T `share` }} Skype" data-sharer="skype" data-url="{{ .Permalink }}" data-title="{{ .Title }}"> + <a href="javascript:void(0);" title="{{ T `shareOn` }} Skype" data-sharer="skype" data-url="{{ .Permalink }}" data-title="{{ .Title }}"> {{- partial "plugin/icon.html" (dict "class" "fab fa-skype fa-fw") -}} </a> {{- end -}} {{- /* 027: Trello */ -}} {{- if .Params.Share.Trello | default .Site.Params.Share.Trello | eq true -}} - <a href="javascript:void(0);" title="{{ T `share` }} Trello" data-sharer="trello" data-url="{{ .Permalink }}" data-title="{{ .Title }}" data-description="{{ .Description }}"> + <a href="javascript:void(0);" title="{{ T `shareOn` }} Trello" data-sharer="trello" data-url="{{ .Permalink }}" data-title="{{ .Title }}" data-description="{{ .Description }}"> {{- partial "plugin/icon.html" (dict "class" "fab fa-trello fa-fw") -}} </a> {{- end -}} {{- /* 028: Mix */ -}} {{- if .Params.Share.Mix | default .Site.Params.Share.Mix | eq true -}} - <a href="//mix.com/add?url={{ .Permalink }}&description={{ .Title }}" target="_blank" title="{{ T `share` }} Mix"> + <a href="//mix.com/add?url={{ .Permalink }}&description={{ .Title }}" target="_blank" title="{{ T `shareOn` }} Mix"> {{- partial "plugin/icon.html" (dict "class" "fab fa-mix fa-fw") -}} </a> {{- end -}} diff --git a/layouts/partials/single/content.html b/layouts/partials/single/content.html index c0327ca..efab566 100644 --- a/layouts/partials/single/content.html +++ b/layouts/partials/single/content.html @@ -6,4 +6,6 @@ {{- $content = partial "function/checkbox.html" $content -}} +{{- $content = partial "function/escape.html" $content -}} + {{- $content | safeHTML -}} diff --git a/layouts/partials/single/footer.html b/layouts/partials/single/footer.html index 7727ef7..af0efeb 100644 --- a/layouts/partials/single/footer.html +++ b/layouts/partials/single/footer.html @@ -23,7 +23,7 @@ </div> <div class="post-info-line"> <div class="post-info-md"> - {{- if .Site.Params.page.linkToMarkdown -}} + {{- if ne .Site.Params.page.linkToMarkdown false | and (ne .Params.linkToMarkdown false) -}} {{- with .OutputFormats.Get "markdown" -}} <span> <a class="link-to-markdown" href="{{ .Permalink }}" target="_blank"> diff --git a/layouts/posts/single.html b/layouts/posts/single.html index affe4c2..25ffb07 100644 --- a/layouts/posts/single.html +++ b/layouts/posts/single.html @@ -9,7 +9,7 @@ {{- /* Meta */ -}} <div class="post-meta"> <div class="post-meta-line"> - {{- $author := .Params.author | default .Site.Author.name -}} + {{- $author := .Params.author | default .Site.Author.name | default (T "author") -}} {{- $authorLink := .Params.authorLink | default .Site.Author.link | default (relLangURL "/") -}} <span class="post-author"> <a class="author" href="{{ $authorLink }}" rel="author" target="_blank"> @@ -54,7 +54,7 @@ {{- /* TOC */ -}} {{- if or .Params.toc (and .Site.Params.toc (ne .Params.toc false)) -}} <div class="toc" id="toc-auto"> - <h2 class="toc-title">{{ T "toc" }}</h2> + <h2 class="toc-title">{{ T "contents" }}</h2> {{- $globalAutoCollapseToc := .Site.Params.autoCollapseToc | default true }} <div class="toc-content{{ if not (and $globalAutoCollapseToc (ne .Params.autoCollapseToc false)) }} always-active{{ end }}" id="toc-content-auto"></div> </div> @@ -62,7 +62,7 @@ <details> <summary> <div class="toc-title"> - <span>{{ T "toc" }}</span> + <span>{{ T "contents" }}</span> <span><i class="details icon fas fa-angle-down"></i></span> </div> </summary> diff --git a/layouts/shortcodes/admonition.html b/layouts/shortcodes/admonition.html index 334a505..08123e9 100644 --- a/layouts/shortcodes/admonition.html +++ b/layouts/shortcodes/admonition.html @@ -16,45 +16,37 @@ {{- if .IsNamedParams -}} {{- $type := .Get "type" | default "note" -}} - {{- if eq (.Get "details") "true" -}} + {{- if .Get "details" -}} <details class="admonition {{ $type }}"> - {{- with .Get "title" -}} - <summary class="admonition-title"> - <i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ . }}<i class="details {{ $iconDetails }}"></i> - </summary> - {{- end -}} + <summary class="admonition-title"> + <i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ .Get "title" | default (T $type) }}<i class="details {{ $iconDetails }}"></i> + </summary> <div class="admonition-content"> {{- $inner -}} </div> </details> {{- else -}} <div class="admonition {{ $type }}"> - {{- with .Get "title" -}} - <p class="admonition-title"><i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ . }}</p> - {{- end -}} + <p class="admonition-title"><i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ .Get "title" | default (T $type) }}</p> <div class="admonition-content"> {{- $inner -}} </div> </div> {{- end -}} {{- else -}} - {{- $type := .Get 0 -}} - {{- if eq (.Get 2) "true" -}} + {{- $type := .Get 0 | default "note" -}} + {{- if .Get 2 -}} <details class="admonition {{ $type }}"> - {{- with .Get 1 -}} - <summary class="admonition-title"> - <i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ . }}<i class="details {{ $iconDetails }}"></i> - </summary> - {{- end -}} + <summary class="admonition-title"> + <i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ .Get 1 | default (T $type) }}<i class="details {{ $iconDetails }}"></i> + </summary> <div class="admonition-content"> {{- $inner -}} </div> </details> {{- else -}} <div class="admonition {{ $type }}"> - {{- with .Get 1 -}} - <p class="admonition-title"><i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ . }}</p> - {{- end -}} + <p class="admonition-title"><i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ .Get 1 | default (T $type) }}</p> <div class="admonition-content"> {{- $inner -}} </div> diff --git a/layouts/shortcodes/bilibili.html b/layouts/shortcodes/bilibili.html index 128e2d5..0bb2b17 100644 --- a/layouts/shortcodes/bilibili.html +++ b/layouts/shortcodes/bilibili.html @@ -1,7 +1,7 @@ <div class="bilibili"> {{- if .IsNamedParams -}} - <iframe src="//player.bilibili.com/player.html?aid={{ .Get "aid" }}&cid={{ .Get "cid" }}&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe> + <iframe src="//player.bilibili.com/player.html?aid={{ .Get `av` }}&page={{ .Get `p` | default 1 }}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe> {{- else -}} - <iframe src="//player.bilibili.com/player.html?aid={{ .Get 0 }}&cid={{ .Get 1 }}&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe> + <iframe src="//player.bilibili.com/player.html?aid={{ .Get 0 }}&page={{ .Get 1 | default 1 }}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe> {{- end -}} </div> diff --git a/layouts/shortcodes/image.html b/layouts/shortcodes/image.html index e2d4f77..4887b9d 100644 --- a/layouts/shortcodes/image.html +++ b/layouts/shortcodes/image.html @@ -2,13 +2,15 @@ {{- $options := .Get "src" | dict "src" -}} {{- $options = .Get "src_s" | dict "src_s" | merge $options -}} {{- $options = .Get "src_l" | dict "src_l" | merge $options -}} - {{- $options = .Get "title" | dict "title" | merge $options -}} - {{- $options = .Get "description" | dict "description" | merge $options -}} + {{- $title := .Get "title" | $.Page.RenderString -}} + {{- $options = $title | dict "title" | merge $options -}} + {{- $description := .Get "description" | $.Page.RenderString -}} + {{- $options = $description | dict "description" | merge $options -}} {{- $lightgallery := ne .Page.Site.Params.page.lightgallery false | and (ne .Page.Params.lightgallery false) -}} {{- $options = $lightgallery | dict "lightgallery" | merge $options -}} {{- $options = .Page.Scratch.Get "scratch" | dict "scratch" | merge $options -}} {{- partial "plugin/image.html" $options -}} - {{- with (.Get "title" | default .Get "description") -}} + {{- with $title | default $description -}} <figcaption class="image-caption"> {{- . | safeHTML -}} </figcaption> diff --git a/layouts/shortcodes/music.html b/layouts/shortcodes/music.html index dcd98ba..ca8a51f 100644 --- a/layouts/shortcodes/music.html +++ b/layouts/shortcodes/music.html @@ -1,14 +1,42 @@ {{- $scratch := .Page.Scratch.Get "scratch" -}} {{- if .IsNamedParams -}} - <meting-js server="{{ .Get "server" }}" type="{{ .Get "type" }}" id="{{ .Get "id" }}" theme="#A9A9B3" - {{- with .Get "autoplay" }} autoplay="{{ . }}"{{ end -}} - {{- with .Get "mini" }} mini="{{ . }}"{{ end -}} - {{- with .Get "fixed" }} fixed="{{ . }}"{{ end -}} - {{- with .Get "list-folded" }} list-folded="{{ . }}"{{ end -}} - {{- with .Get "list-max-height" }} list-max-height="{{ . }}"{{ end -}} - ></meting-js> + {{- if .Get "url" -}} + <meting-js url="{{ .Get `url` }}" name="{{ .Get `name` }}" artist="{{ .Get `artist` }}" cover="{{ .Get `cover` }}" theme="{{ .Get `theme` | default `#a9a9b3` }}" + {{- with .Get "fixed" }} fixed="{{ . }}"{{ end -}} + {{- with .Get "mini" }} mini="{{ . }}"{{ end -}} + {{- with .Get "autoplay" }} autoplay="{{ . }}"{{ end -}} + {{- with .Get "volume" }} volume="{{ . }}"{{ end -}} + {{- with .Get "mutex" }} mutex="{{ . }}"{{ end -}} + ></meting-js> + {{- else if .Get "auto" -}} + <meting-js auto="{{ .Get `auto` }}" theme="{{ .Get `theme` | default `#a9a9b3` }}" + {{- with .Get "fixed" }} fixed="{{ . }}"{{ end -}} + {{- with .Get "mini" }} mini="{{ . }}"{{ end -}} + {{- with .Get "autoplay" }} autoplay="{{ . }}"{{ end -}} + {{- with .Get "loop" }} loop="{{ . }}"{{ end -}} + {{- with .Get "order" }} order="{{ . }}"{{ end -}} + {{- with .Get "volume" }} volume="{{ . }}"{{ end -}} + {{- with .Get "mutex" }} mutex="{{ . }}"{{ end -}} + {{- with .Get "list-folded" }} list-folded="{{ . }}"{{ end -}} + {{- with .Get "list-max-height" }} list-max-height="{{ . }}"{{ end -}} + ></meting-js> + {{- else -}} + <meting-js server="{{ .Get `server` }}" type="{{ .Get `type` }}" id="{{ .Get `id` }}" theme="{{ .Get `theme` | default `#a9a9b3` }}" + {{- with .Get "fixed" }} fixed="{{ . }}"{{ end -}} + {{- with .Get "mini" }} mini="{{ . }}"{{ end -}} + {{- with .Get "autoplay" }} autoplay="{{ . }}"{{ end -}} + {{- with .Get "loop" }} loop="{{ . }}"{{ end -}} + {{- with .Get "order" }} order="{{ . }}"{{ end -}} + {{- with .Get "volume" }} volume="{{ . }}"{{ end -}} + {{- with .Get "mutex" }} mutex="{{ . }}"{{ end -}} + {{- with .Get "list-folded" }} list-folded="{{ . }}"{{ end -}} + {{- with .Get "list-max-height" }} list-max-height="{{ . }}"{{ end -}} + ></meting-js> + {{- end -}} +{{- else if strings.HasSuffix (.Get 0) "http" -}} + <meting-js auto="{{ .Get 0 }}" theme="#a9a9b3"></meting-js> {{- else -}} - <meting-js server="{{ .Get 0 }}" type="{{ .Get 1 }}" id="{{ .Get 2 }}" theme="#A9A9B3"></meting-js> + <meting-js server="{{ .Get 0 }}" type="{{ .Get 1 }}" id="{{ .Get 2 }}" theme="#a9a9b3"></meting-js> {{- end -}} {{- $scratch.Set "music" true -}} diff --git a/layouts/shortcodes/typeit.html b/layouts/shortcodes/typeit.html index 9176f0f..fdbecf1 100644 --- a/layouts/shortcodes/typeit.html +++ b/layouts/shortcodes/typeit.html @@ -1,32 +1,33 @@ {{- $scratch := .Page.Scratch.Get "scratch" -}} -{{- /* only the trailing newline is retained */ -}} -{{- $content := replaceRE `(?s)^\n*(.*?)\n*$` "$1\n" .Inner | .Page.RenderString | chomp -}} -{{- $id := partial "function/id.html" (dict "content" $content "scratch" $scratch) -}} +{{- $content := .Inner -}} +{{- $classList := .Get "class" | slice -}} +{{- $tag := .Get "tag" | default "div" -}} + +{{- with .Get "code" -}} + {{- /* highlight code content without line number */ -}} + {{- $content = highlight $content . "linenos=false" -}} + {{- /* delete outer label */ -}} + {{- $content = replaceRE `<div class="highlight"><pre class="chroma"><code[^<>]*>(?s)(.*)</code></pre></div>` "$1" $content -}} + {{- /* parsing markdown links */ -}} + {{- $content = replaceRE `(<span[^<>]*>)([^<>]*)\[([^<>]+)\]\(([^<>]+)\)([^<>]*)(</span>)` "$1$2$6<a href=$4>$3</a>$1$5$6" $content -}} + {{- /* replace " " to " " and replace "\n" to "<br />" */ -}} + {{- $content = replaceRE ` ` " " $content | replaceRE `(<\w+) ` "$1 " | replaceRE `\n` "<br />" -}} + {{- /* fix "<br />" location error which is a bug of Typeit HTML parser */ -}} + {{- $content = replaceRE `<br /></span>` "</span><br />" $content -}} + {{- $classList = $classList | append "highlight" -}} +{{- else -}} + {{- $content = $content | .Page.RenderString -}} +{{- end -}} -<div class={{ .Get "class" | default "typeit" }}> - {{- /* raw html content */ -}} - {{- if .Get "raw" -}} - <div id={{ $id }}></div> - {{- else if .Get "code" -}} - {{- /* highlight code content without line number */ -}} - {{- $content = highlight $content (.Get "code") "linenos=false" -}} - {{- /* delete outer label */ -}} - {{- $content = replaceRE `<div class="highlight"><pre class="chroma"><code[^<>]*>(?s)(.*)</code></pre></div>` "$1" $content -}} - {{- /* parsing markdown links */ -}} - {{- $content = replaceRE `(<span[^<>]*>)([^<>]*)\[([^<>]+)\]\(([^<>]+)\)([^<>]*)(</span>)` "$1$2$6<a href=$4>$3</a>$1$5$6" $content -}} - {{- /* replace " " to " " and replace "\n" to "<br />" */ -}} - {{- $content = replaceRE ` ` " " $content | replaceRE `(<\w+) ` "$1 " | replaceRE `\n` "<br />" -}} - {{- /* fix "<br />" location error which is a bug of Typeit HTML parser */ -}} - {{- $content = replaceRE `<br /></span>` "</span><br />" $content -}} - <div class="highlight" id={{ $id }}></div> - {{- else -}} - {{- $tag := .Get "tag" | default "p" -}} - {{- printf "<%s id=%s></%s>" $tag $id $tag | safeHTML -}} - {{- end -}} +{{- /* trim the newline */ -}} +{{- $content = trim $content "\n" -}} +{{- $id := partial "function/id.html" (dict "content" $content "scratch" $scratch) -}} +{{- $key := .Get "group" | default $id -}} +{{- $group := index ($scratch.Get "typeitMap" | default dict) $key -}} +{{- $group = $group | default slice | append $id -}} +{{- $scratch.SetInMap "typeitMap" $key $group -}} - {{- $key := .Get "group" | default $id -}} - {{- $group := index ($scratch.Get "typeitMap" | default dict) $key -}} - {{- $group = $group | default slice | append $id -}} - {{- $scratch.SetInMap "typeitMap" $key $group -}} +<div class="typeit"> + {{- printf `<%s id="%s" class="%s"></%s>` $tag $id (delimit $classList " ") $tag | safeHTML -}} </div> diff --git a/package.json b/package.json index 565f324..8ba2831 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "loveit-src", - "version": "1.0.0", + "version": "0.1.0", "description": "LoveIt theme source file", "main": "index.js", "dependencies": {}, @@ -13,7 +13,7 @@ }, "scripts": { "build": "npx babel src --out-file assets/js/theme.min.js --source-maps", - "start": "hugo server --source=exampleSite --themesDir=../.. --disableFastRender -D", + "start": "hugo server --source=exampleSite --themesDir=../.. --disableFastRender", "copy": "hugo -v --source=exampleSite --themesDir=../.. -D --gc --minify && rm -rf resources && cp -rf exampleSite/resources resources" }, "husky": { diff --git a/resources/_gen/assets/scss/css/style.template.scss_40942e46c3aa444eabf479d066570690.content b/resources/_gen/assets/scss/css/style.template.scss_40942e46c3aa444eabf479d066570690.content index 0924529..1c53340 100644 --- a/resources/_gen/assets/scss/css/style.template.scss_40942e46c3aa444eabf479d066570690.content +++ b/resources/_gen/assets/scss/css/style.template.scss_40942e46c3aa444eabf479d066570690.content @@ -1,3 +1,3 @@ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html{font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Microsoft Yahei,Segoe UI,Helvetica,Arial,sans-serif,Segoe UI Emoji;font-size:16px;font-weight:400;line-height:1.5rem;width:100%}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{background-color:#87878d}::-webkit-scrollbar-thumb:hover{background-color:#a9a9b3}::selection{background:rgba(38,139,211,0.2)}.dark-theme ::selection{background:rgba(38,139,211,0.3)}body{background-color:#fff;color:#161209;overflow-wrap:break-word}body::before{content:"";background-repeat:no-repeat;background-position:center;opacity:0.05;position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:grayscale(100%);filter:gray}body.dark-theme{color:#a9a9b3;background-color:#292a2d}b,strong{font-weight:bold}a{color:#161209;text-decoration:none;transition:color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease}a:hover{color:#2d96bd}.dark-theme a{color:#a9a9b3}.dark-theme a:hover{color:#fff}b,strong{font-weight:bold}#dynamic-to-top{display:none;overflow:hidden;width:auto;z-index:90;position:fixed;bottom:2rem;right:2rem;top:auto;left:auto;font-family:sans-serif;font-size:1rem;color:#fff;text-decoration:none;font-weight:bold;padding:1rem 1rem;border:1px solid #dcdcdc;background:#222;outline:none}#dynamic-to-top:hover{background:#000;cursor:pointer}#dynamic-to-top:active{background:#000;outline:none}#dynamic-to-top:focus,#dynamic-to-top:hover{outline:none}#dynamic-to-top span{display:block;overflow:hidden;width:.875rem;height:.75rem;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAKCAYAAACE2W/HAAAACXBIWXMAAArwAAAK8AFCrDSYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAAKVJREFUeNqUz7ENgzAURdErUSXQMgdTZJFIqeg8DFI2YQeEvAEbUJja3y9NEiwCUXIlN/62jww7Saok3Z+r4pckXSRNWpskXb5deClHfeo7ylGrLqnbTmOMs/e+9d63McZ554GOlFLId0IIvXOuAUqgdM41IYQ+P5NSCpjZkitADRTZTwqgznUzWzCzZaMc9dbNbGEYhuuOclQB1OM43gBO/N/5MQAeMwpyB1MtLQAAAABJRU5ErkJggg==") no-repeat center center}.dark-theme #dynamic-to-top{border:1px solid #4a4b50}.wrapper{display:flex;flex-direction:column;min-height:97.5vh;width:100%}.wrapper main{flex:1 0 auto}.wrapper main .container{padding-left:1rem;padding-right:1rem}.footer{height:2rem;width:100%;text-align:center;line-height:1.5rem;padding-top:2rem}.page{position:relative;width:100%;max-width:980px;margin:0 auto;padding-top:6rem}.single .single-title{margin:0;font-size:1.8rem;line-height:3rem}.single .post-meta{font-size:.875rem;color:#a9a9b3}.single .post-meta span{display:inline-block}.dark-theme .single .post-meta{color:#5d5d5f}.single .post-meta a{color:#2d96bd}.dark-theme .single .post-meta a{color:#eee}.single .post-meta a:hover{color:#ef3982}.dark-theme .single .post-meta a:hover{color:#2d96bd}.single .post-meta .author{font-size:1.05rem}.single .featured-image{padding-top:.6rem}.single .featured-image img{display:block;max-width:100%;height:auto;margin:0 auto;overflow:hidden}.single #toc-auto{display:block;position:absolute;width:100%;margin-left:1000px;padding:0 .8rem;border-left:1px solid #dcdcdc;overflow-wrap:break-word;box-sizing:border-box;top:12rem}.dark-theme .single #toc-auto{border-left:1px solid #4a4b50}.single #toc-auto .toc-title{font-weight:400;margin:.8rem 0;text-transform:uppercase}.single #toc-auto .toc-content.always-active ul{display:block}.single #toc-auto .toc-content>nav>ul{margin:.625rem 0}.single #toc-auto .toc-content ul{text-indent:-0.85rem;padding-left:.625rem;list-style:none}.single #toc-auto .toc-content ul a::before{content:"|";font-weight:bolder;margin-right:.5rem;color:#2d96bd}.dark-theme .single #toc-auto .toc-content ul a::before{color:#eee}.single #toc-auto .toc-content ul ul{padding-left:1.25rem;display:none}.single #toc-auto .toc-content ul .has-active>ul{display:block}.single #toc-auto .toc-content a.active{font-weight:bold;color:#2d96bd}.dark-theme .single #toc-auto .toc-content a.active{color:#eee}.single #toc-auto .toc-content a.active::before{color:#ef3982}.dark-theme .single #toc-auto .toc-content a.active::before{color:#2d96bd}.single #toc-static{display:none;padding-top:.8rem}.single #toc-static details summary .toc-title{display:block;display:flex;justify-content:space-between;font-size:1.2em;font-weight:bold;line-height:2em;padding:0 .625rem;background:#f5f5f5}.single #toc-static details summary .toc-title i.details{line-height:2em}.dark-theme .single #toc-static details summary .toc-title{background:#272C34}.single #toc-static details summary::-webkit-details-marker{display:none}.single #toc-static details[open] i.details{transform:rotate(180deg)}.single #toc-static .toc-content{border:2px solid #f5f5f5}.single #toc-static .toc-content>nav>ul{margin:.625rem 0}.single #toc-static .toc-content ul{padding-left:.625rem;list-style:none}.single #toc-static .toc-content ul ul{padding-left:1.25rem}.dark-theme .single #toc-static .toc-content{border:2px solid #272C34}.single .toc ruby{background:#f5f5f5}.single .toc ruby rt{color:#a9a9b3}.dark-theme .single .toc ruby{background:#272C34}.dark-theme .single .toc ruby rt{color:#5d5d5f}.single .content h2,.single .content h3,.single .content h4,.single .content h5,.single .content h6{font-weight:bold;margin:1.2rem 0}.dark-theme .single .content h2,.dark-theme .single .content h3,.dark-theme .single .content h4,.dark-theme .single .content h5,.dark-theme .single .content h6{font-weight:bolder}.single .content h2>a:first-child::before,.single .content h3>a:first-child::before,.single .content h4>a:first-child::before,.single .content h5>a:first-child::before,.single .content h6>a:first-child::before{content:"|";margin-right:.3125rem;color:#2d96bd}.dark-theme .single .content h2>a:first-child::before,.dark-theme .single .content h3>a:first-child::before,.dark-theme .single .content h4>a:first-child::before,.dark-theme .single .content h5>a:first-child::before,.dark-theme .single .content h6>a:first-child::before{color:#eee}.single .content h2>a:first-child::before{content:"#"}.single .content p{font-size:1rem;margin:.5rem 0}.single .content a{word-break:break-all;color:#2d96bd}.dark-theme .single .content a{color:#eee}.single .content a:hover{color:#ef3982}.dark-theme .single .content a:hover:hover{color:#2d96bd;font-weight:bold}.single .content ul{padding-left:2rem;list-style-type:disc}.single .content ruby{background:#f5f5f5}.single .content ruby rt{color:#a9a9b3}.dark-theme .single .content ruby{background:#272C34}.dark-theme .single .content ruby rt{color:#5d5d5f}.single .content .table-wrapper{overflow-x:auto}.single .content .table-wrapper::-webkit-scrollbar{background-color:#fff}.dark-theme .single .content .table-wrapper::-webkit-scrollbar{background-color:#272c34}.single .content .table-wrapper>table{width:100%;max-width:100%;margin:.625rem 0;border-spacing:0;background:#fff}.dark-theme .single .content .table-wrapper>table{background:#272c34}.single .content .table-wrapper>table thead{background:#ededed}.dark-theme .single .content .table-wrapper>table thead{background-color:#20252b}.single .content .table-wrapper>table th,.single .content .table-wrapper>table td{padding:.3rem 1rem;border:1px double #dcdcdc}.dark-theme .single .content .table-wrapper>table th,.dark-theme .single .content .table-wrapper>table td{border:1px double #4a4b50}.single .content figure{text-align:center}.single .content figure .image-caption:not(:empty){min-width:20%;max-width:80%;display:inline-block;padding:.625rem;margin:0 auto;border-bottom:1px solid #d9d9d9;font-size:.875rem;color:#969696;line-height:1.7}.single .content figure a.lightgallery:hover img{transform:scale(1.02)}.single .content img{display:block;max-width:96%;height:auto;margin:0 auto;overflow:hidden;transition:all 0.2s ease-in-out}.single .content .lazyloading{object-fit:none}.single .content blockquote{font-size:1rem;display:block;border-width:1px 0;border-style:solid;border-color:#dcdcdc;padding:1.5em 1.2em 0.5em 1.2em;margin:0 0 2em 0;position:relative}.single .content blockquote::before{content:'\201C';position:absolute;top:0em;left:50%;transform:translate(-50%, -50%);width:3rem;height:2rem;font:6em/1.08em 'PT Sans', sans-serif;color:#2d96bd;text-align:center}.dark-theme .single .content blockquote::before{color:#eee}.single .content blockquote::after{content:"#blockquote" attr(cite);display:block;text-align:right;font-size:0.875em;color:#2d96bd}.dark-theme .single .content blockquote::after{color:#eee}.dark-theme .single .content blockquote{border-color:#4a4b50}.single .content .footnotes{color:#a9a9b3}.dark-theme .single .content .footnotes{color:#5d5d5f}.single .content code{font-size:13px;font-family:Source Code Pro,Menlo,Consolas,Monaco,monospace;padding:.2rem .4rem;color:#E74C3C}.dark-theme .single .content code{color:#E5BF78}.single .content code,.single .content pre,.single .content .highlight table,.single .content .highlight tr,.single .content .highlight td{background:#f5f5f5}.dark-theme .single .content code,.dark-theme .single .content pre,.dark-theme .single .content .highlight table,.dark-theme .single .content .highlight tr,.dark-theme .single .content .highlight td{background:#272C34}.single .content .highlight>.chroma{margin:1rem 0;line-height:18px}.single .content .highlight>.chroma code,.single .content .highlight>.chroma pre{margin:0;padding:0}.single .content .highlight>.chroma::before{display:block;padding:.4rem;font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Microsoft Yahei,Segoe UI,Helvetica,Arial,sans-serif,Segoe UI Emoji;font-size:13px;font-weight:bold;color:#b1b0b0;background:#ededed;content:'Code'}.dark-theme .single .content .highlight>.chroma::before{color:#b1b0b0;background:#20252b}.single .content .highlight>.chroma.language-bash::before{content:"Bash"}.single .content .highlight>.chroma.language-c::before{content:"C"}.single .content .highlight>.chroma.language-cs::before{content:"C#"}.single .content .highlight>.chroma.language-cpp::before{content:"C++"}.single .content .highlight>.chroma.language-clojure::before{content:"Clojure"}.single .content .highlight>.chroma.language-coffeescript::before{content:"CoffeeScript"}.single .content .highlight>.chroma.language-css::before{content:"CSS"}.single .content .highlight>.chroma.language-dart::before{content:"Dart"}.single .content .highlight>.chroma.language-diff::before{content:"Diff"}.single .content .highlight>.chroma.language-erlang::before{content:"Erlang"}.single .content .highlight>.chroma.language-go::before{content:"Go"}.single .content .highlight>.chroma.language-go-html-template::before{content:"Go HTML Template"}.single .content .highlight>.chroma.language-groovy::before{content:"Groovy"}.single .content .highlight>.chroma.language-haskell::before{content:"Haskell"}.single .content .highlight>.chroma.language-html::before{content:"HTML"}.single .content .highlight>.chroma.language-http::before{content:"HTTP"}.single .content .highlight>.chroma.language-xml::before{content:"XML"}.single .content .highlight>.chroma.language-java::before{content:"Java"}.single .content .highlight>.chroma.language-js::before{content:"JavaScript"}.single .content .highlight>.chroma.language-javascript::before{content:"JavaScript"}.single .content .highlight>.chroma.language-json::before{content:"JSON"}.single .content .highlight>.chroma.language-kotlin::before{content:"Kotlin"}.single .content .highlight>.chroma.language-latex::before{content:"LaTeX"}.single .content .highlight>.chroma.language-less::before{content:"Less"}.single .content .highlight>.chroma.language-lisp::before{content:"Lisp"}.single .content .highlight>.chroma.language-lua::before{content:"Lua"}.single .content .highlight>.chroma.language-makefile::before{content:"Makefile"}.single .content .highlight>.chroma.language-markdown::before{content:"Markdown"}.single .content .highlight>.chroma.language-matlab::before{content:"Matlab"}.single .content .highlight>.chroma.language-objectivec::before{content:"Objective-C"}.single .content .highlight>.chroma.language-php::before{content:"PHP"}.single .content .highlight>.chroma.language-perl::before{content:"Perl"}.single .content .highlight>.chroma.language-python::before{content:"Python"}.single .content .highlight>.chroma.language-r::before{content:"R"}.single .content .highlight>.chroma.language-ruby::before{content:"Ruby"}.single .content .highlight>.chroma.language-rust::before{content:"Rust"}.single .content .highlight>.chroma.language-scala::before{content:"Scala"}.single .content .highlight>.chroma.language-scss::before{content:"Scss"}.single .content .highlight>.chroma.language-shell::before{content:"Shell"}.single .content .highlight>.chroma.language-sql::before{content:"SQL"}.single .content .highlight>.chroma.language-swift::before{content:"Swift"}.single .content .highlight>.chroma.language-tex::before{content:"TeX"}.single .content .highlight>.chroma.language-toml::before{content:"TOML"}.single .content .highlight>.chroma.language-ts::before{content:"TypeScript"}.single .content .highlight>.chroma.language-typescript::before{content:"TypeScript"}.single .content .highlight>.chroma.language-vue::before{content:"Vue"}.single .content .highlight>.chroma.language-yml::before{content:"YAML"}.single .content .highlight>.chroma.language-yaml::before{content:"YAML"}.single .content .highlight>.chroma table,.single .content .highlight>.chroma tr,.single .content .highlight>.chroma td{margin:0;border:none !important}.single .content .highlight>.chroma td{padding:.2rem .4rem}.single .content .highlight>.chroma .lntd:first-child{width:1.2rem}.single .content .highlight>.chroma .lntd:first-child .lnt{color:#b1b0b0}.single .content .highlight>.chroma .lntd:first-child .hl{font-weight:bolder}.single .content .highlight>.chroma .lntd:last-child .hl{display:block;background-color:#e8e8e8}.dark-theme .single .content .highlight>.chroma .lntd:last-child .hl{background-color:#1c2025}.single .content .highlight{font-family:Source Code Pro,Menlo,Consolas,Monaco,monospace}.single .content .highlight .c,.single .content .highlight .ch,.single .content .highlight .cm,.single .content .highlight .c1,.single .content .highlight .cs,.single .content .highlight .cp,.single .content .highlight .cpf{font-style:italic}.single .content .highlight .gl{text-decoration:underline}.single .content .highlight .p{color:#a9a9b3}.single .content .highlight .k{color:#b501a9}.single .content .highlight .kc{color:#b501a9}.single .content .highlight .kd{color:#b501a9}.single .content .highlight .kn{color:#b501a9}.single .content .highlight .kp{color:#b501a9}.single .content .highlight .kr{color:#b501a9}.single .content .highlight .kt{color:#b501a9}.single .content .highlight .n{color:#333}.single .content .highlight .na{color:#2b77fa}.single .content .highlight .nb{color:#f74840}.single .content .highlight .bp{color:#f74840}.single .content .highlight .nc{color:#cb8100}.single .content .highlight .no{color:#2b77fa}.single .content .highlight .nd{color:#0086c1}.single .content .highlight .ni{color:#2b77fa}.single .content .highlight .ne{color:#2b77fa}.single .content .highlight .nf{color:#2b77fa}.single .content .highlight .fm{color:#1ccad6}.single .content .highlight .nl{color:#2b77fa}.single .content .highlight .nn{color:#2b77fa}.single .content .highlight .nx{color:#333}.single .content .highlight .py{color:#2b77fa}.single .content .highlight .nt{color:#2b77fa}.single .content .highlight .nv{color:#2b77fa}.single .content .highlight .vc{color:#2b77fa}.single .content .highlight .vg{color:#2b77fa}.single .content .highlight .vi{color:#2b77fa}.single .content .highlight .vm{color:#2b77fa}.single .content .highlight .l{color:#2aa198}.single .content .highlight .ld{color:#2aa198}.single .content .highlight .s{color:#24a443}.single .content .highlight .sa{color:#24a443}.single .content .highlight .sb{color:#24a443}.single .content .highlight .sc{color:#24a443}.single .content .highlight .dl{color:#24a443}.single .content .highlight .sd{color:#24a443}.single .content .highlight .s2{color:#24a443}.single .content .highlight .se{color:#24a443}.single .content .highlight .sh{color:#24a443}.single .content .highlight .si{color:#24a443}.single .content .highlight .sx{color:#24a443}.single .content .highlight .sr{color:#24a443}.single .content .highlight .s1{color:#24a443}.single .content .highlight .ss{color:#24a443}.single .content .highlight .m{color:#e2893c}.single .content .highlight .mb{color:#e2893c}.single .content .highlight .mf{color:#e2893c}.single .content .highlight .mh{color:#e2893c}.single .content .highlight .mi{color:#e2893c}.single .content .highlight .il{color:#e2893c}.single .content .highlight .mo{color:#e2893c}.single .content .highlight .o{color:#f19b04}.single .content .highlight .ow{color:#b501a9}.single .content .highlight .c{color:#a0a1a8}.single .content .highlight .ch{color:#a0a1a8}.single .content .highlight .cm{color:#a0a1a8}.single .content .highlight .c1{color:#a0a1a8}.single .content .highlight .cs{color:#a0a1a8}.single .content .highlight .cp{color:#a0a1a8}.single .content .highlight .cpf{color:#a0a1a8}.single .content .highlight .g{color:#e72d40}.single .content .highlight .gd{color:#e72d40}.single .content .highlight .ge{color:#e72d40}.single .content .highlight .gr{color:#e72d40}.single .content .highlight .gh{color:#e72d40}.single .content .highlight .gi{color:#e72d40}.single .content .highlight .go{color:#e72d40}.single .content .highlight .gp{color:#e72d40}.single .content .highlight .gs{color:#e72d40}.single .content .highlight .gu{color:#e72d40}.single .content .highlight .gt{color:#e72d40}.single .content .highlight .w{color:#bbb}.dark-theme .single .content .highlight .p{color:#a9a9b3}.dark-theme .single .content .highlight .k{color:#d371e3}.dark-theme .single .content .highlight .kc{color:#d371e3}.dark-theme .single .content .highlight .kd{color:#d371e3}.dark-theme .single .content .highlight .kn{color:#d371e3}.dark-theme .single .content .highlight .kp{color:#d371e3}.dark-theme .single .content .highlight .kr{color:#d371e3}.dark-theme .single .content .highlight .kt{color:#d371e3}.dark-theme .single .content .highlight .n{color:#a9b2c0}.dark-theme .single .content .highlight .na{color:#41b0f5}.dark-theme .single .content .highlight .nb{color:#19b9c4}.dark-theme .single .content .highlight .bp{color:#ecbf6f}.dark-theme .single .content .highlight .nc{color:#ecbf6f}.dark-theme .single .content .highlight .no{color:#41b0f5}.dark-theme .single .content .highlight .nd{color:#ecbf6f}.dark-theme .single .content .highlight .ni{color:#41b0f5}.dark-theme .single .content .highlight .ne{color:#41b0f5}.dark-theme .single .content .highlight .nf{color:#41b0f5}.dark-theme .single .content .highlight .fm{color:#19b9c4}.dark-theme .single .content .highlight .nl{color:#41b0f5}.dark-theme .single .content .highlight .nn{color:#41b0f5}.dark-theme .single .content .highlight .nx{color:#a9a9b3}.dark-theme .single .content .highlight .py{color:#41b0f5}.dark-theme .single .content .highlight .nt{color:#41b0f5}.dark-theme .single .content .highlight .nv{color:#41b0f5}.dark-theme .single .content .highlight .vc{color:#41b0f5}.dark-theme .single .content .highlight .vg{color:#41b0f5}.dark-theme .single .content .highlight .vi{color:#41b0f5}.dark-theme .single .content .highlight .vm{color:#41b0f5}.dark-theme .single .content .highlight .l{color:#2aa198}.dark-theme .single .content .highlight .ld{color:#2aa198}.dark-theme .single .content .highlight .s{color:#8cc570}.dark-theme .single .content .highlight .sa{color:#8cc570}.dark-theme .single .content .highlight .sb{color:#8cc570}.dark-theme .single .content .highlight .sc{color:#8cc570}.dark-theme .single .content .highlight .dl{color:#8cc570}.dark-theme .single .content .highlight .sd{color:#8cc570}.dark-theme .single .content .highlight .s2{color:#8cc570}.dark-theme .single .content .highlight .se{color:#8cc570}.dark-theme .single .content .highlight .sh{color:#8cc570}.dark-theme .single .content .highlight .si{color:#8cc570}.dark-theme .single .content .highlight .sx{color:#8cc570}.dark-theme .single .content .highlight .sr{color:#8cc570}.dark-theme .single .content .highlight .s1{color:#8cc570}.dark-theme .single .content .highlight .ss{color:#8cc570}.dark-theme .single .content .highlight .m{color:#db985c}.dark-theme .single .content .highlight .mb{color:#db985c}.dark-theme .single .content .highlight .mf{color:#db985c}.dark-theme .single .content .highlight .mh{color:#db985c}.dark-theme .single .content .highlight .mi{color:#db985c}.dark-theme .single .content .highlight .il{color:#db985c}.dark-theme .single .content .highlight .mo{color:#db985c}.dark-theme .single .content .highlight .o{color:#ecbf6f}.dark-theme .single .content .highlight .ow{color:#d371e3}.dark-theme .single .content .highlight .c{color:#7e848f}.dark-theme .single .content .highlight .ch{color:#7e848f}.dark-theme .single .content .highlight .cm{color:#7e848f}.dark-theme .single .content .highlight .c1{color:#7e848f}.dark-theme .single .content .highlight .cs{color:#7e848f}.dark-theme .single .content .highlight .cp{color:#7e848f}.dark-theme .single .content .highlight .cpf{color:#7e848f}.dark-theme .single .content .highlight .g{color:#f16372}.dark-theme .single .content .highlight .gd{color:#f16372}.dark-theme .single .content .highlight .ge{color:#f16372}.dark-theme .single .content .highlight .gr{color:#f16372}.dark-theme .single .content .highlight .gh{color:#f16372}.dark-theme .single .content .highlight .gi{color:#f16372}.dark-theme .single .content .highlight .go{color:#f16372}.dark-theme .single .content .highlight .gp{color:#f16372}.dark-theme .single .content .highlight .gs{color:#f16372}.dark-theme .single .content .highlight .gu{color:#f16372}.dark-theme .single .content .highlight .gt{color:#f16372}.dark-theme .single .content .highlight .w{color:#bbb}.single .content .admonition{position:relative;margin:.9765em 0;padding:0 .75rem;background-color:rgba(68,138,255,0.1);border-left:0.25rem solid #448aff;overflow:auto}.single .content .admonition .admonition-title{margin:0 -0.75rem;padding:.5rem .75rem .5rem 2.5rem;border-bottom:0.1rem solid rgba(68,138,255,0.1);background-color:rgba(68,138,255,0.1);font-weight:700}.single .content .admonition .admonition-content{margin:.5rem 0}.single .content .admonition i.icon{font-size:16px;color:#448aff;cursor:auto;position:absolute;left:.75rem;top:.75rem}.single .content .admonition.note{border-left-color:#448aff}.single .content .admonition.note i.icon{color:#448aff}.single .content .admonition.abstract{border-left-color:#00b0ff}.single .content .admonition.abstract i.icon{color:#00b0ff}.single .content .admonition.info{border-left-color:#00b8d4}.single .content .admonition.info i.icon{color:#00b8d4}.single .content .admonition.tip{border-left-color:#00bfa5}.single .content .admonition.tip i.icon{color:#00bfa5}.single .content .admonition.success{border-left-color:#00c853}.single .content .admonition.success i.icon{color:#00c853}.single .content .admonition.question{border-left-color:#64dd17}.single .content .admonition.question i.icon{color:#64dd17}.single .content .admonition.warning{border-left-color:#ff9100}.single .content .admonition.warning i.icon{color:#ff9100}.single .content .admonition.failure{border-left-color:#ff5252}.single .content .admonition.failure i.icon{color:#ff5252}.single .content .admonition.danger{border-left-color:#ff1744}.single .content .admonition.danger i.icon{color:#ff1744}.single .content .admonition.bug{border-left-color:#f50057}.single .content .admonition.bug i.icon{color:#f50057}.single .content .admonition.example{border-left-color:#651fff}.single .content .admonition.example i.icon{color:#651fff}.single .content .admonition.quote{border-left-color:#9e9e9e}.single .content .admonition.quote i.icon{color:#9e9e9e}.single .content .admonition.note{background-color:rgba(68,138,255,0.1)}.single .content .admonition.note .admonition-title{border-bottom-color:rgba(68,138,255,0.1);background-color:rgba(68,138,255,0.1)}.single .content .admonition.abstract{background-color:rgba(0,176,255,0.1)}.single .content .admonition.abstract .admonition-title{border-bottom-color:rgba(0,176,255,0.1);background-color:rgba(0,176,255,0.1)}.single .content .admonition.info{background-color:rgba(0,184,212,0.1)}.single .content .admonition.info .admonition-title{border-bottom-color:rgba(0,184,212,0.1);background-color:rgba(0,184,212,0.1)}.single .content .admonition.tip{background-color:rgba(0,191,165,0.1)}.single .content .admonition.tip .admonition-title{border-bottom-color:rgba(0,191,165,0.1);background-color:rgba(0,191,165,0.1)}.single .content .admonition.success{background-color:rgba(0,200,83,0.1)}.single .content .admonition.success .admonition-title{border-bottom-color:rgba(0,200,83,0.1);background-color:rgba(0,200,83,0.1)}.single .content .admonition.question{background-color:rgba(100,221,23,0.1)}.single .content .admonition.question .admonition-title{border-bottom-color:rgba(100,221,23,0.1);background-color:rgba(100,221,23,0.1)}.single .content .admonition.warning{background-color:rgba(255,145,0,0.1)}.single .content .admonition.warning .admonition-title{border-bottom-color:rgba(255,145,0,0.1);background-color:rgba(255,145,0,0.1)}.single .content .admonition.failure{background-color:rgba(255,82,82,0.1)}.single .content .admonition.failure .admonition-title{border-bottom-color:rgba(255,82,82,0.1);background-color:rgba(255,82,82,0.1)}.single .content .admonition.danger{background-color:rgba(255,23,68,0.1)}.single .content .admonition.danger .admonition-title{border-bottom-color:rgba(255,23,68,0.1);background-color:rgba(255,23,68,0.1)}.single .content .admonition.bug{background-color:rgba(245,0,87,0.1)}.single .content .admonition.bug .admonition-title{border-bottom-color:rgba(245,0,87,0.1);background-color:rgba(245,0,87,0.1)}.single .content .admonition.example{background-color:rgba(101,31,255,0.1)}.single .content .admonition.example .admonition-title{border-bottom-color:rgba(101,31,255,0.1);background-color:rgba(101,31,255,0.1)}.single .content .admonition.quote{background-color:rgba(158,158,158,0.1)}.single .content .admonition.quote .admonition-title{border-bottom-color:rgba(158,158,158,0.1);background-color:rgba(158,158,158,0.1)}.single .content .admonition:last-child{margin-bottom:.75rem}.single .content details.admonition summary{display:block;outline:none;cursor:pointer}.single .content details.admonition summary::-webkit-details-marker{display:none}.single .content details.admonition summary i.details{position:absolute;top:.75rem;right:.75rem;color:#161209}.dark-theme .single .content details.admonition summary i.details{color:#a9a9b3}.single .content details.admonition[open] i.details{transform:rotate(180deg)}.single .content .echarts{width:100%;height:30rem;margin:3% auto;text-align:center}.single .content .bilibili{position:relative;width:100%;height:0;padding-bottom:75%;margin:3% auto;text-align:center}.single .content .bilibili iframe{position:absolute;width:100%;height:100%;left:0;top:0}.single .content hr{margin:1rem 0;position:relative;border-top:1px dashed #dcdcdc;border-bottom:none}.dark-theme .single .content hr{border-top:1px dashed #4a4b50}.single .content kbd{display:inline-block;padding:.25rem;background-color:#fff;border:1px solid #dcdcdc;border-bottom-color:#dcdcdc;border-radius:3px;-webkit-box-shadow:inset 0 -1px 0 #dcdcdc;box-shadow:inset 0 -1px 0 #dcdcdc;font-size:.8rem;font-family:Source Code Pro,Menlo,Consolas,Monaco,monospace;color:#E74C3C}.dark-theme .single .content kbd{background-color:#292a2d;border:1px solid #4a4b50;border-bottom-color:#4a4b50;-webkit-box-shadow:inset 0 -1px 0 #4a4b50;box-shadow:inset 0 -1px 0 #4a4b50;color:#E5BF78}.single .content .typeit .code{padding:.375rem;font-size:.875rem;font-family:Source Code Pro,Menlo,Consolas,Monaco,monospace;font-weight:bold;word-break:break-all}.single .post-footer{margin-top:3rem}.single .post-footer .post-info{border-bottom:1px solid #dcdcdc;padding:1rem 0 0.3rem}.dark-theme .single .post-footer .post-info{border-bottom:1px solid #4a4b50}.single .post-footer .post-info .post-info-line{display:flex;justify-content:space-between}.single .post-footer .post-info .post-info-line .post-info-mod{font-size:0.8em;color:#a9a9b3}.dark-theme .single .post-footer .post-info .post-info-line .post-info-mod{color:#5d5d5f}.single .post-footer .post-info .post-info-line .post-info-mod a{color:#2d96bd}.dark-theme .single .post-footer .post-info .post-info-line .post-info-mod a{color:#eee}.single .post-footer .post-info .post-info-line .post-info-mod a:hover{color:#ef3982}.dark-theme .single .post-footer .post-info .post-info-line .post-info-mod a:hover{color:#2d96bd}.single .post-footer .post-info .post-info-line .post-info-license{font-size:0.8em;color:#a9a9b3}.dark-theme .single .post-footer .post-info .post-info-line .post-info-license{color:#5d5d5f}.single .post-footer .post-info .post-info-line .post-info-md{font-size:0.8rem;width:8rem}.single .post-footer .post-info .post-info-line .post-info-md a{color:#2d96bd}.dark-theme .single .post-footer .post-info .post-info-line .post-info-md a{color:#eee}.single .post-footer .post-info .post-info-line .post-info-md a:hover{color:#ef3982}.dark-theme .single .post-footer .post-info .post-info-line .post-info-md a:hover{color:#2d96bd}.single .post-footer .post-info-more{padding:0.3rem 0 1rem;display:flex;justify-content:space-between;font-size:0.9rem}.single .post-footer .post-nav::before,.single .post-footer .post-nav::after{content:' ';display:table}.single .post-footer .post-nav a.prev,.single .post-footer .post-nav a.next{font-size:1rem;font-weight:600;transition-duration:.3s;transition-property:transform;transition-timing-function:ease-out}.single .post-footer .post-nav a.prev{float:left}.single .post-footer .post-nav a.prev:hover{transform:translateX(-4px)}.single .post-footer .post-nav a.next{float:right}.single .post-footer .post-nav a.next:hover{transform:translateX(4px)}.single .comment{padding:4rem 0}.special .single-title{text-align:right;padding-bottom:2rem}.archive .single-title{text-align:right;padding-bottom:2rem}.archive .archive-item{margin-left:2rem}.archive .categories-card{margin:0 auto;margin-top:3rem;display:flex;align-items:center;justify-content:space-between;flex-direction:row;flex-wrap:wrap;padding:0 2.5rem;line-height:1.6rem}.archive .categories-card .card-item{font-size:.875rem;text-align:left;width:45%;display:flex;align-items:flex-start;margin-top:2rem;min-height:10rem;padding:0 2%;position:relative}.archive .categories-card .card-item .card-item-wrapper{width:100%;overflow:hidden}.archive .categories-card .card-item .card-item-wrapper .card-item-title{font-size:1.2rem;font-weight:bold;display:inline-block}.archive .categories-card .card-item .card-item-wrapper span{float:right;padding-right:1rem}.archive .archive-item-link{display:inline-block;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:95%}.archive .archive-item-link:hover{color:#2d96bd;background-color:transparent}.dark-theme .archive .archive-item-link{color:#a9a9b3;text-decoration:none;transition:color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease}.dark-theme .archive .archive-item-link:hover{color:#fff;text-decoration:none;transition:color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease}.archive .archive-item-date{float:right;text-align:right;color:#a9a9b3}.dark-theme .archive .archive-item-date{color:#5d5d5f}.archive .more-post{text-align:right}.archive .tag-cloud-tags{margin:10px 0}.archive .tag-cloud-tags a{display:inline-block;position:relative;margin:5px 10px;overflow-wrap:break-word;transition-duration:.3s;transition-property:transform;transition-timing-function:ease-out}.archive .tag-cloud-tags a:active,.archive .tag-cloud-tags a:focus,.archive .tag-cloud-tags a:hover{color:#2d96bd;transform:scale(1.1)}.dark-theme .archive .tag-cloud-tags a:active,.dark-theme .archive .tag-cloud-tags a:focus,.dark-theme .archive .tag-cloud-tags a:hover{color:#fff}.archive .tag-cloud-tags a small{color:#a9a9b3}.dark-theme .archive .tag-cloud-tags a small{color:#fff}.home .home-profile{transform:translateY(0);padding:2rem 0;text-align:center}.home .home-profile .home-avatar{padding:0.6rem}.home .home-profile .home-avatar img{width:6rem;height:auto;display:inline-block;-webkit-border-radius:100%;border-radius:100%;-webkit-box-shadow:0 0 0 0.3618em rgba(0,0,0,0.05);box-shadow:0 0 0 0.3618em rgba(0,0,0,0.05);margin:0 auto;-webkit-transition:all ease 0.4s;-moz-transition:all ease 0.4s;-o-transition:all ease 0.4s;transition:all ease 0.4s;cursor:pointer}.home .home-profile .home-avatar img:hover{position:relative;-webkit-transform:translateY(-0.75rem);-moz-transform:translateY(-0.75rem);-ms-transform:translateY(-0.75rem);-o-transform:translateY(-0.75rem);transform:translateY(-0.75rem);cursor:pointer}.home .home-profile .home-description{font-size:1rem;font-weight:normal;margin:0;padding:.4rem}.home .home-profile .home-social-links{padding-top:.6rem}.home .home-profile .home-social-links i{font-size:1.45rem}.home .home-profile .home-social-links img{width:1.5rem;height:1.5rem}.home .summary{padding-top:1rem;padding-bottom:.8rem;color:#161209;border-bottom:1px dashed #dcdcdc}.dark-theme .home .summary{color:#a9a9b3;border-bottom:1px dashed #4a4b50}.home .summary .featured-image-preview{width:100%;padding:30% 0 0;position:relative;margin:0.6rem auto}.home .summary .featured-image-preview img{position:absolute;width:100%;height:100%;left:0;top:0;object-fit:cover}.home .summary .single-title{font-size:1.6rem}.home .summary .content{display:-moz-box;display:-webkit-box;-moz-box-orient:vertical;-webkit-box-orient:vertical;-webkit-line-clamp:3;margin-top:.3rem;width:100%;overflow:hidden;text-overflow:ellipsis;overflow-wrap:break-word;color:#a9a9b3}.dark-theme .home .summary .content{color:#5d5d5f}.home .summary .content h2,.home .summary .content h3,.home .summary .content h4,.home .summary .content h5,.home .summary .content h6,.home .summary .content p{font-size:1rem;display:inline}.home .summary .content h2::after,.home .summary .content h3::after,.home .summary .content h4::after,.home .summary .content h5::after,.home .summary .content h6::after,.home .summary .content p::after{content:"\A";white-space:pre}.home .summary .content h2,.home .summary .content h3,.home .summary .content h4,.home .summary .content h5,.home .summary .content h6{line-height:2}.home .summary .content h2::before,.home .summary .content h3::before,.home .summary .content h4::before,.home .summary .content h5::before,.home .summary .content h6::before{content:"|";margin-right:.3125rem;color:#2d96bd}.dark-theme .home .summary .content h2::before,.dark-theme .home .summary .content h3::before,.dark-theme .home .summary .content h4::before,.dark-theme .home .summary .content h5::before,.dark-theme .home .summary .content h6::before{color:#eee}.home .summary .content h2{font-size:1.2rem}.home .summary .content h2::before{content:"#"}.home .summary .post-footer{margin-top:.5rem;display:flex;justify-content:space-between;align-items:center;font-size:.875rem !important}.home .summary .post-footer a{color:#2d96bd !important}.dark-theme .home .summary .post-footer a{color:#eee !important}.home .summary .post-footer a:hover{color:#ef3982 !important}.dark-theme .home .summary .post-footer a:hover{color:#2d96bd !important}.home .summary .post-footer .post-tags{padding:0}.home .summary .post-footer .post-tags a{color:#161209 !important}.dark-theme .home .summary .post-footer .post-tags a{color:#a9a9b3 !important}.home .summary .post-footer .post-tags a:hover{color:#2d96bd !important}.dark-theme .home .summary .post-footer .post-tags a:hover{color:#fff !important}#content-404{font-size:1.8rem;line-height:3rem;transform:translateY(30vh);text-align:center}header{width:100%;z-index:100;background-color:#f8f8f8}.dark-theme header{background-color:#252627}header .header-title{font-weight:bold}header .select-language{font-weight:400;border:none;box-shadow:none;background:transparent;background-image:none;-webkit-appearance:none;color:#161209}.dark-theme header .select-language{color:#a9a9b3}header .select-language:focus{outline:none}header .select-language:hover{cursor:pointer}#header-desktop{display:block;position:fixed;height:4rem;line-height:4rem}#header-desktop .header-wrapper{width:auto;text-align:center;margin:0 4rem;display:flex;justify-content:space-between}#header-desktop .header-wrapper .header-title a{padding:0 8px;font-size:1.25rem}#header-desktop .header-wrapper .header-title a i{line-height:2rem}#header-desktop .header-wrapper .menu a{padding:0 8px}#header-desktop .header-wrapper .menu a.active{font-weight:900;color:#161209}.dark-theme #header-desktop .header-wrapper .menu a.active{color:#fff}#header-mobile{display:none;position:fixed;height:4rem;line-height:4rem}#header-mobile .header-wrapper{padding:0;margin:0;transition:all 0.3s ease 0s}#header-mobile .header-wrapper .header-container{display:flex;justify-content:space-between;align-items:center;width:100%;font-size:1.125rem;padding-right:1rem;padding-left:1rem;box-sizing:border-box}#header-mobile .header-wrapper .header-container .header-title{font-size:1.25rem}#header-mobile .header-wrapper .header-container .menu-toggle{cursor:pointer;line-height:4rem}#header-mobile .header-wrapper .header-container .menu-toggle span{display:block;background:#161209;width:1.5rem;height:2px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-transition:.1s margin .1s, .1s transform;-moz-transition:.1s margin .1s, .1s transform;transition:.1s margin .1s, .1s transform}.dark-theme #header-mobile .header-wrapper .header-container .menu-toggle span{background:#a9a9b3}#header-mobile .header-wrapper .header-container .menu-toggle span:nth-child(1){margin-bottom:.5rem}#header-mobile .header-wrapper .header-container .menu-toggle span:nth-child(3){margin-top:.5rem}#header-mobile .header-wrapper .header-container .menu-toggle.active span{-webkit-transition:.1s margin, .1s transform .1s;-moz-transition:.1s margin, .1s transform .1s;transition:.1s margin, .1s transform .1s}#header-mobile .header-wrapper .header-container .menu-toggle.active span:nth-child(1){-moz-transform:rotate(45deg) translate(0.4rem, 0.5rem);-ms-transform:rotate(45deg) translate(0.4rem, 0.5rem);-webkit-transform:rotate(45deg) translate(0.4rem, 0.5rem);transform:rotate(45deg) translate(0.4rem, 0.5rem)}#header-mobile .header-wrapper .header-container .menu-toggle.active span:nth-child(2){opacity:0}#header-mobile .header-wrapper .header-container .menu-toggle.active span:nth-child(3){-moz-transform:rotate(-45deg) translate(0.4rem, -0.5rem);-ms-transform:rotate(-45deg) translate(0.4rem, -0.5rem);-webkit-transform:rotate(-45deg) translate(0.4rem, -0.5rem);transform:rotate(-45deg) translate(0.4rem, -0.5rem)}#header-mobile .header-wrapper .menu{text-align:center;background:#fff;border-top:2px solid #161209;display:none;box-shadow:0px 2px 4px rgba(0,0,0,0.1),0px 4px 8px rgba(0,0,0,0.1)}#header-mobile .header-wrapper .menu a{display:block;line-height:2.5rem}#header-mobile .header-wrapper .menu.active{display:block}.dark-theme #header-mobile .header-wrapper .menu{background:#292a2d;border-top:2px solid #a9a9b3}.copyright{font-size:.875rem}.copyright .copyright-line{width:100%}.copyright .copyright-line .icp-br{display:none}.pagination{display:flex;flex-direction:row;justify-content:center;list-style:none;white-space:nowrap;width:100%;padding:1rem 0 0}.pagination a{-webkit-font-smoothing:antialiased;font-size:.8rem;color:#bfbfbf;letter-spacing:.1rem;font-weight:700;padding:5px 5px;text-decoration:none;transition:0.3s}.pagination li{padding-bottom:3px;margin:0 20px;box-sizing:border-box;position:relative;display:inline}.pagination li.disabled{display:none}.pagination li:hover a{color:#000}.dark-theme .pagination li:hover a{color:#fff}.pagination li:before,.pagination li:after{position:absolute;content:"";width:0;height:3px;background:#000;transition:0.3s;bottom:0px}.dark-theme .pagination li:before,.dark-theme .pagination li:after{background:#fff}.pagination li:before .active,.pagination li:after .active{width:100%}.pagination li:before{left:50%}.pagination li:after{right:50%}.pagination li:hover:before,.pagination li:hover:after{width:50%}.pagination li.active a{color:#000}.dark-theme .pagination li.active a{color:#fff}.pagination li.active:before,.pagination li.active:after{width:60%}@media only screen and (max-width: 1800px){.page{max-width:780px}.page #toc-auto{margin-left:800px}}@media only screen and (max-width: 1440px){.page{max-width:680px}.page #toc-auto{margin-left:700px}}@media only screen and (max-width: 1200px){.page{max-width:560px}.page #toc-auto{margin-left:580px}}@media only screen and (max-width: 960px){#header-desktop .header-wrapper{margin:0 1rem}.page{max-width:80%}.page #toc-auto{display:none}.page #toc-static{display:block}}@media only screen and (max-width: 560px){#header-desktop{display:none}#header-mobile{display:block}.page{max-width:100%;padding-top:6rem}.page .categories-card .card-item{width:100%}.copyright .copyright-line .icp-splitter{display:none}.copyright .copyright-line .icp-br{display:block}} +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html{font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Microsoft Yahei,Segoe UI,Helvetica,Arial,sans-serif,Segoe UI Emoji;font-size:16px;font-weight:400;line-height:1.5rem;width:100%}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{background-color:#87878d}::-webkit-scrollbar-thumb:hover{background-color:#a9a9b3}::selection{background:rgba(38,139,211,0.2)}.dark-theme ::selection{background:rgba(38,139,211,0.3)}body{background-color:#fff;color:#161209;overflow-wrap:break-word}body::before{content:"";background-repeat:no-repeat;background-position:center;opacity:0.05;position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:grayscale(100%);filter:gray}body.dark-theme{color:#a9a9b3;background-color:#292a2d}b,strong{font-weight:bold}a{color:#161209;text-decoration:none;transition:color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease}a:hover{color:#2d96bd}.dark-theme a{color:#a9a9b3}.dark-theme a:hover{color:#fff}b,strong{font-weight:bold}#dynamic-to-top{display:none;overflow:hidden;width:auto;z-index:90;position:fixed;bottom:2rem;right:2rem;top:auto;left:auto;font-family:sans-serif;font-size:1rem;color:#fff;text-decoration:none;font-weight:bold;padding:1rem 1rem;border:1px solid #dcdcdc;background:#222;outline:none}#dynamic-to-top:hover{background:#000;cursor:pointer}#dynamic-to-top:active{background:#000;outline:none}#dynamic-to-top:focus,#dynamic-to-top:hover{outline:none}#dynamic-to-top span{display:block;overflow:hidden;width:.875rem;height:.75rem;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAKCAYAAACE2W/HAAAACXBIWXMAAArwAAAK8AFCrDSYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAAKVJREFUeNqUz7ENgzAURdErUSXQMgdTZJFIqeg8DFI2YQeEvAEbUJja3y9NEiwCUXIlN/62jww7Saok3Z+r4pckXSRNWpskXb5deClHfeo7ylGrLqnbTmOMs/e+9d63McZ554GOlFLId0IIvXOuAUqgdM41IYQ+P5NSCpjZkitADRTZTwqgznUzWzCzZaMc9dbNbGEYhuuOclQB1OM43gBO/N/5MQAeMwpyB1MtLQAAAABJRU5ErkJggg==") no-repeat center center}.dark-theme #dynamic-to-top{border:1px solid #4a4b50}.wrapper{display:flex;flex-direction:column;min-height:97.5vh;width:100%}.wrapper main{flex:1 0 auto}.wrapper main .container{padding-left:1rem;padding-right:1rem}.footer{height:2rem;width:100%;text-align:center;line-height:1.5rem;padding-top:2rem}.page{position:relative;width:100%;max-width:980px;margin:0 auto;padding-top:6rem}.single .single-title{margin:0;font-size:1.8rem;line-height:3rem}.single .post-meta{font-size:.875rem;color:#a9a9b3}.single .post-meta span{display:inline-block}.dark-theme .single .post-meta{color:#5d5d5f}.single .post-meta a{color:#2d96bd}.dark-theme .single .post-meta a{color:#eee}.single .post-meta a:hover{color:#ef3982}.dark-theme .single .post-meta a:hover{color:#2d96bd}.single .post-meta .author{font-size:1.05rem}.single .featured-image{padding-top:.6rem}.single .featured-image img{display:block;max-width:100%;height:auto;margin:0 auto;overflow:hidden}.single #toc-auto{display:block;position:absolute;width:100%;margin-left:1000px;padding:0 .8rem;border-left:1px solid #dcdcdc;overflow-wrap:break-word;box-sizing:border-box;top:12rem}.dark-theme .single #toc-auto{border-left:1px solid #4a4b50}.single #toc-auto .toc-title{font-weight:400;margin:.8rem 0;text-transform:uppercase}.single #toc-auto .toc-content.always-active ul{display:block}.single #toc-auto .toc-content>nav>ul{margin:.625rem 0}.single #toc-auto .toc-content ul{text-indent:-0.85rem;padding-left:.625rem;list-style:none}.single #toc-auto .toc-content ul a::before{content:"|";font-weight:bolder;margin-right:.5rem;color:#2d96bd}.dark-theme .single #toc-auto .toc-content ul a::before{color:#eee}.single #toc-auto .toc-content ul ul{padding-left:1.25rem;display:none}.single #toc-auto .toc-content ul .has-active>ul{display:block}.single #toc-auto .toc-content a.active{font-weight:bold;color:#2d96bd}.dark-theme .single #toc-auto .toc-content a.active{color:#eee}.single #toc-auto .toc-content a.active::before{color:#ef3982}.dark-theme .single #toc-auto .toc-content a.active::before{color:#2d96bd}.single #toc-static{display:none;padding-top:.8rem}.single #toc-static details summary .toc-title{display:block;display:flex;justify-content:space-between;font-size:1.2em;font-weight:bold;line-height:2em;padding:0 .625rem;background:#f5f5f5}.single #toc-static details summary .toc-title i.details{line-height:2em}.dark-theme .single #toc-static details summary .toc-title{background:#272C34}.single #toc-static details summary::-webkit-details-marker{display:none}.single #toc-static details[open] i.details{transform:rotate(180deg)}.single #toc-static .toc-content{border:2px solid #f5f5f5}.single #toc-static .toc-content>nav>ul{margin:.625rem 0}.single #toc-static .toc-content ul{padding-left:.625rem;list-style:none}.single #toc-static .toc-content ul ul{padding-left:1.25rem}.dark-theme .single #toc-static .toc-content{border:2px solid #272C34}.single .toc ruby{background:#f5f5f5}.single .toc ruby rt{color:#a9a9b3}.dark-theme .single .toc ruby{background:#272C34}.dark-theme .single .toc ruby rt{color:#5d5d5f}.single .content h2,.single .content h3,.single .content h4,.single .content h5,.single .content h6{font-weight:bold;margin:1.2rem 0}.dark-theme .single .content h2,.dark-theme .single .content h3,.dark-theme .single .content h4,.dark-theme .single .content h5,.dark-theme .single .content h6{font-weight:bolder}.single .content h2>a:first-child::before,.single .content h3>a:first-child::before,.single .content h4>a:first-child::before,.single .content h5>a:first-child::before,.single .content h6>a:first-child::before{content:"|";margin-right:.3125rem;color:#2d96bd}.dark-theme .single .content h2>a:first-child::before,.dark-theme .single .content h3>a:first-child::before,.dark-theme .single .content h4>a:first-child::before,.dark-theme .single .content h5>a:first-child::before,.dark-theme .single .content h6>a:first-child::before{color:#eee}.single .content h2>a:first-child::before{content:"#"}.single .content p{font-size:1rem;margin:.5rem 0}.single .content a{word-break:break-all;word-break:break-word;color:#2d96bd}.dark-theme .single .content a{color:#eee}.single .content a:hover{color:#ef3982}.dark-theme .single .content a:hover:hover{color:#2d96bd;font-weight:bold}.single .content ul{padding-left:2rem;list-style-type:disc}.single .content ruby{background:#f5f5f5}.single .content ruby rt{color:#a9a9b3}.dark-theme .single .content ruby{background:#272C34}.dark-theme .single .content ruby rt{color:#5d5d5f}.single .content .table-wrapper{overflow-x:auto}.single .content .table-wrapper::-webkit-scrollbar{background-color:#fff}.dark-theme .single .content .table-wrapper::-webkit-scrollbar{background-color:#272c34}.single .content .table-wrapper>table{width:100%;max-width:100%;margin:.625rem 0;border-spacing:0;background:#fff}.dark-theme .single .content .table-wrapper>table{background:#272c34}.single .content .table-wrapper>table thead{background:#ededed}.dark-theme .single .content .table-wrapper>table thead{background-color:#20252b}.single .content .table-wrapper>table th,.single .content .table-wrapper>table td{padding:.3rem 1rem;border:1px double #dcdcdc}.dark-theme .single .content .table-wrapper>table th,.dark-theme .single .content .table-wrapper>table td{border:1px double #4a4b50}.single .content figure{text-align:center}.single .content figure .image-caption:not(:empty){min-width:20%;max-width:80%;display:inline-block;padding:.625rem;margin:0 auto;border-bottom:1px solid #d9d9d9;font-size:.875rem;color:#969696;line-height:1.7}.single .content figure img{display:block;max-width:96%;height:auto;margin:0 auto;overflow:hidden;transition:all 0.2s ease-in-out}.single .content figure a.lightgallery:hover img{transform:scale(1.02)}.single .content .lazyloading{object-fit:none}.single .content blockquote{font-size:1rem;display:block;border-width:1px 0;border-style:solid;border-color:#dcdcdc;padding:1.5em 1.2em 0.5em 1.2em;margin:0 0 2em 0;position:relative}.single .content blockquote::before{content:'\201C';position:absolute;top:0em;left:50%;transform:translate(-50%, -50%);width:3rem;height:2rem;font:6em/1.08em 'PT Sans', sans-serif;color:#2d96bd;text-align:center}.dark-theme .single .content blockquote::before{color:#eee}.single .content blockquote::after{content:"#blockquote" attr(cite);display:block;text-align:right;font-size:0.875em;color:#2d96bd}.dark-theme .single .content blockquote::after{color:#eee}.dark-theme .single .content blockquote{border-color:#4a4b50}.single .content .footnotes{color:#a9a9b3}.dark-theme .single .content .footnotes{color:#5d5d5f}.single .content code{font-size:13px;font-family:Source Code Pro,Menlo,Consolas,Monaco,monospace;padding:.2rem .4rem;color:#E74C3C}.dark-theme .single .content code{color:#E5BF78}.single .content code,.single .content pre,.single .content .highlight table,.single .content .highlight tr,.single .content .highlight td{background:#f5f5f5}.dark-theme .single .content code,.dark-theme .single .content pre,.dark-theme .single .content .highlight table,.dark-theme .single .content .highlight tr,.dark-theme .single .content .highlight td{background:#272C34}.single .content .highlight>.chroma{margin:1rem 0}.single .content .highlight>.chroma code,.single .content .highlight>.chroma pre{margin:0;padding:0}.single .content .highlight>.chroma::before{display:block;padding:.4rem;font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Microsoft Yahei,Segoe UI,Helvetica,Arial,sans-serif,Segoe UI Emoji;font-weight:bold;color:#b1b0b0;background:#ededed;content:'Code'}.dark-theme .single .content .highlight>.chroma::before{color:#b1b0b0;background:#20252b}.single .content .highlight>.chroma.language-bash::before{content:"Bash"}.single .content .highlight>.chroma.language-c::before{content:"C"}.single .content .highlight>.chroma.language-cs::before{content:"C#"}.single .content .highlight>.chroma.language-cpp::before{content:"C++"}.single .content .highlight>.chroma.language-clojure::before{content:"Clojure"}.single .content .highlight>.chroma.language-coffeescript::before{content:"CoffeeScript"}.single .content .highlight>.chroma.language-css::before{content:"CSS"}.single .content .highlight>.chroma.language-dart::before{content:"Dart"}.single .content .highlight>.chroma.language-diff::before{content:"Diff"}.single .content .highlight>.chroma.language-erlang::before{content:"Erlang"}.single .content .highlight>.chroma.language-go::before{content:"Go"}.single .content .highlight>.chroma.language-go-html-template::before{content:"Go HTML Template"}.single .content .highlight>.chroma.language-groovy::before{content:"Groovy"}.single .content .highlight>.chroma.language-haskell::before{content:"Haskell"}.single .content .highlight>.chroma.language-html::before{content:"HTML"}.single .content .highlight>.chroma.language-http::before{content:"HTTP"}.single .content .highlight>.chroma.language-xml::before{content:"XML"}.single .content .highlight>.chroma.language-java::before{content:"Java"}.single .content .highlight>.chroma.language-js::before{content:"JavaScript"}.single .content .highlight>.chroma.language-javascript::before{content:"JavaScript"}.single .content .highlight>.chroma.language-json::before{content:"JSON"}.single .content .highlight>.chroma.language-kotlin::before{content:"Kotlin"}.single .content .highlight>.chroma.language-latex::before{content:"LaTeX"}.single .content .highlight>.chroma.language-less::before{content:"Less"}.single .content .highlight>.chroma.language-lisp::before{content:"Lisp"}.single .content .highlight>.chroma.language-lua::before{content:"Lua"}.single .content .highlight>.chroma.language-makefile::before{content:"Makefile"}.single .content .highlight>.chroma.language-markdown::before{content:"Markdown"}.single .content .highlight>.chroma.language-matlab::before{content:"Matlab"}.single .content .highlight>.chroma.language-objectivec::before{content:"Objective-C"}.single .content .highlight>.chroma.language-php::before{content:"PHP"}.single .content .highlight>.chroma.language-perl::before{content:"Perl"}.single .content .highlight>.chroma.language-python::before{content:"Python"}.single .content .highlight>.chroma.language-r::before{content:"R"}.single .content .highlight>.chroma.language-ruby::before{content:"Ruby"}.single .content .highlight>.chroma.language-rust::before{content:"Rust"}.single .content .highlight>.chroma.language-scala::before{content:"Scala"}.single .content .highlight>.chroma.language-scss::before{content:"Scss"}.single .content .highlight>.chroma.language-shell::before{content:"Shell"}.single .content .highlight>.chroma.language-sql::before{content:"SQL"}.single .content .highlight>.chroma.language-swift::before{content:"Swift"}.single .content .highlight>.chroma.language-tex::before{content:"TeX"}.single .content .highlight>.chroma.language-toml::before{content:"TOML"}.single .content .highlight>.chroma.language-ts::before{content:"TypeScript"}.single .content .highlight>.chroma.language-typescript::before{content:"TypeScript"}.single .content .highlight>.chroma.language-vue::before{content:"Vue"}.single .content .highlight>.chroma.language-yml::before{content:"YAML"}.single .content .highlight>.chroma.language-yaml::before{content:"YAML"}.single .content .highlight>.chroma table,.single .content .highlight>.chroma tr,.single .content .highlight>.chroma td{margin:0;border:none !important}.single .content .highlight>.chroma td{padding:.2rem .4rem}.single .content .highlight>.chroma .lntd:first-child{width:1.2rem}.single .content .highlight>.chroma .lntd:first-child .lnt{color:#b1b0b0}.single .content .highlight>.chroma .lntd:first-child .hl{font-weight:bolder}.single .content .highlight>.chroma .lntd:last-child .hl{display:block;background-color:#e8e8e8}.dark-theme .single .content .highlight>.chroma .lntd:last-child .hl{background-color:#1c2025}.single .content .highlight{font-family:Source Code Pro,Menlo,Consolas,Monaco,monospace;font-size:13px;line-height:18px}.single .content .highlight .c,.single .content .highlight .ch,.single .content .highlight .cm,.single .content .highlight .c1,.single .content .highlight .cs,.single .content .highlight .cp,.single .content .highlight .cpf{font-style:italic}.single .content .highlight .gl{text-decoration:underline}.single .content .highlight .p{color:#a9a9b3}.single .content .highlight .k{color:#b501a9}.single .content .highlight .kc{color:#b501a9}.single .content .highlight .kd{color:#b501a9}.single .content .highlight .kn{color:#b501a9}.single .content .highlight .kp{color:#b501a9}.single .content .highlight .kr{color:#b501a9}.single .content .highlight .kt{color:#b501a9}.single .content .highlight .n{color:#333}.single .content .highlight .na{color:#2b77fa}.single .content .highlight .nb{color:#f74840}.single .content .highlight .bp{color:#f74840}.single .content .highlight .nc{color:#cb8100}.single .content .highlight .no{color:#2b77fa}.single .content .highlight .nd{color:#0086c1}.single .content .highlight .ni{color:#2b77fa}.single .content .highlight .ne{color:#2b77fa}.single .content .highlight .nf{color:#2b77fa}.single .content .highlight .fm{color:#1ccad6}.single .content .highlight .nl{color:#2b77fa}.single .content .highlight .nn{color:#2b77fa}.single .content .highlight .nx{color:#333}.single .content .highlight .py{color:#2b77fa}.single .content .highlight .nt{color:#2b77fa}.single .content .highlight .nv{color:#2b77fa}.single .content .highlight .vc{color:#2b77fa}.single .content .highlight .vg{color:#2b77fa}.single .content .highlight .vi{color:#2b77fa}.single .content .highlight .vm{color:#2b77fa}.single .content .highlight .l{color:#2aa198}.single .content .highlight .ld{color:#2aa198}.single .content .highlight .s{color:#24a443}.single .content .highlight .sa{color:#24a443}.single .content .highlight .sb{color:#24a443}.single .content .highlight .sc{color:#24a443}.single .content .highlight .dl{color:#24a443}.single .content .highlight .sd{color:#24a443}.single .content .highlight .s2{color:#24a443}.single .content .highlight .se{color:#24a443}.single .content .highlight .sh{color:#24a443}.single .content .highlight .si{color:#24a443}.single .content .highlight .sx{color:#24a443}.single .content .highlight .sr{color:#24a443}.single .content .highlight .s1{color:#24a443}.single .content .highlight .ss{color:#24a443}.single .content .highlight .m{color:#e2893c}.single .content .highlight .mb{color:#e2893c}.single .content .highlight .mf{color:#e2893c}.single .content .highlight .mh{color:#e2893c}.single .content .highlight .mi{color:#e2893c}.single .content .highlight .il{color:#e2893c}.single .content .highlight .mo{color:#e2893c}.single .content .highlight .o{color:#f19b04}.single .content .highlight .ow{color:#b501a9}.single .content .highlight .c{color:#a0a1a8}.single .content .highlight .ch{color:#a0a1a8}.single .content .highlight .cm{color:#a0a1a8}.single .content .highlight .c1{color:#a0a1a8}.single .content .highlight .cs{color:#a0a1a8}.single .content .highlight .cp{color:#a0a1a8}.single .content .highlight .cpf{color:#a0a1a8}.single .content .highlight .g{color:#e72d40}.single .content .highlight .gd{color:#e72d40}.single .content .highlight .ge{color:#e72d40}.single .content .highlight .gr{color:#e72d40}.single .content .highlight .gh{color:#e72d40}.single .content .highlight .gi{color:#e72d40}.single .content .highlight .go{color:#e72d40}.single .content .highlight .gp{color:#e72d40}.single .content .highlight .gs{color:#e72d40}.single .content .highlight .gu{color:#e72d40}.single .content .highlight .gt{color:#e72d40}.single .content .highlight .w{color:#bbb}.dark-theme .single .content .highlight .p{color:#a9a9b3}.dark-theme .single .content .highlight .k{color:#d371e3}.dark-theme .single .content .highlight .kc{color:#d371e3}.dark-theme .single .content .highlight .kd{color:#d371e3}.dark-theme .single .content .highlight .kn{color:#d371e3}.dark-theme .single .content .highlight .kp{color:#d371e3}.dark-theme .single .content .highlight .kr{color:#d371e3}.dark-theme .single .content .highlight .kt{color:#d371e3}.dark-theme .single .content .highlight .n{color:#a9b2c0}.dark-theme .single .content .highlight .na{color:#41b0f5}.dark-theme .single .content .highlight .nb{color:#19b9c4}.dark-theme .single .content .highlight .bp{color:#ecbf6f}.dark-theme .single .content .highlight .nc{color:#ecbf6f}.dark-theme .single .content .highlight .no{color:#41b0f5}.dark-theme .single .content .highlight .nd{color:#ecbf6f}.dark-theme .single .content .highlight .ni{color:#41b0f5}.dark-theme .single .content .highlight .ne{color:#41b0f5}.dark-theme .single .content .highlight .nf{color:#41b0f5}.dark-theme .single .content .highlight .fm{color:#19b9c4}.dark-theme .single .content .highlight .nl{color:#41b0f5}.dark-theme .single .content .highlight .nn{color:#41b0f5}.dark-theme .single .content .highlight .nx{color:#a9a9b3}.dark-theme .single .content .highlight .py{color:#41b0f5}.dark-theme .single .content .highlight .nt{color:#41b0f5}.dark-theme .single .content .highlight .nv{color:#41b0f5}.dark-theme .single .content .highlight .vc{color:#41b0f5}.dark-theme .single .content .highlight .vg{color:#41b0f5}.dark-theme .single .content .highlight .vi{color:#41b0f5}.dark-theme .single .content .highlight .vm{color:#41b0f5}.dark-theme .single .content .highlight .l{color:#2aa198}.dark-theme .single .content .highlight .ld{color:#2aa198}.dark-theme .single .content .highlight .s{color:#8cc570}.dark-theme .single .content .highlight .sa{color:#8cc570}.dark-theme .single .content .highlight .sb{color:#8cc570}.dark-theme .single .content .highlight .sc{color:#8cc570}.dark-theme .single .content .highlight .dl{color:#8cc570}.dark-theme .single .content .highlight .sd{color:#8cc570}.dark-theme .single .content .highlight .s2{color:#8cc570}.dark-theme .single .content .highlight .se{color:#8cc570}.dark-theme .single .content .highlight .sh{color:#8cc570}.dark-theme .single .content .highlight .si{color:#8cc570}.dark-theme .single .content .highlight .sx{color:#8cc570}.dark-theme .single .content .highlight .sr{color:#8cc570}.dark-theme .single .content .highlight .s1{color:#8cc570}.dark-theme .single .content .highlight .ss{color:#8cc570}.dark-theme .single .content .highlight .m{color:#db985c}.dark-theme .single .content .highlight .mb{color:#db985c}.dark-theme .single .content .highlight .mf{color:#db985c}.dark-theme .single .content .highlight .mh{color:#db985c}.dark-theme .single .content .highlight .mi{color:#db985c}.dark-theme .single .content .highlight .il{color:#db985c}.dark-theme .single .content .highlight .mo{color:#db985c}.dark-theme .single .content .highlight .o{color:#ecbf6f}.dark-theme .single .content .highlight .ow{color:#d371e3}.dark-theme .single .content .highlight .c{color:#7e848f}.dark-theme .single .content .highlight .ch{color:#7e848f}.dark-theme .single .content .highlight .cm{color:#7e848f}.dark-theme .single .content .highlight .c1{color:#7e848f}.dark-theme .single .content .highlight .cs{color:#7e848f}.dark-theme .single .content .highlight .cp{color:#7e848f}.dark-theme .single .content .highlight .cpf{color:#7e848f}.dark-theme .single .content .highlight .g{color:#f16372}.dark-theme .single .content .highlight .gd{color:#f16372}.dark-theme .single .content .highlight .ge{color:#f16372}.dark-theme .single .content .highlight .gr{color:#f16372}.dark-theme .single .content .highlight .gh{color:#f16372}.dark-theme .single .content .highlight .gi{color:#f16372}.dark-theme .single .content .highlight .go{color:#f16372}.dark-theme .single .content .highlight .gp{color:#f16372}.dark-theme .single .content .highlight .gs{color:#f16372}.dark-theme .single .content .highlight .gu{color:#f16372}.dark-theme .single .content .highlight .gt{color:#f16372}.dark-theme .single .content .highlight .w{color:#bbb}.single .content .admonition{position:relative;margin:.9765em 0;padding:0 .75rem;background-color:rgba(68,138,255,0.1);border-left:0.25rem solid #448aff;overflow:auto}.single .content .admonition .admonition-title{margin:0 -0.75rem;padding:.2rem .75rem .2rem 1.8rem;border-bottom:0.05rem solid rgba(68,138,255,0.1);background-color:rgba(68,138,255,0.1)}.single .content .admonition .admonition-content{margin:.5rem 0}.single .content .admonition i.icon{font-size:0.85rem;color:#448aff;cursor:auto;position:absolute;left:.6rem;top:.6rem}.single .content .admonition.note{border-left-color:#448aff}.single .content .admonition.note i.icon{color:#448aff}.single .content .admonition.abstract{border-left-color:#00b0ff}.single .content .admonition.abstract i.icon{color:#00b0ff}.single .content .admonition.info{border-left-color:#00b8d4}.single .content .admonition.info i.icon{color:#00b8d4}.single .content .admonition.tip{border-left-color:#00bfa5}.single .content .admonition.tip i.icon{color:#00bfa5}.single .content .admonition.success{border-left-color:#00c853}.single .content .admonition.success i.icon{color:#00c853}.single .content .admonition.question{border-left-color:#64dd17}.single .content .admonition.question i.icon{color:#64dd17}.single .content .admonition.warning{border-left-color:#ff9100}.single .content .admonition.warning i.icon{color:#ff9100}.single .content .admonition.failure{border-left-color:#ff5252}.single .content .admonition.failure i.icon{color:#ff5252}.single .content .admonition.danger{border-left-color:#ff1744}.single .content .admonition.danger i.icon{color:#ff1744}.single .content .admonition.bug{border-left-color:#f50057}.single .content .admonition.bug i.icon{color:#f50057}.single .content .admonition.example{border-left-color:#651fff}.single .content .admonition.example i.icon{color:#651fff}.single .content .admonition.quote{border-left-color:#9e9e9e}.single .content .admonition.quote i.icon{color:#9e9e9e}.single .content .admonition.note{background-color:rgba(68,138,255,0.1)}.single .content .admonition.note .admonition-title{border-bottom-color:rgba(68,138,255,0.1);background-color:rgba(68,138,255,0.1)}.single .content .admonition.abstract{background-color:rgba(0,176,255,0.1)}.single .content .admonition.abstract .admonition-title{border-bottom-color:rgba(0,176,255,0.1);background-color:rgba(0,176,255,0.1)}.single .content .admonition.info{background-color:rgba(0,184,212,0.1)}.single .content .admonition.info .admonition-title{border-bottom-color:rgba(0,184,212,0.1);background-color:rgba(0,184,212,0.1)}.single .content .admonition.tip{background-color:rgba(0,191,165,0.1)}.single .content .admonition.tip .admonition-title{border-bottom-color:rgba(0,191,165,0.1);background-color:rgba(0,191,165,0.1)}.single .content .admonition.success{background-color:rgba(0,200,83,0.1)}.single .content .admonition.success .admonition-title{border-bottom-color:rgba(0,200,83,0.1);background-color:rgba(0,200,83,0.1)}.single .content .admonition.question{background-color:rgba(100,221,23,0.1)}.single .content .admonition.question .admonition-title{border-bottom-color:rgba(100,221,23,0.1);background-color:rgba(100,221,23,0.1)}.single .content .admonition.warning{background-color:rgba(255,145,0,0.1)}.single .content .admonition.warning .admonition-title{border-bottom-color:rgba(255,145,0,0.1);background-color:rgba(255,145,0,0.1)}.single .content .admonition.failure{background-color:rgba(255,82,82,0.1)}.single .content .admonition.failure .admonition-title{border-bottom-color:rgba(255,82,82,0.1);background-color:rgba(255,82,82,0.1)}.single .content .admonition.danger{background-color:rgba(255,23,68,0.1)}.single .content .admonition.danger .admonition-title{border-bottom-color:rgba(255,23,68,0.1);background-color:rgba(255,23,68,0.1)}.single .content .admonition.bug{background-color:rgba(245,0,87,0.1)}.single .content .admonition.bug .admonition-title{border-bottom-color:rgba(245,0,87,0.1);background-color:rgba(245,0,87,0.1)}.single .content .admonition.example{background-color:rgba(101,31,255,0.1)}.single .content .admonition.example .admonition-title{border-bottom-color:rgba(101,31,255,0.1);background-color:rgba(101,31,255,0.1)}.single .content .admonition.quote{background-color:rgba(158,158,158,0.1)}.single .content .admonition.quote .admonition-title{border-bottom-color:rgba(158,158,158,0.1);background-color:rgba(158,158,158,0.1)}.single .content .admonition:last-child{margin-bottom:.75rem}.single .content details.admonition summary{display:block;outline:none;cursor:pointer}.single .content details.admonition summary::-webkit-details-marker{display:none}.single .content details.admonition summary i.details{position:absolute;top:.5rem;right:.5rem;color:#161209}.dark-theme .single .content details.admonition summary i.details{color:#a9a9b3}.single .content details.admonition[open] i.details{transform:rotate(180deg)}.single .content .echarts{width:100%;height:30rem;margin:3% auto;text-align:center}.single .content .bilibili{position:relative;width:100%;height:0;padding-bottom:75%;margin:3% auto;text-align:center}.single .content .bilibili iframe{position:absolute;width:100%;height:100%;left:0;top:0}.single .content hr{margin:1rem 0;position:relative;border-top:1px dashed #dcdcdc;border-bottom:none}.dark-theme .single .content hr{border-top:1px dashed #4a4b50}.single .content kbd{display:inline-block;padding:.25rem;background-color:#fff;border:1px solid #dcdcdc;border-bottom-color:#dcdcdc;border-radius:3px;-webkit-box-shadow:inset 0 -1px 0 #dcdcdc;box-shadow:inset 0 -1px 0 #dcdcdc;font-size:.8rem;font-family:Source Code Pro,Menlo,Consolas,Monaco,monospace;color:#E74C3C}.dark-theme .single .content kbd{background-color:#292a2d;border:1px solid #4a4b50;border-bottom-color:#4a4b50;-webkit-box-shadow:inset 0 -1px 0 #4a4b50;box-shadow:inset 0 -1px 0 #4a4b50;color:#E5BF78}.single .content .typeit .code{padding:.375rem;font-size:.875rem;font-family:Source Code Pro,Menlo,Consolas,Monaco,monospace;font-weight:bold;word-break:break-all}.single .post-footer{margin-top:3rem}.single .post-footer .post-info{border-bottom:1px solid #dcdcdc;padding:1rem 0 0.3rem}.dark-theme .single .post-footer .post-info{border-bottom:1px solid #4a4b50}.single .post-footer .post-info .post-info-line{display:flex;justify-content:space-between}.single .post-footer .post-info .post-info-line .post-info-mod{font-size:0.8em;color:#a9a9b3}.dark-theme .single .post-footer .post-info .post-info-line .post-info-mod{color:#5d5d5f}.single .post-footer .post-info .post-info-line .post-info-mod a{color:#2d96bd}.dark-theme .single .post-footer .post-info .post-info-line .post-info-mod a{color:#eee}.single .post-footer .post-info .post-info-line .post-info-mod a:hover{color:#ef3982}.dark-theme .single .post-footer .post-info .post-info-line .post-info-mod a:hover{color:#2d96bd}.single .post-footer .post-info .post-info-line .post-info-license{font-size:0.8em;color:#a9a9b3}.dark-theme .single .post-footer .post-info .post-info-line .post-info-license{color:#5d5d5f}.single .post-footer .post-info .post-info-line .post-info-md{font-size:0.8rem;width:8rem}.single .post-footer .post-info .post-info-line .post-info-md a{color:#2d96bd}.dark-theme .single .post-footer .post-info .post-info-line .post-info-md a{color:#eee}.single .post-footer .post-info .post-info-line .post-info-md a:hover{color:#ef3982}.dark-theme .single .post-footer .post-info .post-info-line .post-info-md a:hover{color:#2d96bd}.single .post-footer .post-info-more{padding:0.3rem 0 1rem;display:flex;justify-content:space-between;font-size:0.9rem}.single .post-footer .post-nav::before,.single .post-footer .post-nav::after{content:' ';display:table}.single .post-footer .post-nav a.prev,.single .post-footer .post-nav a.next{font-size:1rem;font-weight:600;transition-duration:.3s;transition-property:transform;transition-timing-function:ease-out}.single .post-footer .post-nav a.prev{float:left}.single .post-footer .post-nav a.prev:hover{transform:translateX(-4px)}.single .post-footer .post-nav a.next{float:right}.single .post-footer .post-nav a.next:hover{transform:translateX(4px)}.single .comment{padding:4rem 0}.special .single-title{text-align:right;padding-bottom:2rem}.archive .single-title{text-align:right;padding-bottom:2rem}.archive .archive-item{margin-left:2rem}.archive .categories-card{margin:0 auto;margin-top:3rem;display:flex;align-items:center;justify-content:space-between;flex-direction:row;flex-wrap:wrap;padding:0 2.5rem;line-height:1.6rem}.archive .categories-card .card-item{font-size:.875rem;text-align:left;width:45%;display:flex;align-items:flex-start;margin-top:2rem;min-height:10rem;padding:0 2%;position:relative}.archive .categories-card .card-item .card-item-wrapper{width:100%;overflow:hidden}.archive .categories-card .card-item .card-item-wrapper .card-item-title{font-size:1.2rem;font-weight:bold;display:inline-block}.archive .categories-card .card-item .card-item-wrapper span{float:right;padding-right:1rem}.archive .archive-item-link{display:inline-block;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:95%}.archive .archive-item-link:hover{color:#2d96bd;background-color:transparent}.dark-theme .archive .archive-item-link{color:#a9a9b3;text-decoration:none;transition:color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease}.dark-theme .archive .archive-item-link:hover{color:#fff;text-decoration:none;transition:color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease}.archive .archive-item-date{float:right;text-align:right;color:#a9a9b3}.dark-theme .archive .archive-item-date{color:#5d5d5f}.archive .more-post{text-align:right}.archive .tag-cloud-tags{margin:10px 0}.archive .tag-cloud-tags a{display:inline-block;position:relative;margin:5px 10px;overflow-wrap:break-word;transition-duration:.3s;transition-property:transform;transition-timing-function:ease-out}.archive .tag-cloud-tags a:active,.archive .tag-cloud-tags a:focus,.archive .tag-cloud-tags a:hover{color:#2d96bd;transform:scale(1.1)}.dark-theme .archive .tag-cloud-tags a:active,.dark-theme .archive .tag-cloud-tags a:focus,.dark-theme .archive .tag-cloud-tags a:hover{color:#fff}.archive .tag-cloud-tags a small{color:#a9a9b3}.dark-theme .archive .tag-cloud-tags a small{color:#fff}.home .home-profile{transform:translateY(0);padding:2rem 0;text-align:center}.home .home-profile .home-avatar{padding:0.6rem}.home .home-profile .home-avatar img{width:6rem;height:auto;display:inline-block;-webkit-border-radius:100%;border-radius:100%;-webkit-box-shadow:0 0 0 0.3618em rgba(0,0,0,0.05);box-shadow:0 0 0 0.3618em rgba(0,0,0,0.05);margin:0 auto;-webkit-transition:all ease 0.4s;-moz-transition:all ease 0.4s;-o-transition:all ease 0.4s;transition:all ease 0.4s;cursor:pointer}.home .home-profile .home-avatar img:hover{position:relative;-webkit-transform:translateY(-0.75rem);-moz-transform:translateY(-0.75rem);-ms-transform:translateY(-0.75rem);-o-transform:translateY(-0.75rem);transform:translateY(-0.75rem);cursor:pointer}.home .home-profile .home-description{font-size:1rem;font-weight:normal;margin:0;padding:.4rem}.home .home-profile .home-social-links{padding-top:.6rem}.home .home-profile .home-social-links i{font-size:1.45rem}.home .home-profile .home-social-links img{width:1.5rem;height:1.5rem}.home .summary{padding-top:1rem;padding-bottom:.8rem;color:#161209;border-bottom:1px dashed #dcdcdc}.dark-theme .home .summary{color:#a9a9b3;border-bottom:1px dashed #4a4b50}.home .summary .featured-image-preview{width:100%;padding:30% 0 0;position:relative;margin:0.6rem auto}.home .summary .featured-image-preview img{position:absolute;width:100%;height:100%;left:0;top:0;object-fit:cover}.home .summary .single-title{font-size:1.6rem}.home .summary .content{display:-moz-box;display:-webkit-box;-moz-box-orient:vertical;-webkit-box-orient:vertical;-webkit-line-clamp:3;margin-top:.3rem;width:100%;overflow:hidden;text-overflow:ellipsis;overflow-wrap:break-word;color:#a9a9b3}.dark-theme .home .summary .content{color:#5d5d5f}.home .summary .content h2,.home .summary .content h3,.home .summary .content h4,.home .summary .content h5,.home .summary .content h6,.home .summary .content p{font-size:1rem;display:inline}.home .summary .content h2::after,.home .summary .content h3::after,.home .summary .content h4::after,.home .summary .content h5::after,.home .summary .content h6::after,.home .summary .content p::after{content:"\A";white-space:pre}.home .summary .content h2,.home .summary .content h3,.home .summary .content h4,.home .summary .content h5,.home .summary .content h6{line-height:2}.home .summary .content h2::before,.home .summary .content h3::before,.home .summary .content h4::before,.home .summary .content h5::before,.home .summary .content h6::before{content:"|";margin-right:.3125rem;color:#2d96bd}.dark-theme .home .summary .content h2::before,.dark-theme .home .summary .content h3::before,.dark-theme .home .summary .content h4::before,.dark-theme .home .summary .content h5::before,.dark-theme .home .summary .content h6::before{color:#eee}.home .summary .content h2{font-size:1.2rem}.home .summary .content h2::before{content:"#"}.home .summary .post-footer{margin-top:.5rem;display:flex;justify-content:space-between;align-items:center;font-size:.875rem !important}.home .summary .post-footer a{color:#2d96bd !important}.dark-theme .home .summary .post-footer a{color:#eee !important}.home .summary .post-footer a:hover{color:#ef3982 !important}.dark-theme .home .summary .post-footer a:hover{color:#2d96bd !important}.home .summary .post-footer .post-tags{padding:0}.home .summary .post-footer .post-tags a{color:#161209 !important}.dark-theme .home .summary .post-footer .post-tags a{color:#a9a9b3 !important}.home .summary .post-footer .post-tags a:hover{color:#2d96bd !important}.dark-theme .home .summary .post-footer .post-tags a:hover{color:#fff !important}#content-404{font-size:1.8rem;line-height:3rem;transform:translateY(30vh);text-align:center}header{width:100%;z-index:100;background-color:#f8f8f8}.dark-theme header{background-color:#252627}header .header-title{font-weight:bold}header .select-language{font-weight:400;border:none;box-shadow:none;background:transparent;background-image:none;-webkit-appearance:none;color:#161209}.dark-theme header .select-language{color:#a9a9b3}header .select-language:focus{outline:none}header .select-language:hover{cursor:pointer}#header-desktop{display:block;position:fixed;height:4rem;line-height:4rem}#header-desktop .header-wrapper{width:auto;text-align:center;margin:0 4rem;display:flex;justify-content:space-between}#header-desktop .header-wrapper .header-title a{padding:0 8px;font-size:1.25rem}#header-desktop .header-wrapper .header-title a i{line-height:2rem}#header-desktop .header-wrapper .menu a{padding:0 8px}#header-desktop .header-wrapper .menu a.active{font-weight:900;color:#161209}.dark-theme #header-desktop .header-wrapper .menu a.active{color:#fff}#header-mobile{display:none;position:fixed;height:4rem;line-height:4rem}#header-mobile .header-wrapper{padding:0;margin:0;transition:all 0.3s ease 0s}#header-mobile .header-wrapper .header-container{display:flex;justify-content:space-between;align-items:center;width:100%;font-size:1.125rem;padding-right:1rem;padding-left:1rem;box-sizing:border-box}#header-mobile .header-wrapper .header-container .header-title{font-size:1.25rem}#header-mobile .header-wrapper .header-container .menu-toggle{cursor:pointer;line-height:4rem}#header-mobile .header-wrapper .header-container .menu-toggle span{display:block;background:#161209;width:1.5rem;height:2px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-transition:.1s margin .1s, .1s transform;-moz-transition:.1s margin .1s, .1s transform;transition:.1s margin .1s, .1s transform}.dark-theme #header-mobile .header-wrapper .header-container .menu-toggle span{background:#a9a9b3}#header-mobile .header-wrapper .header-container .menu-toggle span:nth-child(1){margin-bottom:.5rem}#header-mobile .header-wrapper .header-container .menu-toggle span:nth-child(3){margin-top:.5rem}#header-mobile .header-wrapper .header-container .menu-toggle.active span{-webkit-transition:.1s margin, .1s transform .1s;-moz-transition:.1s margin, .1s transform .1s;transition:.1s margin, .1s transform .1s}#header-mobile .header-wrapper .header-container .menu-toggle.active span:nth-child(1){-moz-transform:rotate(45deg) translate(0.4rem, 0.5rem);-ms-transform:rotate(45deg) translate(0.4rem, 0.5rem);-webkit-transform:rotate(45deg) translate(0.4rem, 0.5rem);transform:rotate(45deg) translate(0.4rem, 0.5rem)}#header-mobile .header-wrapper .header-container .menu-toggle.active span:nth-child(2){opacity:0}#header-mobile .header-wrapper .header-container .menu-toggle.active span:nth-child(3){-moz-transform:rotate(-45deg) translate(0.4rem, -0.5rem);-ms-transform:rotate(-45deg) translate(0.4rem, -0.5rem);-webkit-transform:rotate(-45deg) translate(0.4rem, -0.5rem);transform:rotate(-45deg) translate(0.4rem, -0.5rem)}#header-mobile .header-wrapper .menu{text-align:center;background:#fff;border-top:2px solid #161209;display:none;box-shadow:0px 2px 4px rgba(0,0,0,0.1),0px 4px 8px rgba(0,0,0,0.1)}#header-mobile .header-wrapper .menu a{display:block;line-height:2.5rem}#header-mobile .header-wrapper .menu.active{display:block}.dark-theme #header-mobile .header-wrapper .menu{background:#292a2d;border-top:2px solid #a9a9b3}.copyright{font-size:.875rem}.copyright .copyright-line{width:100%}.copyright .copyright-line .icp-br{display:none}.pagination{display:flex;flex-direction:row;justify-content:center;list-style:none;white-space:nowrap;width:100%;padding:1rem 0 0}.pagination a{-webkit-font-smoothing:antialiased;font-size:.8rem;color:#bfbfbf;letter-spacing:.1rem;font-weight:700;padding:5px 5px;text-decoration:none;transition:0.3s}.pagination li{padding-bottom:3px;margin:0 20px;box-sizing:border-box;position:relative;display:inline}.pagination li.disabled{display:none}.pagination li:hover a{color:#000}.dark-theme .pagination li:hover a{color:#fff}.pagination li:before,.pagination li:after{position:absolute;content:"";width:0;height:3px;background:#000;transition:0.3s;bottom:0px}.dark-theme .pagination li:before,.dark-theme .pagination li:after{background:#fff}.pagination li:before .active,.pagination li:after .active{width:100%}.pagination li:before{left:50%}.pagination li:after{right:50%}.pagination li:hover:before,.pagination li:hover:after{width:50%}.pagination li.active a{color:#000}.dark-theme .pagination li.active a{color:#fff}.pagination li.active:before,.pagination li.active:after{width:60%}@media only screen and (max-width: 1800px){.page{max-width:780px}.page #toc-auto{margin-left:800px}}@media only screen and (max-width: 1440px){.page{max-width:680px}.page #toc-auto{margin-left:700px}}@media only screen and (max-width: 1200px){.page{max-width:560px}.page #toc-auto{margin-left:580px}}@media only screen and (max-width: 960px){#header-desktop .header-wrapper{margin:0 1rem}.page{max-width:80%}.page #toc-auto{display:none}.page #toc-static{display:block}}@media only screen and (max-width: 720px){#header-desktop{display:none}#header-mobile{display:block}.page{max-width:100%;padding-top:6rem}.page .categories-card .card-item{width:100%}.copyright .copyright-line .icp-splitter{display:none}.copyright .copyright-line .icp-br{display:block}} /*# sourceMappingURL=style.min.css.map */
\ No newline at end of file diff --git a/resources/_gen/assets/scss/css/style.template.scss_40942e46c3aa444eabf479d066570690.json b/resources/_gen/assets/scss/css/style.template.scss_40942e46c3aa444eabf479d066570690.json index b5d849e..358f1f7 100644 --- a/resources/_gen/assets/scss/css/style.template.scss_40942e46c3aa444eabf479d066570690.json +++ b/resources/_gen/assets/scss/css/style.template.scss_40942e46c3aa444eabf479d066570690.json @@ -1 +1 @@ -{"Target":"css/style.min.52deeec547ce58429463283c39fcc94ea1b6ba7dc672adbce74043bb55066f24.css","MediaType":"text/css","Data":{"Integrity":"sha256-Ut7uxUfOWEKUYyg8OfzJTqG2un3Gcq2850BDu1UGbyQ="}}
\ No newline at end of file +{"Target":"css/style.min.8596c27951d415c1b2ad9aee1d642e8057049327eca5ce9e397bdd27d84ca62a.css","MediaType":"text/css","Data":{"Integrity":"sha256-hZbCeVHUFcGyrZruHWQugFcEkyfspc6eOXvdJ9hMpio="}}
\ No newline at end of file diff --git a/resources/_gen/assets/scss/lib/aplayer/dark.scss_6a9b89851c76ccc96568016ff9eba049.content b/resources/_gen/assets/scss/lib/aplayer/dark.scss_6a9b89851c76ccc96568016ff9eba049.content new file mode 100644 index 0000000..e5e0216 --- /dev/null +++ b/resources/_gen/assets/scss/lib/aplayer/dark.scss_6a9b89851c76ccc96568016ff9eba049.content @@ -0,0 +1,3 @@ +.dark-theme .aplayer{background:#212121}.dark-theme .aplayer.aplayer-withlist .aplayer-info{border-bottom-color:#5c5c5c}.dark-theme .aplayer.aplayer-fixed .aplayer-list{border-color:#5c5c5c}.dark-theme .aplayer .aplayer-body{background-color:#212121}.dark-theme .aplayer .aplayer-info{border-top-color:#212121}.dark-theme .aplayer .aplayer-info .aplayer-music .aplayer-title{color:#fff}.dark-theme .aplayer .aplayer-info .aplayer-music .aplayer-author{color:#fff}.dark-theme .aplayer .aplayer-info .aplayer-controller .aplayer-time{color:#eee}.dark-theme .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path{fill:#eee}.dark-theme .aplayer .aplayer-list{background-color:#212121}.dark-theme .aplayer .aplayer-list::-webkit-scrollbar-thumb{background-color:#999}.dark-theme .aplayer .aplayer-list::-webkit-scrollbar-thumb:hover{background-color:#bbb}.dark-theme .aplayer .aplayer-list li{color:#fff;border-top-color:#666}.dark-theme .aplayer .aplayer-list li:hover{background:#4e4e4e}.dark-theme .aplayer .aplayer-list li.aplayer-list-light{background:#6c6c6c}.dark-theme .aplayer .aplayer-list li .aplayer-list-index{color:#ddd}.dark-theme .aplayer .aplayer-list li .aplayer-list-author{color:#ddd}.dark-theme .aplayer .aplayer-lrc{text-shadow:-1px -1px 0 #666}.dark-theme .aplayer .aplayer-lrc:before{background:-moz-linear-gradient(top, #212121 0%, rgba(33,33,33,0) 100%);background:-webkit-linear-gradient(top, #212121 0%, rgba(33,33,33,0) 100%);background:linear-gradient(to bottom, #212121 0%, rgba(33,33,33,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#212121', endColorstr='#00212121',GradientType=0 )}.dark-theme .aplayer .aplayer-lrc:after{background:-moz-linear-gradient(top, rgba(33,33,33,0) 0%, rgba(33,33,33,0.8) 100%);background:-webkit-linear-gradient(top, rgba(33,33,33,0) 0%, rgba(33,33,33,0.8) 100%);background:linear-gradient(to bottom, rgba(33,33,33,0) 0%, rgba(33,33,33,0.8) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00212121', endColorstr='#cc212121',GradientType=0 )}.dark-theme .aplayer .aplayer-lrc p{color:#fff}.dark-theme .aplayer .aplayer-miniswitcher{background:#484848}.dark-theme .aplayer .aplayer-miniswitcher .aplayer-icon path{fill:#eee} + +/*# sourceMappingURL=dark.css.map */
\ No newline at end of file diff --git a/resources/_gen/assets/scss/lib/aplayer/dark.scss_6a9b89851c76ccc96568016ff9eba049.json b/resources/_gen/assets/scss/lib/aplayer/dark.scss_6a9b89851c76ccc96568016ff9eba049.json new file mode 100644 index 0000000..abbb809 --- /dev/null +++ b/resources/_gen/assets/scss/lib/aplayer/dark.scss_6a9b89851c76ccc96568016ff9eba049.json @@ -0,0 +1 @@ +{"Target":"lib/aplayer/dark.cf3d10211c52ef53113d7dc3ab708c366141ee4459043a50b02215bc8a2ef76a.css","MediaType":"text/css","Data":{"Integrity":"sha256-zz0QIRxS71MRPX3Dq3CMNmFB7kRZBDpQsCIVvIou92o="}}
\ No newline at end of file |
