Hexo主题Next配置（二）

Hexo主题Next配置（二）

随机背景图片加载

原理

自动更换背景是修改添加背景的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.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.配置主题目录中的配置文件（敲黑板，重点）

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

放大文章内图片

使用了图片浏览放大功能fancybox插件
插件地址

下载插件安装包

下载插件安装包到blog的lib目录

$ cd themes/next

$ git clone https://github.com/theme-next/theme-next-fancybox source/lib/fancybox

注意删掉fancybox文件夹里的 .git``.github文件夹

更改主题配置文件

更改next/_config.yml文件

fancybox: true