随机背景图片加载

原理

自动更换背景是修改添加背景的css样式实现

图片来源

https://source.unsplash.com/

修改背景样式

修改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.80.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版本主题配置(背景图片加载、侧边栏社交小图标设置、设置网站图标)的更多相关文章

  1. Hexo博客Next v7.X 主题升级,美化警示录

    本文转载于:Hexo博客Next v7.X 主题升级,美化警示录丨奥怪的小栈 前言 经历了好几天(懒癌晚期懒得数了)的与主题升级斗争后,我终于完成基本上完成了next主题的升级!升到了V7.3!哈哈哈 ...

  2. Hexo博客搭建以及Next主题美化的经验之谈

    这并不是一篇博客搭建教程.内容主要包含个人对于Hexo博客搭建的心得,Next6.0主题美化的部分建议,以及摘录一些各种用于博客搭建的link. 在博客园3年6个月,确实也学到了很多,博客园也是目前为 ...

  3. 个人博客制作如何选择前端模板 thinkcmf后台加载新模板 CSS js文件

    我们的博客后台已经搭建好了,接下来我就要选择一个合适的模板做自己的博客,首先要定位你的博客是做什么用的,是属于什么行业,根据自己博客的定位选择适合的模板. 如果你是设计师,又会前端设计开发,那就可以自 ...

  4. creator 2.0版本对于preloadScene函数获取加载进度

    有时候,当我们场景上挂载的资源过多时,我们使用cc.director.loadScene切换场景时会等一段时间才会切换过去,这对游戏的体验是相当不好的.所以我们可以使用cc.director.prel ...

  5. Hexo 博客利用 Nginx 实现中英文切换

    本文记录了对 Hexo 博客进行中英文切换的配置过程,实现同一应用共用模版,任何页面可以切换到另一语言的对应页面,并对未明确语言的访问地址,根据浏览器语言进行自动跳转 实现细则 中英文地址区分 博客中 ...

  6. Hexo博客框架攻略

    前言 前天无意在b站看到up主CodeSheep上传的博客搭建教程,引起了我这个有需求但苦于没学过什么博客框架的小白的兴趣.于是花了两天时间终于终于把自己的博客搭建好了,踩了无数的坑,走偏了无数的路, ...

  7. Hexo博客插入图片的方法

    Hexo博客插入图片的方法 hexo图片blog hexo blog 插入图片的方法总结 hexo 的blog 内容是根据 markdown 文件的内容生成的html文件, 生成的文件全部在 /pub ...

  8. U盘便携式hexo&博客搭建&极速纯净低bug主题推荐&部署到coding&SEO优化搜索

    指南:U盘便携式hexo&博客搭建&极速纯净低bug主题推荐&部署到coding&SEO优化搜索   U盘便携式hexo随处写博客 简述:在任意一台联网的电脑上续写he ...

  9. hexo博客yili主题个性化自定义教程(1) ——借鉴中学习,初认yili主题

    文章转载于:hexo博客yili主题个性化自定义教程(1) --借鉴中学习,初认yili主题 这个博客跌跌撞撞也弄了好多天了,由于Next主题不知道什么情况,被我玩坏了.所以换了一个主题. 大名鼎鼎的 ...

  10. hexo搭建博客系列(三)美化主题

    文章目录 其他搭建 1. 添加博客图标 2. 鼠标点击特效(二选一) 2.1 红心特效 2.2 爆炸烟花 3. 设置头像 4. 侧边栏社交小图标设置 5. 文章末尾的标签图标修改 6. 访问量统计 7 ...

随机推荐

  1. 新一代自动化测试神器Playwright

    转载请注明出处️ 作者:测试蔡坨坨 原文链接:caituotuo.top/4bedb73c.html 你好,我是测试蔡坨坨. 说到WebUI自动化测试,首当其冲的当属Selenium,在很长的一段时间 ...

  2. C++核心知识回顾(自定义数据类型)

    复习C++ 类 自定义数据类型最灵活的方式就是使用C++的类结构 现在定义一个货币类型Currency: enum signType{PLUS,MINUS}; class Currency { pub ...

  3. Redis的缓存穿透+解决方案

    1.缓存穿透现象介绍 缓存穿透 :缓存穿透是指客户端请求的数据在缓存中和数据库中都不存在,这样缓存永远不会生效,这些请求都会打到数据库. 常见的解决方案有两种: 缓存空对象 优点:实现简单,维护方便 ...

  4. 1 分钟给 Siri 升个级!从智Z变身 ChatSiri!

    原文链接:https://forum.laf.run/d/79/17 众所周知,Siri 是一个智 Z!那么如果能接入大火的 chatGPT,是不是就会从智 Z 变成人工智能?! 众所周知,Laf 是 ...

  5. 3.2 构造器、this、包机制、访问修饰符、封装

    构造器 构造器:在实例化的一个对象的时候会给对象赋予初始值,因此我们可以通过修改构造器,来改变对象的初始值,构造器是完成对象的初始化,并不是创建对象 我们也可以创建多个构造器实现不同的初始化,即构造器 ...

  6. js中数组的sort() 方法

    sort()  方法用于对数组的元素进行排序,并返回数组.默认排序顺序是根据字符串UniCode码.因为排序是按照字符串UniCode码的顺序进行排序的,所以首先应该把数组元素都转化成字符串(如有必要 ...

  7. 牛客网:华为机试题(python版本)

    输入一行:input() 输入的一行有多个信息:input().split() 有多组测试用例(多组同时输入): while true try except... 1.计算字符串最后一个单词的长度,单 ...

  8. Vue实战案例

    Vue项目案例 结合之前学习的 vue.js.脚手架.vuex.vue-router.axios.elementui 等知识点,来开发前端项目案例(仅前端不含后端). 1.项目搭建 其实就是将我们项目 ...

  9. Kubernetes Gateway API 深入解读和落地指南

    背景 Kubernetes Gateway API 是 Kubernetes 1.18 版本引入的一种新的 API 规范,是 Kubernetes 官方正在开发的新的 API,Ingress 是 Ku ...

  10. 2022-02-17:寻找最近的回文数。 给定一个表示整数的字符串 n ,返回与它最近的回文整数(不包括自身)。如果不止一个,返回较小的那个。 “最近的”定义为两个整数差的绝对值最小。 示例 1: 输

    2022-02-17:寻找最近的回文数. 给定一个表示整数的字符串 n ,返回与它最近的回文整数(不包括自身).如果不止一个,返回较小的那个. "最近的"定义为两个整数差的绝对值最 ...