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" }
 
 ## 视频