-
Notifications
You must be signed in to change notification settings - Fork 32
10. 主题高级配置
以下配置将涉及到主题源文件的更改，深度变更主题内容及功能，请在备份原文件后使用。
文档中所涉及的目录的根目录为mellow的主题目录。
路径：/source/css/_partial/variable.less (以下简称为样式变量文件)
本主题采用 material design 经典双色设计方案，颜色值参考UPlabs。为了避免视觉疲劳，请尽量使用相近的颜色深度，并保证主辅色调对比鲜明。
-
@primaryColor_1主色调 -
@primaryColor_2辅色调
- @thumbHoverColor: #000; 鼠标移入缩略图时显示的颜色，已透明化处理。
- @textCardTitle: #000; 标题色
-
@tag-color-1标签1 -
@tag-color-2标签2 -
@tag-color-3标签3 -
@tag-color-4标签4 -
@tag-color-5标签5 -
@tag-color-6标签6
主题中大部分颜色会根据 主辅色调 进行相应调整，其他未说明的颜色不推荐修改。如果修改，请在本变量文件中自行尝试。
* @font-size 根字体大小
* @font 字体家族
主题中所有字体大小均根据 根字体大小 进行相应调整。
自定义字体文件路径: /source/css/fonts
- 参考
fonts/bluehost的文件配置，创建相应字体规则 - 参考
样式变量文件中的@font-bluehost变量设置正确路径 - 在
样式变量文件中的@font字体家族前，增加相应自定义字体名
路径: 样式变量文件
-
@menuWidth左侧菜单栏宽度 -
@menuPadding左侧菜单栏内填充 -
@searchWidth搜索框宽度 -
@searchHeight搜索框高度 -
@topBarH顶部导航栏高度 -
@headerH顶部页头高度 -
@homeW首页卡片宽度 -
@postW文章宽度 -
@postOffsetY文章顶部偏移量 -
@asideW文章目录以及Github仓库宽度
路径：/source/css/_custom/custom.less (以下简称为样式自定义文件)
样式自定义文件 是专门为用户预留的样式接口。
一般用法为：
- 打开浏览器的控制台
- 用元素审查找到元素的 class 或者 id
- 在
样式自定义文件中用 css 或者 less 语法进行样式复写
如果遇到复写的样式不能生效的情况，请在样式后加入
@imp，来提升优先级。 例如.item{ color: red @imp; }
路径：/source/layout/_custom/head.ejs (以下简称为hear自定义文件)
该文件为博客站点所有的 html 文件中的 <head></head> 标签中部署自定义标签。位置为标签内最底部。
该文件的常见用法：
- 自定义
<meta>标签 - 自定义
<link>标签 - 自定义
<script>标签
该文件支持所有 html 以及 ejs 语法
路径：/source/layout/_custom/body.ejs (以下简称为body自定义文件)
该文件为博客站点所有的 html 文件中的 <body></body> 标签中部署自定义标签。位置为标签内最底部。
该文件的常见用法：
- 自定义类似
<div><p><img>等常见 html 标签，再配合样式自定义文件实现自定义组件功能
该文件支持所有 html 以及 ejs 语法
路径：/source/layout/_custom/script.ejs (以下简称为script自定义文件)
该文件为博客站点所有的 html 文件中的 <body></body> 标签中部署自定义标签。位置为标签内最底部。
该文件的常见用法：
- 自定义
<script>标签， 再配合body自定义文件实现自定义组件功能
该文件支持所有 html 以及 ejs 语法
如果您有好的建议或使用中发现问题，请通过如下方式进行问题反馈
- 在主题仓库中提交 Issues
- Fork主题仓库到自己的仓库中，修改并提交 Pull requests