网站背景:
- 打开主题配置文件即
blog/themes/next
下的config.yml
,将style: source/data/styles.styl
前面的#
去掉取消注释
custom_file_path:
style: source/_data/styles.styl
-
打开根目录
Blog/source
创建文件_data/styles.styl
, 添加以下内容注意:图片的地址不用改, 但是要将想要改的图片放到
Blog\themes\next\source\images
并将图片改名为background.png
// 添加背景图片
body {
background: url(/images/background.png);//自己喜欢的图片地址
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50%;
}
网站超链接颜色:
-
打开
Blog\themes\next\source\css\_common\components\post
路径下的post.styl
, 并在底部添加如下代码a:not(.btn){ color: #90EE90; //超链接显示颜色 border-bottom: none; &:hover { color: #00FA9A; //鼠标移动上去后超链接颜色 font-weight: bold; text-decoration: underline; } }
-
颜色码链接: RGB颜色值与十六进制颜色码转换工具 (sioe.cn)
侧边栏背景:
-
注意: 本文仅针对next主题.
对于 Muse 和 Mist主题, 其侧边栏的配置文件为
Blog\themes\next\source\css\_schemes\Muse
对于 Pisces和 Gemini主题,其侧边栏的配置文件为
Blog\themes\next\source\css\_schemes\Pisces
-
在
_sidebar.styl
文件底部添加如下内容.sidebar { //设置背景图片,图片放在Hexo\themes\hexo-theme-next\source\images目录下 background:url(/images/sidebar-bg.jpg); background-size: cover; background-position:center; background-repeat:no-repeat; bottom: 0; if (not hexo-config('back2top.sidebar')) { box-shadow: inset 0 2px 6px black; } position: fixed; top: 0; transition: all $transition-ease-out; width: $sidebar-desktop; z-index: $zindex-2; a { //设置文字颜色 border-bottom-color: #FFFFFF; color: #FFFFFF; &:hover { border-bottom-color: $FFFFFF; color: #FFFFFF; } } }
-
修改侧边栏中头像下方的作者姓名和描述的字体颜色, 需要在
Blog\_config.yml
中修改# Site description: 像珍惜礼物一样,珍惜今天。 #简介或者格言 不修改颜色版本 description: <font color="#000000">像珍惜礼物一样,珍惜今天。</font> #简介或者格言 修改颜色版本"#000000"就是对应的颜色 两个版本二选其一