diff --git a/.frontmatter/database/mediaDb.json b/.frontmatter/database/mediaDb.json index cd762215..b8043017 100644 --- a/.frontmatter/database/mediaDb.json +++ b/.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":{}}}} \ No newline at end of file +{"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":{}}}} \ No newline at end of file diff --git a/content/en/documentation/advanced/index.md b/content/en/documentation/advanced/index.md index a1573e1e..b7f07999 100644 --- a/content/en/documentation/advanced/index.md +++ b/content/en/documentation/advanced/index.md @@ -133,4 +133,4 @@ This part is shown in the [pwa support page][pwa-support]. [pwa-support]: {{< relref path="/guides/pwa-support" >}} -[block]: {{< relref path="/references/block" >}} +[block]: {{< relref path="/references/blocks" >}} diff --git a/content/en/guides/pwa-support/index.md b/content/en/guides/pwa-support/index.md index 6c2fc64f..c29f4028 100644 --- a/content/en/guides/pwa-support/index.md +++ b/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. diff --git a/content/en/references/block.md b/content/en/references/block.md deleted file mode 100644 index 805237ae..00000000 --- a/content/en/references/block.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Open Custom Blocks -date: 2024-05-09T10:28:58+08:00 -type: posts -collections: - - References ---- - -To enhance the extensibility of the FixIt theme, we provide some custom blocks that you can use in your project to achieve more functionality. - - - -## 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-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` | - -## 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" -}} -
- {{- if .Site.BuildDrafts -}} - - Production environment - - {{- else -}} - - Preview environment - - {{- end -}} - - FixIt Demo - -
-{{- end -}} - - -``` - - -[custom-html]: https://github.com/hugo-fixit/FixIt/blob/master/layouts/partials/custom.html diff --git a/content/en/references/blocks/featured-image.webp b/content/en/references/blocks/featured-image.webp new file mode 100644 index 00000000..7468427c Binary files /dev/null and b/content/en/references/blocks/featured-image.webp differ diff --git a/content/en/references/blocks/index.md b/content/en/references/blocks/index.md new file mode 100644 index 00000000..42ab24fc --- /dev/null +++ b/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. + + + +## 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 -}} + + +``` + + +[custom-html]: https://github.com/hugo-fixit/FixIt/blob/master/layouts/partials/custom.html diff --git a/content/zh-cn/documentation/advanced/index.md b/content/zh-cn/documentation/advanced/index.md index 87db8078..d6ab7617 100644 --- a/content/zh-cn/documentation/advanced/index.md +++ b/content/zh-cn/documentation/advanced/index.md @@ -133,4 +133,4 @@ Hugo 允许你通过覆盖主题模板来改造主题,例如:你可以创建 [pwa-support]: {{< relref path="/guides/pwa-support" >}} -[block]: {{< relref path="/references/block" >}} +[block]: {{< relref path="/references/blocks" >}} diff --git a/content/zh-cn/guides/pwa-support/index.md b/content/zh-cn/guides/pwa-support/index.md index 7eb12281..26e096f3 100644 --- a/content/zh-cn/guides/pwa-support/index.md +++ b/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 🎉 diff --git a/content/zh-cn/references/block.md b/content/zh-cn/references/block.md deleted file mode 100644 index fa89f23f..00000000 --- a/content/zh-cn/references/block.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: 开放的自定义块 -date: 2024-05-09T10:28:58+08:00 -type: posts -collections: - - References ---- - -为了提升 FixIt 主题的可扩展性,我们提供了一些自定义块,你可以在你的项目中使用这些自定义块来实现更多的功能。 - - - -## 入口文件 - -{{< 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-footer` | 页脚自定义块 | `layouts/partials/footer.html` | -| `custom-widgets` | 小部件自定义块 | `layouts/partials/widgets.html` | -| `custom-assets` | 资源自定义块 | `layouts/partials/assets.html` | - -## 如何使用 - -例如,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" -}} -
- {{- if .Site.BuildDrafts -}} - - Production environment - - {{- else -}} - - Preview environment - - {{- end -}} - - FixIt Demo - -
-{{- end -}} - - -``` - - -[custom-html]: https://github.com/hugo-fixit/FixIt/blob/master/layouts/partials/custom.html diff --git a/content/zh-cn/references/blocks/index.md b/content/zh-cn/references/blocks/index.md new file mode 100644 index 00000000..1fd85dd6 --- /dev/null +++ b/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 主题的可扩展性,我们提供了一些自定义块,你可以在你的项目中使用这些自定义块来实现更多的功能。 + + + +## 入口文件 + +{{< 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 -}} + + +``` + + +[custom-html]: https://github.com/hugo-fixit/FixIt/blob/master/layouts/partials/custom.html diff --git a/layouts/partials/custom.html b/layouts/partials/custom.html index f1e671b3..f67afdb6 100644 --- a/layouts/partials/custom.html +++ b/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 -}}