Hexo博客Next6.0版本主题配置(背景图片加载、侧边栏社交小图标设置、设置网站图标)
随机背景图片加载
原理
自动更换背景是修改添加背景的css样式实现
图片来源
修改背景样式
修改themes\next\source\css\ _custom\custom.styl
文件,这个是Next故意留给用户自己个性化定制一些样式的文件,添加以下代码:
body {
background:url(https://source.unsplash.com/random/1600x900);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:50% 50%;
background-size:cover;
}
参数细节
url
可更换为自己喜欢的图片的地址。
repeat:
是否重复出现
attachment:
定义背景图片随滚动轴的移动方式
position:
设置背景图像的起始位置。
background-size:cover
为可能有助于大分辨率下背景图的显示
修改不透明度(可加可不加,看实际效果)
因为next主题的背景是纯透明的,这样子就造成背景图片的影响看不见文字,这对于博客来说肯定不行。
调整背景的不透明度可以更加美观,参数opacity:
建议调整0.8
至0.95
之间。
修改themes\next\source\css\ _custom\custom.styl
文件。在后面添加如下代码
.main-inner {
margin-top: 60px;
padding: 60px 60px 60px 60px;
background: #fff;
opacity: 0.9;
min-height: 500px;
}
其中:background: #fff;
白色
opacity: 0.9;
为不透明度
注:效果还可以,但是博客备份在github上,网速限制加载的比较忙,建议博客放在国内的Coding上
固定背景图片加载
hexo\themes\next\source\images\
的路径下;
在文件的最上方加上一代码 body { background:url(/images/backGround.jpg(这是你之前加的背景图片的名字));} 就完事了。
修改背景样式
修改themes\next\source\css\ _custom\custom.styl
文件,添加以下代码:
body {
background:url(/images/图片.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:50% 50%;
background-size:cover;
}
侧边栏社交小图标设置
侧边栏默认只有
打开主题配置文件(_config.yml),搜索social_icons:,在fontawesome图标库(网址)找自己喜欢的小图标,并将名字复制在如下位置配置文件
social:
GitHub: https://github.com/yourname || github
E-Mail: mailto:邮箱地址 || envelope
Weibo: https://weibo.com/yourname || weibo
CSDN: https://me.csdn.net/yourname || book
#Google: https://plus.google.com/yourname || google
#Twitter: https://twitter.com/yourname || twitter
#FB Page: https://www.facebook.com/yourname || facebook
#VK Group: https://vk.com/yourname || vk
#StackOverflow: https://stackoverflow.com/yourname || stack-overflow
#YouTube: https://youtube.com/yourname || youtube
#Instagram: https://instagram.com/yourname || instagram
#Skype: skype:yourname?call|chat || skype
设置网站图标
下载图标
下载尺寸32 X 32的图标,文件名必须是favicon.ico。
图标放在
2.将图标放在下一个/源极/图像文件夹目录下面。
配置
3.配置主题目录中的配置文件(敲黑板,重点)
之前网上查到的方法如下:(并没有成功)
Hexo博客Next6.0版本主题配置(背景图片加载、侧边栏社交小图标设置、设置网站图标)的更多相关文章
- Hexo博客Next v7.X 主题升级,美化警示录
本文转载于:Hexo博客Next v7.X 主题升级,美化警示录丨奥怪的小栈 前言 经历了好几天(懒癌晚期懒得数了)的与主题升级斗争后,我终于完成基本上完成了next主题的升级!升到了V7.3!哈哈哈 ...
- Hexo博客搭建以及Next主题美化的经验之谈
这并不是一篇博客搭建教程.内容主要包含个人对于Hexo博客搭建的心得,Next6.0主题美化的部分建议,以及摘录一些各种用于博客搭建的link. 在博客园3年6个月,确实也学到了很多,博客园也是目前为 ...
- 个人博客制作如何选择前端模板 thinkcmf后台加载新模板 CSS js文件
我们的博客后台已经搭建好了,接下来我就要选择一个合适的模板做自己的博客,首先要定位你的博客是做什么用的,是属于什么行业,根据自己博客的定位选择适合的模板. 如果你是设计师,又会前端设计开发,那就可以自 ...
- creator 2.0版本对于preloadScene函数获取加载进度
有时候,当我们场景上挂载的资源过多时,我们使用cc.director.loadScene切换场景时会等一段时间才会切换过去,这对游戏的体验是相当不好的.所以我们可以使用cc.director.prel ...
- Hexo 博客利用 Nginx 实现中英文切换
本文记录了对 Hexo 博客进行中英文切换的配置过程,实现同一应用共用模版,任何页面可以切换到另一语言的对应页面,并对未明确语言的访问地址,根据浏览器语言进行自动跳转 实现细则 中英文地址区分 博客中 ...
- Hexo博客框架攻略
前言 前天无意在b站看到up主CodeSheep上传的博客搭建教程,引起了我这个有需求但苦于没学过什么博客框架的小白的兴趣.于是花了两天时间终于终于把自己的博客搭建好了,踩了无数的坑,走偏了无数的路, ...
- Hexo博客插入图片的方法
Hexo博客插入图片的方法 hexo图片blog hexo blog 插入图片的方法总结 hexo 的blog 内容是根据 markdown 文件的内容生成的html文件, 生成的文件全部在 /pub ...
- U盘便携式hexo&博客搭建&极速纯净低bug主题推荐&部署到coding&SEO优化搜索
指南:U盘便携式hexo&博客搭建&极速纯净低bug主题推荐&部署到coding&SEO优化搜索 U盘便携式hexo随处写博客 简述:在任意一台联网的电脑上续写he ...
- hexo博客yili主题个性化自定义教程(1) ——借鉴中学习,初认yili主题
文章转载于:hexo博客yili主题个性化自定义教程(1) --借鉴中学习,初认yili主题 这个博客跌跌撞撞也弄了好多天了,由于Next主题不知道什么情况,被我玩坏了.所以换了一个主题. 大名鼎鼎的 ...
- hexo搭建博客系列(三)美化主题
文章目录 其他搭建 1. 添加博客图标 2. 鼠标点击特效(二选一) 2.1 红心特效 2.2 爆炸烟花 3. 设置头像 4. 侧边栏社交小图标设置 5. 文章末尾的标签图标修改 6. 访问量统计 7 ...
随机推荐
- 【JavaSE】网络编程
1. 网络编程概述 网络编程的目的:直接或者间接地通过网络协议与其他计算机实现数据交换,进行通讯. 网络编程两个主要的问题: ①如何精准地定位网络上的一台或多台主机,并定位主机上的特定应用 ②找到主机 ...
- 27-lazy loading(懒加载和预加载)
懒加载 document.getElementById('btn').onclick = function () { // 懒加载:当文件需要使用时才加载 import(/* webpackChunk ...
- Python 遍历整个列表
操作列表 遍历整个列表,无论列表有多长,循环让列表中的每一个元素都采取一个或一系列相同的措施,从而高效地处理任何长度的列表,包含数以千至数百万个元素的列表. 遍历整个列表 通过for循环解决遍历 从列 ...
- HTML中link标签的那些属性
在HTML中, link 标签是一个自闭合元素,通常位于文档的 head 部分.它用于建立与外部资源的关联,如样式表.图标等. link 标签具有多个属性,其中 rel 和 href 是最常用的. r ...
- 2021-11-18:给定一个长度len,表示一共有几位。所有字符都是小写(a~z),可以生成长度为1,长度为2,长度为3...长度为len的所有字符串。如果把所有字符串根据字典序排序,每个字符串都有
2021-11-18:给定一个长度len,表示一共有几位.所有字符都是小写(a~z),可以生成长度为1,长度为2,长度为3-长度为len的所有字符串.如果把所有字符串根据字典序排序,每个字符串都有所在 ...
- 2021-10-30:有效的字母异位词。给定两个字符串 s 和 t ,编写一个函数来判断 t 是否是 s 的字母异位词。注意:若 s 和 t 中每个字符出现的次数都相同,则称 s 和 t 互为字母异位
2021-10-30:有效的字母异位词.给定两个字符串 s 和 t ,编写一个函数来判断 t 是否是 s 的字母异位词.注意:若 s 和 t 中每个字符出现的次数都相同,则称 s 和 t 互为字母异位 ...
- Java 网络编程 —— 非阻塞式编程
线程阻塞概述 在生活中,最常见的阻塞现象是公路上汽车的堵塞.汽车在公路上快速行驶,如果前方交通受阻,就只好停下来等待,等到公路顺畅,才能恢复行驶. 线程在运行中也会因为某些原因而阻塞.所有处于阻塞状态 ...
- KO之间互相调用
需求 假设有两个KO,命名为moduleA.KO,moduleB.KO,现在要实现在moduleB.KO中调用moduleA.KO中的函数. 实现 ModuleA实现 源码: #include < ...
- 解决echarts图形由于label过长导致文字显示不全问题
使用echarts 打印饼图,在pc没问题,但一到移动端问题就来了,由于屏幕过小,导致label部分被遮挡 一.问题分析 如上图这个就尴尬了,囧么办呢? 还好echarts 提供了formatter方 ...
- 2023-05-25:给定一个正整数 x,我们将会写出一个形如 x (op1) x (op2) x (op3) x ... 的表达式 其中每个运算符 op1,op2,… 可以是加、减、乘、除之一 例如
2023-05-25:给定一个正整数 x,我们将会写出一个形如 x (op1) x (op2) x (op3) x ... 的表达式 其中每个运算符 op1,op2,- 可以是加.减.乘.除之一 例如 ...