2022-09-10 21:41:33 +08:00
|
|
|
|
---
|
|
|
|
|
|
title: "支持用户自定义设计"
|
|
|
|
|
|
description: "用户可以通过自定义文件配置，实现对站点的样式和布局进行个性化的调整。"
|
|
|
|
|
|
keywords: "custom,files,layout"
|
|
|
|
|
|
|
|
|
|
|
|
date: 2022-09-10T21:02:32+08:00
|
|
|
|
|
|
lastmod: 2022-09-10T21:02:32+08:00
|
|
|
|
|
|
|
|
|
|
|
|
categories:
|
2023-06-24 11:08:17 +08:00
|
|
|
|
- 示例文章
|
|
|
|
|
|
|
2022-09-10 21:41:33 +08:00
|
|
|
|
tags:
|
|
|
|
|
|
- 自定义
|
|
|
|
|
|
- 个性化
|
|
|
|
|
|
- 布局
|
|
|
|
|
|
|
|
|
|
|
|
url: "post/custom-files.html"
|
|
|
|
|
|
toc: true
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
对于熟悉前端开发的用户来说，可以通过自定义文件配置，实现对站点的样式和布局进行个性化的调整。其中布局方面主要是支持左侧边栏的站点概览部分，以及站点底部2个位置，但样式的重置可以是整个站点的任意位置。
|
|
|
|
|
|
|
|
|
|
|
|
<!--more-->
|
|
|
|
|
|
|
2022-09-29 10:24:41 +08:00
|
|
|
|
## 打开配置参数
|
2022-09-10 21:41:33 +08:00
|
|
|
|
|
|
|
|
|
|
首先要明确在配置文件的 `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 样式文件。一切就绪后，就可以参考如下的步骤，完成自己的设计想法。
|
|
|
|
|
|
|
2022-09-29 10:24:41 +08:00
|
|
|
|
## 侧边栏设计
|
2022-09-10 21:41:33 +08:00
|
|
|
|
|
|
|
|
|
|
在前面创建 `partials` 目录中新一个后缀名为 `html` 的文件，可以在里面书写你所想表达的设计或内容，比如引入一些第三方组件内容。示例如下：
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
|
<div class="mydefined animated" itemprop="custom">
|
|
|
|
|
|
<span>支持自定义CSS和Sidebar布局啦💄💄💄</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
再把该文件的路径配置到相应的参数中，效果请查看左侧边栏底部的效果。
|
|
|
|
|
|
|
2022-09-29 10:24:41 +08:00
|
|
|
|
## 底部设计
|
2022-09-10 21:41:33 +08:00
|
|
|
|
|
|
|
|
|
|
在前面创建 `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>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
再把该文件的路径配置到相应的参数中，效果请查看站点底部的效果。
|
|
|
|
|
|
|
|
|
|
|
|
|
2022-09-29 10:24:41 +08:00
|
|
|
|
## 自定义样式
|
2022-09-10 21:41:33 +08:00
|
|
|
|
|
|
|
|
|
|
在前面创建 `css` 目录中新一个后缀名为 `css` 的文件，然后可以在里面把站点的样式进行重定义，或是增加一些自己定义的样式设计，在写文章时进行引用，示例如下：
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
|
.custom-head5 {
|
|
|
|
|
|
font-size: 1.2em;
|
|
|
|
|
|
color: #ed6c24;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
}
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
再把该文件的路径配置到相应的参数中，效果参考如下：
|
|
|
|
|
|
|
|
|
|
|
|
<span class="custom-head5">我是自定义的标题样式效果!!!</span>
|
