Merge branch 'dev' into feat/image-position

This commit is contained in:
Nuno C.
2025-10-14 10:14:18 +01:00
committed by GitHub
80 changed files with 1363 additions and 1145 deletions

View File

@@ -2,6 +2,9 @@
# These settings are required for the theme to function.
[goldmark]
[goldmark.parser]
wrapStandAloneImageWithinParagraph = false
[goldmark.renderer]
unsafe = true

View File

@@ -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 &orarr;
</button>

View File

@@ -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"
>
レイアウトを変更する&orarr;
</button>

View File

@@ -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 &orarr;
</button>

View File

@@ -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 &orarr;
</button>

View File

@@ -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` 文件。

View File

@@ -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.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 737 KiB

After

Width:  |  Height:  |  Size: 3.6 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 811 KiB

After

Width:  |  Height:  |  Size: 3.5 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 892 KiB

After

Width:  |  Height:  |  Size: 4.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 499 KiB

After

Width:  |  Height:  |  Size: 1.4 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 509 KiB

After

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 504 KiB

After

Width:  |  Height:  |  Size: 1.6 MiB

View File

@@ -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" >}})。

View File

@@ -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 -->

View File

@@ -275,7 +275,7 @@ The only thing missing is to ship your site. I will be using [Firebase](https://
Lets install firebases 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.

View File

@@ -6,7 +6,7 @@ cascade:
showEdit: false
showSummary: false
hideFeatureImage: true
invertPagination: true
---
{{< lead >}}
Blowfish dà vita ai tuoi contenuti. :heart_eyes:

View File

@@ -6,6 +6,7 @@ cascade:
showEdit: false
showSummary: false
hideFeatureImage: true
invertPagination: true
---
{{< lead >}}

View File

@@ -6,6 +6,7 @@ cascade:
showEdit: false
showSummary: false
hideFeatureImage: true
invertPagination: true
---
{{< lead >}}

View File

@@ -6,6 +6,7 @@ cascade:
showEdit: false
showSummary: false
hideFeatureImage: true
invertPagination: true
---
{{< lead >}}

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -12,7 +12,6 @@ type: 'sample'
这是一个在你的文章使用缩略图的快速示例。
如果你的文章目录看起来像这样:
If your average directory for an article looks like this:
```shell
content

View File

@@ -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"
]
}

View File

@@ -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>
*/}}