我的个人博客之旅：从jekyll到hexo

/* 背景图垂直、水平均居中 */ background-position: center center; /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */ background-attachment: fixed; /* 让背景图基于容器大小伸缩 */ background-size: cover; /* 设置背景颜色，背景图加载过程中会显示背景色 */ background-color: rgba(0, 0, 0, 0.5); }

  其中的css样式属性都可以根据你的自定义图片来更改，以达到最佳的效果。

给侧边栏添加背景图片

  在theme/next/source/css/_custom文件夹下打开custom.styl文件，往里面添加以下代码：

#sidebar {
            background:url(/images/sidebar.jpg);
            background-size: cover;
            background-position:center;
            background-repeat:no-repeat;
            p,span,a {color: rgba(255, 255, 255, 1);}
}

文字背景色以及半透明的设置

  在theme/next/source/css/_custom文件夹下打开custom.styl文件，往里面添加以下代码：

.content { border-radius: 20px; padding: 30px 60px 30px 60px; background:rgba(255, 255, 255, 0.8) none repeat scroll !important; }

  其中border-radius是给文章背景设置圆角，margin-top是设置文章到顶部的距离，其中属性可根据自己的需要进行调整。

评论(来必力)添加背景色

  在theme/next/source/css/_custom文件夹下打开custom.styl文件，往里面添加以下代码：

#lv-container { border-radius: 20px; padding: 30px 60px 30px 60px; background:rgba(255, 255, 255, 0.8) none repeat scroll !important; }

  和上面一样，背景色和圆角可自己调整更改。

实现点击出现桃心效果

  在网址输入如下

http://7u2ss1.com1.z0.glb.clouddn.com/love.js

  然后将里面的代码copy一下，新建love.js文件并且将代码复制进去，然后保存。将love.js文件放到路径/themes/next/source/js/src里面，然后打开\themes\next\layout_layout.swig文件,在末尾（在前面引用会出现找不到的bug）添加以下代码：

<script type="text/Javascript" src="/js/src/love.js">script>

侧边栏头像旋转

  打开\themes\next\source\css_common\components\sidebar\sidebar-author.styl，在里面添加如下代码：

.site-author-image { display: block; margin: 0 auto; padding: $site-author-image-padding; max-width: $site-author-image-width; height: $site-author-image-height; border: $site-author-image-border-width solid $site-author-image-border-color; /* start*/ border-radius: 50% webkit-transition: 1.4s all; moz-transition: 1.4s all; ms-transition: 1.4s all; transition: 1.4s all; /* end */ }

