feat(content): support complete local resource references (#388)

exampleSite/content/posts/basic-markdown-syntax/index.en.md

@@ -7,11 +7,12 @@ draft: false
 author: "Dillon"
 authorLink: "https://dillonzq.com"
 description: "This article shows the basic Markdown syntax and format."
-images: ["/images/basic-markdown-syntax/featured-image.png"]
+resources:
+- name: "featured-image"
+  src: "featured-image.png"
 
 tags: ["Markdown", "HTML"]
 categories: ["Markdown"]
-featuredImage: "/images/basic-markdown-syntax/featured-image.png"
 
 lightgallery: true
 ---

exampleSite/content/posts/basic-markdown-syntax/index.fr.md

@@ -7,11 +7,12 @@ draft: false
 author: "Dillon"
 authorLink: "https://dillonzq.com"
 description: "Cet article présente la syntaxe et le format de base de Markdown."
-images: ["/images/basic-markdown-syntax/featured-image.png"]
+resources:
+- name: "featured-image"
+  src: "featured-image.png"
 
 tags: ["Markdown", "HTML"]
 categories: ["Markdown"]
-featuredImage: "/images/basic-markdown-syntax/featured-image.png"
 
 lightgallery: true
 ---

exampleSite/content/posts/basic-markdown-syntax/index.zh-cn.md

@@ -7,11 +7,12 @@ draft: false
 author: "Dillon"
 authorLink: "https://dillonzq.com"
 description: "这篇文章展示了基本的 Markdown 语法和格式."
-images: ["/images/basic-markdown-syntax/featured-image.png"]
+resources:
+- name: "featured-image"
+  src: "featured-image.png"
 
 tags: ["Markdown", "HTML"]
 categories: ["Markdown"]
-featuredImage: "/images/basic-markdown-syntax/featured-image.png"
 
 lightgallery: true
 ---

exampleSite/content/posts/emoji-support/index.en.md

@@ -7,11 +7,12 @@ draft: false
 author: "Dillon"
 authorLink: "https://dillonzq.com"
 description: "Guide to emoji usage in Hugo and LoveIt."
-images: ["/images/emoji-support/featured-image.jpg"]
+resources:
+- name: "featured-image"
+  src: "featured-image.jpg"
 
 tags: ["emoji"]
 categories: ["Markdown"]
-featuredImage: "/images/emoji-support/featured-image.jpg"
 
 lightgallery: true
 ---

exampleSite/content/posts/emoji-support/index.fr.md

@@ -7,11 +7,12 @@ draft: false
 author: "Dillon"
 authorLink: "https://dillonzq.com"
 description: "Guide d'utilisation des emoji dans Hugo et LoveIt."
-images: ["/images/emoji-support/featured-image.jpg"]
+resources:
+- name: "featured-image"
+  src: "featured-image.jpg"
 
 tags: ["emoji"]
 categories: ["Markdown"]
-featuredImage: "/images/emoji-support/featured-image.jpg"
 
 lightgallery: true
 ---

exampleSite/content/posts/emoji-support/index.zh-cn.md

@@ -7,11 +7,12 @@ draft: false
 author: "Dillon"
 authorLink: "https://dillonzq.com"
 description: "Hugo 和 LoveIt 中的 Emoji 的用法指南."
-images: ["/images/emoji-support/featured-image.jpg"]
+resources:
+- name: "featured-image"
+  src: "featured-image.jpg"
 
 tags: ["emoji"]
 categories: ["Markdown"]
-featuredImage: "/images/emoji-support/featured-image.jpg"
 
 lightgallery: true
 ---

exampleSite/content/posts/theme-documentation-basics/index.en.md

@@ -7,11 +7,12 @@ draft: false
 author: "Dillon"
 authorLink: "https://dillonzq.com"
 description: "Discover what the Hugo - LoveIt theme is all about and the core-concepts behind it."
-images: ["/images/theme-documentation-basics/featured-image.jpg"]
+resources:
+- name: "featured-image"
+  src: "featured-image.jpg"
 
 tags: ["installation", "configuration"]
 categories: ["documentation"]
-featuredImage: "/images/theme-documentation-basics/featured-image.jpg"
 
 lightgallery: true
 
@@ -153,7 +154,7 @@ hugo serve
 
 Go to `http://localhost:1313`.
 
-![Basic configuration preview](/images/theme-documentation-basics/basic-configuration-preview.png "Basic configuration preview")
+![Basic configuration preview](basic-configuration-preview.png "Basic configuration preview")
 
 {{< admonition tip >}}
 When you run `hugo serve`, when the contents of the files change, the page automatically refreshes with the changes.
@@ -785,7 +786,7 @@ The default data of all supported social links is located in `themes/LoveIt/asse
 which is you can refer to.
 {{< /admonition >}}
 
-![Complete configuration preview](/images/theme-documentation-basics/complete-configuration-preview.png "Complete configuration preview")
+![Complete configuration preview](complete-configuration-preview.png "Complete configuration preview")
 
 ### 3.2 Favicons, Browserconfig, Manifest
 
@@ -833,7 +834,7 @@ In `assets/css/_custom.scss`, you can add some css style code to customize the s
 
 **LoveIt** theme is fully compatible with Hugo multilingual mode, which provides in-browser language switching.
 
-![Language Switch](/images/theme-documentation-basics/language-switch.gif "Language Switch")
+![Language Switch](language-switch.gif "Language Switch")
 
 ### 4.1 Compatibility {#language-compatibility}
 

exampleSite/content/posts/theme-documentation-basics/index.fr.md

@@ -7,11 +7,12 @@ draft: false
 author: "Dillon"
 authorLink: "https://dillonzq.com"
 description: "Découvrez en quoi consiste le thème Hugo - LoveIt et les concepts fondamentaux qui le sous-tendent."
-images: ["/images/theme-documentation-basics/featured-image.jpg"]
+resources:
+- name: "featured-image"
+  src: "featured-image.jpg"
 
 tags: ["installation", "configuration"]
 categories: ["documentation"]
-featuredImage: "/images/theme-documentation-basics/featured-image.jpg"
 
 lightgallery: true
 
@@ -158,7 +159,7 @@ hugo serve
 
 Go to `http://localhost:1313`.
 
-![Basic configuration preview](/images/theme-documentation-basics/basic-configuration-preview.png "Basic configuration preview")
+![Basic configuration preview](basic-configuration-preview.png "Basic configuration preview")
 
 {{< admonition tip >}}
 When you run `hugo serve`, when the contents of the files change, the page automatically refreshes with the changes.
@@ -790,7 +791,7 @@ The default data of all supported social links is located in `themes/LoveIt/asse
 which is you can refer to.
 {{< /admonition >}}
 
-![Complete configuration preview](/images/theme-documentation-basics/complete-configuration-preview.png "Complete configuration preview")
+![Complete configuration preview](complete-configuration-preview.png "Complete configuration preview")
 
 ### 3.2 Favicons, Browserconfig, Manifest
 
@@ -838,7 +839,7 @@ In `assets/css/_custom.scss`, you can add some css style code to customize the s
 
 **LoveIt** theme is fully compatible with Hugo multilingual mode, which provides in-browser language switching.
 
-![Language Switch](/images/theme-documentation-basics/language-switch.gif "Language Switch")
+![Language Switch](language-switch.gif "Language Switch")
 
 ### 4.1 Compatibility {#language-compatibility}
 

exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md

@@ -7,11 +7,12 @@ draft: false
 author: "Dillon"
 authorLink: "https://dillonzq.com"
 description: "探索 Hugo - LoveIt 主题的全部内容和背后的核心概念."
-images: ["/images/theme-documentation-basics/featured-image.jpg"]
+resources:
+- name: "featured-image"
+  src: "featured-image.jpg"
 
 tags: ["installation", "configuration"]
 categories: ["documentation"]
-featuredImage: "/images/theme-documentation-basics/featured-image.jpg"
 
 lightgallery: true
 
@@ -156,7 +157,7 @@ hugo serve
 
 去查看 `http://localhost:1313`.
 
-![基本配置下的预览](/images/theme-documentation-basics/basic-configuration-preview.zh-cn.png "基本配置下的预览")
+![基本配置下的预览](basic-configuration-preview.zh-cn.png "基本配置下的预览")
 
 {{< admonition tip >}}
 当你运行 `hugo serve` 时, 当文件内容更改时, 页面会随着更改自动刷新.
@@ -789,7 +790,7 @@ hugo
 你可以参考它来配置你的社交链接.
 {{< /admonition >}}
 
-![完整配置下的预览](/images/theme-documentation-basics/complete-configuration-preview.zh-cn.png "完整配置下的预览")
+![完整配置下的预览](complete-configuration-preview.zh-cn.png "完整配置下的预览")
 
 ### 3.2 网站图标, 浏览器配置, 网站清单
 
@@ -837,7 +838,7 @@ $code-font-family: Fira Mono, Source Code Pro, Menlo, Consolas, Monaco, monospac
 
 **LoveIt** 主题完全兼容 Hugo 的多语言模式, 并且支持在网页上切换语言.
 
-![语言切换](/images/theme-documentation-basics/language-switch.gif "语言切换")
+![语言切换](language-switch.gif "语言切换")
 
 ### 4.1 兼容性 {#language-compatibility}
 

exampleSite/content/posts/theme-documentation-built-in-shortcodes/index.en.md

@@ -7,11 +7,12 @@ draft: false
 author: "Dillon"
 authorLink: "https://dillonzq.com"
 description: "Hugo provides multiple built-in shortcodes for author convenience and to keep your markdown content clean."
-images: ["/images/theme-documentation-built-in-shortcodes/featured-image.png"]
+resources:
+- name: "featured-image"
+  src: "featured-image.png"
 
 tags: ["shortcodes"]
 categories: ["documentation"]
-featuredImage: "/images/theme-documentation-built-in-shortcodes/featured-image.png"
 
 lightgallery: true
 ---
@@ -36,18 +37,18 @@ Hugo ships with a set of predefined shortcodes that represent very common usage.
 Example `figure` input:
 
 ```markdown
-{{</* figure src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" */>}}
+{{</* figure src="/images/lighthouse.jpg" title="Lighthouse (figure)" */>}}
 ```
 
 The rendered output looks like this:
 
-{{< figure src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" >}}
+{{< figure src="/images/lighthouse.jpg" title="Lighthouse (figure)" >}}
 
 The HTML looks like this:
 
 ```html
 <figure>
-    <img src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg"/>
+    <img src="/images/lighthouse.jpg"/>
     <figcaption>
         <h4>Lighthouse (figure)</h4>
     </figcaption>

exampleSite/content/posts/theme-documentation-built-in-shortcodes/index.fr.md

@@ -7,11 +7,12 @@ draft: false
 author: "Dillon"
 authorLink: "https://dillonzq.com"
 description: "Hugo fournit plusieurs shortcodes intégrés pour la commodité de l'auteur et pour garder votre contenu de démarque propre."
-images: ["/images/theme-documentation-built-in-shortcodes/featured-image.png"]
+resources:
+- name: "featured"
+  src: "featured-image.png"
 
 tags: ["shortcodes"]
 categories: ["documentation"]
-featuredImage: "/images/theme-documentation-built-in-shortcodes/featured-image.png"
 
 lightgallery: true
 ---
@@ -41,18 +42,18 @@ Hugo ships with a set of predefined shortcodes that represent very common usage.
 Example `figure` input:
 
 ```markdown
-{{</* figure src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" */>}}
+{{</* figure src="/images/lighthouse.jpg" title="Lighthouse (figure)" */>}}
 ```
 
 The rendered output looks like this:
 
-{{< figure src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" >}}
+{{< figure src="/images/lighthouse.jpg" title="Lighthouse (figure)" >}}
 
 The HTML looks like this:
 
 ```html
 <figure>
-    <img src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg"/>
+    <img src="/images/lighthouse.jpg"/>
     <figcaption>
         <h4>Lighthouse (figure)</h4>
     </figcaption>

exampleSite/content/posts/theme-documentation-built-in-shortcodes/index.zh-cn.md

@@ -7,11 +7,12 @@ draft: false
 author: "Dillon"
 authorLink: "https://dillonzq.com"
 description: "Hugo 提供了多个内置的 Shortcodes, 以方便作者保持 Markdown 内容的整洁."
-images: ["/images/theme-documentation-built-in-shortcodes/featured-image.png"]
+resources:
+- name: "featured-image"
+  src: "featured-image.png"
 
 tags: ["shortcodes"]
 categories: ["documentation"]
-featuredImage: "/images/theme-documentation-built-in-shortcodes/featured-image.png"
 
 lightgallery: true
 ---
@@ -37,18 +38,18 @@ Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见
 一个 `figure` 示例:
 
 ```markdown
-{{</* figure src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" */>}}
+{{</* figure src="/images/lighthouse.jpg" title="Lighthouse (figure)" */>}}
 ```
 
 呈现的输出效果如下:
 
-{{< figure src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" >}}
+{{< figure src="/images/lighthouse.jpg" title="Lighthouse (figure)" >}}
 
 输出的 HTML 看起来像这样:
 
 ```html
 <figure>
-    <img src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg"/>
+    <img src="/images/lighthouse.jpg"/>
     <figcaption>
         <h4>Lighthouse (figure)</h4>
     </figcaption>

exampleSite/content/posts/theme-documentation-content/index.en.md

@@ -7,11 +7,12 @@ draft: false
 author: "Dillon"
 authorLink: "https://dillonzq.com"
 description: "Find out how to create and organize your content quickly and intuitively in LoveIt theme."
-images: ["/images/theme-documentation-content/featured-image.jpg"]
+resources:
+- name: "featured-image"
+  src: "featured-image.jpg"
 
 tags: ["content", "Markdown"]
 categories: ["documentation"]
-featuredImage: "/images/theme-documentation-content/featured-image.jpg"
 
 lightgallery: true
 
@@ -25,13 +26,35 @@ Find out how to create and organize your content quickly and intuitively in **Lo
 
 <!--more-->
 
-## 1 Contents Organization
+## 1 Contents Organization {#contents-organization}
 
 A few suggestions to help you get a good looking site quickly:
 
 * Keep post pages in the `content/posts` directory, for example: `content/posts/my-first-post.md`
-* Keep static pages in the `content` directory, for example: `content/about.md`
-* Keep media like images in the `static` directory, for example: `static/images/screenshot.png`
+* Keep other pages in the `content` directory, for example: `content/about.md`
+* Local resources organization
+
+{{< admonition note "Local Resource Reference" >}}
+{{< version 0.2.10 >}}
+
+There are three ways to reference local resources such as **images** and **music**:
+
+1. Using [page resources](https://gohugo.io/content-management/page-resources/) in [page bundles](https://gohugo.io/content-management/page-bundles/).
+   You can reference page resources by the value for `Resources.GetMatch` or the filepath of the resource relative to the page directory directly.
+2. Store resources in the **assets** directory, which is `/assets` by default.
+   The filepath of the resource to reference in the post is relative to the assets directory.
+3. Store resources in the **static** directory, which is `/static` by default.
+   The filepath of the resource to reference in the post is relative to the static directory.
+
+The **priority** of references is also in the above order.
+
+There are many places in the theme where the above local resource references can be used,
+such as **links**, **images**, `image` shortcode, `music` shortcode and some params in the **front matter**.
+
+Images in page resources or assets directory [processing](https://gohugo.io/content-management/image-processing/)
+will be supported in the future.
+It's really cool! :(far fa-grin-squint fa-fw):
+{{< /admonition >}}
 
 ## 2 Front Matter {#front-matter}
 
@@ -138,11 +161,28 @@ library:
 * **comment**: {{< version 0.2.0 changed >}} the same as the `params.page.comment` part in the [site configuration](../theme-documentation-basics#site-configuration).
 * **library**: {{< version 0.2.7 >}} the same as the `params.page.library` part in the [site configuration](../theme-documentation-basics#site-configuration).
 
+{{< admonition tip >}}
+{{< version 0.2.10 >}}
+
+**featuredImage** and **featuredImagePreview** support the complete usage of [local resource references](#contents-organization).
+
+If the page resource with `name: featured-image` or `name: featured-image-preview` is set in the front matter,
+it is not necessary to set the parameter `featuredImage` or `featuredImagePreview`:
+
+```yaml
+resources:
+- name: featured-image
+  src: featured-image.jpg
+- name: featured-image-preview
+  src: featured-image-preview.jpg
+```
+{{< /admonition >}}
+
 ## 3 Content Summaries
 
 **LoveIt** theme uses the summary of the content to display abstract information in the home page. Hugo can generate summaries of your content.
 
-![Summary Preview](/images/theme-documentation-content/summary.png "Summary Preview")
+![Summary Preview](summary.png "Summary Preview")
 
 ### Automatic Summary Splitting
 

exampleSite/content/posts/theme-documentation-content/index.fr.md

@@ -7,11 +7,12 @@ draft: false
 author: "Dillon"
 authorLink: "https://dillonzq.com"
 description: "Découvrez comment créer et organiser votre contenu rapidement et intuitivement dans le thème LoveIt."
-images: ["/images/theme-documentation-content/featured-image.jpg"]
+resources:
+- name: "featured-image"
+  src: "featured-image.jpg"
 
 tags: ["content", "Markdown"]
 categories: ["documentation"]
-featuredImage: "/images/theme-documentation-content/featured-image.jpg"
 
 lightgallery: true
 
@@ -30,13 +31,35 @@ Sorry, this article has not been completely translated into **French**.
 Welcome to take the time to propose a translation by [:(fas fa-code-branch fa-fw): making a PR](https://github.com/dillonzq/LoveIt/pulls) to the theme!
 {{< /admonition >}}
 
-## 1 Contents Organization
+## 1 Contents Organization {#contents-organization}
 
 A few suggestions to help you get a good looking site quickly:
 
 * Keep post pages in the `content/posts` directory, for example: `content/posts/my-first-post.md`
-* Keep static pages in the `content` directory, for example: `content/about.md`
-* Keep media like images in the `static` directory, for example: `static/images/screenshot.png`
+* Keep other pages in the `content` directory, for example: `content/about.md`
+* Local resources organization
+
+{{< admonition note "Local Resource Reference" >}}
+{{< version 0.2.10 >}}
+
+There are three ways to reference local resources such as **images** and **music**:
+
+1. Using [page resources](https://gohugo.io/content-management/page-resources/) in [page bundles](https://gohugo.io/content-management/page-bundles/).
+   You can reference page resources by the value for `Resources.GetMatch` or the filepath of the resource relative to the page directory directly.
+2. Store resources in the **assets** directory, which is `/assets` by default.
+   The filepath of the resource to reference in the post is relative to the assets directory.
+3. Store resources in the **static** directory, which is `/static` by default.
+   The filepath of the resource to reference in the post is relative to the static directory.
+
+The **priority** of references is also in the above order.
+
+There are many places in the theme where the above local resource references can be used,
+such as **links**, **images**, `image` shortcode, `music` shortcode and some params in the **front matter**.
+
+Images in page resources or assets directory [processing](https://gohugo.io/content-management/image-processing/)
+will be supported in the future.
+It's really cool! :(far fa-grin-squint fa-fw):
+{{< /admonition >}}
 
 ## 2 Front Matter {#front-matter}
 
@@ -143,11 +166,28 @@ library:
 * **comment**: {{< version 0.2.0 changed >}} the same as the `params.page.comment` part in the [site configuration](../theme-documentation-basics#site-configuration).
 * **library**: {{< version 0.2.7 >}} the same as the `params.page.library` part in the [site configuration](../theme-documentation-basics#site-configuration).
 
+{{< admonition tip >}}
+{{< version 0.2.10 >}}
+
+**featuredImage** and **featuredImagePreview** support the complete usage of [local resource references](#contents-organization).
+
+If the page resource with `name: featured-image` or `name: featured-image-preview` is set in the front matter,
+it is not necessary to set the parameter `featuredImage` or `featuredImagePreview`:
+
+```yaml
+resources:
+- name: featured-image
+  src: featured-image.jpg
+- name: featured-image-preview
+  src: featured-image-preview.jpg
+```
+{{< /admonition >}}
+
 ## 3 Content Summaries
 
 **LoveIt** theme uses the summary of the content to display abstract information in the home page. Hugo can generate summaries of your content.
 
-![Summary Preview](/images/theme-documentation-content/summary.png "Summary Preview")
+![Summary Preview](summary.png "Summary Preview")
 
 ### Automatic Summary Splitting
 

exampleSite/content/posts/theme-documentation-content/index.zh-cn.md

@@ -7,11 +7,12 @@ draft: false
 author: "Dillon"
 authorLink: "https://dillonzq.com"
 description: "了解如何在 LoveIt 主题中快速, 直观地创建和组织内容."
-images: ["/images/theme-documentation-content/featured-image.jpg"]
+resources:
+- name: "featured-image"
+  src: "featured-image.jpg"
 
 tags: ["content", "Markdown"]
 categories: ["documentation"]
-featuredImage: "/images/theme-documentation-content/featured-image.jpg"
 
 lightgallery: true
 
@@ -25,13 +26,34 @@ math:
 
 <!--more-->
 
-## 1 内容组织
+## 1 内容组织 {#contents-organization}
 
 以下是一些方便你清晰管理和生成文章的目录结构建议:
 
 * 保持博客文章存放在 `content/posts` 目录, 例如: `content/posts/我的第一篇文章.md`
 * 保持简单的静态页面存放在 `content` 目录, 例如: `content/about.md`
-* 保持图片之类的媒体资源存放在 `static` 目录, 例如: `static/images/screenshot.png`
+* 本地资源组织
+
+{{< admonition note "本地资源引用" >}}
+{{< version 0.2.10 >}}
+
+有三种方法来引用**图片**和**音乐**等本地资源:
+
+1. 使用[页面包](https://gohugo.io/content-management/page-bundles/)中的[页面资源](https://gohugo.io/content-management/page-resources/).
+   你可以使用适用于 `Resources.GetMatch` 的值或者直接使用相对于当前页面目录的文件路径来引用页面资源.
+2. 将本地资源放在 **assets** 目录中, 默认路径是 `/assets`.
+   引用资源的文件路径是相对于 assets 目录的.
+3. 将本地资源放在 **static** 目录中, 默认路径是 `/static`.
+   引用资源的文件路径是相对于 static 目录的.
+
+引用的**优先级**符合以上的顺序.
+
+在这个主题中的很多地方可以使用上面的本地资源引用,
+例如 **链接**, **图片**, `image` shortcode, `music` shortcode 和**前置参数**中的部分参数.
+
+页面资源或者 **assets** 目录中的[图片处理](https://gohugo.io/content-management/image-processing/)会在未来的版本中得到支持.
+非常酷的功能! :(far fa-grin-squint fa-fw):
+{{< /admonition >}}
 
 ## 2 前置参数 {#front-matter}
 
@@ -138,11 +160,28 @@ library:
 * **comment**: {{< version 0.2.0 changed >}} 和 [网站配置](../theme-documentation-basics#site-configuration) 中的 `params.page.comment` 部分相同.
 * **library**: {{< version 0.2.7 >}} 和 [网站配置](../theme-documentation-basics#site-configuration) 中的 `params.page.library` 部分相同.
 
+{{< admonition tip >}}
+{{< version 0.2.10 >}}
+
+**featuredImage** 和 **featuredImagePreview** 支持[本地资源引用](#contents-organization)的完整用法.
+
+如果带有在前置参数中设置了 `name: featured-image` 或 `name: featured-image-preview` 属性的页面资源,
+没有必要在设置 `featuredImage` 或 `featuredImagePreview`:
+
+```yaml
+resources:
+- name: featured-image
+  src: featured-image.jpg
+- name: featured-image-preview
+  src: featured-image-preview.jpg
+```
+{{< /admonition >}}
+
 ## 3 内容摘要
 
 **LoveIt** 主题使用内容摘要在主页中显示大致文章信息。Hugo 支持生成文章的摘要.
 
-![文章摘要预览](/images/theme-documentation-content/summary.zh-cn.png "文章摘要预览")
+![文章摘要预览](summary.zh-cn.png "文章摘要预览")
 
 ### 自动摘要拆分
 

exampleSite/content/posts/theme-documentation-extended-shortcodes/index.en.md

@@ -7,12 +7,14 @@ draft: false
 author: "Dillon"
 authorLink: "https://dillonzq.com"
 description: "LoveIt theme provides multiple shortcodes on top of built-in ones in Hugo."
-images: ["/images/theme-documentation-extended-shortcodes/featured-image-preview.jpg"]
+resources:
+- name: "featured-image"
+  src: "featured-image.jpg"
+- name: "featured-image-preview"
+  src: "featured-image-preview.jpg"
 
 tags: ["shortcodes"]
 categories: ["documentation"]
-featuredImage: "/images/theme-documentation-extended-shortcodes/featured-image.jpg"
-featuredImagePreview: "/images/theme-documentation-extended-shortcodes/featured-image-preview.jpg"
 
 lightgallery: true
 ---
@@ -59,6 +61,8 @@ This is a **right-aligned** paragraph.
 
 `link` shortcode is an alternative to [Markdown link syntax](../basic-markdown-syntax#links). `link` shortcode can provide some other features and can be used in code blocks.
 
+{{< version 0.2.10 >}} The complete usage of [local resource references](../theme-documentation-content#contents-organization) is supported.
+
 The `link` shortcode has the following named parameters:
 
 * **href** *[required]* (**first** positional parameter)
@@ -123,6 +127,8 @@ The rendered output looks like this (hover over the link, there should be a tool
 
 `image` shortcode is an alternative to [`figure` shortcode](../theme-documentation-built-in-shortcodes#figure). `image` shortcode can take full advantage of the dependent libraries of [lazysizes](https://github.com/aFarkas/lazysizes) and [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js).
 
+{{< version 0.2.10 >}} The complete usage of [local resource references](../theme-documentation-content#contents-organization) is supported.
+
 The `image` shortcode has the following named parameters:
 
 * **src** *[required]* (**first** positional parameter)
@@ -173,19 +179,15 @@ The `image` shortcode has the following named parameters:
 
     Additional `rel` attributes of the HTML `a` tag, if **linked** parameter is set to `true`.
 
-* **large** *[optional]*
-
-    Whether the image is large used for loading animation, if **linked** parameter is set to `false`.
-
 Example `image` input:
 
 ```markdown
-{{</* image src="/images/theme-documentation-extended-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-extended-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-extended-shortcodes/lighthouse-large.jpg" */>}}
+{{</* image src="/images/lighthouse.jpg" caption="Lighthouse (`image`)" src_s="/images/lighthouse-small.jpg" src_l="/images/lighthouse-large.jpg" */>}}
 ```
 
 The rendered output looks like this:
 
-{{< image src="/images/theme-documentation-extended-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-extended-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-extended-shortcodes/lighthouse-large.jpg" >}}
+{{< image src="/images/lighthouse.jpg" caption="Lighthouse (`image`)" src_s="/images/lighthouse-small.jpg" src_l="/images/lighthouse-large.jpg" >}}
 
 ## 4 admonition
 
@@ -997,6 +999,8 @@ There are three ways to use it the `music` shortcode.
 
 ### 8.1 Custom Music URL {#custom-music-url}
 
+{{< version 0.2.10 >}} The complete usage of [local resource references](../theme-documentation-content#contents-organization) is supported.
+
 The `music` shortcode has the following named parameters by custom music URL:
 
 * **server** *[required]*
@@ -1018,12 +1022,12 @@ The `music` shortcode has the following named parameters by custom music URL:
 Example `music` input by custom music URL:
 
 ```markdown
-{{</* music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/theme-documentation-extended-shortcodes/Wavelength.jpg" */>}}
+{{</* music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/Wavelength.jpg" */>}}
 ```
 
 The rendered output looks like this:
 
-{{< music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/theme-documentation-extended-shortcodes/Wavelength.jpg" >}}
+{{< music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/Wavelength.jpg" >}}
 
 ### 8.2 Music Platform URL Automatic Identification {#automatic-identification}
 

exampleSite/content/posts/theme-documentation-extended-shortcodes/index.fr.md

@@ -7,12 +7,14 @@ draft: false
 author: "Dillon"
 authorLink: "https://dillonzq.com"
 description: "Le thème LoveIt fournit plusieurs shortcodes en plus de ceux intégrés dans Hugo."
-images: ["/images/theme-documentation-extended-shortcodes/featured-image-preview.jpg"]
+resources:
+- name: "featured-image"
+  src: "featured-image.jpg"
+- name: "featured-image-preview"
+  src: "featured-image-preview.jpg"
 
 tags: ["shortcodes"]
 categories: ["documentation"]
-featuredImage: "/images/theme-documentation-extended-shortcodes/featured-image.jpg"
-featuredImagePreview: "/images/theme-documentation-extended-shortcodes/featured-image-preview.jpg"
 
 lightgallery: true
 ---
@@ -64,6 +66,8 @@ This is a **right-aligned** paragraph.
 
 `link` shortcode is an alternative to [Markdown link syntax](../basic-markdown-syntax#links). `link` shortcode can provide some other features and can be used in code blocks.
 
+{{< version 0.2.10 >}} The complete usage of [local resource references](../theme-documentation-content#contents-organization) is supported.
+
 The `link` shortcode has the following named parameters:
 
 * **href** *[required]* (**first** positional parameter)
@@ -128,6 +132,8 @@ The rendered output looks like this (hover over the link, there should be a tool
 
 `image` shortcode is an alternative to [`figure` shortcode](../theme-documentation-built-in-shortcodes#figure). `image` shortcode can take full advantage of the dependent libraries of [lazysizes](https://github.com/aFarkas/lazysizes) and [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js).
 
+{{< version 0.2.10 >}} The complete usage of [local resource references](../theme-documentation-content#contents-organization) is supported.
+
 The `image` shortcode has the following named parameters:
 
 * **src** *[required]* (**first** positional parameter)
@@ -178,19 +184,15 @@ The `image` shortcode has the following named parameters:
 
     Additional `rel` attributes of the HTML `a` tag, if **linked** parameter is set to `true`.
 
-* **large** *[optional]*
-
-    Whether the image is large used for loading animation, if **linked** parameter is set to `false`.
-
 Example `image` input:
 
 ```markdown
-{{</* image src="/images/theme-documentation-extended-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-extended-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-extended-shortcodes/lighthouse-large.jpg" */>}}
+{{</* image src="/images/lighthouse.jpg" caption="Lighthouse (`image`)" src_s="/images/lighthouse-small.jpg" src_l="/images/lighthouse-large.jpg" */>}}
 ```
 
 The rendered output looks like this:
 
-{{< image src="/images/theme-documentation-extended-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-extended-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-extended-shortcodes/lighthouse-large.jpg" >}}
+{{< image src="/images/lighthouse.jpg" caption="Lighthouse (`image`)" src_s="/images/lighthouse-small.jpg" src_l="/images/lighthouse-large.jpg" >}}
 
 ## 4 admonition
 
@@ -1002,6 +1004,8 @@ There are three ways to use it the `music` shortcode.
 
 ### 8.1 Custom Music URL {#custom-music-url}
 
+{{< version 0.2.10 >}} The complete usage of [local resource references](../theme-documentation-content#contents-organization) is supported.
+
 The `music` shortcode has the following named parameters by custom music URL:
 
 * **server** *[required]*
@@ -1023,12 +1027,12 @@ The `music` shortcode has the following named parameters by custom music URL:
 Example `music` input by custom music URL:
 
 ```markdown
-{{</* music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/theme-documentation-extended-shortcodes/Wavelength.jpg" */>}}
+{{</* music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/Wavelength.jpg" */>}}
 ```
 
 The rendered output looks like this:
 
-{{< music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/theme-documentation-extended-shortcodes/Wavelength.jpg" >}}
+{{< music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/Wavelength.jpg" >}}
 
 ### 8.2 Music Platform URL Automatic Identification {#automatic-identification}
 

exampleSite/content/posts/theme-documentation-extended-shortcodes/index.zh-cn.md

@@ -7,12 +7,14 @@ draft: false
 author: "Dillon"
 authorLink: "https://dillonzq.com"
 description: "LoveIt 主题在 Hugo 内置的 shortcode 的基础上提供多个扩展的 shortcode."
-images: ["/images/theme-documentation-extended-shortcodes/featured-image-preview.jpg"]
+resources:
+- name: "featured-image"
+  src: "featured-image.jpg"
+- name: "featured-image-preview"
+  src: "featured-image-preview.jpg"
 
 tags: ["shortcodes"]
 categories: ["documentation"]
-featuredImage: "/images/theme-documentation-extended-shortcodes/featured-image.jpg"
-featuredImagePreview: "/images/theme-documentation-extended-shortcodes/featured-image-preview.jpg"
 
 lightgallery: true
 mapbox:
@@ -62,6 +64,8 @@ This is a **right-aligned** paragraph.
 `link` shortcode 是 [Markdown 链接语法](../basic-markdown-syntax#links) 的替代.
 `link` shortcode 可以提供一些其它的功能并且可以在代码块中使用.
 
+{{< version 0.2.10 >}} 支持[本地资源引用](../theme-documentation-content#contents-organization)的完整用法.
+
 `link` shortcode 有以下命名参数:
 
 * **href** *[必需]* (**第一个**位置参数)
@@ -126,6 +130,8 @@ This is a **right-aligned** paragraph.
 
 `image` shortcode 是 [`figure` shortcode](../theme-documentation-built-in-shortcodes#figure) 的替代. `image` shortcode 可以充分利用 [lazysizes](https://github.com/aFarkas/lazysizes) 和 [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js) 两个依赖库.
 
+{{< version 0.2.10 >}} 支持[本地资源引用](../theme-documentation-content#contents-organization)的完整用法.
+
 `image` shortcode 有以下命名参数:
 
 * **src** *[必需]* (**第一个**位置参数)
@@ -176,19 +182,15 @@ This is a **right-aligned** paragraph.
 
     HTML `a` 标签 的 `rel` 补充属性, 仅在 **linked** 属性设置成 `true` 时有效.
 
-* **large** *[可选]*
-
-    图片是否是大尺寸的, 用来加载动画, 仅在 **linked** 属性设置成 `false` 时有效.
-
 一个 `image` 示例:
 
 ```markdown
-{{</* image src="/images/theme-documentation-extended-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-extended-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-extended-shortcodes/lighthouse-large.jpg" */>}}
+{{</* image src="/images/lighthouse.jpg" caption="Lighthouse (`image`)" src_s="/images/lighthouse-small.jpg" src_l="/images/lighthouse-large.jpg" */>}}
 ```
 
 呈现的输出效果如下:
 
-{{< image src="/images/theme-documentation-extended-shortcodes/lighthouse.jpg" caption="Lighthouse (`image`)" src-s="/images/theme-documentation-extended-shortcodes/lighthouse-small.jpg" src-l="/images/theme-documentation-extended-shortcodes/lighthouse-large.jpg" >}}
+{{< image src="/images/lighthouse.jpg" caption="Lighthouse (`image`)" src_s="/images/lighthouse-small.jpg" src_l="/images/lighthouse-large.jpg" >}}
 
 ## 4 admonition
 
@@ -1000,6 +1002,8 @@ data = [
 
 ### 8.1 自定义音乐 URL {#custom-music-url}
 
+{{< version 0.2.10 >}} 支持[本地资源引用](../theme-documentation-content#contents-organization)的完整用法.
+
 `music` shortcode 有以下命名参数来使用自定义音乐 URL:
 
 * **server** *[必需]*
@@ -1021,12 +1025,12 @@ data = [
 一个使用自定义音乐 URL 的 `music` 示例:
 
 ```markdown
-{{</* music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/theme-documentation-extended-shortcodes/Wavelength.jpg" */>}}
+{{</* music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/Wavelength.jpg" */>}}
 ```
 
 呈现的输出效果如下:
 
-{{< music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/theme-documentation-extended-shortcodes/Wavelength.jpg" >}}
+{{< music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/Wavelength.jpg" >}}
 
 ### 8.2 音乐平台 URL 的自动识别 {#automatic-identification}