mirror of
https://github.com/nunocoracao/blowfish.git
synced 2025-01-22 14:35:43 -06:00
translate advanced-customisation, front-matter, firebase-views
This commit is contained in:
parent
d54ecd6a04
commit
b5307d0fb5
6 changed files with 368 additions and 18 deletions
238
exampleSite/content/docs/advanced-customisation/index.zh-cn.md
Normal file
238
exampleSite/content/docs/advanced-customisation/index.zh-cn.md
Normal file
|
@ -0,0 +1,238 @@
|
|||
---
|
||||
title: "高级定制"
|
||||
date: 2020-08-08
|
||||
draft: false
|
||||
description: "了解如何手动构建 Blowfish。"
|
||||
slug: "advanced-customisation"
|
||||
tags: ["高级", "CSS", "文档"]
|
||||
series: ["文档集"]
|
||||
series_order: 13
|
||||
---
|
||||
|
||||
你可以通过多种方法对 Blowfish 进行高级定制。阅读下文,了解更多可定制的内容以及最佳的实现方式。
|
||||
|
||||
如果需要更进一步的建议,请在 [GitHub 讨论](https://github.com/nunocoracao/blowfish/discussions) 上发布你的问题。
|
||||
|
||||
## Hugo 项目结构
|
||||
|
||||
在深入之前,首先快速了解一下 [Hugo 项目结构](https://gohugo.io/getting-started/directory-structure/)以及管理内容和主题定制的最佳实践。
|
||||
|
||||
{{< alert >}}
|
||||
**总结:** 不要直接编辑主题文件。只在你的 Hugo 项目子目录中进行定制,而不是在主题目录。
|
||||
{{< /alert >}}
|
||||
|
||||
Blowfish 充分利用了 Hugo 中所有标准特性。它允许针对主题所有内容进行定制和覆盖,同时无需担心更改任何核心的主题文件。这将允许无缝的升级体验,同时让你完全控制网站的外观。
|
||||
|
||||
为了实现这一点,你不应该直接调整任何主题本身的文件。无论你是通过 Hugo 模块、Git 子模块,或者是本地复制到`themes/`的安装方式,都应该保持主题文件本身的完整性。
|
||||
|
||||
调整主题行为的正确方法是通过使用 Hugo 强大的[文件查找顺序](https://gohugo.io/templates/lookup-order/)覆盖文件。总之,查找顺序确保了包含在你的项目目录中的文件都会优先于主题文件。
|
||||
|
||||
例如,如果你想覆盖 Blowfish 中所有文章的模板,只需要简单的创建 `layouts/_default/single.html` 文件并防止在项目的根目录中即可,该文件将覆盖 Blowfish 主题中定义的 `single.html` 且无需更改主题自身的文件。总之,文件查找顺序确保了包含在你项目目录中的任何文件的优先级都高于主题中对应的文件。
|
||||
|
||||
只要你遵循这个简单的实践,你将始终能够更新主题(或测试不同的主题版本),同时也无需担心会丢失任何自定义修改。
|
||||
|
||||
## 更改图像优化设置
|
||||
|
||||
Hugo 有很多内置方式来调整、裁剪和优化图像。
|
||||
|
||||
例如,在 `layouts/partials/article-link/card.html` 文件中有以下代码:
|
||||
|
||||
```go
|
||||
{{ with .Resize "600x" }}
|
||||
<div class="w-full thumbnail_card nozoom" style="background-image:url({{ .RelPermalink }});"></div>
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
Hugo 在这里默认将图片调整为 600px,并保持比例。
|
||||
|
||||
值得注意的是,类似[锚点](https://gohugo.io/content-management/image-processing/#anchor)这种图片的默认配置也可以在你的[站点配置](https://gohugo.io/content-management/image-processing/#processing-options)以及模板本身中设置。
|
||||
|
||||
参考[Hugo 关于图像处理的文档](https://gohugo.io/content-management/image-processing/#image-processing-methods)来获取更多信息。
|
||||
|
||||
## 颜色方案
|
||||
|
||||
Blowfish 提供了多种颜色方案。如果你想在 Blowfish 提供的内置方案基础上更改颜色方案,你仅需要修改 `colorScheme` 参数即可。关于内置颜色方案可以参考[入门指南]({{< ref "getting-started#colour-schemes" >}})的内容。
|
||||
|
||||
除了默认方案之外,你还可以创建自己的颜色方案,并根据自己的喜好重新设计整个网站。可以通过在 `assets/css/schemes/` 目录中创建 `<scheme-name>.css` 文件来新建颜色方案。一旦文件被创建,只需要将主题配置中 `colorScheme` 参数设置为对应的名称即可。
|
||||
|
||||
{{< alert "github">}}
|
||||
**注意:** 手动生成这些文件会比较困难,我构建了一个 `nodejs` 工具来帮助完成这项工作——[Fugu](https://github.com/nunocoracao/fugu)。总之,你只需要在调色板中选择三个主要颜色的 `hex` 值,程序将会输出一个可以直接导入到 Blowfish 主题的 CSS 文件。
|
||||
{{< /alert >}}
|
||||
|
||||
Blowfish 主题定义了一个以三个主色调为核心的颜色方案,这三个主色调分别作为 `neutral`、`primary` 和 `secondary`,其中每一个主色调对应了10个具体的颜色。
|
||||
|
||||
由于 Tailwind CSS 3.0 会用不透明度来计算颜色的值,所以方案中指定的颜色需要[符合特定格式](https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo),即提供红色、绿色和蓝色的颜色值。
|
||||
|
||||
```css
|
||||
:root {
|
||||
--color-primary-500: 139, 92, 246;
|
||||
}
|
||||
```
|
||||
|
||||
上面这个例子定义了一个 `primary-500` 颜色的 CSS 变量,其中红色的值是`139`,绿色的值是`92`,蓝色的值是`246`.
|
||||
|
||||
你可以使用现有的颜色样式作为模板,自由地定制自己喜欢的颜色。但如果你需要一些定制颜色方案的灵感,可以查看官方的[Tailwind 颜色方案参考](https://tailwindcss.com/docs/customizing-colors#color-palette-reference)。
|
||||
|
||||
## 覆盖样式表
|
||||
|
||||
如果你只是想添加自定义样式以设置 HTML 中某些元素的样式。Blowfish 允许你在自己的 CSS 样式表中覆盖默认样式。只需要在 `assets/css/` 目录下创建 `custom.css` 文件即可。
|
||||
|
||||
`custom.css` 文件将会被 Hugo 压缩,并在主题本身的样式之后自动加载,这意味着你设置的自定义文件将会覆盖主题自身的样式。
|
||||
|
||||
### 使用额外的字体
|
||||
|
||||
Blowfish 允许你轻松修改字体网站的字体。在 `assets/css/` 目录下创建完 `custom.css` 文件后,将你的字体文件放置到 `static/fonts/` 目录下。
|
||||
|
||||
```shell
|
||||
.
|
||||
├── assets
|
||||
│ └── css
|
||||
│ └── custom.css
|
||||
...
|
||||
└─── static
|
||||
└── fonts
|
||||
└─── font.ttf
|
||||
|
||||
```
|
||||
|
||||
这将使得字体在网站中可用。现在你只需要在 `custom.css` 文件中引用它,并在适当的地方替换即可。下面这个示例,展示了如何给整个 `html` 替换字体。
|
||||
|
||||
```css
|
||||
@font-face {
|
||||
font-family: font;
|
||||
src: url('/fonts/font.ttf');
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: font;
|
||||
}
|
||||
```
|
||||
|
||||
### 调整字体大小
|
||||
|
||||
更改网站的字体大小,也是通过用覆盖默认样式实现的。Blowfish 在整个主题中使用了基于 HTML 字体大小,即 `font-size` 属性来控制字体大小的。Tailwind 将字体大小默认设置为 `12pt`,当然也可以更改成自己喜欢的值。
|
||||
|
||||
按照[上面所说]({{< ref "#overriding-the-stylesheet" >}}),创建一个 `custom.css` 并添加一下 CSS 声明:
|
||||
|
||||
```css
|
||||
/* Increase the default font size */
|
||||
html {
|
||||
font-size: 13pt;
|
||||
}
|
||||
```
|
||||
|
||||
只需要更改这一个值,网站上的所有字体就会调整到此值。因此如果想让字体更大,让此值大于 `12pt`;同理想让字体更小,小于 `12pt` 即可。
|
||||
|
||||
## 从源码构建主题CSS
|
||||
|
||||
如果你想进行重大更改,可以使用Tailwind CSS 的 JIT 编译器,并从头开始重建整个主题的CSS。如果你想调整 Tailwind 配置或者添加额外的 Tailwind 类,JIT 会非常有用,
|
||||
|
||||
{{< alert >}}
|
||||
**注意:** 手动构建主题是为高级用户所准备的。
|
||||
{{< /alert >}}
|
||||
|
||||
接下来让我们一步一步了解 Tailwind CSS 是如何构建和工作的。
|
||||
|
||||
### Tailwind 配置
|
||||
|
||||
为了生成只包含实际使用的 Tailwind 类的 CSS 文件,Blowfish 在主题的根目录中定义了 `tailwind.config.js` 文件,用来扫描所有 HTML 模板和 Markdown 内容文件,以检查被标记的样式。下面是 `tailwind.config.js` 中的内容:
|
||||
|
||||
```js
|
||||
// themes/blowfish/tailwind.config.js
|
||||
|
||||
module.exports = {
|
||||
content: [
|
||||
"./layouts/**/*.html",
|
||||
"./content/**/*.{html,md}",
|
||||
"./themes/blowfish/layouts/**/*.html",
|
||||
"./themes/blowfish/content/**/*.{html,md}",
|
||||
],
|
||||
|
||||
// 更多...
|
||||
};
|
||||
```
|
||||
|
||||
默认配置包含了以上路径,这里囊括了大部分内容文件。主要你遵循上面的项目结构,那么你无需修改 `tailwind.config.js` 就能轻松生成自己的 CSS 文件。但这样一来,需要你将 **Blowfish 作为子目录`themes/blowfish/` 放置在你的项目中**,Git子模块(推荐)和本地复制文件的安装方式可以做到这一点,但是 Hugo 模块的安装方式不适用。[安装文章]({{< ref "installation" >}})介绍了如何使用这三种安装方式。
|
||||
|
||||
### 项目结构
|
||||
|
||||
为了利用默认配置,你的项目应该看起来是这样:
|
||||
|
||||
```shell
|
||||
.
|
||||
├── assets
|
||||
│ └── css
|
||||
│ └── compiled
|
||||
│ └── main.css # 这是我们生成的文件
|
||||
├── config # 站点配置
|
||||
│ └── _default
|
||||
├── content # site content
|
||||
│ ├── _index.md
|
||||
│ ├── projects
|
||||
│ │ └── _index.md
|
||||
│ └── blog
|
||||
│ └── _index.md
|
||||
├── layouts # 站点的自定义布局
|
||||
│ ├── partials
|
||||
│ │ └── extend-article-link/simple.html
|
||||
│ ├── projects
|
||||
│ │ └── list.html
|
||||
│ └── shortcodes
|
||||
│ └── disclaimer.html
|
||||
└── themes
|
||||
└── blowfish # Git 子模块或本地复制安装
|
||||
```
|
||||
|
||||
这个结构示例添加了一个`projects` 内容,并为其添加了自定义布局、自定义短代码和扩充文章链接的部分。遵循此项目的结构,需要做的就是重新编译 `main.css` 文件。
|
||||
|
||||
### 安装依赖
|
||||
|
||||
为了使编译过程正常运行,你需要进入 `themes/blowfish/` 目录并安装项目依赖。你需要在本地环境执行安装 [npm](https://docs.npmjs.com/cli/v7/configuring-npm/install)。
|
||||
|
||||
```shell
|
||||
cd themes/blowfish
|
||||
npm install
|
||||
```
|
||||
|
||||
### 运行 Tailwind 编译器
|
||||
|
||||
安装完依赖后,接下来就是使用 [Tailwind CLI](https://v2.tailwindcss.com/docs/installation#using-tailwind-cli) 调用 JIT 编译器。回到你的 Hugo 项目根目录并执行以下命令:
|
||||
|
||||
```shell
|
||||
cd ../..
|
||||
./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit
|
||||
```
|
||||
|
||||
这个命令稍微有点复杂,因为涉及到几个路径。但本质上你是在调用 Tailwind CLI 并提供下面三个参数:
|
||||
- Tailwind 配置文件 `tailwind.config.js`
|
||||
- 主题的 `main.css` 文件
|
||||
- 编译产出后的 CSS 文件的位置 `assets/css/compiled/`
|
||||
|
||||
配置文件将自动检查你项目和主题中的所有内容和布局,并构建一个新的 CSS 文件,这个 CSS 文件包含了你的网站中需要的所有CSS。由于 Hugo 处理文件层次结构的方式,你项目中的 `main.css` 文件将自动覆盖主题中的 `main.css` 文件。
|
||||
|
||||
每次你对布局进行更改并需要新的 Tailwind CSS 样式时,都需要重新运行命令并生成新的 CSS 文件。为了简化步骤,你可以在命令的末尾添加 `-w` 来启用监视模式运行 JIT 编译器。
|
||||
|
||||
### 制作构建脚本
|
||||
|
||||
为了提供一个更加完整的方案,你可以为这些命令添加别名来简化整个过程,或者想我一样,在项目的根目录中添加一个包含脚本的 `package.json` 文件:
|
||||
|
||||
```js
|
||||
// package.json
|
||||
|
||||
{
|
||||
"name": "my-website",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"scripts": {
|
||||
"server": "hugo server -b http://localhost -p 8000",
|
||||
"dev": "NODE_ENV=development ./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit -w",
|
||||
"build": "NODE_ENV=production ./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit"
|
||||
},
|
||||
// and more...
|
||||
}
|
||||
```
|
||||
|
||||
现在,当你想要设计网站时,可以调用 `npm run dev`,编译器会以监视模式运行。当你准备部署时,运行 `npm run build` 就可以得到一个简洁的 Tailwind CSS 构建。
|
||||
|
||||
🙋♀️如果你需要帮助,请随时在 [GitHub 讨论区](https://github.com/nunocoracao/blowfish/discussions)提出问题。
|
||||
|
|
@ -150,7 +150,7 @@ Blowfish 还支持针对特定语言的菜单配置。菜单配置文件的命
|
|||
|
||||
菜单配置文件的命名格式是 `menus.[language-code].toml`。请始终确保菜单配置项中使用的语言代码和语言配置相匹配。
|
||||
|
||||
[快速开始]({{< ref "getting-started#menus" >}})部分更详细地介绍了这个文件的结构。你还可以参考 [Hugo 菜单文档](https://gohugo.io/content-management/menus/),以获取更多配置示例。
|
||||
[入门指南]({{< ref "getting-started#menus" >}})部分更详细地介绍了这个文件的结构。你还可以参考 [Hugo 菜单文档](https://gohugo.io/content-management/menus/),以获取更多配置示例。
|
||||
|
||||
## 主题参数
|
||||
|
||||
|
@ -171,7 +171,7 @@ Blowfish 提供了大量控制主题功能的配置参数,下面的表格中
|
|||
| `enableCodeCopy` | `false` | 是否可以将`<code>`代码块复制到剪贴板。想要使用代码复制功能,需要将 `highlight.noClasses` 参数设置为 `false`。 阅读 [其他配置文件](#other-configuration-files) 以获取更多信息。 |
|
||||
| `mainSections` | 无 | 指定最近文章中应该展示的模块。 如果没有指定,则使用文章数量最多的板块。 |
|
||||
| `showViews` | 无 | 是否显示文章和列表页面的阅读量。这需要集成 firebase ,具体可以看下面。 |
|
||||
| `showLikes` | 无 | 是否显示文章和列表页面的喜爱数。这需要集成 firebase ,具体可以看下面。 |
|
||||
| `showLikes` | 无 | 是否显示文章和列表页面的点赞量。这需要集成 firebase ,具体可以看下面。 |
|
||||
| `robots` | 无 | 用于支持搜索引擎爬虫如何处理你的网站。如果设置了该值,它将被输出在页面头部。具体的参数值请参考 [Google 文档](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives)。 |
|
||||
| `disableImageZoom` | `false` | 禁用网站上所有图片缩放功能。 |
|
||||
| `disableImageOptimization` | `false` | 禁用图片上所有图片的调整大小和优化功能。 |
|
||||
|
@ -218,7 +218,7 @@ Blowfish 提供了大量控制主题功能的配置参数,下面的表格中
|
|||
| ------------------------------------- | --------- |--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
||||
| `article.showDate` | `true` | 是否显示日期。 |
|
||||
| `article.showViews` | `false` | 是否显示文章阅读量。这需要集成 firebase ,具体可以看下面。 |
|
||||
| `article.showLikes` | `false` | 是否显示文章喜爱数。这需要集成 firebase ,具体可以看下面。 |
|
||||
| `article.showLikes` | `false` | 是否显示文章点赞量。这需要集成 firebase ,具体可以看下面。 |
|
||||
| `article.showDateOnlyInArticle` | `false` | 是否在文章内显示日期,不影响文章列表或卡片页面的日期显示。 |
|
||||
| `article.showDateUpdated` | `false` | 是否展示文章的更新日期。 |
|
||||
| `article.showAuthor` | `true` | 是否在文章底部显示作者框。 |
|
||||
|
@ -241,7 +241,7 @@ Blowfish 提供了大量控制主题功能的配置参数,下面的表格中
|
|||
| `article.relatedContentLimit` | `3` | 如果启用`showRelatedContent`,则限制显示相关文章的数量。 |
|
||||
| `article.showTaxonomies` | `false` | 是否显示文章的分类或标签信息。 |
|
||||
| `article.showAuthorsBadges` | `false` | 是否在文章或列表中显示 `authors` 分类。这需要开启多个作者 `multiple authors` 和 `authors` 分类法。 请阅读 [这个网页]({{< ref "multi-author" >}}) 来获取更多内容。 |
|
||||
| `article.showWordCount` | `false` | 是否显示文章的字数。 如果你的语言包含 CJK 语言,需要在 `config.toml` 中开启 `hasCJKLanguage` 参数。 |
|
||||
| `article.showWordCount` | `false` | 是否显示文章的字数。 如果你的语言属于 CJK 语言,需要在 `config.toml` 中开启 `hasCJKLanguage` 参数。 |
|
||||
| `article.showComments` | `false` | 是否在文章末尾添加 [评论部分]({{< ref "partials#comments" >}})。 |
|
||||
| `article.sharingLinks` | 无 | 在文章末尾显示的分享链接。如果没有提供或设置为 `false`,则不会显示任何分享链接。可用的值包括:"linkedin"、"twitter"、"reddit"、"pinterest"、"facebook"、"email"、"whatsapp" 和 "telegram" |
|
||||
| `article.showZenMode` | `false` | 指定是否激活文章阅读的禅模式,即隐藏常规的界面元素。 |
|
||||
|
@ -258,7 +258,7 @@ Blowfish 提供了大量控制主题功能的配置参数,下面的表格中
|
|||
| `list.showTableOfContents` | `false` | 是否展示目录。 |
|
||||
| `list.showSummary` | `false` | 是否在列表页显示文章摘要。如果在[扉页参数]({{< ref "front-matter" >}})中没有提供摘要,那么将会使用[站点配置](#site-configuration) 中的 `summaryLength` 参数自动生成一个。 |
|
||||
| `list.showViews` | `false` | 是否显示文章阅读量。这需要集成 firebase ,具体可以看下面。 |
|
||||
| `list.showLikes` | `false` | 是否显示文章喜爱数。这需要集成 firebase ,具体可以看下面。 |
|
||||
| `list.showLikes` | `false` | 是否显示文章点赞量。这需要集成 firebase ,具体可以看下面。 |
|
||||
| `list.showCards` | `false` | 是否将每个文章显示未卡片或简单的内联文本。 |
|
||||
| `list.groupByYear` | `true` | 是否根据年做聚合。 |
|
||||
| `list.cardView` | `false` | 将列表展示为卡片容器。 |
|
||||
|
@ -281,23 +281,23 @@ Blowfish 提供了大量控制主题功能的配置参数,下面的表格中
|
|||
| `taxonomy.heroStyle` | 无 | hero 图像的展示样式,可选的参数值有:`basic`、`big`、`background`、`thumbAndBackground`。 |
|
||||
| `taxonomy.showBreadcrumbs` | `false` | 是否在标题栏显示面包屑导航。 |
|
||||
| `taxonomy.showViews` | `false` | 是否显示文章阅读量。这需要集成 firebase ,具体可以看下面。 |
|
||||
| `taxonomy.showLikes` | `false` | 是否显示文章喜爱数。这需要集成 firebase ,具体可以看下面。 |
|
||||
| `taxonomy.showLikes` | `false` | 是否显示文章点赞量。这需要集成 firebase ,具体可以看下面。 |
|
||||
| `taxonomy.showTableOfContents` | `false` | 是否显示目录。 |
|
||||
| `taxonomy.cardView` | `false` | 将列表展示为卡片容器。 |
|
||||
|
||||
### 术语
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| -------------------------- | --------- |----------------------------------------------------------------------|
|
||||
| `term.showHero` | `false` | 缩略图是否会在每个页面中作为 hero 图像显示。 |
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| -------------------------- | --------- |------------------------------------------------------------------------|
|
||||
| `term.showHero` | `false` | 缩略图是否会在每个页面中作为 hero 图像显示。 |
|
||||
| `term.heroStyle` | 无 | hero 图像的展示样式,可选的参数值有: `basic`、`big`、`background`、`thumbAndBackground`。 |
|
||||
| `term.showBreadcrumbs` | `false` | 是否在标题栏显示面包屑导航。 |
|
||||
| `term.showViews` | `false` | 是否显示文章阅读量。这需要集成 firebase ,具体可以看下面。 |
|
||||
| `term.showLikes` | `false` | 是否显示文章喜爱数。这需要集成 firebase ,具体可以看下面。 |
|
||||
| `term.showTableOfContents` | `false` | 是否显示目录。 |
|
||||
| `term.groupByYear` | `false` | 是否根据年做聚合。 |
|
||||
| `term.cardView` | `false` | 将列表展示为卡片容器。 |
|
||||
| `term.cardViewScreenWidth` | `false` | 增强列表中卡片的宽度,使其可以占据可用的全部宽度。 |
|
||||
| `term.showBreadcrumbs` | `false` | 是否在标题栏显示面包屑导航。 |
|
||||
| `term.showViews` | `false` | 是否显示文章阅读量。这需要集成 firebase ,具体可以看下面。 |
|
||||
| `term.showLikes` | `false` | 是否显示文章点赞量。这需要集成 firebase ,具体可以看下面。 |
|
||||
| `term.showTableOfContents` | `false` | 是否显示目录。 |
|
||||
| `term.groupByYear` | `false` | 是否根据年做聚合。 |
|
||||
| `term.cardView` | `false` | 将列表展示为卡片容器。 |
|
||||
| `term.cardViewScreenWidth` | `false` | 增强列表中卡片的宽度,使其可以占据可用的全部宽度。 |
|
||||
|
||||
### Firebase
|
||||
|
||||
|
|
55
exampleSite/content/docs/firebase-views/index.zh-cn.md
Normal file
55
exampleSite/content/docs/firebase-views/index.zh-cn.md
Normal file
|
@ -0,0 +1,55 @@
|
|||
---
|
||||
title: "Firebase: 阅读量 & 点赞量"
|
||||
date: 2020-08-03
|
||||
draft: false
|
||||
description: "了解 Blowfish 如何继承 Firebase,并动态显示阅读量和点赞量。"
|
||||
slug: "firebase-views"
|
||||
tags: ["firebase", "阅读量", "点赞量"]
|
||||
series: ["文档集"]
|
||||
series_order: 15
|
||||
---
|
||||
|
||||
为了能够在网站中获取动态数据,我们支持了对 Firebase 的集成。这将允许你在列表和文章中使用阅读量功能。
|
||||
|
||||
1. 访问 <a target="_blank" href="https://firebase.com">Firebase</a> 并创建一个账户
|
||||
2. 创建一个新项目
|
||||
3. 选择分析位置
|
||||
4. Blowfish 是通过 `params.toml` 配置文件中的 firebase 相关参数,来和 firebase 继承的,更多的细节内容可以参考 <a target="_blank" href="{{< ref "configuration/#theme-parameters" >}}">这个页面</a>。你可以在下面找到集成 firebase 的文件示例,请注意 FirebaseConfig 对象内的参数。
|
||||
|
||||
```
|
||||
// 从你需要的 SDK 中导入所需的函数
|
||||
import { initializeApp } from "firebase/app";
|
||||
import { getAnalytics } from "firebase/analytics";
|
||||
// TODO: Add SDKs for Firebase products that you want to use
|
||||
// https://firebase.google.com/docs/web/setup#available-libraries
|
||||
|
||||
// 你 Web 应用的 Firebase 配置
|
||||
// 对于 Firebase JS SDK v7.20.0 以及更高版本,measurementId 参数是可选的
|
||||
const firebaseConfig = {
|
||||
apiKey: "AIzaSyB5tqlqDky77Vb4Tc4apiHV4hRZI18KGiY",
|
||||
authDomain: "blowfish-21fff.firebaseapp.com",
|
||||
projectId: "blowfish-21fff",
|
||||
storageBucket: "blowfish-21fff.appspot.com",
|
||||
messagingSenderId: "60108104191",
|
||||
appId: "1:60108104191:web:039842ebe1370698b487ca",
|
||||
measurementId: "G-PEDMYR1V0K"
|
||||
};
|
||||
|
||||
// 初始化 Firebase
|
||||
const app = initializeApp(firebaseConfig);
|
||||
const analytics = getAnalytics(app);
|
||||
```
|
||||
|
||||
5. 设置 Firestore - 选择 Build 并打开 Firestore. 创建一个数据库,并在生产环境中启动。选择服务器位置然后等待其部署完成。启动之后你需要配置规则。只需要复制并粘贴下面的内容,然后点击发布即可。
|
||||
```
|
||||
rules_version = '2';
|
||||
service cloud.firestore {
|
||||
match /databases/{database}/documents {
|
||||
match /{document=**} {
|
||||
allow read, write: if request.auth != null;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
6. 开启匿名授权 - 选择 Build 并打开 Authentication。选择开始,点击 Anonymous 并开启,保存。
|
||||
7. 享受 - 现在可以激活 Blowfish 中文章阅读量和点赞量的功能。
|
57
exampleSite/content/docs/front-matter/index.zh-cn.md
Normal file
57
exampleSite/content/docs/front-matter/index.zh-cn.md
Normal file
|
@ -0,0 +1,57 @@
|
|||
---
|
||||
title: "扉页参数"
|
||||
date: 2020-08-10
|
||||
draft: false
|
||||
description: "文本主要介绍 Blowfish 中页面中可以添加的所有的前页/扉页参数。"
|
||||
slug: "front-matter"
|
||||
tags: ["扉页", "配置", "文档"]
|
||||
series: ["文档集"]
|
||||
series_order: 7
|
||||
---
|
||||
|
||||
除了 [Hugo 中默认的前置参数](https://gohugo.io/content-management/front-matter/#front-matter-variables),Blowfish 主题中还添加了大量的参数选项来自定义单个页面的展示方式。所有可用的扉页参数如下。
|
||||
|
||||
扉页参数中的默认值是从[基础配置]({{< ref "configuration" >}})中继承的,所有只有当你想要覆盖默认值时,才需要在当前页面指定这些参数。
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
| 名称 | 默认值 | 描述 |
|
||||
|-------------------------------|-----------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------|
|
||||
| `title` | 无 | 文章名称。 |
|
||||
| `description` | 无 | 文章的描述信息,它会被添加在 HTML 的 `<meta>` 元数据中。 |
|
||||
| `externalUrl` | 无 | 如果文章发布在第三方网站上,这里提供只想对应文章的 URL 地址。提供 URL 将会组织生成内容页面,对这篇文章的任何引用都会直接跳转到第三方网站的 URL 上面。 |
|
||||
| `editURL` | `article.editURL` | 当激活 `showEdit` 参数时,此参数用来设置编辑文章的 URL。 |
|
||||
| `editAppendPath` | `article.editAppendPath` | 当激活 `showEdit` 参数时,该参数指定是否将当前文章路径添加到 `editURL` 设置的 URL 后面。 |
|
||||
| `groupByYear` | `list.groupByYear` | 是否在列表页面按年份对文章进行分组。 |
|
||||
| `menu` | 无 | 当设置此值,这篇内容的链接将会出现在菜单中。有效值是 `main` 或 `footer`。 |
|
||||
| `robots` | 无 | 支持搜索引擎的爬虫如何处理这篇文章。如果设置了此值,它将在页面头部输出。更多内容请参考 [Google 文档](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives)。 |
|
||||
| `sharingLinks` | `article.sharingLinks` | 指定文章结尾显示哪些分享链接。如果没有设置或设置为 `false` ,则没有分享链接。 |
|
||||
| `showAuthor` | `article.showAuthor` | 是否在页脚处显示作者框。 |
|
||||
| `authors` | 无 | 用于展示多作者的数组,如果设置了将会覆盖 `showAuthor` 设置。这里使用了多作者的特性,查看[这个页面]({{< ref "multi-author" >}})来获取更多信息。 |
|
||||
| `showAuthorsBadges` | `article.showAuthorsBadges` | 是否在文章和列表页展示`authors`作者分类。想是它生效需要开启`multiple authors`多作者和 `authors` 作者分类。 查看[这个页面]({{< ref "multi-author" >}})来获取更多信息。 |
|
||||
| `featureimage` | 无 | 基于外部 URL 的 feature 图片链接。
|
||||
| `featureimagecaption` | 无 | feature 图片的说明,仅在 hero 样式的 `big` 风格下展示。
|
||||
| `showHero` | `article.showHero` | 是否在文章页面将所裸土作为文章页面内的 hero 图片显示。 |
|
||||
| `heroStyle` | `article.heroStyle` | hero 图片的风格,合法的值有: `basic`、`big`、`background`、`thumbAndBackground`。 |
|
||||
| `showBreadcrumbs` | `article.showBreadcrumbs` or `list.showBreadcrumbs` | 是否在文章或列表页面显示面包屑导航。 |
|
||||
| `showDate` | `article.showDate` | 是否显示文章的日期。具体日期使用 `date` 参数设置。 |
|
||||
| `showDateUpdated` | `article.showDateUpdated` | 是否显示文章的更新日期。具体日期使用 `lastmod` 参数设置。 |
|
||||
| `showEdit` | `article.showEdit` | 是否显示编辑文章内容的链接。 |
|
||||
| `showHeadingAnchors` | `article.showHeadingAnchors` | 是否在文章的标题旁显示锚点链接。 |
|
||||
| `showPagination` | `article.showPagination` | 是否在文章页脚显示下一篇/上一篇链接。 |
|
||||
| `invertPagination` | `article.invertPagination` | 是否翻转下一篇/上一篇的链接方向。 |
|
||||
| `showReadingTime` | `article.showReadingTime` | 是否显示文章的预估阅读时间。 |
|
||||
| `showTaxonomies` | `article.showTaxonomies` | 是否显示文章关联的分类/标签。 |
|
||||
| `showTableOfContents` | `article.showTableOfContents` | 是否显示文章目录。 |
|
||||
| `showWordCount` | `article.showWordCount` | 是否显示文章字数统计。如果你的语言属于 CJK 语言,需要在 `config.toml` 中开启 `hasCJKLanguage` 参数。 |
|
||||
| `showComments` | `article.showComments` | 是否在文章页脚显示 [评论部分]({{< ref "partials#comments" >}})。 |
|
||||
| `showSummary` | `list.showSummary` | 是否在文章或列表页显示摘要。 |
|
||||
| `showViews` | `article.showViews` | 是否显示文章和列表页面的阅读量。这需要集成 firebase ,具体可以看[这个页面]({{< ref "firebase-views" >}})来了解如何在 Blowfish 中集成firebase。 |
|
||||
| `showLikes` | `article.showLikes` | 是否显示文章和列表页面的点赞量。这需要集成 firebase ,具体可以看[这个页面]({{< ref "firebase-views" >}})来了解如何在 Blowfish 中集成firebase。 |
|
||||
| `seriesOpened` | `article.seriesOpened` | 是否打开系列模块。 |
|
||||
| `series` | 无 | 文章所属的系列数组,我们建议每篇文章只属于一个系列。 |
|
||||
| `series_order` | 无 | 文章在系列中的编号。 |
|
||||
| `summary` | Auto generated using `summaryLength` (see [site configuration]({{< ref "configuration#site-configuration" >}})) | 当启用 `showSummary` 时,这是作为这篇文章摘要的Markdown字符串。 |
|
||||
| `xml` | `true` unless excluded by `sitemap.excludedKinds` | 是否将这篇文章包含在生成的 `/sitemap.xml` 文件中。 |
|
||||
| `layoutBackgroundBlur` | `true` | 向下滚动主页时,是否模糊背景图。 |
|
||||
| `layoutBackgroundHeaderSpace` | `true` | 在标题和正文之间添加空白区域间隔。 |
|
||||
<!-- prettier-ignore-end -->
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: "快速开始"
|
||||
title: "入门指南"
|
||||
date: 2020-08-15
|
||||
draft: false
|
||||
description: "All the front matter variables available in Blowfish."
|
||||
|
|
|
@ -156,7 +156,7 @@ config/_default/
|
|||
|
||||
### 下一步
|
||||
|
||||
基本的 Blowfish 安装已经完成。继续阅读 [快速开始]({{< ref "getting-started" >}}),了解更多关于主题配置的内容。
|
||||
基本的 Blowfish 安装已经完成。继续阅读 [入门指南]({{< ref "getting-started" >}}),了解更多关于主题配置的内容。
|
||||
|
||||
---
|
||||
|
||||
|
|
Loading…
Reference in a new issue