💄 Add custom files support just enjoy by yourself.

exampleSite/config.yaml

@@ -183,6 +183,13 @@ params:
   # Custom Logo (Warning: Only support scheme Mist)
   customLogo: #/imgs/hugo_next_logo.png
 
+  # 用户自定义文件配置
+  # Define custom file paths.
+  # customFilePath:
+  #   sidebar: custom_sidebar.html
+  #   footer: custom_footer.html
+  #   style: /css/custom_style.css
+
   # 知识共享国际许可 4.0
   # 更多信息： https://creativecommons.org/about/cclicenses/
   # Creative Commons 4.0 International License.

exampleSite/content/post/custom-files.md

@@ -0,0 +1,82 @@
+---
+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: "post/custom-files.html"
+toc: true
+---
+
+对于熟悉前端开发的用户来说，可以通过自定义文件配置，实现对站点的样式和布局进行个性化的调整。其中布局方面主要是支持左侧边栏的站点概览部分，以及站点底部2个位置，但样式的重置可以是整个站点的任意位置。
+
+<!--more-->
+
+# 打开配置参数
+
+首先要明确在配置文件的 `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个目录，用于存放自定布局设计文件，另外在站点根目录下创建 `statics/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>

exampleSite/static/css/custom_style.css

@@ -0,0 +1,16 @@
+/** Custom style defined file **/
+
+.mydefined {
+  font-size: 0.65em;
+  color: #ed6c24;
+}
+
+.custom-footer {
+  color: #ed6c24;
+}
+
+.custom-head5 {
+  font-size: 1.2em;
+  color: #ed6c24;
+  font-weight: bold;
+}

layouts/partials/footer.html

@@ -105,3 +105,8 @@
 </div>
 {{- end }} 
 {{- end }}
+
+{{- $custom := .Scratch.Get "footer" }}
+{{- if $custom }}
+  {{ partialCached $custom . }}
+{{- end }}

layouts/partials/head/style.html

@@ -24,7 +24,7 @@
 {{- if hugo.IsProduction }}
 {{- $css = $css | minify | fingerprint }}
 {{- end }}
-  <link rel="stylesheet" href="{{ $css.RelPermalink }}">
+<link rel="stylesheet" href="{{ $css.RelPermalink }}">
 {{- if .IsPage }}
   <style type="text/css">
     .post-footer, .flinks-list-footer hr:after {
@@ -32,4 +32,9 @@
     }
   </style>
 {{- end }}
+
+{{- $custom := .Scratch.Get "style" }}
+{{- if $custom }}
+<link rel="stylesheet" type="text/css" href="{{ $custom }}">
+{{- end }}
   

layouts/partials/init.html

@@ -106,4 +106,10 @@
 
 {{ $globalVars.Set "config" $config }}
 
+{{ with .Site.Params.customFilePath }}
+  {{ range $k, $v := . }}
+    {{ $globalVars.Set $k $v }}
+  {{ end }}
+{{ end }}
+
 {{ return $globalVars.Values }}

layouts/partials/sidebar.html

@@ -23,7 +23,12 @@
       </div>
       <!--/noindex-->
       <div class="site-overview-wrap sidebar-panel">
-        {{ partial "sidebar/overview" . }}
+        {{- partialCached "sidebar/overview.html" . -}}
+        
+        {{- $custom := .Scratch.Get "sidebar" }}
+        {{- if $custom }}
+          {{ partialCached $custom . }}
+        {{- end }}
       </div>
     </div>
     {{- if and .Site.Params.backTop.enable .Site.Params.backTop.sidebar }}