博客美化[基于NEXT主题]

最近两天搭建了博客嘛，然后就是没有先开始学习，而是先弄了一下博客的美化，其实也都是从网上扒下来的东西了，但是还是记录一下吧。

为博客添加 Github 右上角链接

有两种样式的链接，一种是[文字样式](https://study-image-1259719447.cos.ap-chengdu.myqcloud.com/GithubFMOG%E6%96%87%E5%AD%97.png)的

喜欢相应的样式可以去上面两个链接里面选择不同颜色，复制代码黏贴到themes/next/layout/_layout.swig文件中的 class="headband"的下面,把href修改为你自己的Github链接即可。

为博客添加背景图片

一般我们都会为自己的博客添加一个好看的背景图片，可以将背景图片放入themes\next\source\images，然后修改themes\next\source\css\_custom\custom.styl文件添加下面的代码(直接添加即可)：

body {
    background:url(/images/yourbackground.jpg);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
}

将url修改为自己的图片的位置和名字即可，也可以在url之中插入一个图片的外链也可以达到相同的效果。

设置博客的动态背景

在next主题的预置动态背景中有四种不同的样式，可以根据自己的喜好为博客添加动态背景。

图中显示的是四种不同的动态背景，可以通过将false修改为ture来激活动态背景。也可以修改/themes/next/layout/_layout.swig文件来修改动态背景的样式，在< /body >之前添加如下代码(记得去掉script<>两端的空格和后面的空格[为了显示而加])即可：

{% if theme.canvas_nest %}
		< script type="text/javascript"
		color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-
		nest.min.js" >< /script >
	{% endif %}

修改color改变线条的颜色
修改opacity改变线条的透明度(默认0.5)[范围0-1]
修改count改变线条的数目
修改zIndex：背景的z-index属性，css属性用于控制所在层的位置, 默认: -1

设置博客博主头像

在next主题的配置文件_config.yml中将avatar的注释去掉，然后在avatar之后加上你要作为投降的图片的本机地址或者URL即可：

avatar: 本机图片位置/图片URL外链

修改博客的文章的透明度

修改themes/next/source/css/_schemes/Pisces/_layout.styl文件中的所有的background可以修改文章的面板的颜色，将background设置为None即可为透明。

修改博客底部标签#为一个书页图标

修改模板/themes/next/layout/_macro/post.swig，搜索 rel="tag">#，将 # 换成< i class="fa fa-tag" >< /i >即可修改。

将文字中的代码引用设置为其他颜色

打开\themes\next\source\css_custom\custom.styl,向里面添加如下代码：

// Custom styles.
code {
    color: #2ffe30;
    background: #fbf7f8;
    margin: 2px;
}
// 大代码块的自定义样式
.highlight, pre {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
}
.highlight, code, pre {
    border: 1px solid #d6d6d6;
}

可以自行的调整参数满足自己的要求

修改代码块使其更加舒服

找到了一个博主写的关于如何修改代码块使其更加美化的方法，而且非常的详细，所以自己也就不多写了，转载了[博文](https://eggsywelsh.github.io/2016/11/10/hexo%E4%BB%A3%E7%A0%81%E9%AB%98%E4%BA%AE/)

上面两个是需要的东西

添加鼠标点解特效

这里主要还是参考了别人的代码，在anime官网也可以搜到具体的[fireworks的代码](https://codepen.io/Koinu/pen/NABpjL)，但是我加入进去并不能够实现，应该是_layout.swig里面的配置不太合适，但是用[这个文章](https://blog.rayboo.top/2018/10/29/hexo-nexT-%E4%B8%BB%E9%A2%98%E8%AE%BE%E7%BD%AE%E9%BC%A0%E6%A0%87%E7%82%B9%E5%87%BB%E5%8A%A8%E7%94%BB/)中的也可以实现同样的效果.

添加文章置顶

为博客的文章添加置顶还是有必要的，可以方便查看的嘛最少，主要有两个步骤，还有一个为了优化界面的步骤。

安装库

nmp uninstall hexo-generator-index --save

nmp install hexo-generator-index-pin-top --save

我在添加的时候会报错，显示数据库异常(就像我安装Aplayer的时候也是，但是可以使用)，而且之后在上传到github的时候也会显示，但是我还是硬着头皮上传了，目前来说还是能用的，可以完成文章置顶的效果。

设置文章置顶

只需要在文章的front-matter中加入top: ture即可达到置顶效果。

---
title: '博客美化[基于NEXT主题]'
date: 2019-07-03 23:29:40
categories: Hexo
tags: 博客美化
top: ture
---

这样既可以使某一个文章置顶了。

为置顶文章添加图标

将blog\themes\next\layout_macro文件夹下的post.swig文件的 < div class=“post-meta” >下面加入如下代码：

{% if post.top %}
		< i class="fa fa-thumb-tack">
		< font color="green">Topping
		< span class="post-meta-divider">|
	{% endif %}

要去掉其中<>之前的空格，因为为了显示出来加了空格。

参考了的好的文章

[Hexo优化汇总](https://qianling.pw/hexo-optimization/)

Hexo博客Next主题美化

Hexo博客鼠标点击特效fireworks