update demo posts

content/post/2019-08-08-text-and-typography/index.en.md

@@ -155,29 +155,35 @@ $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
 
 ### Default (with caption)
 
-![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" }
+![Desktop View](mockup.png)
+{ width="972" height="589" }
 _Full screen width and center alignment_
 
 ### Left aligned
 
-![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-75 .normal}
+![Desktop View](mockup.png)
+{ width="972" height="589" .w-75 .normal}
 
 ### Float to left
 
-![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-50 .left}
+![Desktop View](mockup.png)
+{ width="972" height="589" .w-50 .left}
 Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum.
 
 ### Float to right
 
-![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-50 .right}
+![Desktop View](mockup.png)
+{ width="972" height="589" .w-50 .right}
 Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum.
 
 ### Dark/Light mode & Shadow
 
 The image below will toggle dark/light mode based on theme preference, notice it has shadows.
 
-![light mode only](/posts/20190808/devtools-light.png){: .light .w-75 .shadow .rounded-10 w='1212' h='668' }
-![dark mode only](/posts/20190808/devtools-dark.png){: .dark .w-75 .shadow .rounded-10 w='1212' h='668' }
+![light mode only](devtools-light.png)
+{ .light .w-75 .shadow .rounded-10 w="1212" h="668" }
+![dark mode only](devtools-dark.png)
+{ .dark .w-75 .shadow .rounded-10 w="1212" h="668" }
 
 ## Video
 

content/post/2019-08-08-text-and-typography/index.zh-CN.md

@@ -127,12 +127,11 @@ fi;
 
 ### 特定文件名
 
-```sass
+```sass {file="_sass/jekyll-theme-chirpy.scss"}
 @import
   "colors/light-typography",
   "colors/dark-typography";
 ```
-{file="_sass/jekyll-theme-chirpy.scss"}
 
 ## 数学公式
 
@@ -155,29 +154,35 @@ $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
 
 ### 默认（带标题）
 
-![桌面视图](/posts/20190808/mockup.png){: width="972" height="589" }
+![桌面视图](mockup.png)
+{ width="972" height="589" }
 _全屏宽度和居中对齐_
 
 ### 左对齐
 
-![桌面视图](/posts/20190808/mockup.png){: width="972" height="589" .w-75 .normal}
+![桌面视图](mockup.png)
+{ width="972" height="589" .w-75 .normal}
 
 ### 向左浮动
 
-![桌面视图](/posts/20190808/mockup.png){: width="972" height="589" .w-50 .left}
+![桌面视图](mockup.png)
+{ width="972" height="589" .w-50 .left}
 这是一段文本示例，用于演示图片向左浮动时的效果。在这种情况下，文本会环绕在图片的右侧。这对于创建更具视觉吸引力的布局很有用，特别是当您想要文本和图片并排显示时。浮动元素是网页设计中常用的技术，可以有效利用空间并增强内容的可读性。
 
 ### 向右浮动
 
-![桌面视图](/posts/20190808/mockup.png){: width="972" height="589" .w-50 .right}
+![桌面视图](mockup.png)
+{ width="972" height="589" .w-50 .right}
 这是一段文本示例，用于演示图片向右浮动时的效果。在这种情况下，文本会环绕在图片的左侧。这种布局技术可以创建更加动态和有趣的页面设计。合理使用浮动可以使您的内容更加吸引人，并引导读者的视线在页面上流畅移动。记住，浮动元素需要适当的空间才能发挥最佳效果。
 
 ### 暗/亮模式 & 阴影
 
 下面的图片将根据主题偏好切换暗/亮模式，注意它有阴影效果。
 
-![仅亮模式](/posts/20190808/devtools-light.png){: .light .w-75 .shadow .rounded-10 w='1212' h='668' }
-![仅暗模式](/posts/20190808/devtools-dark.png){: .dark .w-75 .shadow .rounded-10 w='1212' h='668' }
+![仅亮模式](devtools-light.png)
+{ .light .w-75 .shadow .rounded-10 w="1212" h="668" }
+![仅暗模式](devtools-dark.png)
+{ .dark .w-75 .shadow .rounded-10 w="1212" h="668" }
 
 ## 视频
 

content/post/2019-08-09-getting-started/index.en.md

@@ -80,7 +80,7 @@ After a few seconds, the local server will be available at <http://127.0.0.1:400
 
 ### Configuration
 
-Update the variables in `_config.yml`{: .filepath} as needed. Some typical options include:
+Update the variables in {{< markdown/filepath src="_config.yml">}} as needed. Some typical options include:
 
 - `url`
 - `avatar`
@@ -89,21 +89,21 @@ Update the variables in `_config.yml`{: .filepath} as needed. Some typical optio
 
 ### Social Contact Options
 
-Social contact options are displayed at the bottom of the sidebar. You can enable or disable specific contacts in the `_data/contact.yml`{: .filepath} file.
+Social contact options are displayed at the bottom of the sidebar. You can enable or disable specific contacts in the {{< markdown/filepath src="_data/contact.yml">}} file.
 
 ### Customizing the Stylesheet
 
-To customize the stylesheet, copy the theme's `assets/css/jekyll-theme-chirpy.scss`{: .filepath} file to the same path in your Jekyll site, and add your custom styles at the end of the file.
+To customize the stylesheet, copy the theme's {{< markdown/filepath src="assets/css/jekyll-theme-chirpy.scss">}} file to the same path in your Jekyll site, and add your custom styles at the end of the file.
 
 ### Customizing Static Assets
 
-Static assets configuration was introduced in version `5.1.0`. The CDN of the static assets is defined in `_data/origin/cors.yml`{: .filepath }. You can replace some of them based on the network conditions in the region where your website is published.
+Static assets configuration was introduced in version `5.1.0`. The CDN of the static assets is defined in {{< markdown/filepath src="_data/origin/cors.ymll">}}. You can replace some of them based on the network conditions in the region where your website is published.
 
 If you prefer to self-host the static assets, refer to the [_chirpy-static-assets_](https://github.com/cotes2020/chirpy-static-assets#readme) repository.
 
 ## Deployment
 
-Before deploying, check the `_config.yml`{: .filepath} file and ensure the `url` is configured correctly. If you prefer a [**project site**](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites) and don't use a custom domain, or if you want to visit your website with a base URL on a web server other than **GitHub Pages**, remember to set the `baseurl` to your project name, starting with a slash, e.g., `/project-name`.
+Before deploying, check the {{< markdown/filepath src="_config.yml">}} file and ensure the `url` is configured correctly. If you prefer a [**project site**](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites) and don't use a custom domain, or if you want to visit your website with a base URL on a web server other than **GitHub Pages**, remember to set the `baseurl` to your project name, starting with a slash, e.g., `/project-name`.
 
 Now you can choose _ONE_ of the following methods to deploy your Jekyll site.
 
@@ -112,7 +112,7 @@ Now you can choose _ONE_ of the following methods to deploy your Jekyll site.
 Prepare the following:
 
 - If you're on the GitHub Free plan, keep your site repository public.
-- If you have committed `Gemfile.lock`{: .filepath} to the repository, and your local machine is not running Linux, update the platform list of the lock file:
+- If you have committed {{< markdown/filepath src="Gemfile.lockl">}} to the repository, and your local machine is not running Linux, update the platform list of the lock file:
 
   ```console
   $ bundle lock --add-platform x86_64-linux
@@ -121,8 +121,12 @@ Prepare the following:
 Next, configure the _Pages_ service:
 
 1. Go to your repository on GitHub. Select the _Settings_ tab, then click _Pages_ in the left navigation bar. In the **Source** section (under _Build and deployment_), select [**GitHub Actions**][pages-workflow-src] from the dropdown menu.  
-   ![Build source](pages-source-light.png){: .light .border .normal w='375' h='140' }
-   ![Build source](pages-source-dark.png){: .dark .normal w='375' h='140' }
+
+![Build source](pages-source-light.png)
+{ .light .border .normal width="375" height="140" }
+
+![Build source](pages-source-dark.png)
+{ .dark .normal width="375" height="140" }
 
 2. Push any commits to GitHub to trigger the _Actions_ workflow. In the _Actions_ tab of your repository, you should see the workflow _Build and Deploy_ running. Once the build is complete and successful, the site will be deployed automatically.
 
@@ -138,7 +142,7 @@ Navigate to the root of the source project, and build your site with the followi
 $ JEKYLL_ENV=production bundle exec jekyll b
 ```
 
-Unless you specified the output path, the generated site files will be placed in the `_site`{: .filepath} folder of the project's root directory. Upload these files to your target server.
+Unless you specified the output path, the generated site files will be placed in the {{< markdown/filepath src="_site" >}}folder of the project's root directory. Upload these files to your target server.
 
 [nodejs]: https://nodejs.org/
 [starter]: https://github.com/cotes2020/chirpy-starter

content/post/2019-08-09-getting-started/index.zh-CN.md

@@ -121,8 +121,12 @@ $ bundle exec jekyll serve
 接下来，配置_Pages_服务：
 
 1. 在GitHub上进入您的仓库。选择_Settings_标签，然后点击左侧导航栏中的_Pages_。在**Source**部分（_Build and deployment_下），从下拉菜单中选择[**GitHub Actions**][pages-workflow-src]。
-   ![构建源](pages-source-light.png){: .light .border .normal w='375' h='140' }
-   ![构建源](pages-source-dark.png){: .dark .normal w='375' h='140' }
+   
+![构建源](pages-source-light.png)
+{ .light .border .normal width="375" height="140" }
+
+![构建源](pages-source-dark.png)
+{ .dark .normal width="375" height="140" }
 
 2. 将任何提交推送到GitHub以触发_Actions_工作流。在仓库的_Actions_标签中，您应该看到正在运行的_Build and Deploy_工作流。一旦构建完成并成功，站点将自动部署。
 

content/post/2019-08-11-customize-the-favicon/index.en.md

@@ -12,7 +12,7 @@ tags:
 pin: true
 ---
 
-The [favicons](https://www.favicon-generator.org/about/) of [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/) are placed in the directory `assets/img/favicons/`{: .filepath}. You may want to replace them with your own. The following sections will guide you to create and replace the default favicons.
+The [favicons](https://www.favicon-generator.org/about/) of [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/) are placed in the directory {{< markdown/filepath src="assets/img/favicons/" >}}. You may want to replace them with your own. The following sections will guide you to create and replace the default favicons.
 
 ## Generate the favicon
 

content/post/2019-08-11-customize-the-favicon/index.zh-CN.md

@@ -12,7 +12,7 @@ tags:
 pin: true
 ---
 
-[**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/)的[网站图标](https://www.favicon-generator.org/about/)放置在`assets/img/favicons/`{: .filepath}目录中。您可能想用自己的图标替换它们。以下部分将指导您创建和替换默认网站图标。
+[**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/)的[网站图标](https://www.favicon-generator.org/about/)放置在{{< markdown/filepath src="assets/img/favicons/" >}}目录中。您可能想用自己的图标替换它们。以下部分将指导您创建和替换默认网站图标。
 
 ## 生成网站图标