🔥 📝 Fixed #148 Add English language support.

2025-01-29 21:29:33 +08:00
parent ee7ce903ff
commit 5190eb1920
44 changed files with 1701 additions and 59 deletions
--- a/exampleSite/content/post/07-custom-files/index.en-us.md
+++ b/exampleSite/content/post/07-custom-files/index.en-us.md
@@ -0,0 +1,78 @@
+---
+title:  "Support user-defined design"
+description:  "Users can customize file configurations to achieve personalized adjustments to the style and layout of the site"
+keywords: "custom,files,layout"
+
+date: 2025-01-25T21:12:32+08:00
+lastmod: 2025-01-25T20:59:12+08:00
+
+categories:
+  - Example
+
+tags:
+  - Customize
+  - Personalization
+  - Layout
+
+url: "demo/custom-files.html"
+toc: true
+---
+
+For users familiar with front-end development, personalized adjustments can be made to the style and layout of the site through custom file configuration. In terms of layout, it mainly supports the site overview section in the left sidebar, as well as the two positions at the bottom of the site, but the style reset can be anywhere on the entire site.
+
+## Open configuration parameters
+
+Firstly, it is necessary to clarify that the following parameters are configured in the `params` area of the configuration file:
+
+```yaml
+customFilePath:
+sidebar: custom_sidebar.html
+footer: custom_footer.html
+style: /css/custom_style.css
+```
+
+> [!WARNING]
+> **Attention:** The file names of `sidebar` and `footer` cannot be the same as their parameter names, otherwise it will affect the default layout design of the system. Remember!!!: smile:
+
+
+Then create two directories, 'layouts/partitions', in the root directory of the site to store custom layout design files. Additionally, create two directories,' static/css', in the root directory of the site to store custom CSS style files. After everything is ready, you can refer to the following steps to complete your design idea.
+
+## Sidebar design
+
+Create a new file with the suffix 'html' in the 'partitions' directory earlier, where you can write the design or content you want to express, such as introducing some third-party component content. The example is as follows:
+
+```html
+<div class="mydefined animated" itemprop="custom">
+<span>Support custom CSS and Sidebar layout now 💄💄💄</ span>
+</div>
+```
+
+Configure the path of the file to the corresponding parameters, please refer to the effect at the bottom of the left sidebar for the effect.
+
+## Footer design
+
+Create a new file with the suffix 'html' in the 'partitions' directory earlier, where you can write the design or content you want to express, such as introducing some third-party component content. The example is as follows:
+
+```html
+<div class="custom-footer">
+Website source code <a href=" https://github.com/hugo-next/hugo-theme-next/tree/develop/exampleSite/layouts/partials/custom-footer.html " target="_blank">here</a>
+</div>
+```
+
+Configure the path of the file to the corresponding parameters, please refer to the effect at the bottom of the site for the effect.
+
+## Custom Style
+
+Create a new file with the suffix 'css' in the' css' directory earlier, and then redefine the style of the site or add some custom style designs to reference when writing articles. The example is as follows:
+
+```html
+.custom-head5 {
+font-size: 1.2em;
+color: #ed6c24;
+font-weight: bold;
+}
+```
+
+Configure the path of the file to the corresponding parameters, and the effect reference is as follows:
+
+<span class="custom-head5"> I am customizing the title style effect. </span>
--- a/exampleSite/content/post/07-custom-files/index.md
+++ b/exampleSite/content/post/07-custom-files/index.md
@@ -0,0 +1,80 @@
+---
+title: "支持用户自定义设计"
+description: "用户可以通过自定义文件配置，实现对站点的样式和布局进行个性化的调整。"
+keywords: "custom,files,layout"
+
+date: 2022-09-10T21:02:32+08:00
+lastmod: 2022-09-10T21:02:32+08:00
+
+categories:
+  - 示例文章
+
+tags:
+  - 自定义
+  - 个性化
+  - 布局
+
+url: "demo/custom-files.html"
+toc: true
+---
+
+对于熟悉前端开发的用户来说，可以通过自定义文件配置，实现对站点的样式和布局进行个性化的调整。其中布局方面主要是支持左侧边栏的站点概览部分，以及站点底部2个位置，但样式的重置可以是整个站点的任意位置。
+
+## 打开配置参数
+
+首先要明确在配置文件的 `params` 区域中有配置如下参数：
+
+```yaml
+customFilePath:
+  sidebar: custom_sidebar.html
+  footer: custom_footer.html
+  style: /css/custom_style.css
+```
+
+{{< note warning >}}
+
+**注意：** `sidebar` 和 `footer` 的文件命名不可以与它们的参数名称相同，不然会影响系统默认的布局设计，切记！！！ :smile:
+
+{{< /note >}}
+
+然后在站点的根目录下创建 `layouts/partials` 2个目录，用于存放自定布局设计文件，另外在站点根目录下创建 `static/css` 2个目录，用于存放自定义 CSS 样式文件。一切就绪后，就可以参考如下的步骤，完成自己的设计想法。
+
+## 侧边栏设计
+
+在前面创建 `partials` 目录中新一个后缀名为 `html` 的文件，可以在里面书写你所想表达的设计或内容，比如引入一些第三方组件内容。示例如下：
+
+```html
+<div class="mydefined animated" itemprop="custom">
+  <span>支持自定义CSS和Sidebar布局啦💄💄💄</span>
+</div>
+```
+
+再把该文件的路径配置到相应的参数中，效果请查看左侧边栏底部的效果。
+
+## 底部设计
+
+在前面创建 `partials` 目录中新一个后缀名为 `html` 的文件，可以在里面书写你所想表达的设计或内容，比如引入一些第三方组件内容。示例如下：
+
+```html
+<div class="custom-footer">
+Website source code <a href="https://github.com/hugo-next/hugo-theme-next/tree/develop/exampleSite/layouts/partials/custom-footer.html" target="_blank">here</a>
+</div>
+```
+
+再把该文件的路径配置到相应的参数中，效果请查看站点底部的效果。
+
+## 自定义样式
+
+在前面创建 `css` 目录中新一个后缀名为 `css` 的文件，然后可以在里面把站点的样式进行重定义，或是增加一些自己定义的样式设计，在写文章时进行引用，示例如下：
+
+```html
+.custom-head5 {
+  font-size: 1.2em;
+  color: #ed6c24;
+  font-weight: bold;
+}
+```
+
+再把该文件的路径配置到相应的参数中，效果参考如下：
+
+<span class="custom-head5">我是自定义的标题样式效果!!!</span>