【杂谈】hexo网站next主题背景图片和超链接颜色问题

网站背景:

打开主题配置文件即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"就是对应的颜色 两个版本二选其一

【杂谈】hexo网站next主题背景图片和超链接颜色问题相关推荐

typora 主题背景图片透明代码块
一段时间没有使用 typera ,发现打不开,要求更新,然后自己之前修改的 css 主题也显示不了了. 所以在这里存一下. 具体就是: 1. 关于背景图片 :root {/* 背景图片 */backg ...
html 颜色叠加图片,如何在背景图片上添加颜色叠加？
一只名叫tom的猫我看到2个简单的选择:在图像上具有半透明单个渐变的多个背景巨大的插图阴影渐变选项:html { min-height:100%; background:linear-gradi ...
厦门之旅第一篇Gradle多渠道打包(动态设定App名称，应用图标，背景图片，状态栏颜色)
我不是诗人,写不出厦门的美:我不是歌手,唱不出厦门的情:我不是画家,画不出厦门的景. 我只是一名程序员,我只能用我的眼,我的心去看去感受,那久违的海风吹拂着脸颊,好似内心那一份烦躁与沉重也随着海风飘向 ...
android如何切换主题背景图片,安卓怎么更换主题安卓手机更换壁纸与主题教程...
最近有网友问小编安卓手机怎么更换主题?其实对于这个问题,很多朋友都会觉得再简单不过了,我们不仅可以通过手机设置更换,还可以使用一些手机辅助软件更换,总之手机更换桌面壁纸或者主题什么的,再容易不过了,针 ...
android如何切换主题背景图片,android主题设置与主题切换
前不久碰到了需要给软件更换主题的问题,研究了一段时间后可以基本实现功能了,在这里拿出来分享下方法,如有不足欢迎指正. 要想实现主题切换,我们得自定义一些主题的属性,自定义属性的attrs.xml新建在 ...
根据背景图片计算文字颜色（实用、赞）
原文出处: https://www.it1352.com/533401.html 延伸阅读: 1.根据背景颜色确定字体颜色 2.根据背景颜色的深浅确定字的颜色 3.Js获取图片主色调,近似色,互补色, ...
css 网站大背景（按比例缩放背景图片）
很多网站是全背景图片的,而且适应各种主流分辨率,给人一种干净大气的感觉,实属设计派的一个耍酷良方,下面介绍几种实现全屏图片自适应缩放背景图片的方法. 1.帅气简单的CSS3方法 html {backg ...
Android Studio设置主题背景背景图片字体
由于前两天刚刚安装了最新版的Studio,字体以及主题背景都需要重新设置,而自己也还是Studio使用小白,避免以后忘记,索性就随笔记下啦! 设置字体大小习惯的原因,Studio的默认字体尺寸本主看 ...
Hexo+next的侧边栏背景与字体颜色设置方法
由于next主题经过了几次更新,查阅了许多资料都说要修改 custom.styl 这个配置文件,但是我的主题内没有此文件,经过翻阅大量的资料,终于找到了侧边栏的配置文件位置. 对于 Muse ...

【杂谈】hexo网站next主题背景图片和超链接颜色问题

网站背景:

网站超链接颜色:

侧边栏背景:

【杂谈】hexo网站next主题背景图片和超链接颜色问题相关推荐

最新文章

热门文章