Hexo+Next7.X 博客美化教程合集

Heson

发布于 2020-09-21 18:38:14

1.5K0

发布于 2020-09-21 18:38:14

文章被收录于专栏：黑石博客黑石博客

Hexo+Next7.X 博客美化教程合集

Heson

hexo

发布于：2020年7月12日

次浏览

写在最前面

这两天刚认识Hexo博客系统，人就像着了魔一样，跟当年倒腾WordPress博客一样，每天想着怎么能让自己的博客更好看、更实用、更有人气。

要想达到上面的要求，首先得从美化自己的博客开始…

话说网上教程也特别多，在此我想做个合集，一来作为自己的记录，二来能给后来的朋友留点东西，把自己在倒腾过程中踩得坑也一并说清楚，让后面的童鞋更快的入门。

（关于博客搭建→点击传送门：用hexo+github pages+独立域名搭建个人博客）

此教程贴持续更新，没写完的地方请见谅。

关于Next主题安装

next主题的官网地址：https://theme-next.iissnan.com/

下载next

在终端窗口下，定位到 Hexo 站点目录下。使用 Git checkout 代码：

$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

启用next

与所有 Hexo 主题启用的模式一样。当克隆/下载完成后，打开 站点配置文件，找到 theme 字段，并将其值更改为 next。

theme: next

到此，NexT 主题安装完成。下一步我们将验证主题是否正确启用。在切换主题之后、验证之前，我们最好使用 hexo clean 来清除 Hexo 的缓存。

验证主题

首先启动 Hexo 本地站点，并开启调试模式（即加上 --debug），整个命令是 hexo s --debug。在服务启动的过程，注意观察命令行输出是否有任何异常信息，如果你碰到问题，这些信息将帮助他人更好的定位错误。当命令行输出中提示出：

INFO  Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

主题设定

Scheme 是 NexT 提供的一种特性，借助于 Scheme，NexT 为你提供多种不同的外观。同时，几乎所有的配置都可以在 Scheme 之间共用。目前 NexT 支持三种 Scheme，他们是：

Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
Mist - Muse 的紧凑版本，整洁有序的单栏外观
Pisces - 双栏 Scheme，小家碧玉似的清新
Gemini - 我现在用的这款

Scheme 的切换通过更改 主题配置文件，搜索 scheme 关键字。你会看到有三行 scheme 的配置，将你需用启用的 scheme 前面注释 # 去除即可。

# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

教程开始

设置背景图片

找到CSS存放位置：

新建 _other.styl 文件，用来存放自己后面添加的CSS样式

打开主要CSS文件 main.styl ，引入_other.styl CSS样式文件，添加如下代码： //个人添加 @import "_other.styl"

插入博客背景的CSS样式到_other.styl //背景图片 body { background:url(https://pic.heson10.com/img/image-20200712231958010.png); background-repeat: no-repeat; background-attachment:fixed; background-size: cover; background-position:50% 50%; } 代码中url的链接就是你想要替换的博客背景图片链接，建议上传到图床，然后粘贴上去。

设置半透明效果

插入半透明的CSS样式到_other.styl

//博客内容透明化
//文章内容的透明度设置
.content-wrap {
  opacity: 0.9;
}

//侧边框的透明度设置
.sidebar {
  opacity: 0.9;
}

//菜单栏的透明度设置
.header-inner {
  background: rgba(255,255,255,0.9);
}

//搜索框（local-search）的透明度设置
.popup {
  opacity: 0.9;
}

0.9代表透明度为90%，这个可以自己设置，当然不要设置的太低，要不文章看不见了。

博主头像实现圆形并旋转360°

方法一：适用next7.x 以上（2020.7.14更新）

直接在主题配置文件里面找到rounded和rotated设置成true：

完毕！

方法二：适用老版本next

找到作者头像CSS样式位置： \hexo\themes\next\source\css\_common\outline\sidebar\sidebar-author.styl
添加如下代码到**.site-author-image这个样式的括号里面** //头像圆形 border-radius: 50%; webkit-border-radius: 1.4s all; moz-transition: 1.4s all; ms-transition: 1.4s all; transition: 1.4s all; //鼠标经过头像旋转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); } }
如图所示：

效果完成。

首页顶部留白

顶部留白个人感觉更好看，同样找到_other.styl（之前自己加的，可以看此篇文章开头）

效果：

加上如下代码：

//首页顶部留白
.container{margin-top:10px;}

首页banner渐变色

效果：

修改_other.styl

//首页banner渐变色
.site-brand-container {
    background: linear-gradient(200deg, #2e80a5, #0c0c0b);
}

颜色可以自己选

设置所有边框为圆角

打开文件，路径：\themes\next\source\css_variables\Gemini.styl ，添加以下代码：

ps：Gemini是我用的样式，用哪个样式修改哪个文件

// 修改主题页面布局为圆角
$border-radius-inner = 15px 15px 15px 15px;
$border-radius = 15px;

阅读人数改为热度

文章阅读人数是由LeanCloud提供的PageView服务。在主题配置里面设置好参数后，可直接开启。

1.找到themes\next\layout\_macro\post.swig文件，找到代码：

{# LeanCloud PageView #}
          {%- if theme.leancloud_visitors.enable or (theme.valine.enable and theme.valine.appid and theme.valine.appkey and theme.valine.visitor) %}
            <span id="{{ url_for(post.path) }}" class="post-meta-item leancloud_visitors" data-flag-title="{{ post.title }}" title="{{ __('post.views') }}">
              <span class="post-meta-item-icon">
                <i class="fa fa-eye"></i>
              </span>
              <span class="post-meta-item-text">{{ __('post.views') + __('symbol.colon') }}</span>
              <span class="leancloud-visitors-count"></span>
               </span>
          {%- endif %}

在后面加上 ℃