hexo下NexT的主题背景及框体透明度修改

首先定位主题文件夹next目录下的主题配置文件
.\themes\next\\_config.yml
打开并查找
style: source/_data/styles.styl 并将改行的注释解除。
在改行所描述的目录下创建相应的文件，即 source/_data/styles.styl 并打开

1.主题背景更改

在styles.styl 中插入以下代码

body {background:url(/images/background.jpg);     //图片路径，默认background-repeat: no-repeat;           //图片无法铺满时，是否重复及重复方式background-attachment:fixed;      //图片是否跟随滚动background-size:cover;                //覆盖background-position:center;     //图片显示起始位置
}

并前面主题目录下，.\themes\next\source\images 添加图片文件background.jpg作为背景图片

2.文章背景框透明化

因为设置整个主题的透明度会导致字体也跟随变化，十分影响观感，因此经过博主的反复尝试加查找，精准定位到该背景框的样式，修改其颜色即可。打开根目录下`source/_data/styles.styl` 并插入以下代码：

//文章背板的颜色rgb
.main-inner > .sub-menu, .main-inner > .post-block, .main-inner > .tabs-comment, .main-inner > .comments, .main-inner > .pagination{background: #f5f5f56b;       //此处使用十六进制颜色代码，          也可以使用rgba进行调色，//实际效果为白色透明色底板             rgba的第四参数即为透明度
}
body{               //修改主体字体颜色color: #000;      //纯黑
}
.posts-expand .post-title-link {    //标题颜色color: #000;              //首页文章标题颜色， （默认为灰辨识度不高）
}
.posts-expand .post-meta-container {    //标题下的日期颜色color: #880000;               //此处修改为红色，可自行调用rgb调色
}//侧边框的透明度设置
.sidebar {opacity: 0.85;
}

额外透明可选添加代码：

.header-inner {       //菜单栏的调色background: rgba(255,255,255,0.8);
}.popup {       //搜索框透明opacity: 0.8;
}.main-inner {  //整个主体的透明度opacity: 0.8;
}

根据实际需要更改的透明模块还可以打开网页审查元素，定位到详细的模块查找模块的样式并在styles.styl文件中插入其定义规则。

实际效果：

hexo下NexT的主题背景及框体透明度修改相关推荐

Hexo（sakura）主题Mashiro大佬同款LOGO修改方法
sakura主题Mishiro大佬的博客:樱花家的白猫本文转载于雾时之森,稍加修改. 首先找到一款你想要的字体,我这里用的是 kitty原始猫咪中文智能手机字体.由于中文字体包都很大不利于WEB环境 ...
hexo博客yilia主题如何自定义个人博客的背景图片
hexo博客yilia主题博客背景的设置个人博客系列文章目录 hexo博客yilia主题所有文章模块缺失最新解决方案 hexo+yilia博客报错post.categories forEach ...
hexo下yilia主题博客个性化自定义
我的博客采用的hexo下的yilia主题,这篇文章记录一下自己折腾配置博客的方法和经过. 首先是创建博客的基本的几个命令 hexo g # 生成博客网页文件 hexo s # 本地预览博客,打开本地网 ...
Hexo下魔改NexT主题
hexo版本:6.2.0 NexT版本:8.12.2 NodeJS版本:16.16 背景修改canvas-nest step1 在next主题文件夹根目录下的layout/_layout.njk中加入 ...
hexo下next主题的优化
1.站点信息的配置. 修改一些基本的配置,比如站点名.站点描述等等. # Site title: halisi7 subtitle: '一个专注技术的组织' description: '涉猎的主要编程 ...
hexo下next主题实现鼠标移动特效
效果如下添加特效在\themes\next\source\js\中新建fairyDustCursor.js文件,并添加以下代码 (function fairyDustCursor() {var p ...
hexo博客yilia-plus主题更换Beaudar评论插件
文章目录 hexo博客yilia-plus主题更换Beaudar评论插件一.安装Beaudar app. 二.添加到主题中 1.直接拉取仓库到本地. 2. 自己进行配置三. 一些问题 hexo博客 ...
android主题编辑器,使用 Theme Editor 设计应用主题背景
警告:从版本 3.3 开始,Theme Editor 不再包含在 Android Studio 中. Android Studio 包含一个名为 Theme Editor 的视觉辅助工具,该工具可以帮 ...
Android Studio (11)---使用主题背景编辑器设计应用主题背景
使用主题背景编辑器设计应用主题背景 Android Studio 包含被称为主题背景编辑器的视觉辅助工具,以帮助您: 创建和修改应用的主题背景. 调整不同资源分类器的主题背景. 可视化更改公共 UI ...

hexo下NexT的主题背景及框体透明度修改

hexo下NexT的主题背景及框体透明度修改相关推荐

最新文章

热门文章