User documentation 用户文档

最新推荐文章于 2024-09-11 21:16:20 发布

栗少

最新推荐文章于 2024-09-11 21:16:20 发布

阅读量157

点赞数

文章标签： github

原文链接：https://github.com/kakawait/hugo-tranquilpeak-theme/blob/master/docs/user.md#image

版权

A gorgeous responsive theme for Hugo blog framework
一个华丽的响应主题雨果博客框架

Tranquilpeak theme is compatible with Hugo v0.53.
Tranquilpeak主题与Hugo v0.53 兼容

This documentation will help you to install hugo-tranquilpeak-theme and configure it to use all features which it provides.
本文档将帮助您安装hugo-qualpeak-theme并配置它以使用它提供的所有功能。

If you want to report a bug or ask a question, create an issue.
如果您想报告bug或提出问题，请创建问题。

Summary 二.总结

General 一般条款

Authors: Thibaud Leprêtre (kakawait) and Louis Barranqueiro (LouisBarranqueiro)
作者：Thibaud Leprêtre（kakawait）和Louis Barranqueiro（LouisBarranqueiro）
Version: 0.5.3-BETA (based on Hexo version 3.1.0)
版本：0.5.3-BETA（基于Hexo版本3.1.0）
Compatibility: Hugo v0.53
兼容性：雨果v0.53

Features 产品特点

General features: 一般特点：

Fully responsive 完全响应
Optimized for tablets & mobiles
针对平板电脑和手机进行了优化
Configurable menu of the sidebar
侧边栏的可配置菜单
Pages to filter tags, categories and archives
用于过滤标签、类别和存档的页面
Background cover image 背景封面图像
Beautiful about page 关于美丽页
Support Open Graph protocol
支持Open Graph协议
Easily customizable (fonts, colors, layout elements, code coloration, etc..)
易于定制（字体、颜色、布局元素、代码着色等）
Support internationalization (i18)
支持国际化（i18）

Posts features: 职位特点：

Thumbnail image 缩略图
Cover image 封面图像
Responsive videos & images
响应式视频和图像
Sharing options 共享选项
Navigation menu 导航菜单
GitHub theme for code highlighting (customizable)
用于代码高亮显示的GitHub主题（可自定义）
Image gallery 图片画廊
Tags for images (FancyBox), wide images, tabbed code blocks, highlighted text, alerts
图像标签（FancyBox）、宽图像、选项卡式代码块、突出显示文本、警报
Table of contents 第一章目录

Integrated services: 综合服务：

Disqus 迪克斯
Gitalk 吉塔克
Google analytics 谷歌分析
Gravatar 格拉瓦塔尔
Facebook Insights Facebook洞察

Missing features from original Hexo version
原始Hexo版本中缺少的功能

