【Hexo搭建个人博客】：yilia主题配置(二)

本文主要讲述 Hexo-yilia 主题中，关于背景和图片的相关配置。与前面一样，使用主题： hexo-theme-yilia-plus

1.头像与网站图标

1.1.添加头像和网站图标

打开主题配置文件 _config.yml, 添加：

# 网站图标
favicon: /img/favicon.ico
# 你的头像url
avatar: /images/avatar.jpg

头像地址可以分两种：

本地
- 根目录中的 source 目录：可以在 source 目录下建立 images 文件夹，存放图片
- 主题目录的 source 目录：建立 img 文件夹，存放图片
网络
- 配置后写链接地址

1.2.头像旋转

修改 yilia-plus\source\main.b8fa34.css 文件 (原ylia主题是 main.0cf68a.css 文件)
文本编辑器 Ctrl+F , 搜索 .left-col #header .profilepic img ,修改为：

.left-col #header .profilepic img {width: 100%;height: 100%;background: #88acdb;border-radius: 50%;border: 0;-webkit-transition: -webkit-transform 1s ease-out;-moz-transition: -moz-transform 1s ease-out;-o-transition: -o-transform 1s ease-out;-ms-transition: -ms-transform 1s ease-out
}.left-col #header .profilepic img.show {width: 100%;height: 100%;opacity: 1
}.left-col #header .profilepic img:hover {transform: rotate(1turn)
}

2.左侧边栏配置

同上，可以在css文件中设置，这里 yilia-plus 做了灵活的配置。

2.1.头像上方动图

打开主题配置文件 themes\yilia-plus\_config.yml，找到 style 配置项，作如下修改：

style:
# 左侧头像板块动态图效果gif:# 是否启用enable: true# 自定义背景图路径(默认可以不设置，提供默认背景图biubiubiu.gif)path: 这里是gif图片地址

打开left-col.ejs文件，修改配置：

<% var defaultBg = '#4d4d4d'; %>
<% var defaultBgImg = '/img/biubiubiu.gif'; %>
<% var overlayBgImg= theme.style.gif && theme.style.gif.enable && theme.style.gif.path ? theme.style.gif.path : defaultBgImg; %><div class="overlay" style="background: <%= theme.style && theme.style.header ? theme.style.header : defaultBg %>;<% if (theme.style.gif && theme.style.gif.enable){ %>background: url('<%- url_for(overlayBgImg) %>') no-repeat ;<%}%> z-index:-1"></div>

2.2.左侧边栏背景

打开主题配置文件 themes\yilia-plus\_config.yml，找到 style 配置项，作如下修改：

style:# 头像上面的背景颜色 e.g. linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))# header: '#D3D1DC'header: 'rgba(0,0,0,0.5)' #设置背景透明度，不然头像上方是默认色#左侧头像板块的背景颜色(IE兼容设置：filter:alpha(opacity=80);)left_ground: enable: truedefault: 'rgba(0,0,0,0.5)'url: 'url(这里是图片链接) no-repeat 100%;background-size:cover;opacity:0.8;filter:alpha(opacity=80);'

打开布局文件 themes\yilia-plus\layout\layout.ejs，找到 <div class="left-col" ... </div> ，改成:

<div class="left-col" q-class="show:isShow"  style="background: <%= theme.style && theme.style.left_ground.enable && theme.style.left_ground.url ? theme.style.left_ground.url : theme.style.left_ground.default %>"><%- partial('_partial/left-col', null, {cache: !config.relative_link}) %></div>

打开样式文件 yilia-plus\source\main.b8fa34.css，搜索 .left-col ，修改背景颜色如下：

.left-col {/*background: #fff;*/background-color: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));width: 300px;position: fixed;opacity: 1;transition: all .2s ease-in;height: 100%;z-index: 999;overflow: hidden;overflow-y: auto;margin-bottom: 15px
}

2.3.右滑板块背景

打开主题配置文件 themes\yilia-plus\_config.yml，找到 style 配置项修改 slider：

style:# 右滑板块背景slider: 'linear-gradient(200deg,#ccc,#000)'

可以根据自己喜好调整

2.4.背景音乐插件

插入音乐视频前，先安装插件：

npm install hexo-tag-dplayer --save
npm install hexo-tag-aplayer --save

这里用网易云插件，打开一首歌，下方有 生成外链 提示，如：
点击该链接，然后复制生成的HTML代码，配置时用。：

在主题配置文件 _config.yml 找到

# 网易云音乐插件
music:enable: true# 播放器尺寸类型(1：短尺寸、2：长尺寸)type: 2id: 411907505# 网易云分享的音乐ID(更换音乐请更改此配置项)autoPlay: true# 是否开启自动播放# 提示文本(关闭请设置为false)text: '写一段说明文字'

