Hexo主题Next配置(二)
随机背景图片加载
原理
自动更换背景是修改添加背景的css样式实现
图片来源
修改背景样式
修改themes\next\source\css\ _custom\custom.styl
文件,这个是Next故意留给用户自己个性化定制一些样式的文件,添加以下代码:
1 | body { |
参数细节
url
可更换为自己喜欢的图片的地址。repeat:
是否重复出现attachment:
定义背景图片随滚动轴的移动方式position:
设置背景图像的起始位置。background-size:cover
为可能有助于大分辨率下背景图的显示
修改不透明度(可加可不加,看实际效果)
因为next主题的背景是纯透明的,这样子就造成背景图片的影响看不见文字,这对于博客来说肯定不行。
调整背景的不透明度可以更加美观,参数opacity:
建议调整0.8
至0.95
之间。
修改themes\next\source\css\ _custom\custom.styl
文件。在后面添加如下代码
1 | .main-inner { |
其中: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
文件,添加以下代码:
1 | body { |
侧边栏社交小图标设置
侧边栏默认只有
打开主题配置文件(_config.yml),搜索social_icons:,在fontawesome图标库(网址)找自己喜欢的小图标,并将名字复制在如下位置配置文件
1 | social: |
设置网站图标
下载图标
下载尺寸32 X 32的图标,文件名必须是favicon.ico。
图标放在
2.将图标放在下一个/源极/图像文件夹目录下面。
配置
3.配置主题目录中的配置文件(敲黑板,重点)
之前网上查到的方法如下:(并没有成功)
放大文章内图片
使用了图片浏览放大功能fancybox插件
插件地址
下载插件安装包
下载插件安装包到blog的lib目录
1 | $ cd themes/next |
1 | $ git clone https://github.com/theme-next/theme-next-fancybox source/lib/fancybox |
注意删掉fancybox文件夹里的 .git``.github
文件夹
更改主题配置文件
更改next/_config.yml
文件
1 | fancybox: true |