博客整容记

序

自从博客搭建(2017.8)至今，一直用着hexo的next主题，也从未想过做任何美化的工作。某次在搜索资料时，看到某位网友的个人博客，一时间惊为天人。卧槽，这也太好看了吧！我的博客简直就是个草窝啊我去。随后我就开始了我的博客美化工作。

前后对比

国际惯例先上图:

前后对比图

*博客美化前: *查看动图

*博客美化后: *查看动图

1 github跳转徽标
2 主题色由黑色变成蓝色(#49b1f5)
3 设置自己喜欢的背景图片,并设置透明背景
4 可以与鼠标互动的萌萌哒的妹子(live2d)
5 鼠标点击空白区域出现爱心(向上飘然后隐退)
6 修改文章列表分割线(丑丑的横线->透明间距)，也修改了文章的宽度(原先的空白区域太多，不美观)
7 使用圆形头像(鼠标放上去还有旋转动画哟)
8 文章阅读次数改为热度，添加字数统计，阅读时长

教程时间

1 设置github跳转徽标

修改文件位置:/themes/next/layout/_layout.swig

在<div class="headband"></div>下方添加如下代码:

<!-- 记得改成你的github地址 -->
<a href="https://github.com/relish-wang"> 
 <!-- 这里我的博客的主题色是#49b1f5, 你可以根据自己喜好设置颜色 -->
  <svg width="80" height="80" viewBox="0 0 250 250" style="fill: #49b1f5; color: #fff; position: absolute; top: 0; border: 0; right: 0" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg>
    <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
    <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px" class="octo-arm"></path>
    <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
  </svg>
</a>

github徽标

2 主题色由黑色变成蓝色

修改主题色需要修改有多处地方

1 github徽标颜色，见前文

2 修改网站头部颜色

在文件themes/next/source/css/_custom/custom.styl中添加:

// 修改网站头部颜色
.headband {
    height: 3px;
    background: #ff0000; // 主题色: 主页最上面的加载条颜色
}
.site-meta {
    padding: 20px 0;
    color: #fff;
    background: #00ff00; // 主题色: 主页title/subtitle上面的背景色
}

3 如果你还想把按钮的hover颜色的也改成主题色的话:

在/themes/next/source/css/_variables/custom.styl添加:
1
$btn-default-hover-bg = #49b1f5 // 主题色

3 设置自己喜欢的背景图片,并设置半透明背景

1 设置背景图片

在/themes/next/source/css/_custom/custom.styl中添加:

body {
    // 网站背景图
    background-image:url(../images/background.jpg);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
    background-size: cover;
}

2 设置透明度

2.1 修改主页文章列表的背景色

在themes/next/source/css/_custom/custom.styl中添加:

.post {
   margin-top: 0px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
   background: rgba(255,255,255,0.8); // 主页文章列表-文章item
}

文章列表透明度

2.2 修改侧边栏透明度

2.2.1修改themes/next/source/css/_schemes/Pisces/_layout.styl的以下节点下的background属性
- .header-inner节点: 由white改为rgba(255,255,255,0.75);(0.75表示透明度。0-全透明;1-不透明)
- .content-wrap节点：由white改为rgba(255,255,255,0);
- .sidebar节点: 由white改为rgba(255,255,255,0);
2.2.2 在同一个文件夹下_sidebar.styl的..sidebar-inner节点下的background属性由white;改成rgba(255,255,255,0.75);

侧边栏透明度

2.3 修改页面底部页数布局透明度 换页布局

在/themes/next/source/css/_common/components/pagination.styl中修改:

页面底部页数透明度

.pagination {
  margin: 8px 0px 0px; /* 底部换页布局 */
  padding: 10px 0px;
  background: rgba(255,255,255,0.75);
  text-align: center;
  border-top: 1px solid $pagination-border;
}

2.4 修改按钮的透明度

在themes/next/source/css/_common/components/post/post-button.styl中的.post节点的.btn的background属性修改为transparent;(当然如果你觉得白色按钮也挺美观的，也可以不改。)

按钮透明度

4 可以与鼠标互动的萌萌哒的妹子(live2d)

请参看开源项目hexo-helper-live2d

4.1 在项目根目录下运行

1	npm install --save hexo-helper-live2d

4.2 在根目录的_config.yml中添加以下配置

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false # 老版本需要设置为true，然后在页面中加入{{ live2d() }} <- 并不推荐
  log: false
  model:
    use: live2d-widget-model-shizuku # 设置添加的模型
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true # 是否在移动端页面上展示
  react:
    opacity: 0.7

4.3 安装你选择的模型的package

1	npm install live2d-widget-model-shizuku

4.4 跑起来你就能看到了

1	hexo clean && hexo g && hexo s

live2d

5 鼠标点击空白区域出现爱心(向上飘然后隐退)

5.1 保存love.js文件

将love.js文件保存到/themes/next/source/js/src/目录下, 文件名就取为love.js

5.2 引用love.js文件

在/themes/next/layout\_layout.swig文件末尾添加js文件引用:

1 2	<!-- 页面点击小红心 --> <script type="text/javascript" src="/js/src/love.js"></script>

小红心

6 修改文章列表分割线

在themes/next/source/css/_custom/custom.styl中添加以下代码:

// 主页文章添加阴影效果
.posts-expand {
    .post {
        margin-top: 0px; // 首页文章item的顶部margin
        margin-bottom: 20px; // 首页文章item的底部margin
        padding: 25px; // 文章内容距离边框的边距
        -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
        -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
    }
}

7 使用圆形头像+旋转动画

在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;
 
  /* 头像圆形 */
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;
 
  /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 
    (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/
 
 
  /* 鼠标经过头像旋转360度 */
  -webkit-transition: -webkit-transform 1.0s ease-out;
  -moz-transition: -moz-transform 1.0s ease-out;
  transition: transform 1.0s ease-out;
}
 
img:hover {
  /* 鼠标经过停止头像旋转 
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/
 
  /* 鼠标经过头像旋转360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}
 
/* Z 轴旋转动画 */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(-360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

圆形头像旋转

8 文章阅读次数改为热度，添加字数统计，阅读时长

要不是这次想着要给博客整容，我甚至都不知道我早年使用的不蒜子早就换了域名了。之前就已经添加了不蒜子计数，我这次只能算修复, 就不赘述添加过程了。

如何修复:

将/theme/next/layout/_third-party/analytics/busuanzi-counter.swig中不蒜子的域名dn-lbstatics.qbox.me修改为busuanzi.ibruce.info;

其他未被我采用的美化方案

1 动态背景线条

1 添加功能

在themes/next/layout/_layout.swig中的</body>标签前添加以下代码:

1
2
3

{% if theme.canvas_nest %}
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

nest

2 启用功能

将/themes/next/_config.yml中的canvas_nest属性改为true（如果之后不想用改成false就行了）:

nest_config

3 效果图

效果图

致谢

开源项目: EYHN/hexo-helper-live2d
不蒜子官网