在left-col.ejs文件中，添加配置：

<% if (theme.music && theme.music.enable){ %><%# "网易云音乐插件" %><%# "bottom:120px; left:auto;position:absolute;  width:85%" %><% var defaultHeight = theme.music.type == 1 ? '32' : '66'; %><% var defaultIframeHeight = theme.music.type == 1 ? '52' : '86'; %><div style="margin-right:10px;margin-left:0; padding:5px 0"><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="250" height="<%=defaultIframeHeight%>" src="//music.163.com/outchain/player?type=2&id=<%=theme.music.id||411907505%>&auto=<%=theme.music.autoPlay?1:0%>&height=<%=defaultHeight%>"></iframe></div><% if (theme.music.text || theme.music.text == null){ %><% var musicText = ( theme.music.text == null || theme.music.text == true ) ? "默认说明文字" : theme.music.text; %><p style="font-size: 12px;"><%-musicText%><p><% } %><% } %>

3.右边正文背景

和左侧边栏修改类似，打开文件 themes\yilia-plus\_config.yml，找到 style 配置项，作如下修改：

style:# 正文的背景颜色(IE兼容设置：opacity:0.8;filter:alpha(opacity=80);)article_ground: enable: truedefault: 'rgba(25, 25, 25, 0)'  #设置背景透明度url: 'url(图片链接地址) no-repeat 100%;background-size:cover;opacity:0.7;filter:alpha(opacity=70);'

打开布局文件 themes\yilia-plus\layout\layout.ejs，找到 <div class="mid-col" ... > ，修改:

<div class="mid-col" q-class="show:isShow,hide:isShow|isFalse" style="background: <%= theme.style && theme.style.article_ground.enable && theme.style.article_ground.url ? theme.style.article_ground.url : theme.style.article_ground.default %>">

如果想修改正文显示部分的样式，可以打开样式文件 yilia-plus\source\main.b8fa34.css，搜索 .article、.article-inner 、.archives-wrap 、 .archives .archive-article-title 等，修改字体、背景颜色：

.article {margin: 30px;position: relative;border: 1px solid #ddd;border-top: 1px solid #fff;border-bottom: 1px solid #fff;/*background: #fff;*/background: rgba(255,255,255,.5);transition: all .2s ease-in;
}
/*主页*/
.article-inner {/*border-color: #d1d1d1；*/background-color: rgba(193, 194, 195,0.6);
}
.left-col {background-color: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255,255, 0.5));width: 300px;position: fixed;opacity: 1;transition: all .2s ease-in;height: 100%;z-index: 999;overflow: hidden;overflow-y: auto;margin-bottom: 15px
}
/*归档*/
.archives-wrap {position: relative;margin: 0 30px;padding-right: 60px;border-bottom: 1px solid #eee;/*background: #fff;*/background-color: rgba(236, 236, 236,0.6);
}
/*字体*/
.archives .archive-article-title {font-size: 16px;font-weight: bold;/*color: #333;*//*transition: color .3s*/background: transparent;text-decoration: none;color: # af9;
}

4.动态线条背景

安装插件: npm install --save canvas-nest.js，或直接显式配置

主题配置，在文件 themes\yilia-plus\_config.yml 中，添加：

# 动态线条效果，会向鼠标集中
canvas_nest:enable: truecolor: '206, 187, 95'pointColor: '249, 72, 97'     opacity: '0.9'             count: '136'     zIndex: '-1'

找到文件 themes\yilia-plus\layout\layout.ejs，添加：

<% if (theme.canvas_nest){ %>
<script type="text/javascript"
color="0,0,255" opacity='0.9' zIndex="-1" count="300" src="<%- url_for('//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js') %>"></script>
<% } %>

5.雪花特效

在主题目录 source/lib 下新建 snow.js 文件，内容添加：

