Hexo+Next+GitHub博客搭建超详细教程--美化篇（1)

一、添加背景

1. 添加动态背景

打开 ./themes/next/_config.yml 文件，在其中搜索 canvas_nest ，把 false 改为 true ,重新编译就可以看到出现了线条的动态背景。

进一步美化可以修改线条的参数：

打开 ./themes/next/source/lib/canvas-nest/canvas-nest.min.js 文件，查找以下参数

opacity -透明度，范围0-1，可以改为自己喜欢的参数，我这里设置的是0.8。

color -颜色，可以设定为自己喜欢的RGB颜色，我这里加入了随机颜色

将原来的“0,0,0” 改为 c() ，在紧接着的 function k() 之前添加以下代码

1	function c(){var r=Math.ceil(Math.random()256).toString();var g=Math.ceil(Math.random()256).toString();var b=Math.ceil(Math.random() * 256).toString();return r+","+g+","+b}

这个是生成随机颜色的函数，在 color 处调用。

count -数量，修改为自己喜欢的数量，数量越多，打开网页后占用的CPU就越高，我这里使用的是60。

2. 添加静态背景图

1）添加图片

打开 ./themes/next/source/scc/_custom/custom.styl 文件，在其中添加一下内容

//背景
body {
  background:url(https://images7.alphacoders.com/103/1030338.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 50% 50%;
}

其中的url可以换成自己喜欢的背景图。但是不建议使用较大的高清图片，否则就会像我这个一样打开很慢（逃

如果图片被缩放显示的位置不太理想，可以微调 background-position 里的两个数值，每次调整后重新编译查看效果。

2）修改透明度

同样在 custom.styl 文件内继续添加

// 修改主体透明度
.main-inner {
  background: #2078BF;
  opacity: 0.85;
}

// 修改菜单栏透明度
.header-inner {
  opacity: 0.85;
}

3）首页文章添加阴影效果

在 custom.styl 中继续添加

// 主页文章添加阴影效果
.post {
 margin-top: 30px;
 margin-bottom: 40px;
 padding: 5px;
 -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, 1);
 -moz-box-shadow: 0 0 5px rgba(202, 203, 204, 1);
}

得到的效果图如下

二、侧边栏美化

1. 添加作者头像并旋转

打开文件夹 ./themes/next/source/images ，将自己的头像放入其中

在主题配置文件中找到 avator 字段，取消注释，修改 avator.gif 为自己的头像的文件名

打开./themes/next/source/css/_common/components/sidebar/sidebar-author.styl，在将其中的 site-author-image 替换为以下代码：

.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);
  }
}

2. 修改标题颜色背景

依旧在 custom.styl 文件中，添加以下代码

//题头颜色（背景）
.site-meta {
  background:url(https://images5.alphacoders.com/103/1033113.png);
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 1;
  background-position: 50% 63%;
  height: 60px
}

//主标题颜色
.brand{
  color: #91FAFE
}

//副标题颜色
.site-subtitle{
  color: #91FAFE
}

//TOC目录默认全部展开
.post-toc .nav .nav-child {
  display: block;
}

背景的url可以改为自己的图片，同样建议不要太大，否则还是会像我这个一样打开很慢。

高度可以根据自己的副标题的文字多少调整至可以显示完整。我这里直接去掉了副标题，所以使用40px。

3. 添加阅读进度百分比

在主题配置文件中搜索 scrollpercent 将其值改为 true 即可。

改为侧边栏显示，可以把上面的 b2t 的值改为 true

三、添加右上角 “fork me on github”

点击这里或者这里挑选自己喜欢的样式，并复制代码。

打开 ./themes/next/layout/_layout.swig 文件，在 <div class="headband"></div> 下面粘贴；

将其中的 href 改为自己的GitHub地址。

顺便把 <div class="headband"></div> 这一行注释掉（前面加  ）这一行就是最上面的那个黑条。

我这里选择的是

 <!--fork me-->
<a href="https://github.com/Roc136" class="github-corner" aria-label="View source on GitHub">
   <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#fff; color:#151513; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true" z-index: 10>
     <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" opacity=0.5></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>

我顺便修改了透明度，在第一个 <path> 标签内添加 opacity=0.5 。

四、设置主页只显示缩略内容或描述内容

在主题配置文件中查找 auto_excerpt 将 enable 字段改为 true ，length 为显示的长度。

但是官方不推荐自动摘要长度，可以在文章中添加  来精确控制摘要长度。

此外，还可以再文章标题部分添加描述文字（description）。

当然这几种方法是互相不冲突的，我选择把自动控制摘要长度打开，这样发布文章的时候如果加了描述就显示描述内容，如果不加就使用自动控制摘要长度来显示摘要。

例如本文的标题部分为

---
title: 博客搭建超详细教程--美化篇（1)
copyright: true
description: 博客搭建好了，默认的效果自然是不能满足我们的需求的，所以还要对主题进行一些，美化。本文是我们美化的第一步，主要介绍背景和侧边栏的美化，添加右上角 “fork me on github” 已及如何在首页仅显示摘要内容。本文是在上一篇的基础上进行美化，还没有看上一篇的朋友可以先看上一篇。<br/> 博主使用环境：Windows版本：Win10 2004教育版，64位；Node.js 版本：12.18.0-x64
date: 2020-06-17 10:34:33
tags:
	- Hexo
	- blog
categories: blog
---