/* start */
.site-author-image:hover { background-color: #55DAE1; webkit-transform: rotate(360deg) scale(1.1); moz-transform: rotate(360deg) scale(1.1); ms-transform: rotate(360deg) scale(1.1); transform: rotate(360deg) scale(1.1); }
/* end */

设置鼠标划入侧边栏才显示站点信息：

设置自定义div

  在theme/next/layout/_macro文件夹下打开sidebar.swig文件，找到以下代码行的位置：

<nav class="site-state motion-element">

  在其上添加以下代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js">script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js">script>
<script type="text/Javascript"> $("#sidebar").hover(function(){ $("#mydivshow").velocity('stop').velocity({opacity: 1}); },function(){ $("#mydivshow").velocity('stop').velocity({opacity: 0}); }); script>
<div id="mydivshow" class="mydivshow">

  然后找到代码行：

section>
{% if display_toc and toc(page.content).length > 1 %}

<section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">

  在此的上方添加一个，如下所示：

div>

section>
{% if display_toc and toc(page.content).length > 1 %}

  <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
    <div class="post-toc">

自定义区域的初始化设置

  在theme/next/source/css/_custom文件夹下打开custom.styl文件，向里面增添下列代码：

#mydivshow{opacity: 0;}

注：具体代码添加位置以及代码里的section.site-overview可以自己修改，

是控制显示区域，section.site-overview则是用户鼠标滑入划出时的触发事件区域。

自定义音乐播放器

  描述：本站所用的音乐播放器是由DIYgod所制作的APlayer，其详细资料可参见这里。

安装APlayer插件

$ npm install aplayer --save

  安装完后在node_modules目录下找到APlayer.min.js文件，将其复制到theme/next/source/js/src/目录下。

生成音乐播放器

  在你想要加入音乐播放器的地方插入以下代码，本站把他放在了侧边栏里，具体操作如下。

  打开theme/next/layout/_custom/文件夹下的sidebar.swig文件，向其中添加以下代码：

<div id="player1" class="aplayer">div>
<script src="/js/src/APlayer.min.js">script>
<script type="text/Javascript"> var ap = new APlayer({ element: document.getElementById('player1'), // Optional, player element narrow: false, // Optional, narrow style autoplay: false, // Optional, autoplay song(s), not supported by mobile browsers showlrc: 0, // Optional, show lrc, can be 0, 1, 2, see: ###With lrc mutex: true, // Optional, pause other players when this player playing theme: '#e6d0b2', // Optional, theme color, default: #b7daff mode: 'random', // Optional, play mode, can be `random` `single` `circulation`(loop) `order`(no loop), default: `circulation` preload: 'metadata', // Optional, the way to load music, can be 'none' 'metadata' 'auto', default: 'auto' listmaxheight: '513px', // Optional, max height of play list music: { // Required, music info, see: ###With playlist title: '你曾是少年', // Required, music title author: 'cover', // Required, music author url: 'http://mp3.qqmusic.cc/yq/102426570.mp3', // Required, music url pic: '/images/visitor.jpg', // Optional, music picture } }); script>

  这里的歌曲url必须是在线音乐，当时现在大部分播放器都不会曝露出真实的歌曲播放地址，找资源很是费劲。这里给大家推荐一个解析平台，大部分的qq音乐还是可以解析出来或者直接在该平台上找到播放链接的。大家可以写多个music结构，以此来添加多个音乐。

  当然，我们还可以通过添加网易云音乐外链的方式在我们的博客中添加音乐。打开theme/next/layout/_custom/文件夹下的sidebar.swig文件，向其中添加以下代码：

<div id="music163player">
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=458789090&auto=0&>iframe>
div>

  替换上述代码中的iframe标签之间的内容，就可以替换不同的音乐进行播放了。网易云音乐的歌单也可以生成外链，前提是歌单里的歌曲都有版权哦~

自定义播放器样式

  包含颜色更改，列表歌曲信息的排版修改。

  在theme/next/source/css/_custom文件夹下打开custom.styl文件，往里面添加以下代码：

.aplayer-list ol li:hover {   /*列表悬停颜色*/
                  background:rgba(255, 255, 255, 1) none repeat scroll !important;}
.aplayer-list ol li {   /*列表底色*/
                        background:rgba(255, 255, 255, 1);}
.aplayer-list-light {   /*列表播放歌曲颜色*/
                      background:rgba(255, 255, 255, 1) none repeat scroll !important;}
#player1 {    /*边框样式*/
          border-radius: 6px;
          div,ol {border-radius: 6px;}
        }
#player1 *{color: rgba(255, 255, 255, 1);}    /*字体颜色*/
/*列表歌曲信息的排版*/
.aplayer-list-index{float:left;}
.aplayer-list-title{float:left;}
.aplayer-list-author{float:right;}

自定义萌萌哒音乐播放控制边栏

  这一步要在自定义音乐播放器的配置完成之后才能进行，因为aplayer-controler依赖于aplayer来实现播放功能。

安装aplayer-controler插件

npm install aplayer-controler --save

添加js代码

  安装APlayer-Controler的js文件：APlayer-Controler.js

  将其放入theme/next/source/js/src下。

创建按钮区域

  在theme/next/layout/_custom/文件夹下新建一个myapcontroler.swig的文件。向其中添加以下代码：

<script src="/js/src/Aplayer-Controler.js">script>
<div id="AP-controler">div>
<script type="text/Javascript"> var myapc=new APlayer_Controler({ APC_dom:$('#AP-controler'), aplayer:ap, //此为绑定的aplayer对象 attach_right:true, position:{top:'300px',bottom:''}, fixed:true, btn_width:100, btn_height:120, img_src:['http://oty1v077k.bkt.clouddn.com/bukagirl.jpg', 'http://oty1v077k.bkt.clouddn.com/jumpgirl.jpg', 'http://oty1v077k.bkt.clouddn.com/pentigirl.jpg', 'http://oty1v077k.bkt.clouddn.com/%E8%90%8C1.gif'], img_style:{repeat:'no-repeat',position:'center',size:'contain'}, ctrls_color:'rgba(173,255,47,0.8)', ctrls_hover_color:'rgba(255,140,0,0.7)', tips_on:true, tips_width:140, tips_height:25, tips_color:'rgba(255,255,255,0.6)', tips_content:{}, timeout:30 }); script>

将控制按钮加入body页面

  在theme/next/layout文件夹下打开_layout.swig文件，在前添加以下代码：

{% include '_custom/myapcontroler.swig' %}

  到此，自定义音乐播放控制边栏就基本完成，完成整个配置需要根据自己的主题背景进一步修改完善。

---

本教程到此结束，欢迎订阅、关注、收藏、评论、点赞哦～～(￣▽￣～)～

完的汪(∪｡∪)｡｡｡zzz