var snow = {info: {top: 0,left: 0,zIndex: 500,number: 70},down: function () {var f = window.innerWidth;var g = window.innerHeight;var d = document.createElement("canvas");d.style.position = "fixed";d.style.pointerEvents = "none";d.style.top = snow.info.top + "px";d.style.left = snow.info.left + "px";d.style.zIndex = snow.info.zIndex;d.width = f;d.height = g;document.body.appendChild(d);var c = [];for (var a = 0; a < snow.info.number; a++) {c.push({x: Math.random() * f,y: Math.random() * g,r: Math.random() * 4 + 1,n: Math.random() * 70})}var b = d.getContext("2d");var e = 0;setInterval(function () {b.clearRect(0, 0, f, g);b.fillStyle = "rgba(255, 255, 255, 0.6)";b.shadowBlur = 5;b.shadowColor = "rgba(255, 255, 255, 0.9)";b.beginPath();for (var j = 0; j < 70; j++) {var h = c[j];b.moveTo(h.x, h.y);b.arc(h.x, h.y, h.r, 0, Math.PI * 2, 0)}b.fill();e += 0.01;for (var j = 0; j < 70; j++) {var h = c[j];h.y += Math.cos(e + h.n) + h.r / 2;h.x += Math.sin(e) * 2;if (h.x > f + 5 || h.x < -5 || h.y > g) {c[j] = j % 3 > 0 ? {x: Math.random() * f,y: -10,r: h.r,n: h.n} : Math.sin(e) > 0 ? {x: -5,y: Math.random() * g,r: h.r,n: h.n} : {x: f + 5,y: Math.random() * g,r: h.r,n: h.n}}}},15)}
};
// yilia-plus主题已经集成了，可以直接用

布局文件layout.ejs，添加：

<% if (theme.snow){ %><script type="text/javascript" src="<%- url_for('lib/snow.js') %>"></script><script type="text/javascript" src="<%- url_for('lib/jquery-2.1.4.min.js') %>"></script><script>snow.down();$(window).resize(function() {$("canvas").css("z-index","500").remove();snow.down();});</script><% } %>

最后更新一下主题配置文件 _config.yml:

# 飘雪特效
# https://github.com/MlgmXyysd/snow.js
snow: true

可以参考这篇博客： hexo多种特效配置

【Hexo搭建个人博客】：yilia主题配置(二) - 背景图片相关推荐

通过Hexo搭建个人博客以及主题配置
这是蓝鸟x发布的第一篇文章前言直接在github page平台上托管我们的博客.这样就可以安心的来写作,又不需要定期维护,而且hexo作为一个快速简洁的博客框架,用它来搭建博客真的非常容易. He ...
Linux下使用 github+hexo 搭建个人博客04-next主题优化
上篇我们说了 hexo 的优化,针对的站点的优化. 本篇讲解 next 主题的优化,包括:使用语言.前端页面显示宽度.菜单.侧栏.头像.添加或取消动画效果.打赏功能等等. 让页面排版更符合我们所要的功 ...
给hexo搭建的博客更换主题
怎么给hexo搭建的博客更换主题首先要进入hexo的官网主题界面,找到你所想要的主题网址:https://hexo.io/themes/ 点进该主题,就会进入你选中的主题的拥有者的博客,你就可以看 ...
Github部署+Hexo搭建免费博客 next主题美化
前言工作学习中难免会遇到一些问题,有些问题比较复杂,第一遇到了百度许久,第二次遇到了还是要百度许久!想想倒不如遇到问题记下来写在博客上!以后好查阅.在CSDN上面看到hexo+github可以免费 ...
利用Hexo搭建个人博客－博客初始化篇
上一篇博文 <利用Hexo搭建个人博客-环境搭建篇> 中,我们讲解了利用Hexo搭建个人博客应该要配置哪些环境. 相信大家已经迫不及待的想要知道接下来应该要怎么把自己的博客搭起来了,下面, ...
Linux下使用 github+hexo 搭建个人博客01-hexo搭建
为什么要搭建自己的博客系统? 原因有好几个吧,归类如下: 1.自己搭建博客系统很有成就感,可以自己选定页面风格和页面排版: 2.自己搭建博客系统可以根据自己的需要添加各种插件功能,因此整体上比网上的第 ...
hexo博客yilia主题_缺失模块_解决方案
hexo博客yilia主题,左侧栏目有一个全部文章的按钮,刚开始开始报错缺失模块,如下图: 我解决了这个问题着实不容易饶了弯路,但是跟着提示步骤,其实很简单,走起: 1.查看node版本 win键+R ...
Github pages + Hexo 博客 yilia 主题使用畅言评论系统
文章首发地址:http://www.54tianzhisheng.cn/2017/04/13/Hexo-yilia-changyan/ , 转载请注明出处. 前言 Hexo的Yilia主题由于原来使用 ...
hexo博客yilia主题如何自定义个人博客的背景图片
hexo博客yilia主题博客背景的设置个人博客系列文章目录 hexo博客yilia主题所有文章模块缺失最新解决方案 hexo+yilia博客报错post.categories forEach ...
hexo搭建个人博客_hexo 搭建个人博客
hexo 搭建个人博客 hexo-theme-matery README Hexo BLOG 地址 iyuhp's blog 基本介绍本 blog 使用 HEXO 搭建, MATERY 作为主题, ...

【Hexo搭建个人博客】：yilia主题配置(二) - 背景图片