Merge branch 'dev' into feat/image-position
@@ -55,7 +55,6 @@ _这个例子设置了一个自定义标题,并在页面正文中添加了一
|
||||
列表页将所有页面聚合到一个目录下,并为访问者提供了一种浏览页面的方式。博客或者作品集是一个典型案例,因为这两种类型的网站会将帖子或项目整合到一个列表页中。
|
||||
|
||||
创建一个列表页就如同创建子目录一样简单。例如,要创建一个 "Projects" 列表页,你可以创建`content/projects/`。然后为你的项目创建一个 Markdown 文件。
|
||||
Creating a list page is as simple as making a sub-directory in the content folder. For example, to create a "Projects" section, you would create `content/projects/`. Then create a Markdown file for each of your projects.
|
||||
|
||||
列表页面默认会自动生成,如果你想在列表添加一些页自定义内容,还需要在此目录创建一个 `_index.md` 文件。
|
||||
|
||||
|
||||
@@ -21,7 +21,6 @@ npx blowfish-tools
|
||||
```
|
||||
{{< /alert >}}
|
||||
|
||||
|
||||
The config files that ship with Blowfish contain all of the possible settings that the theme recognises. By default, many of these are commented out but you can simply uncomment them to activate or change a specific feature.
|
||||
|
||||
## Basic configuration
|
||||
@@ -74,48 +73,61 @@ colorScheme = "blowfish"
|
||||
|
||||
Blowfish defines a three-colour palette that is used throughout the theme. Each main colour contains ten shades which are based upon the colours that are included in [Tailwind](https://tailwindcss.com/docs/customizing-colors#color-palette-reference). The three main colours are used for the header, footer, and accent colours. Here are the colors for each scheme:
|
||||
|
||||
#### Blowfish (default)
|
||||
### Blowfish (default)
|
||||
|
||||
{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}
|
||||
|
||||
#### Avocado
|
||||
### Avocado
|
||||
|
||||
{{< swatches "#78716c" "#84cc16" "#10b981" >}}
|
||||
|
||||
#### Fire
|
||||
### Fire
|
||||
|
||||
{{< swatches "#78716c" "#f97316" "#f43f5e" >}}
|
||||
|
||||
#### Ocean
|
||||
### Ocean
|
||||
|
||||
{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}
|
||||
|
||||
#### Forest
|
||||
### Forest
|
||||
|
||||
{{< swatches "#658c86" "#3bf5df" "#06d45c" >}}
|
||||
|
||||
#### Princess
|
||||
### Princess
|
||||
|
||||
{{< swatches "#8c658c" "#f53bf2" "#7706d4" >}}
|
||||
|
||||
#### Neon
|
||||
### Neon
|
||||
|
||||
{{< swatches "#8338ec" "#ff006e" "#3a86ff" >}}
|
||||
|
||||
#### Bloody
|
||||
### Bloody
|
||||
|
||||
{{< swatches "#d90429" "#8d99ae" "#457b9d" >}}
|
||||
|
||||
#### Terminal
|
||||
### Terminal
|
||||
|
||||
{{< swatches "#004b23" "#38b000" "#1a759f" >}}
|
||||
|
||||
#### Marvel
|
||||
### Marvel
|
||||
|
||||
{{< swatches "#2541b2" "#d81159" "#ffbc42" >}}
|
||||
|
||||
#### Noir
|
||||
### Noir
|
||||
|
||||
{{< swatches "#5c6b73" "#9db4c0" "#00a5cf" >}}
|
||||
|
||||
#### Autumn
|
||||
### Autumn
|
||||
|
||||
{{< swatches "#0a9396" "#ee9b00" "#bb3e03" >}}
|
||||
|
||||
#### Congo
|
||||
### Congo
|
||||
|
||||
{{< swatches "#71717a" "#8b5cf6" "#d946ef" >}}
|
||||
|
||||
#### Slate
|
||||
{{< swatches "#6B7280" "#64748b" "#6B7280" >}}
|
||||
### Slate
|
||||
|
||||
{{< swatches "#6B7280" "#64748b" "#6B7280" >}}
|
||||
|
||||
Although these are the default schemes, you can also create your own. Refer to the [Advanced Customisation]({{< ref "advanced-customisation#colour-schemes" >}}) section for details.
|
||||
|
||||
@@ -261,7 +273,7 @@ The default `name` is the `pageRef` title cased.
|
||||
|
||||
## Thumbnails & Backgrounds
|
||||
|
||||
Blowfish was built so it would be easy to add visual support to your articles. If your familiar with Hugo article structure, you just need to place an image file (almost all formats are supported but we recommend `.png` or `.jpg`) that starts with `feature*` inside your article folder. And that's it, Blowfish will then be able to both use the image as a thumbnail within your website as well as for <a target="_blank" href="https://oembed.com/">oEmbed</a> cards across social platforms.
|
||||
Blowfish was built so it would be easy to add visual support to your articles. If your familiar with Hugo article structure, you just need to place an image file (almost all formats are supported but we recommend `.png` or `.jpg`) that starts with `feature*` inside your article folder. And that's it, Blowfish will then be able to both use the image as a thumbnail within your website as well as for <a target="_blank" href="https://oembed.com/">oEmbed</a> cards across social platforms.
|
||||
|
||||
[Here]({{< ref "thumbnails" >}}) is also a guide with more info and a [sample]({{< ref "thumbnail_sample" >}}) if you want to see how you can do it.
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 737 KiB After Width: | Height: | Size: 3.6 MiB |
|
Before Width: | Height: | Size: 811 KiB After Width: | Height: | Size: 3.5 MiB |
|
Before Width: | Height: | Size: 892 KiB After Width: | Height: | Size: 4.2 MiB |
|
Before Width: | Height: | Size: 499 KiB After Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 509 KiB After Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 504 KiB After Width: | Height: | Size: 1.6 MiB |
@@ -79,7 +79,7 @@ Blowfish 提供了一个完全灵活的主页布局。你可以选择两种主
|
||||
|
||||
## 缩略图
|
||||
|
||||
Blowfish 为你的文章提供了视觉支持。如果你熟悉 Hugo 的文章结构,只需要在你的文章对应的文件夹中防止一个以`feature*`开头的图像文件即可,图像类型几乎支持所有格式,更推荐使用`.png` 或者 `.jpg`。这样一来,Blowfish 将会在你的网站内使用该图片作为缩略图,并用在社交媒体平台上的 <a target="_blank" href="https://oembed.com/">oEmbed</a> 卡片中。
|
||||
Blowfish 为你的文章提供了视觉支持。如果你熟悉 Hugo 的文章结构,只需要在你的文章对应的文件夹中放置一个以`feature*`开头的图像文件即可,图像类型几乎支持所有格式,更推荐使用`.png` 或者 `.jpg`。这样一来,Blowfish 将会在你的网站内使用该图片作为缩略图,并用在社交媒体平台上的 <a target="_blank" href="https://oembed.com/">oEmbed</a> 卡片中。
|
||||
|
||||
[这是]({{< ref "thumbnails" >}})有更多详细内容,并且有一个便于理解的[示例]({{< ref "thumbnail_sample" >}})。
|
||||
|
||||
|
||||
@@ -124,13 +124,13 @@ Call to action
|
||||
|
||||
## Carousel
|
||||
|
||||
`carousel` is used to showcase multiple images in an interactive and visually appealing way. This allows a user to slide through multiple images while only taking up the vertical space of a single one. All images are displayed using the full width of the parent component and using one of the predefined aspect ratios of `16:9`, `21:9` or `32:9`.
|
||||
`carousel` is used to showcase multiple images in an interactive and visually appealing way. This allows a user to slide through multiple images while only taking up the vertical space of a single one. All images are displayed using the full width of the parent component and the aspect ratio you set with a default of `16:9`.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
| Parameter | Description |
|
||||
| --- | --- |
|
||||
| `images` | **Required.** A regex string to match image names or URLs. |
|
||||
| `aspectRatio` | **Optional.** The aspect ratio for the carousel. Either `16-9`, `21-9` or `32-9`. It is set to `16-9` by default. |
|
||||
| `aspectRatio` | **Optional.** The aspect ratio for the carousel. It is set to `16-9` by default. |
|
||||
| `interval` | **Optional.** The interval for the auto-scrooling, specified in milliseconds. Defaults to `2000` (2s) |
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
|
||||