From df09cbe4c030b053e769afa62bb7960dda87febe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=87=A1=E6=A2=A6=E6=98=9F=E5=B0=98?= Date: Sat, 10 Sep 2022 21:41:33 +0800 Subject: [PATCH] :lipstick: Add custom files support just enjoy by yourself. --- exampleSite/config.yaml | 7 ++ exampleSite/content/post/custom-files.md | 82 ++++++++++++++++++++++++ exampleSite/static/css/custom_style.css | 16 +++++ layouts/partials/footer.html | 5 ++ layouts/partials/head/style.html | 7 +- layouts/partials/init.html | 6 ++ layouts/partials/sidebar.html | 7 +- 7 files changed, 128 insertions(+), 2 deletions(-) create mode 100644 exampleSite/content/post/custom-files.md create mode 100644 exampleSite/static/css/custom_style.css diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml index e832f90..fa3b7ca 100644 --- a/exampleSite/config.yaml +++ b/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. diff --git a/exampleSite/content/post/custom-files.md b/exampleSite/content/post/custom-files.md new file mode 100644 index 0000000..20132f2 --- /dev/null +++ b/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个位置，但样式的重置可以是整个站点的任意位置。 + + + +# 打开配置参数 + +首先要明确在配置文件的 `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 +
+ 支持自定义CSS和Sidebar布局啦💄💄💄 +
+``` + +再把该文件的路径配置到相应的参数中，效果请查看左侧边栏底部的效果。 + +# 底部设计 + +在前面创建 `partials` 目录中新一个后缀名为 `html` 的文件，可以在里面书写你所想表达的设计或内容，比如引入一些第三方组件内容。示例如下： + +```html +
+Website source code here +
+``` + +再把该文件的路径配置到相应的参数中，效果请查看站点底部的效果。 + + +# 自定义样式 + +在前面创建 `css` 目录中新一个后缀名为 `css` 的文件，然后可以在里面把站点的样式进行重定义，或是增加一些自己定义的样式设计，在写文章时进行引用，示例如下： + +```html +.custom-head5 { + font-size: 1.2em; + color: #ed6c24; + font-weight: bold; +} +``` + +再把该文件的路径配置到相应的参数中，效果参考如下： + +我是自定义的标题样式效果!!! diff --git a/exampleSite/static/css/custom_style.css b/exampleSite/static/css/custom_style.css new file mode 100644 index 0000000..881b2d2 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 631952d..cf4236e 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -105,3 +105,8 @@ {{- end }} {{- end }} + +{{- $custom := .Scratch.Get "footer" }} +{{- if $custom }} + {{ partialCached $custom . }} +{{- end }} diff --git a/layouts/partials/head/style.html b/layouts/partials/head/style.html index c793eed..69bea95 100644 --- a/layouts/partials/head/style.html +++ b/layouts/partials/head/style.html @@ -24,7 +24,7 @@ {{- if hugo.IsProduction }} {{- $css = $css | minify | fingerprint }} {{- end }} - + {{- if .IsPage }} {{- end }} + +{{- $custom := .Scratch.Get "style" }} +{{- if $custom }} + +{{- end }} \ No newline at end of file diff --git a/layouts/partials/init.html b/layouts/partials/init.html index 22f8872..a2ac596 100644 --- a/layouts/partials/init.html +++ b/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 }} diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html index f08c579..be8b2ca 100644 --- a/layouts/partials/sidebar.html +++ b/layouts/partials/sidebar.html @@ -23,7 +23,12 @@
- {{ partial "sidebar/overview" . }} + {{- partialCached "sidebar/overview.html" . -}} + + {{- $custom := .Scratch.Get "sidebar" }} + {{- if $custom }} + {{ partialCached $custom . }} + {{- end }}
{{- if and .Site.Params.backTop.enable .Site.Params.backTop.sidebar }}