1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > Hexo博客Next6.0版本主题配置(背景图片加载 侧边栏社交小图标设置 设置网站图标)

Hexo博客Next6.0版本主题配置(背景图片加载 侧边栏社交小图标设置 设置网站图标)

时间:2019-02-05 22:11:04

相关推荐

Hexo博客Next6.0版本主题配置(背景图片加载 侧边栏社交小图标设置 设置网站图标)

随机背景图片加载

原理

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

图片来源

/

修改背景样式

修改themes\next\source\css\ _custom\custom.styl文件,这个是Next故意留给用户自己个性化定制一些样式的文件,添加以下代码:

body {background:url(/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: /yourname || githubE-Mail: mailto:邮箱地址 || envelopeWeibo: /yourname || weiboCSDN: /yourname || book#Google: /yourname || google#Twitter: /yourname || twitter#FB Page: /yourname || facebook#VK Group: /yourname || vk#StackOverflow: /yourname || stack-overflow#YouTube: /yourname || youtube#Instagram: /yourname || instagram#Skype: skype:yourname?call|chat || skype

设置网站图标

下载图标

图标网站

下载尺寸32 X 32的图标,文件名必须是favicon.ico。

图标放在

2.将图标放在下一个/源极/图像文件夹目录下面。

配置

3.配置主题目录中的配置文件(敲黑板,重点)

之前网上查到的方法如下:(并没有成功)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。