Docs: 更新自定义块的文档和配图

.frontmatter/database/mediaDb.json

@@ -1 +1 @@
-{"content":{"en":{"components":{"dev-component":{}},"documentation":{"content-management":{"introduction":{},"shortcodes":{"built-in":{},"extended":{"echarts":{}}},"encryption":{},"timeline-support":{}}}},"zh-cn":{"documentation":{"content-management":{"introduction":{}},"getting-started":{"quick-start":{}}},"components":{"dev-component":{}}}},"assets":{"images":{"icons":{}}}}
+{"content":{"en":{"components":{"dev-component":{}},"documentation":{"content-management":{"introduction":{},"shortcodes":{"built-in":{},"extended":{"echarts":{}}},"encryption":{},"timeline-support":{}}}},"zh-cn":{"documentation":{"content-management":{"introduction":{}},"getting-started":{"quick-start":{}}},"components":{"dev-component":{}},"references":{"blocks":{}}}},"assets":{"images":{"icons":{}}}}

content/en/documentation/advanced/index.md

@@ -133,4 +133,4 @@ This part is shown in the [pwa support page][pwa-support].
 
 <!-- link reference definition -->
 [pwa-support]: {{< relref path="/guides/pwa-support" >}}
-[block]: {{< relref path="/references/block" >}}
+[block]: {{< relref path="/references/blocks" >}}

content/en/guides/pwa-support/index.md

@@ -17,6 +17,7 @@ resources:
     src: cover.webp
 toc:
   auto: false
+lightgallery: true
 repost:
   enable: true
   url: https://hugodoit.com/pwa-support/
@@ -47,19 +48,19 @@ Under the `/static/` folder, you need to create a file named `site.webmanifest`.
 
 Here are the key values required.
 
-- **name** *[required]*
+- **name** _[required]_
 
     The name of your web app.
 
-- **short_name** *[required]*
+- **short_name** _[required]_
 
     A shorter name for your web app.
 
-- **start_url** *[required]*
+- **start_url** _[required]_
 
     The start URL of your web app. Please fill in `"/"` by default.
 
-- **icons** *[required]*
+- **icons** _[required]_
 
     An array of objects representing image files will be served as application icons. You can reuse the favicon of your site as the icons.
 

content/en/references/blocks/index.md

@@ -0,0 +1,76 @@
+---
+title: Open Custom Blocks
+date: 2024-05-09T10:28:58+08:00
+type: posts
+collections:
+  - References
+resources:
+  - name: featured-image-preview
+    src: featured-image.webp
+lightgallery: true
+---
+
+To enhance the extensibility of the FixIt theme, we provide some custom blocks that you can use in your project to achieve more functionality.
+
+<!--more-->
+
+## Entry File
+
+{{< version 0.3.7 >}}
+
+The FixIt theme opens a unified custom template entry file [`layouts/partials/custom.html`][custom-html], through which you can implement custom blocks or more ideas.
+
+To avoid upgrade conflicts and facilitate the reference of theme components, it's strongly recommended to copy this file from the theme to your project and override it.
+
+```bash
+cp themes/FixIt/layouts/partials/custom.html layouts/partials/custom.html
+```
+
+## Custom Blocks
+
+You can implement these blocks through `define`.
+
+| Block Name                   | Description                     | Location                               |
+| :--------------------------- | :------------------------------ | :------------------------------------- |
+| `custom-head`                | Head custom block               | `layouts/_default/baseof.html`         |
+| `custom-profile`             | Profile custom block            | `layouts/partials/home/profile.html`   |
+| `custom-comment`             | Comment system custom block     | `layouts/partials/single/comment.html` |
+| `custom-aside`               | Sidebar custom block            | `layouts/posts/single.html`            |
+| `custom-footer`              | Footer custom block             | `layouts/partials/footer.html`         |
+| `custom-widgets`             | Widgets custom block            | `layouts/partials/widgets.html`        |
+| `custom-assets`              | Assets custom block             | `layouts/partials/assets.html`         |
+| `custom-post__footer:before` | Custom block before post footer | `layouts/posts/single.html`            |
+| `custom-post__footer:after`  | Custom block after post footer  | `layouts/posts/single.html`            |
+
+## What's the Meaning
+
+By opening custom blocks, the extensibility of the FixIt theme is further enhanced.
+
+After that, we can make full use of the basic features of the theme and build more upper-level components, so that the blog is full of unlimited imagination and creativity!
+
+![Theme, Components, Blog Venn Diagram](./featured-image.webp "Build multiple upper-level components based on the FixIt theme, and finally use them in the top-level blog.")
+
+## How to Use
+
+For example, the FixIt theme documentation site customizes the `custom-profile` block on the homepage.
+
+First, create a custom template entry file:
+
+```bash
+cp themes/FixIt/layouts/partials/custom.html layouts/partials/custom.html
+```
+
+Then, define the `custom-profile` block in the custom template:
+
+```go-html-template {title="layouts/partials/custom.html"}
+<!-- ... -->
+
+{{- define "custom-profile" -}}
+  {{- partial "custom/profile.html" . -}}
+{{- end -}}
+
+<!-- ... -->
+```
+
+<!-- link reference definition -->
+[custom-html]: https://github.com/hugo-fixit/FixIt/blob/master/layouts/partials/custom.html

