提交 296424cd 编写于 作者: D Dillon

feature(doc): complete all Chinese and English documents and fix many bugs

上级 b1f2de19
# Hugo default output directory
public/
/exampleSite/resources/
/exampleSite/zh/resources/
node_modules/
build/
## OS Files
# Windows
......
# LoveIt Theme | Hugo
# LoveIt Theme | Hugo [![Netlify Status](https://api.netlify.com/api/v1/badges/e60303f2-862c-4342-bf59-7c9adb10812e/deploy-status)](https://app.netlify.com/sites/hugo-loveit-en/deploys)
[![Netlify Status](https://api.netlify.com/api/v1/badges/e60303f2-862c-4342-bf59-7c9adb10812e/deploy-status)](https://app.netlify.com/sites/hugo-loveit-en/deploys)
[![GitHub release (latest by date)](https://img.shields.io/github/v/release/dillonzq/LoveIt?style=flat-square)](https://github.com/dillonzq/LoveIt/releases) [![Hugo](https://img.shields.io/badge/Hugo-%5E0.62.0-blue?style=flat-square&logo=hugo)](https://gohugo.io/) [![License](https://img.shields.io/github/license/dillonzq/LoveIt?style=flat-square)](https://github.com/dillonzq/LoveIt/blob/master/LICENSE) [![CircleCI](https://img.shields.io/circleci/build/github/dillonzq/LoveIt/develop?label=CI&style=flat-square&logo=circleci)](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
......
# LoveIt 主题 | Hugo [![Netlify Status](https://api.netlify.com/api/v1/badges/e60303f2-862c-4342-bf59-7c9adb10812e/deploy-status)](https://app.netlify.com/sites/hugo-loveit-en/deploys)
[![GitHub release (latest by date)](https://img.shields.io/github/v/release/dillonzq/LoveIt?style=flat-square)](https://github.com/dillonzq/LoveIt/releases) [![Hugo](https://img.shields.io/badge/Hugo-%5E0.62.0-blue?style=flat-square&logo=hugo)](https://gohugo.io/) [![License](https://img.shields.io/github/license/dillonzq/LoveIt?style=flat-square)](https://github.com/dillonzq/LoveIt/blob/master/LICENSE) [![CircleCI](https://img.shields.io/circleci/build/github/dillonzq/LoveIt/develop?label=CI&style=flat-square&logo=circleci)](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),以便你能选择最适合你的一个。
![Hugo 主题 LoveIt](images/Apple-Devices-Preview.png)
## 主题[预览](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)
# LoveIt 主题 | Hugo
[![Netlify Status](https://api.netlify.com/api/v1/badges/c51d4765-deb8-43d2-954c-720527879667/deploy-status)](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),以便你能选择最适合你的一个。
![Hugo 主题 LoveIt](images/Apple-Devices-Preview.png)
## 主题[预览](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)
......@@ -17,8 +17,11 @@ featuredImagePreview: ""
toc: false
autoCollapseToc: true
lightgallery: true
math: false
lightgallery: true
linkToMarkdown: true
share:
enable: true
comment: true
---
......
......@@ -48,7 +48,7 @@
}
}
@media only screen and (max-width: 560px) {
@media only screen and (max-width: 720px) {
#header-desktop {
display: none;
}
......
......@@ -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;
}
......
......@@ -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 & {
......
......@@ -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,
......
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
......
......@@ -6,55 +6,69 @@ draft: false
lightgallery: true
---
<div class="badge">
[![GitHub release (latest by date)](https://img.shields.io/github/v/release/dillonzq/LoveIt?style=flat-square)](https://github.com/dillonzq/LoveIt/releases) [![Hugo](https://img.shields.io/badge/Hugo-%5E0.62.0-blue?style=flat-square&logo=hugo)](https://gohugo.io/) [![License](https://img.shields.io/github/license/dillonzq/LoveIt?style=flat-square)](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/).
![Hugo Theme LoveIt](/images/Apple-Devices-Preview.png)
![Hugo Theme LoveIt](/images/Apple-Devices-Preview.png "Hugo Theme LoveIt")
### 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)
......
---
title: "À propos de LoveIt"
date: 2019-08-02T11:04:49+08:00
draft: false
lightgallery: true
---
<div class="badge">
[![GitHub release (latest by date)](https://img.shields.io/github/v/release/dillonzq/LoveIt?style=flat-square)](https://github.com/dillonzq/LoveIt/releases) [![Hugo](https://img.shields.io/badge/Hugo-%5E0.62.0-blue?style=flat-square&logo=hugo)](https://gohugo.io/) [![License](https://img.shields.io/github/license/dillonzq/LoveIt?style=flat-square)](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/).
![Hugo Theme LoveIt](/images/Apple-Devices-Preview.png "Hugo Theme LoveIt")
### 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/)
......@@ -6,55 +6,69 @@ draft: false
lightgallery: true
---
<div class="badge">
[![GitHub release (latest by date)](https://img.shields.io/github/v/release/dillonzq/LoveIt?style=flat-square)](https://github.com/dillonzq/LoveIt/releases) [![Hugo](https://img.shields.io/badge/Hugo-%5E0.62.0-blue?style=flat-square&logo=hugo)](https://gohugo.io/) [![License](https://img.shields.io/github/license/dillonzq/LoveIt?style=flat-square)](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/)
![Hugo 主题 LoveIt](/images/Apple-Devices-Preview.png)
![Hugo 主题 LoveIt](/images/Apple-Devices-Preview.png "Hugo Theme LoveIt")
### 特性
#### 性能和 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)
......
此差异已折叠。
此差异已折叠。
---
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>&lt;section&gt;&lt;/section&gt;</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
![Minion](https://octodex.github.com/images/minion.png)
```
![Minion](https://octodex.github.com/images/minion.png)
或者:
```markdown
![Alt text](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
```
![Alt text](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
像链接一样, 图片也具有脚注样式的语法:
```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 >}}
此差异已折叠。
此差异已折叠。
---
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&nbsp;&nbsp;&nbsp; | Markdown&nbsp;&nbsp;&nbsp; | In&nbsp;&nbsp;&nbsp; | Table |
| ---------- | --------- | ----------------- | ---------- |
| *italics* | **bold** | ~~strikethrough~~&nbsp;&nbsp;&nbsp; | `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.
---
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 >}}
---
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 >}}
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
<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 -}}
{{- 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 */ -}}
......
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
{"Target":"lib/aplayer/dark.cf3d10211c52ef53113d7dc3ab708c366141ee4459043a50b02215bc8a2ef76a.css","MediaType":"text/css","Data":{"Integrity":"sha256-zz0QIRxS71MRPX3Dq3CMNmFB7kRZBDpQsCIVvIou92o="}}
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册