Merge branch 'dev' into feat/image-position
@@ -2,6 +2,9 @@
|
||||
# These settings are required for the theme to function.
|
||||
|
||||
[goldmark]
|
||||
[goldmark.parser]
|
||||
wrapStandAloneImageWithinParagraph = false
|
||||
|
||||
[goldmark.renderer]
|
||||
unsafe = true
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ description: "Questa pagina è stata creata utilizzando il tema Blowfish per Hug
|
||||
<span class="prose dark:prose-invert">Questa è una demo del layout <code id="layout">background</code>.</span>
|
||||
<button
|
||||
id="switch-layout-button"
|
||||
class="px-4 !text-neutral !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
|
||||
class="px-4 mx-[3px] !text-neutral !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
|
||||
>
|
||||
Cambia layout ↻
|
||||
</button>
|
||||
|
||||
@@ -12,7 +12,7 @@ description: "このページは Hugo の Blowfish テーマを利用して構
|
||||
<span class="prose dark:prose-invert">こちらは <code id="layout">background</code> レイアウトのデモです。</span>
|
||||
<button
|
||||
id="switch-layout-button"
|
||||
class="px-4 !text-neutral !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
|
||||
class="px-4 mx-[3px] !text-neutral !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
|
||||
>
|
||||
レイアウトを変更する↻
|
||||
</button>
|
||||
|
||||
@@ -12,7 +12,7 @@ description: "This page was built using the Blowfish theme for Hugo."
|
||||
<span class="prose dark:prose-invert">This is a demo of the <code id="layout">background</code> layout.</span>
|
||||
<button
|
||||
id="switch-layout-button"
|
||||
class="px-4 !text-neutral !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
|
||||
class="px-4 mx-[3px] !text-neutral !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
|
||||
>
|
||||
Switch layout ↻
|
||||
</button>
|
||||
|
||||
@@ -12,7 +12,7 @@ description: "此页面是使用 Hugo 的 Blowfish 主题搭建的"
|
||||
<span class="prose dark:prose-invert"> 这是 <code id="layout">background</code> 的样式示例。</span>
|
||||
<button
|
||||
id="switch-layout-button"
|
||||
class="px-4 !text-neutral !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
|
||||
class="px-4 mx-[3px] !text-neutral !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
|
||||
>
|
||||
切换 layout ↻
|
||||
</button>
|
||||
|
||||
@@ -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 -->
|
||||
|
||||
|
||||
@@ -275,7 +275,7 @@ The only thing missing is to ship your site. I will be using [Firebase](https://
|
||||
|
||||
Let’s install firebase’s CLI - if not on Mac check [install instructions on Firebase](https://firebase.google.com/docs/cli).
|
||||
```bash
|
||||
brew install firebase
|
||||
brew install firebase-cli
|
||||
```
|
||||
|
||||
Now log in and init firebase hosting for the project.
|
||||
|
||||
@@ -6,7 +6,7 @@ cascade:
|
||||
showEdit: false
|
||||
showSummary: false
|
||||
hideFeatureImage: true
|
||||
|
||||
invertPagination: true
|
||||
---
|
||||
{{< lead >}}
|
||||
Blowfish dà vita ai tuoi contenuti. :heart_eyes:
|
||||
|
||||
@@ -6,6 +6,7 @@ cascade:
|
||||
showEdit: false
|
||||
showSummary: false
|
||||
hideFeatureImage: true
|
||||
invertPagination: true
|
||||
---
|
||||
|
||||
{{< lead >}}
|
||||
|
||||
@@ -6,6 +6,7 @@ cascade:
|
||||
showEdit: false
|
||||
showSummary: false
|
||||
hideFeatureImage: true
|
||||
invertPagination: true
|
||||
---
|
||||
|
||||
{{< lead >}}
|
||||
|
||||
@@ -6,6 +6,7 @@ cascade:
|
||||
showEdit: false
|
||||
showSummary: false
|
||||
hideFeatureImage: true
|
||||
invertPagination: true
|
||||
---
|
||||
|
||||
{{< lead >}}
|
||||
|
||||
@@ -15,7 +15,6 @@ The examples below are a small selection taken from the [official Mermaid docs](
|
||||
|
||||
## Flowchart
|
||||
|
||||
<div style="background-color:white; padding: 20px">
|
||||
{{< mermaid >}}
|
||||
graph TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
@@ -32,11 +31,9 @@ F
|
||||
G
|
||||
end
|
||||
{{< /mermaid >}}
|
||||
</div>
|
||||
|
||||
## Sequence diagram
|
||||
|
||||
<div style="background-color:white; padding: 20px">
|
||||
{{< mermaid >}}
|
||||
sequenceDiagram
|
||||
autonumber
|
||||
@@ -54,11 +51,9 @@ loop Every minute
|
||||
John-->Alice: Great!
|
||||
end
|
||||
{{< /mermaid >}}
|
||||
</div>
|
||||
|
||||
## Class diagram
|
||||
|
||||
<div style="background-color:white; padding: 20px">
|
||||
{{< mermaid >}}
|
||||
classDiagram
|
||||
Animal "1" <|-- Duck
|
||||
@@ -82,11 +77,9 @@ class Zebra{
|
||||
+run()
|
||||
}
|
||||
{{< /mermaid >}}
|
||||
</div>
|
||||
|
||||
## Entity relationship diagram
|
||||
|
||||
<div style="background-color:white; padding: 20px">
|
||||
{{< mermaid >}}
|
||||
erDiagram
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
|
||||
@@ -98,5 +91,3 @@ ORDER ||--|{ ORDER-ITEM : includes
|
||||
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
|
||||
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
|
||||
{{< /mermaid >}}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -15,7 +15,6 @@ Mermaid 図は `mermaid` ショートコードを使うことで Blowfish でサ
|
||||
|
||||
## フローチャート
|
||||
|
||||
<div style="background-color:white; padding: 20px">
|
||||
{{< mermaid >}}
|
||||
graph TD
|
||||
A[クリスマス] -->|収入| B(買い物にいく)
|
||||
@@ -32,11 +31,9 @@ F
|
||||
G
|
||||
end
|
||||
{{< /mermaid >}}
|
||||
</div>
|
||||
|
||||
## 順序図
|
||||
|
||||
<div style="background-color:white; padding: 20px">
|
||||
{{< mermaid >}}
|
||||
sequenceDiagram
|
||||
autonumber
|
||||
@@ -54,11 +51,9 @@ loop 毎分
|
||||
ジョン-->アリス: すばらしい!
|
||||
end
|
||||
{{< /mermaid >}}
|
||||
</div>
|
||||
|
||||
## クラス図
|
||||
|
||||
<div style="background-color:white; padding: 20px">
|
||||
{{< mermaid >}}
|
||||
classDiagram
|
||||
Animal "1" <|-- Duck
|
||||
@@ -82,11 +77,9 @@ class Zebra{
|
||||
+run()
|
||||
}
|
||||
{{< /mermaid >}}
|
||||
</div>
|
||||
|
||||
## 主従関係図
|
||||
|
||||
<div style="background-color:white; padding: 20px">
|
||||
{{< mermaid >}}
|
||||
erDiagram
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
|
||||
@@ -98,5 +91,3 @@ ORDER ||--|{ ORDER-ITEM : includes
|
||||
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
|
||||
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
|
||||
{{< /mermaid >}}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -15,7 +15,6 @@ The examples below are a small selection taken from the [official Mermaid docs](
|
||||
|
||||
## Flowchart
|
||||
|
||||
<div style="background-color:white; padding: 20px">
|
||||
{{< mermaid >}}
|
||||
graph TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
@@ -32,11 +31,9 @@ F
|
||||
G
|
||||
end
|
||||
{{< /mermaid >}}
|
||||
</div>
|
||||
|
||||
## Sequence diagram
|
||||
|
||||
<div style="background-color:white; padding: 20px">
|
||||
{{< mermaid >}}
|
||||
sequenceDiagram
|
||||
autonumber
|
||||
@@ -54,11 +51,9 @@ loop Every minute
|
||||
John-->Alice: Great!
|
||||
end
|
||||
{{< /mermaid >}}
|
||||
</div>
|
||||
|
||||
## Class diagram
|
||||
|
||||
<div style="background-color:white; padding: 20px">
|
||||
{{< mermaid >}}
|
||||
classDiagram
|
||||
Animal "1" <|-- Duck
|
||||
@@ -82,11 +77,9 @@ class Zebra{
|
||||
+run()
|
||||
}
|
||||
{{< /mermaid >}}
|
||||
</div>
|
||||
|
||||
## Entity relationship diagram
|
||||
|
||||
<div style="background-color:white; padding: 20px">
|
||||
{{< mermaid >}}
|
||||
erDiagram
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
|
||||
@@ -98,5 +91,3 @@ ORDER ||--|{ ORDER-ITEM : includes
|
||||
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
|
||||
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
|
||||
{{< /mermaid >}}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -15,7 +15,6 @@ Blowfish 使用 `mermaid` 简码可以调用。Blowfish 会根据配置的 `colo
|
||||
|
||||
## 流程图
|
||||
|
||||
<div style="background-color:white; padding: 20px">
|
||||
{{< mermaid >}}
|
||||
graph TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
@@ -32,11 +31,9 @@ F
|
||||
G
|
||||
end
|
||||
{{< /mermaid >}}
|
||||
</div>
|
||||
|
||||
## 时序图
|
||||
|
||||
<div style="background-color:white; padding: 20px">
|
||||
{{< mermaid >}}
|
||||
sequenceDiagram
|
||||
autonumber
|
||||
@@ -54,11 +51,9 @@ loop Every minute
|
||||
John-->Alice: Great!
|
||||
end
|
||||
{{< /mermaid >}}
|
||||
</div>
|
||||
|
||||
## 类图
|
||||
|
||||
<div style="background-color:white; padding: 20px">
|
||||
{{< mermaid >}}
|
||||
classDiagram
|
||||
Animal "1" <|-- Duck
|
||||
@@ -82,11 +77,9 @@ class Zebra{
|
||||
+run()
|
||||
}
|
||||
{{< /mermaid >}}
|
||||
</div>
|
||||
|
||||
## 实体关系图
|
||||
|
||||
<div style="background-color:white; padding: 20px">
|
||||
{{< mermaid >}}
|
||||
erDiagram
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
|
||||
@@ -98,5 +91,3 @@ ORDER ||--|{ ORDER-ITEM : includes
|
||||
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
|
||||
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
|
||||
{{< /mermaid >}}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -12,7 +12,6 @@ type: 'sample'
|
||||
这是一个在你的文章使用缩略图的快速示例。
|
||||
|
||||
如果你的文章目录看起来像这样:
|
||||
If your average directory for an article looks like this:
|
||||
|
||||
```shell
|
||||
content
|
||||
|
||||
@@ -890,4 +890,29 @@
|
||||
"Personal site"
|
||||
]
|
||||
},
|
||||
]
|
||||
{
|
||||
"title": "metalhearf.fr",
|
||||
"url": "https://metalhearf.fr",
|
||||
"source": "n/a",
|
||||
"tags": [
|
||||
"Blog",
|
||||
"Personal site"
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "encelo.github.io",
|
||||
"url": "https://encelo.github.io/",
|
||||
"source": "https://github.com/encelo/encelo.github.io",
|
||||
"tags": [
|
||||
"Personal site",
|
||||
"Blog"
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "ncine.github.io",
|
||||
"url": "https://ncine.github.io/",
|
||||
"source": "https://github.com/nCine/nCine-site",
|
||||
"tags": [
|
||||
"Project site"
|
||||
]
|
||||
}
|
||||
|
||||
@@ -1 +1,8 @@
|
||||
<a rel="me" href="https://masto.ai/@blowfish"></a>
|
||||
{{/* example of extend-footer */}}
|
||||
{{/*
|
||||
<p class="text-sm text-neutral-500 dark:text-neutral-400">
|
||||
<a class="hover:underline hover:decoration-primary-400 hover:text-primary-500" rel="me" href="https://masto.ai/@blowfish">
|
||||
Follow me on Mastodon
|
||||
</a>
|
||||
</p>
|
||||
*/}}
|
||||
|
||||