content/zh-cn/documentation/advanced/index.md

@@ -133,4 +133,4 @@ Hugo 允许你通过覆盖主题模板来改造主题，例如：你可以创建
 
 <!-- link reference definition -->
 [pwa-support]: {{< relref path="/guides/pwa-support" >}}
-[block]: {{< relref path="/references/block" >}}
+[block]: {{< relref path="/references/blocks" >}}

content/zh-cn/guides/pwa-support/index.md

@@ -17,6 +17,7 @@ resources:
     src: cover.webp
 toc:
   auto: false
+lightgallery: true
 repost:
   enable: true
   url: https://hugodoit.com/zh-cn/pwa-support/
@@ -142,7 +143,7 @@ repost:
 
 如果一切顺利，现在当你访问你的网站时，浏览器将显示一个安装按钮，单击“安装”后，你的网站将被安装为一个本地的原生应用程序。
 
-![Installed PWA](install-pwa.jpg "Installed PWA")
+![Installed PWA](/guides/pwa-support/install-pwa.jpg "Installed PWA")
 
 大功告成！你已成功将你的静态网站配置为了一个 PWA 🎉
 

content/zh-cn/references/blocks/index.md

@@ -0,0 +1,76 @@
+---
+title: 开放的自定义块
+date: 2024-05-09T10:28:58+08:00
+type: posts
+collections:
+  - References
+resources:
+  - name: featured-image-preview
+    src: featured-image.webp
+lightgallery: true
+---
+
+为了提升 FixIt 主题的可扩展性，我们提供了一些自定义块，你可以在你的项目中使用这些自定义块来实现更多的功能。
+
+<!--more-->
+
+## 入口文件
+
+{{< version 0.3.7 >}}
+
+FixIt 主题开放了统一的自定义模板入口文件 [`layouts/partials/custom.html`][custom-html]，你可以通过这个文件来实现自定义块或者更多的想法。
+
+为了避免升级冲突并方便引用主题组件，我们强烈建议你将此文件从主题复制到你的项目中并重写。
+
+```bash
+cp themes/FixIt/layouts/partials/custom.html layouts/partials/custom.html
+```
+
+## 自定义块
+
+你可以通过 `define` 来实现这些块。
+
+| 块名称                       | 描述               | 位置                                   |
+| :--------------------------- | :----------------- | :------------------------------------- |
+| `custom-head`                | 头部自定义块       | `layouts/_default/baseof.html`         |
+| `custom-profile`             | 首页自定义块       | `layouts/partials/home/profile.html`   |
+| `custom-aside`               | 侧栏自定义块       | `layouts/posts/single.html`            |
+| `custom-comment`             | 评论系统自定义块   | `layouts/partials/single/comment.html` |
+| `custom-footer`              | 页脚自定义块       | `layouts/partials/footer.html`         |
+| `custom-widgets`             | 小部件自定义块     | `layouts/partials/widgets.html`        |
+| `custom-assets`              | 资源自定义块       | `layouts/partials/assets.html`         |
+| `custom-post__footer:before` | 文章页脚前自定义块 | `layouts/posts/single.html`            |
+| `custom-post__footer:after`  | 文章页脚后自定义块 | `layouts/posts/single.html`            |
+
+## 有何意义
+
+通过开放自定义块，FixIt 主题的可扩展性进一步提升。
+
+之后，我们可以充分利用主题的基础特性，构建更多上层组件，从而使博客充满无限的想象空间和创意！
+
+![主题、组件、博客 Venn 图](/references/blocks/featured-image.webp "以 FixIt 主题为核心构建多个上层组件，最后在最上层的博客中使用。")
+
+## 如何使用
+
+例如，FixIt 主题文档站点自定义了首页的 `custom-profile` 块。
+
+首先，创建自定义模板入口文件：
+
+```bash
+cp themes/FixIt/layouts/partials/custom.html layouts/partials/custom.html
+```
+
+然后，在自定义模板中定义 `custom-profile` 块：
+
+```go-html-template {title="layouts/partials/custom.html"}
+<!-- ... -->
+
+{{- define "custom-profile" -}}
+  {{- partial "custom/profile.html" . -}}
+{{- end -}}
+
+<!-- ... -->
+```
+
+<!-- link reference definition -->
+[custom-html]: https://github.com/hugo-fixit/FixIt/blob/master/layouts/partials/custom.html

layouts/partials/custom.html

@@ -11,6 +11,9 @@
   {{- partial "custom/aside.html" . -}}
 {{- end -}}
 
+{{- define "custom-comment" -}}
+{{- end -}}
+
 {{- define "custom-footer" -}}
 {{- end -}}
 
@@ -20,3 +23,9 @@
 {{- define "custom-assets" -}}
   {{- partial "inject/shortcode-caniuse.html" . -}}
 {{- end -}}
+
+{{- define "custom-post__footer:before" -}}
+{{- end -}}
+
+{{- define "custom-post__footer:after" -}}
+{{- end -}}