Algolia (#8) Algolia（#8）
Pagination custumization tagPagination, categoryPagination and archivePagination (#17)
分页定制 tagPagination 、 categoryPagination 和 archivePagination （#17）

ATTENTION following features will not be possible due to Hugo limitations
注意：由于Hugo的限制，以下功能将无法使用

Archives pages by years /archives/2015
Archives pages by month /archives/2015/01

Requirements 要求

Hugo : v0.53 雨果： v0.53

Installation 安装方式

Simply clone the repository git clone https://github.com/kakawait/hugo-tranquilpeak-theme.git on themes folder
只需将存储库 git clone https://github.com/kakawait/hugo-tranquilpeak-theme.git 克隆到 themes 文件夹上
Rename the folder in hugo-tranquilpeak-theme (if necessary) and place it in themes folder of your Hugo blog
重命名 hugo-tranquilpeak-theme 中的文件夹（如果需要），并将其放在Hugo博客的 themes 文件夹中

mkdir themes
cd themes
git clone https://github.com/kakawait/hugo-tranquilpeak-theme.git

Tranquilpeak configuration
宁静峰形

If it's your first time using Hugo, please check Hugo official documentation
如果您是第一次使用Hugo，请查看Hugo官方文档

Language configuration 语言配置

Simply edit following value in config.{toml,yaml,json}:
只需在 config.{toml,yaml,json} 中编辑以下值：

defaultContentLanguage = "en-us"

by one of the following code (code is between ()):
通过以下代码之一（代码介于 () 之间）：

Chinese (zh-cn) 中文（ zh-cn ）
Chinese Traditional (zh-tw)
繁体中文（ zh-tw ）
English (en-us) 英文（ en-us ）
Deutsch (de-de) 英文（ de-de ）
French (fr-fr) 法语（ fr-fr ）
Japanase (ja) 日本酶（ ja ）
Portuguese (pt-br) 葡萄牙语（ pt-br ）
Russian (ru) 俄语（ ru ）
Spanish (es-es) 西班牙语（ es-es ）
Vietnamese (vi) 越南语（ vi ）
Dutch (nl-nl) 荷兰语（ nl-nl ）
Swedish (sv-se) 瑞典语（ sv-se ）

If your language is not available, follow this guidelines (E.g : add swedish language (sv-se)) :
如果您的语言不可用，请遵循以下指南（例如：添加瑞典语（ sv-se ））：

Set defaultContentLanguage to sv-se in Hugo configuration file config.{toml,yaml,json}
将Hugo配置文件 config.{toml,yaml,json} 中的 defaultContentLanguage 设置为 sv-se
Create sv-se.yaml file in theme/tranquilpeak/i18n/ folder
在 theme/tranquilpeak/i18n/ 文件夹中创建 sv-se.yaml 文件
Copy the content of theme/tranquilpeak/i18n/en-us.yaml and paste it to sv-se.yml file
复制 theme/tranquilpeak/i18n/en-us.yaml 的内容并粘贴到 sv-se.yml 文件
Replace all strings in english by their translation in swedish
用瑞典语翻译替换所有英文字符串

Menu translation 菜单翻译

Menus are defined using Hugo menus Menus | Hugo
菜单使用Hugo菜单定义：https://gohugo.io/extras/menus/

You can translate menu entries by setting identifier that matches a translation key. By using this way, name will not be use at all.
您可以通过设置与翻译键匹配的 identifier 来翻译菜单项。这样， name 就不会被使用了。

Setting up default theme to Tranquilpeak
设置默认主题为Tranquilpeak

Modify the theme in config.{toml,yml,json} by changing theme variable to tranquilpeak
通过将 theme 变量更改为 tranquilpeak 来修改 config.{toml,yml,json} 中的主题

Define date format 定义日期格式

By default date will be printed like following: mmmm d, yyyy, example: "January 2, 2006"
默认情况下，将打印如下所示： mmmm d, yyyy ，示例：二○ ○六年一月二日

You can customize it by setting
您可以通过设置自定义它

[params]
  dateFormat = "2 January 2006"

Will produce: "2 January 2006"
将产生：“二零零六年一月二日”

ATTENTION: date format should respect go Time package syntax, please refer to https://golang.org/pkg/time/

Moreover, if you are using fully named month (short named month like "jan", "feb", etc is not supported), month will be translated.
此外，如果您使用的是完全命名的month（不支持“jan”、“feb”等短命名月份），month将被翻译。

Example: 范例：

defaultContentLanguage = "fr-fr"

"21 July 2006" will be output "21 Juillet 2006".
“2006年7月21日”将输出“2006年7月21日”。

Define global keywords 定义全局关键字

You can define keywords for search engines. These keywords will be added on all pages.
您可以为搜索引擎定义关键字。这些关键字将被添加到所有页面上。

[params]
  keywords = ["development", "next-gen"]

Theme configuration 主题配置

Backup your configuration:
备份您的配置：

cp config.{toml,yml,json} config.{toml,yml,json}.backup

Copy example configuration
复制示例配置

cp themes/tranquilpeak/exampleSite/config.toml .

Complete config.toml with your information. Read above sections to have more information.
填写 config.toml 您的信息。阅读以上章节以获得更多信息。

Sidebar 提要字段

The sidebar is powerful and easily configurable. You can add groups of links and links much as you want.
侧栏功能强大，易于配置。您可以根据需要添加链接组和链接。

[[menu.main]]
  weight = 1
  identifier = "home"
  name = "Home"
  pre = "<i class=\"sidebar-button-icon fas fa-lg fa-home\" aria-hidden=\"true\"></i>"
  url = "/"
[[menu.main]]
  weight = 2
  identifier = "categories"
  name = "Categories"
  pre = "<i class=\"sidebar-button-icon fas fa-lg fa-bookmark\" aria-hidden=\"true\"></i>"
  url = "/categories"
[[menu.main]]
  weight = 3
  identifier = "tags"
  name = "Tags"
  pre = "<i class=\"sidebar-button-icon fas fa-lg fa-tags\" aria-hidden=\"true\"></i>"
  url = "/tags"
[[menu.main]]
  weight = 4
  identifier = "archives"
  name = "Archives"
  pre = "<i class=\"sidebar-button-icon fas fa-lg fa-archive\" aria-hidden=\"true\"></i>"
  url = "/archives"
[[menu.main]]
  weight = 5
  identifier = "about"
  name = "About"
  pre = "<i class=\"sidebar-button-icon fas fa-lg fa-question\" aria-hidden=\"true\"></i>"
  url = "/#about"

[[menu.links]]
  weight = 0
  identifier = "github"
  name = "GitHub"
  pre = "<i class=\"sidebar-button-icon fab fa-lg fa-github\" aria-hidden=\"true\"></i>"
  url = "https://github.com/kakawait"
[[menu.links]]
  weight = 1
  identifier = "stackoverflow"
  name = "Stack Overflow"
  pre = "<i class=\"sidebar-button-icon fab fa-lg fa-stack-overflow\" aria-hidden=\"true\"></i>"
  url = "https://stackoverflow.com/users/636472/kakawait"

[[menu.misc]]
  weight = 0
  identifier = "rss"
  name = "RSS"
  pre = "<i class=\"sidebar-button-icon fas fa-lg fa-rss\" aria-hidden=\"true\"></i>"
  url = "/index.xml"

Variable 变数	Description 项目名称	Type 型号
weight 砝码	menu is ordered by weight 菜单按重量排序	int 整数
identifier 标识符	unique identifier for entry 条目的唯一标识符	string 弦
name 名称，名称	title to be display 要显示的标题	string 弦
pre 前	icon to be display a left of the name 要显示在名称左侧的图标	template.HTML
url 网址	menu entry url 菜单项url	string 弦

identifier can be use for translation see Menu translation.
identifier 可用于翻译参见菜单翻译。

Header 标题

The right link of the header is customizable. You can add a link (as an icon) at the right of the header instead of the author's gravatar image or author's picture. By default, author's gravatar or author's picture is displayed.
标题的右链接是可自定义的。你可以在标题的右边添加一个链接（作为图标），而不是作者的gravatar图像或作者的图片。默认情况下，显示作者的gravatar或作者的图片。

E.g to display a shortcut to open algolia search window :
例如，显示打开algolia搜索窗口的快捷方式：

[params.header.rightLink]
  class = "open-algolia-search"
  icon = "search"
  url = "/#search"

Variable 变数	Description 项目名称
url 网址	URL of the link. If the URL is internal, domain name is not necessary 链接的URL。如果URL是内部的，则不需要域名
icon 图符	Name of the font awesome icon class without the `fa-` (Go to font-awesome icons to find class name of icon) 没有 `fa-` 的字体awesome图标类的名称（转到font-awesome图标查找图标的类名）
class 类别	CSS Class added to the link CSS类添加到链接

Author 作者

[author]
  name = "Thibaud Leprêtre"
  bio = "Super bio with markdown support **COOL**"
  job = "Java backend developer"
  location = "France"
  # Your Gravatar email. Overwrite `author.picture` everywhere in the blog
  gravatarEmail = "thibaud.lepretre@gmail.com"
  # Your profile picture
  # Overwritten by your gravatar image if `author.gravatarEmail` is filled
  picture = "https://cdn1.iconfinder.com/data/icons/ninja-things-1/1772/ninja-simple-512.png"
  # Your Twitter username without the @. E.g : tranquilpeak
  twitter = "thibaudlepretre"
  # Your google plus profile id. E.g : +ThibaudLepretre or 114625208755123718311
  googlePlus = "+ThibaudLepretre"

Variable 变数	Description 项目名称
name 名称，名称	Your name 你的名字
gravatarEmail	This address will be used to get your gravatar image if you activate gravatar option 如果您激活gravatar选项，此地址将用于获取您的gravatar图像
bio 生物	Your biography (Markdown and HTML supported) 您的个人资料（Markdown和HTML支持）
job 工作	Your job 你的工作
location 位置	Your location 您的位置
picture 图片	Your profile picture. Overwritten by your gravatar image if gravatar email is filled 你的头像。覆盖您的gravatar图像如果gravatar电子邮件已填写
twitter 叽叽喳喳的	Your Twitter username without the @. E.g : `thibaudlepretre` 你的Twitter用户名不带@。例如： `thibaudlepretre`
googlePlus 谷歌+	Your google plus profile id. E.g : `+ThibaudLepretre` or `114625208755123718311` 您的Google Plus个人资料ID。例如： `+ThibaudLepretre` 或 `114625208755123718311`

Customization 定制化

ATTENTION not all customizations are documented here, you may checkout sample config.toml.
注意，这里并没有记录所有的自定义，您可以签出示例config.toml。

[params]
  sidebarBehavior = 1
  thumbnailImage = true
  thumbnailImagePosition = "right"
  autoThumbnailImage = true
  coverImage = "images/cover.jpg"
  favicon = /favicon.png
  imageGallery = true
  hierarchicalCategories = true
  syntaxHighlighter = 'highlight.js'

Variable 变数	Description 项目名称
sidebarBehavior 侧栏行为	Define the behavior of the header and sidebar : 定义标题和侧栏的行为： 1: Display extra large sidebar on extra large screen, large sidebar on large screen, medium sidebar on medium screen and header bar on small screen and extra large sidebar is swiped on extra large screen and large sidebar on all lower screens when open button is clicked (default) 1：在超大屏幕上显示超大侧边栏，在大屏幕上显示超大侧边栏，在中等屏幕上显示中等侧边栏，在小屏幕上显示中等侧边栏，在超大屏幕上显示超大侧边栏，点击打开按钮时，在所有较低屏幕上显示超大侧边栏（默认） 2: Display large sidebar on extra large & large screen, medium sidebar on medium screen and header bar on small screen and large sidebar is swiped when open button is clicked 2：在超大屏幕上显示大侧边栏，在中等屏幕上显示中等侧边栏，在小屏幕上显示标题栏，当打开按钮点击时，大侧边栏被滑动 3: Display medium sidebar on large and medium screen and header bar on small screen and medium sidebar is swiped when open button is clicked 3：在大屏幕和中屏幕上显示中等侧边栏，在小屏幕上显示标题栏，点击打开按钮时滑动中等侧边栏 4: Display header bar on all screens, extra large sidebar is swiped on extra large screen and large sidebar is swiped on all lower screens 4：在所有屏幕上显示标题栏，在超大屏幕上滑动超大侧边栏，在所有较低屏幕上滑动大侧边栏 5: Display header bar on all screens and large sidebar is swiped on large screen 5：在所有屏幕上显示标题栏，在大屏幕上滑动大侧边栏 6: Display header bar on all screens and medium sidebar is swiped 6：在所有屏幕上显示标题栏，并滑动中等侧边栏
clearReading 清除读数	Hide sidebar on all page (that is part of mainSections) to let page take full width to improve reading, and enjoy wide images and cover images. Useless if `sidebarBehavior` is equal to `3` or `4`. (true: enable, false: disable). Default behavior : `params.clearReading` value in theme configuration file. 隐藏所有页面上的侧边栏（这是mainSections的一部分），让页面采取全宽，以提高阅读，并享受宽图像和封面图像。如果 `sidebarBehavior` 等于 `3` 或 `4` ，则无效。(true：enable，false：禁用）。默认行为： `params.clearReading` 主题配置文件中的值。
thumbnailImage 缩略图	Display thumbnail image of each post on index pages 在索引页上显示每篇文章的缩略图
thumbnailImagePosition 缩略图图像位置	Display thumbnail image at the right of title in index pages (`right`, `left` or `bottom`). Set this value to `right` if you have old posts to keep the old style on them and define `thumbnailImagePosition` on a post to overwrite this setting. (Default: `right`) 在索引页（ `right` 、 `left` 或 `bottom` ）标题右侧显示缩略图。如果你有旧的帖子，请将此值设置为 `right` 以保留旧的样式，并在帖子上定义 `thumbnailImagePosition` 以覆盖此设置。（默认： `right` ）
autoThumbnailImage	Automatically select the cover image or the first photo from the gallery of a post if there is no thumbnail image as the thumbnail image. Set this value to `true` if you have old posts that use the cover image or the first photo as the thumbnail image and set `autoThumbnailImage` to `false` on a post to overwrite this setting. (Default : `true`) 如果没有缩略图，则自动选择文章图库中的封面图像或第一张照片作为缩略图。如果您的旧帖子使用封面图像或第一张照片作为缩略图，请将此值设置为 `true` ，并将帖子的 `autoThumbnailImage` 设置为 `false` 以覆盖此设置。（默认： `true` ）
coverImage	Your blog cover picture. I STRONGLY recommend you to use a CDN to speed up loading of pages. There is many free CDN like Cloudinary or you can also use indirectly by using services like Google Photos. 你的博客封面图片。我强烈建议您使用CDN来加速页面加载。有许多免费的CDN，如Cloudinary，或者您也可以通过使用Google Photos等服务间接使用。
favicon	Your favicon path (Default: `/favicon.png`) 您的收藏夹路径（默认值： `/favicon.png` ）
imageGallery 图片画廊	Display an image gallery at the end of a post which have `photos` variables. (false: disabled, true: enabled) 在文章末尾显示一个图片库，其中包含 `photos` 变量。（false：禁用，true：启用）
hierarchicalCategories 层次分类	Define categories will create hierarchy between parents: `categories = ["foo", "bar"]` will consider "bar" a sub-category of "foo". If false it will flat categories. 定义类别将在父级之间创建层次结构： `categories = ["foo", "bar"]` 将“bar”视为“foo”的子类别。如果是假的，它将平面类别。
customCSS (DEPRECATED see Add custom JS or CSS using configuration) customCSS（DEPRECATED参见使用配置添加自定义JS或CSS）	Define files with css that override or extend the theme css: `customCSS` = ["css/mystyles.css"]. 用css定义覆盖或扩展主题css的文件： `customCSS` = [“css/mystyles.css”]。
customJS (DEPRECATED see Add custom JS or CSS using configuration) customJS（DEPRECATED参见使用配置添加自定义JS或CSS）	Define files with js that override or extend the theme js: `customJS` = ["js/myscripts.js"]. 定义带有js的文件，覆盖或扩展主题js： `customJS` = [“js/myscripts.js”]。
syntaxHighlighter 语法高亮显示器	Define which syntax highlighter you want to use (if not set syntax highlighting is disable) between `highlight.js` and `prism.js` 在 `highlight.js` 和 `prism.js` 之间定义要使用的语法高亮显示器（如果未设置语法高亮显示器禁用）

E.g : A category page look like this with hierarchicalCategories = true :
例如：一个类别页面看起来像这样，带有 hierarchicalCategories = true ：

hierarchicalCategories true

The same page with hierarchicalCategories = false:

thumbnail-image-position-right

与 hierarchicalCategories = false 相同的页面： hierarchicalCategories false

thumbnail-image-position-left

Add custom JS or CSS using configuration
使用配置添加自定义JS或CSS

If you need to add some additionnal javascript or css files to your blog without forking or overriding theme itself you could use following configuration:
如果你需要添加一些额外的JavaScript或css文件到你的博客，而不是分叉或覆盖主题本身，你可以使用以下配置：

[params]
  [[params.customJS]]
    src = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/languages/go.min.js"
    integrity = "sha256-LVuWfOU0rWFMCJNl1xb3K2HSWfxtK4IPbqEerP1P83M="
    crossorigin = "anonymous"
    async = true
    defer = true

  [[params.customJS]]
    src = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/languages/dockerfile.min.js"
    integrity = "sha256-putofyQv7OB569xAldpyBnHJ0Uc+7VGp5Us05IgDGss="
    crossorigin = "anonymous"
    async = true
    defer = true

  [[params.customJS]]
    src = "js/myscript.js"

  [[params.customCSS]]
    href = "css/mystyle.css"

ATTENTION there is no limitation on key structures and each keys will be converted as tag attributes.
注意，键结构没有限制，每个键将被转换为标签属性。

Futhermore, even if previous syntax is still supported (customJS = ["js/myscripts.js"]), you can't mix both new and old syntax.
此外，即使以前的语法仍然被支持（ customJS = ["js/myscripts.js"] ），你也不能混合使用新旧语法。

Integrated services 综合服务

For privacy settings please refer to Hugo and the General Data Protection Regulation | Hugo
有关隐私设置，请参阅https://gohugo.io/about/hugo-and-gdpr/

Disqus 迪克斯

disqusShortname =
[params.comment.disqus]
  enable = true

Variable 变数	Description 项目名称
disqusShortname disqus短名称	Your Disqus shortname 你的Disqus简称
enable 使能	Toggle disqus globally 全局切换磁盘

Gitalk 吉塔克

[params.comment.gitalk]
  enable = true
  # clientId =
  # clientSecret =
  # owner =
  # repo =
  # See all options: https://github.com/gitalk/gitalk#options
  [params.comment.gitalk.options]
    language = "en"
    perPage = 10
    distractionFreeMode = false
    enableHotKey = true
    pagerDirection = "first"

Variable 变数	Description 项目名称
enable 使能	Toggle gitalk globally 全局切换gitalk
clientId 客户端ID	GitHub Application Client ID GitHub应用程序客户端ID
clientSecret	GitHub Application Client Secret GitHub应用程序客户端密码
owner 业主	GitHub repository owner. Can be personal user or organization GitHub仓库所有者。可以是个人用户或组织
repo 回购	GitHub repository GitHub储存库
options 选项	See all available options on GitHub - gitalk/gitalk: Gitalk is a modern comment component based on Github Issue and Preact. 在https://github.com/gitalk/gitalk#options上查看所有可用选项

Google Analytics

googleAnalytics =
[params.googleAnalytics]
  async = true

Variable 变数	Description 项目名称
googleAnalytics 谷歌分析	Your Google analystics web property ID : UA-XXXXX-X 您的Google analystics Web属性ID：UA-XXXXX-X
async 异步	Load Google analytics asynchronously 异步加载Google Analytics

Gravatar 格拉瓦塔尔

[author]
  gravatarEmail =

Variable 变数	Description 项目名称
gravatarEmail	Your gravatar email. Overwrite `author.picture` everywhere in the blog 你的邮箱。覆盖博客中的所有地方 `author.picture`

Facebook 脸谱网

[params]
  fbAdminIds =
  fbAppId =

Variable 变数 Description 项目名称

fbAdminIds Your Facebook user ids used to connect your blog with your facebook user accounts (Facebook Insights). Use array syntax. E.g : [9830047, 1003342]. Visit Facebook docs for more information.
您的Facebook用户ID用于将您的博客与您的Facebook用户帐户（Facebook Insights）连接起来。使用数组语法。例如： [9830047, 1003342] 。访问Facebook文档以获取更多信息。

fbAppId Your Facebook app id used to connect your blog with your facebook app account (Facebook Insights). E.g : 9841307. Visit Facebook docs for more information.
您的Facebook应用程序ID用于将您的博客与您的Facebook应用程序帐户（Facebook Insights）相连接。例如： 9841307 。访问Facebook文档以获取更多信息。

Variable 变数	Description 项目名称
fbAdminIds	Your Facebook user ids used to connect your blog with your facebook user accounts (Facebook Insights). Use array syntax. E.g : `[9830047, 1003342]`. Visit Facebook docs for more information. 您的Facebook用户ID用于将您的博客与您的Facebook用户帐户（Facebook Insights）连接起来。使用数组语法。例如： `[9830047, 1003342]` 。访问Facebook文档以获取更多信息。
fbAppId	Your Facebook app id used to connect your blog with your facebook app account (Facebook Insights). E.g : `9841307`. Visit Facebook docs for more information. 您的Facebook应用程序ID用于将您的博客与您的Facebook应用程序帐户（Facebook Insights）相连接。例如： `9841307` 。访问Facebook文档以获取更多信息。

Sharing options 共享选项

[params]
  [[params.sharingOptions]]
    name = "Facebook"
    icon = "fab fa-facebook-square"
    url = "https://www.facebook.com/sharer/sharer.php?u=%s"

  [[params.sharingOptions]]
    name = "Twitter"
    icon = "fab fa-twitter"
    url = "https://twitter.com/intent/tweet?text=%s"

  [[params.sharingOptions]]
    name = "Google+"
    icon = "fab fa-google-plus"
    url = "https://plus.google.com/share?url=%s"

You can comment and uncomment to enable or disable sharing options. If your own sharing options, simply add new sharing options on your configuration. E.g with foo_bar social network:
您可以添加注释和取消注释以启用或禁用共享选项。如果您有自己的共享选项，只需在配置中添加新的共享选项即可。例如，使用foo_bar社交网络：

[params]
  [[params.sharingOptions]]
    name = "Foo bar"
    icon = "fas fa-foo-bar"
    url = "https://www.foo-bar.com/sharer/sharer.php?u=%s"

Variable 变数	Description 项目名称
name 名称，名称	Name of your sharing site. 您的共享站点的名称。
icon 图符	Name of the fontawesome icon class (Go to font-awesome icons to find class name of icon) fontawesome图标类的名称（转到font-awesome图标查找图标的类名）
url 网址	URL of the link. use %s to specify where to put the permalink. 链接的URL。使用%s指定放置永久链接的位置.

Enable pages 启用页面

Tranquilpeak provides you 2 pages to display all posts title and date by tags, by categories, by date and an about page. To enable one of this pages simply add following taxonomies:
Tranquilpeak为您提供了2页显示所有帖子的标题和日期，按标签，按类别，按日期和一个关于页面。要启用其中一个页面，只需添加以下分类：

[taxonomies]
  tag = "tags"
  category = "categories"

Integrated services configuration
集成服务配置

Google Analytics

Exclude hostname (localhost) while writing articles
编写文章时排除主机名（localhost）

While you are writing articles, you need to check the result a lot of times before deploying your site. If you have enable Google analytics service, Google will include all requests done, even when hostname is localhost and this can greatly skew the results. To overcome this, you have to add a filter on Google Analytics website.
当你在写文章时，你需要在部署你的网站之前多次检查结果。如果您启用了Google分析服务，Google将包括所有已完成的请求，即使主机名为localhost，这可能会极大地影响结果。为了解决这个问题，你必须在Google Analytics网站上添加一个过滤器。

Follow these steps, to add new filter :
按照以下步骤添加新过滤器：

Sign in to your Google Analytics account
登录您的Google Analytics帐户
Select the Admin tab and navigate to the property in which you want to create the filter (Account > Property > View)
选择Admin选项卡并导航到要在其中创建筛选器的属性（Account > Property > View）
In View column, click on Filters button
在“视图”列中，单击“过滤器”按钮
Click on + NEW FILTER button
点击+ NEW FILTER按钮
Enter a name for the filter
输入筛选器的名称
Select Custom filter, Filter Field : Hostname, Filter Pattern : (.*?localhost.*?)
选择自定义过滤器（ Custom Filter ）：#30340 ; 过滤模式： (.*?localhost.*?)
Click on Save button 点击保存按钮

Social cards 社交卡

You can configure how links to your site will appear in Twitter and/or Facebook. There are several ways of setting up card parameters:
您可以配置指向您网站的链接在Twitter和/或Facebook中的显示方式。设置卡参数的方法有多种：

Title: if in a page with title (like a post) it will use post title, otherwise, will use site title.
标题：如果在一个有标题的页面（如文章），它将使用文章标题，否则，将使用网站标题。
Description: will use article summary, if it does not exist, will use site description.
产品描述：将使用文章摘要，如果它不存在，将使用站点描述。
Site author (twitter only): will use the value of twitter field on [[params.Author]] section of your config.toml file.
网站作者（仅Twitter）：将使用您的 config.toml 文件的 [[params.Author]] 部分上的 twitter 字段的值。
Content author (twitter only): will use the value of the field twitter in your document header. If not specified, will use the Site author field value.
内容作者（仅Twitter）：将使用文档标题中字段 twitter 的值。如果未指定，将使用站点作者字段值。
Image: will use the following fields in order, if one is not available, the next will be taken: thumbnail of document, cover of document, gallery images, gravatar email then author picture, .
图像：将按顺序使用以下字段，如果一个字段不可用，则将采用下一个字段：文档缩略图、文档封面、图库图像、gravatar电子邮件，然后是作者图片。

Quick & easy modifications
快速和简单的修改

Prerequisites 必要条件

Since you are going to edit the theme, you have to install all the necessary to build it after changes : Installation
因为你要编辑主题，你必须安装所有必要的修改后构建它：安装方式

Run command in theme folder : hugo-blog/themes/tranquilpeak
在主题文件夹中运行命令： hugo-blog/themes/tranquilpeak

Change global style 更改全局样式

If you want to change font families, font size, sidebar color, things like that, take a look at source/scss/utils/_variables.scss file. This file contains global variables used in this theme. Build the theme after changes to see changes.
如果你想改变字体系列，字体大小，侧边栏颜色，诸如此类的东西，看看 source/scss/utils/_variables.scss 文件。此文件包含此主题中使用的全局变量。在更改后构建主题以查看更改。

Change code coloration (Highlight.js theme)
更改代码着色（Highlight.js主题）

Tranquilpeak integrate its own highlight.js theme inspired by GitHub. Of course, you can replace it with an other theme found on highlight.js repository. Since Hexo use different CSS class names, all theme are not ready out of the box, but it is very easy to make them compatible.
Tranquilpeak集成了自己的highlight.js主题，灵感来自GitHub。当然，你可以用highlight.js仓库中的其他主题替换它。由于Hexo使用不同的CSS类名，所有的主题都没有准备好开箱即用，但很容易使它们兼容。

Follow these steps :
按照以下步骤操作：

Get your theme here : Highlight.js theme or create yours
在这里获取您的主题：突出显示. js主题或创建您的主题
Follow guidelines in src/scss/themes/hljs-custom.scss file
遵循 src/scss/themes/hljs-custom.scss 文件中的指南
Build the theme with npm run prod. Learn more about Grunt tasks : Grunt tasks
使用 npm run prod 构建主题。了解有关Grunt任务的更多信息：Grunt任务

Writing posts 写帖子

To write articles, you have to use Markdown language. Here you can find the main basics of Markdown syntax. Please note, there are many different versions of Markdown and some of them are not supported by Hugo.
要写文章，你必须使用Markdown语言。在这里你可以找到Markdown语法的主要基础。请注意，Markdown有许多不同的版本，其中一些不受Hugo支持。

I STRONGLY recommend you to use a CDN to speed up loading of pages. There is many free CDN like Cloudinary or you can also use indirectly by using services like Google Photos.
我强烈建议您使用CDN来加速页面加载。有许多免费的CDN，如Cloudinary，或者您也可以通过使用Google Photos等服务间接使用。

Front-matter settings 前置设置

Tranquilpeak introduces new variables to give you a lot of possibilities.
Tranquilpeak引入了新的变量，给予你很多可能性。

Example : 范例：

disqusIdentifier: fdsF34ff34
keywords:
- javascript
- hexo
clearReading: true
thumbnailImage: image-1.png
thumbnailImagePosition: bottom
autoThumbnailImage: yes
metaAlignment: center
coverImage: image-2.png
coverCaption: "A beautiful sunrise"
coverMeta: out
coverSize: full
coverImage: image-2.png
gallery:
    - image-3.jpg "New York"
    - image-4.png "Paris"
    - http://i.imgur.com/o9r19kD.jpg "Dubai"
    - https://example.com/original.jpg https://example.com/thumbnail.jpg "Sidney"
comments: false
showTags: true
showPagination: true
showSocial: true
showDate: true
summary: "This is a custom summary and does *not* appear in the post."

Variable 变数	Description 项目名称
disqusIdentifier	Define a unique string which is used to look up a page's thread in the Disqus system. 定义一个唯一的字符串，用于在Disqus系统中查找页面的线程。
keywords 关键字关键字	Define keywords for search engines. you can also define global keywords in Hugo configuration file. 为搜索引擎定义关键字。您也可以在Hugo配置文件中定义全局关键字。
clearReading 清除读数	Hide sidebar on all article page to let article take full width to improve reading, and enjoy wide images and cover images. Useless if `params.sidebarBehavior` is equal to `3` or `4`. (true: enable, false: disable). Default behavior : `params.clearReading` value in theme configuration file. 隐藏所有文章页面上的侧边栏，让文章采取全宽度，以提高阅读，并享受广泛的图像和封面图像。如果 `params.sidebarBehavior` 等于 `3` 或 `4` ，则无效。(true：enable，false：禁用）。默认行为： `params.clearReading` 主题配置文件中的值。
autoThumbnailImage	Automatically select the cover image or the first photo from the gallery of a post if there is no thumbnail image as the thumbnail image. `autoThumbnailImage` overwrite the setting `autoThumbnailImage` in the theme configuration file 如果没有缩略图，则自动选择文章图库中的封面图像或第一张照片作为缩略图。 `autoThumbnailImage` 覆盖主题配置文件中的设置 `autoThumbnailImage`
thumbnailImage 缩略图	Image displayed in index view. 索引视图中显示的图像。
thumbnailImagePosition 缩略图图像位置	Display thumbnail image at the right of title in index pages (`right`, `left` or `bottom`). `thumbnailImagePosition` overwrite the setting `thumbnailImagePosition` in the theme configuration file 在索引页（ `right` 、 `left` 或 `bottom` ）标题右侧显示缩略图。 `thumbnailImagePosition` 覆盖主题配置文件中的设置 `thumbnailImagePosition`
metaAlignment 元对齐	Meta (title, date and categories) alignment (right, left or center). Default behavior : left Meta（标题、日期和类别）对齐（右、左或中心）。默认行为：左
coverImage	Image displayed in full size at the top of your post in post view. If thumbnail image is not configured, cover image is also used as thumbnail image. Check the beautiful demo here : Cover image demo 在文章视图中，图片以全尺寸显示在文章的顶部。如果未配置缩略图，则封面图像也用作缩略图。在这里查看美丽的演示：封面图片演示
coverSize	`partial`: cover image take a part of the screen height (60%), `full`: cover image take the entire screen height. `partial` ：封面图像占屏幕高度的一部分（60%）， `full` ：封面图像占整个屏幕的高度。
coverCaption	Add a caption under the cover image : Cover caption demo 在封面图片下添加标题：封面字幕演示
coverMeta	`in`: display post meta (title, date and categories) on cover image, `out`: display meta (title, date and categories) under cover image as usual. Default behavior : `in` `in` ：在封面图片上显示帖子Meta（标题、日期和类别）， `out` ：显示Meta（标题，日期和类别）下的封面图像像往常一样。默认行为： `in`
gallery 画廊	Images displayed in an image gallery (with fancybox) at the end of the post. If thumbnail image is not configured and cover image too, the first photo is used as thumbnail image. format: `original url [thumbnail url] [caption]`, E.g : `https://example.com/original.jpg https://example.com/thumbnail.jpg "New York"` 在文章末尾的图片库中显示的图片（带fancybox）。如果缩略图图像和封面图像未配置，则第一张照片用作缩略图图像。格式： `original url [thumbnail url] [caption]` ，例如： `https://example.com/original.jpg https://example.com/thumbnail.jpg "New York"`
comments 评论	`true`: Show the comment of the post. `true` ：显示文章的评论。
showDate 新闻资讯	`true`: Show the date when `true` (default) `true` ：显示 `true` 时的日期（默认）
showTags 显示标签	`true`: show tags of this page. `true` ：显示此页的标签。
showPagination 显示分页	`true`: show pagination. `true` ：显示分页。
showSocial 展示社交	`true`: show social button such as share on Twitter, Facebook... `true` ：显示社交按钮，如在Twitter上分享，Facebook.
showMeta	`true`: Show post meta (date, categories). `true` ：显示帖子Meta（date，categories）。
showActions 展示活动	`true`: Show post actions (navigation, share links). `true` ：显示发布操作（导航、共享链接）。
summary 概要	Custom excerpt text to show on the homepage. 要在主页上显示的自定义摘录文本。
link 链接	Override default URL/link for a given article/page. 覆盖给定文章/页面的默认URL/链接。

Example: A post on index page will look like this with :thumbnailImagePosition set to bottom:
示例：索引页面上的帖子看起来像这样： thumbnailImagePosition 设置为 bottom ：

The same with : thumbnailImagePosition set to right:
与以下内容相同： thumbnailImagePosition 设置为 right ：

The same with : thumbnailImagePosition set to left:
与以下内容相同： thumbnailImagePosition 设置为 left ：

Define post excerpt 定义帖子摘录

Use: 用途：

 to define post excerpt and keep the post excerpt in the post content
 定义帖子摘录，并将帖子摘录保留在帖子内容中
For a custom exerpt not in the post content, use the summary front-matter variable. Markdown syntax is supported.
对于不在post内容中的自定义expert，请使用 summary front-matter变量。支持Markdown语法。

Display table of contents
显示目录

Hugo Tranquilpeak theme provides a shortcode for adding table of content inside your content.
Hugo Tranquilpeak主题提供了一个在内容中添加目录的简码。

syntgax: syntgax：

<span style="background-color:var(--color-canvas-subtle)"><span style="color:#e6edf3"><span style="color:var(--fgColor-default, var(--color-fg-default))"><span style="background-color:var(--bgColor-muted, var(--color-canvas-subtle))"><code>{{< toc >}}
</code></span></span></span></span>

However you may have to update your hugo config.toml configuration to be sure that startLevel is matching your content. By default (see official documentation) Hugo detects table of content starting level 2, that mean <h2>my title</h2> or ## my title.
但是，您可能需要更新您的hugo config.toml 配置，以确保 startLevel 与您的内容匹配。默认情况下（请参阅官方文档）Hugo检测目录从2级开始，即 <h2>my title</h2> 或 ## my title 。

If you used to write # my title and so transformed to <h1>my title</h1>, the table of content will be empty by default if you're not updating startLevel to startLevel = 1
如果您以前写的是 # my title ，因此转换为 <h1>my title</h1> ，那么如果您没有将 startLevel 更新为 startLevel = 1 ，则目录将默认为空

[markup]
  [markup.tableOfContents]
    endLevel = 3
    ordered = false
    startLevel = 1

Tags 标签

Tranquilpeak introduce new tags to display alert messages, images in full width and create beautiful galleries.
Tranquilpeak引入了新的标签来显示警告信息，全宽图像，并创建美丽的画廊。

Alert 警报

Alert tag is useful to highlight a content like a tips or a warning. Check it live here : Alert tag demo
Alert标签对于突出显示提示或警告等内容非常有用。点击这里查看直播：警报标签演示

Syntax: 语法：

<span style="background-color:var(--color-canvas-subtle)"><span style="color:#e6edf3"><span style="color:var(--fgColor-default, var(--color-fg-default))"><span style="background-color:var(--bgColor-muted, var(--color-canvas-subtle))"><code>{{< alert [classes] >}}
content
{{< /alert >}}
</code></span></span></span></span>

E.g: 例如：

<span style="background-color:var(--color-canvas-subtle)"><span style="color:#e6edf3"><span style="color:var(--fgColor-default, var(--color-fg-default))"><span style="background-color:var(--bgColor-muted, var(--color-canvas-subtle))"><code>{{< alert danger no-icon >}}
Here is a danger alert without icon
{{< /alert >}}
</code></span></span></span></span>

Argument 参数	Description 项目名称
Classes 类别	info 资讯 success 成功 warning 警告 danger 危险 no-icon 无图标

Highlight Text 高亮文本

Highlight text tag is useful to highlight an interesting part in a text. Check it live here : Highlight text tag demo
突出显示文本标签用于突出显示文本中感兴趣的部分。点击这里查看直播：突出显示文本标签演示

Syntax: 语法：

<span style="background-color:var(--color-canvas-subtle)"><span style="color:#e6edf3"><span style="color:var(--fgColor-default, var(--color-fg-default))"><span style="background-color:var(--bgColor-muted, var(--color-canvas-subtle))"><code>{{< hl-text [classes] >}}
content
{{< /hl-text >}}
</code></span></span></span></span>

E.g: 例如：

<span style="background-color:var(--color-canvas-subtle)"><span style="color:#e6edf3"><span style="color:var(--fgColor-default, var(--color-fg-default))"><span style="background-color:var(--bgColor-muted, var(--color-canvas-subtle))"><code>{{< hl-text danger >}}
your highlighted text
{{< /hl-text >}}
</code></span></span></span></span>

Argument 参数	Description 项目名称
Classes 类别	classes : 分类： red 红色 green 绿色 blue 蓝色的 purple 紫色 orange 橙子 yellow 黄色 cyan 青色 primary 初级的 success 成功 warning 警告 danger 危险

It's important to put the paragraph that contains highlight text tag inside <p>...</p> otherwise the following content may not be rendered.
重要的是将包含突出显示文本标签的段落放在 <p>...</p> 内，否则可能无法呈现以下内容。

Image 图片

Image tag is useful to add images and create beautiful galleries. Check what are the possibilities here : Image tag demo
图像标签是有用的添加图像和创建美丽的画廊。看看这里有哪些可能性：图像标签演示

Syntax: 语法：

<span style="background-color:var(--color-canvas-subtle)"><span style="color:#e6edf3"><span style="color:var(--fgColor-default, var(--color-fg-default))"><span style="background-color:var(--bgColor-muted, var(--color-canvas-subtle))"><code>{{< image classes="[classes]" src="[/path/to/image]" thumbnail="[/path/to/thumbnail]" group="[group-name]" thumbnail-width="[width of thumbnail]" thumbnail-height="[height of thumbnail]" title="[title text]" >}}
</code></span></span></span></span>

E.g: 例如：

<span style="background-color:var(--color-canvas-subtle)"><span style="color:#e6edf3"><span style="color:var(--fgColor-default, var(--color-fg-default))"><span style="background-color:var(--bgColor-muted, var(--color-canvas-subtle))"><code>{{< image classes="fancybox right clear" src="image2.png" thumbnail="http://google.fr/images/image125.png" group="group:travel" thumbnail-width="150px" thumbnail-height="300px" title="A beautiful sunrise" >}}
</code></span></span></span></span>

Argument 参数	Description 项目名称
classes (optional) 类（可选）	You can add css classes to stylize the image. Separate class with whitespace. Tranquilpeak integrate many css class to create nice effects : 你可以添加css类来样式化图像。用空格分隔类。Tranquilpeak集成了许多css类来创建漂亮的效果： fancybox : Generate a fancybox image. fancybox：生成一个fancybox图像。 nocaption : Caption of the image will not be displayed. nocaption：图像的标题将不会显示。 left : Image will float at the left. left：图像将浮动在左侧。 right : Image will float at the right. right：图像将浮动在右侧。 center : Image will be at center. center：图像将位于中心。 fig-20 : Image will take 20% of the width of post width and automatically float at left. 图-20：图片将占文章宽度的20%，并自动浮动在左侧。 fig-25 : Image will take 25% of the width of post width and automatically float at left. 图25：图片将占文章宽度的25%，并自动浮动在左侧。 fig-33 : Image will take 33% of the width of post width and automatically float at left. 图33：图片将占文章宽度的33%，并自动浮动在左侧。 fig-50 : Image will take 50% of the width of post width and automatically float at left. 图-50：图片将占据文章宽度的50%，并自动浮动在左侧。 fig-75 : Image will take 75% of the width of post width and automatically float at left. 图75：图片将占文章宽度的75%，并自动浮动在左侧。 fig-100 : Image will take 100% of the width of post width. 图-100：图像将占帖子宽度的100%。 clear : Add a div with `clear:both;` style attached after the image to retrieve the normal flow of the post. clear：在图片后面添加一个带有 `clear:both;` 样式的div，以检索文章的正常流程。
group (optional) 组（可选）	Name of a group, used to create a gallery. Only for image with `fancybox` css class 用于创建图库的组的名称。仅适用于具有 `fancybox` css类的图像
src 来源	Path to the original image. 原始图像的路径。
thumbnail (optional) 缩略图（可选）	Path to the thumbnail image. If empty, the original image will be displayed. 缩略图的路径。如果为空，则显示原始图像。
thumbnail-width (optional) 缩略图宽度（可选）	Width to the thumbnail image. If the thumbnail image is empty, width will be attached to thumbnail image created from original image. E.g : `150px` or `85%`. 缩略图图像的宽度。如果缩略图图像为空，则宽度将附加到从原始图像创建的缩略图图像。例如： `150px` 或 `85%` 。
thumbnail-height (optional) thumbnail-height（可选）	Height to the thumbnail image. If the thumbnail image is empty, height will be attached to thumbnail image created from original image. E.g : `300px` or `20%`. 缩略图图像的高度。如果缩略图图像为空，则高度将附加到从原始图像创建的缩略图图像。例如： `300px` 或 `20%` 。
title (optional) 标题（可选）	Title of image displayed in a caption under image. `Alt` HTML attribute will use this title. E.g : `"A beautiful sunrise"`. 显示在图像下标题中的图像标题。 `Alt` HTML属性将使用此标题。例如： `"A beautiful sunrise"` 。

Tabbed code block 标签码块

Tabbed code blocks are useful to group multiple code blocks related. For example, the source code of a web component (html, css and js). Or compare a source code in different languages.
带选项卡的代码块可用于将多个相关代码块分组。例如，Web组件的源代码（HTML、CSS和JS）。或者比较不同语言的源代码。

Check it live : tabbed code block demo
查看Live：标签式代码块演示

Syntax: 语法：

{{< tabbed-codeblock [name] [link] >}}
    <!-- tab [lang] -->
        source code
    <!-- endtab -->
{{< /tabbed-codeblock >}}

E.g: 例如：

{{< tabbed-codeblock example http://example.com >}}
    <!-- tab js -->
        var test = 'test';
    <!-- endtab -->
    <!-- tab css -->
        .btn {
            color: red;
        }
    <!-- endtab -->
{{< /tabbed-codeblock >}}

Argument 参数	Description 项目名称
Name (optional) 姓名（可选）	Name of the code block, or of the file 代码块或文件的名称
Link (optional) 链接（可选）	Link to a demo, or a file 链接到演示或文件
Lang (optional) Lang（可选）	Programming language use for the current tab 当前选项卡使用的编程语言

Wide image 宽图像

Wide image tag is useful to display wide images in full width. It take the entire window width. Check the the result : Wide image tag demo
宽图像标记对于全宽显示宽图像非常有用。它占据整个窗口宽度。检查结果：宽图像标签演示

Syntax: 语法：

<span style="background-color:var(--color-canvas-subtle)"><span style="color:#e6edf3"><span style="color:var(--fgColor-default, var(--color-fg-default))"><span style="background-color:var(--bgColor-muted, var(--color-canvas-subtle))"><code>{{< wide-image src="[/path/to/image]" title="[title text]" >}}
</code></span></span></span></span>

E.g: 例如：

<span style="background-color:var(--color-canvas-subtle)"><span style="color:#e6edf3"><span style="color:var(--fgColor-default, var(--color-fg-default))"><span style="background-color:var(--bgColor-muted, var(--color-canvas-subtle))"><code>{{< wide-image src="http://google.fr/images/image125.png" title="A beautiful sunrise" >}}
</code></span></span></span></span>

Argument 参数	Description 项目名称
src 来源	Path to the original image. 原始图像的路径。
title (optional) 标题（可选）	Title of image displayed in a caption under image. `Alt` HTML attribute will use this title. E.g : `"A beautiful sunrise"`. 显示在图像下标题中的图像标题。 `Alt` HTML属性将使用此标题。例如： `"A beautiful sunrise"` 。

Writing pages 书写页面

Sometimes you need to create a page that is not a regular blog post, where you want to hide the date, social sharing buttons, tags, categories and pagination. This is the case for the blog pages About or Contact for instance which do not need to be timestamped (nor tagged or categorized) nor provide pagination and are not intended to be shared on social networks.
有时你需要创建一个页面，而不是一个普通的博客文章，你想隐藏的日期，社交分享按钮，标签，类别和分页。例如，关于或联系的博客页面就是这种情况，它们不需要时间戳（也不需要标记或分类），也不提供分页，并且不打算在社交网络上共享。

In order to create such a page you can proceed like so:
要创建这样的页面，您可以这样操作：

<span style="background-color:var(--color-canvas-subtle)"><span style="color:#e6edf3"><span style="color:var(--fgColor-default, var(--color-fg-default))"><span style="background-color:var(--bgColor-muted, var(--color-canvas-subtle))"><code>hugo new page/contact.md
</code></span></span></span></span>

This creates the file contact.md in the directory content/page pre-populated with the following front matter.
这将在目录 content/page 中创建文件 contact.md ，该文件预先填充有以下内容。

---
title: "New Page"
categories:
- category
- subcategory
tags:
- tag1
- tag2
keywords:
- tech
comments:       false
showMeta:       false
showActions:    false
#thumbnailImage: //example.com/image.jpg
---

The rest is basically the same as for a regular post.
其余的基本上与正规岗位相同。