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

发表于 更新于 分类于 热度： ℃ Valine：
本文字数： 4.5k 阅读时长 ≈ 4 分钟

写在最前面

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

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

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

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

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

关于Next主题安装

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

下载next

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

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

启用next

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

1
theme: next

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

验证主题

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

1
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 前面注释 # 去除即可。

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

教程开始

设置背景图片

  • 找到CSS存放位置：

image-20200712232432523

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

  • 打开主要CSS文件 main.styl ，引入_other.styl CSS样式文件，添加如下代码：

    1
    2
    //个人添加
    @import "_other.styl"

    image-20200712232805384

  • 插入博客背景的CSS样式到_other.styl

    1
    2
    3
    4
    5
    6
    7
    8
    //背景图片
    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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//博客内容透明化
//文章内容的透明度设置
.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：

image-20200714124506874

完毕！

方法二：适用老版本next

  • 找到作者头像CSS样式位置：

    \hexo\themes\next\source\css\_common\outline\sidebar\sidebar-author.styl

  • 添加如下代码到.site-author-image这个样式的括号里面

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    //头像圆形
    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;

  • 括号外面添加：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    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);
      }
    }

  • 如图所示：

    image-20200712235101730

效果完成。

为Hexo增加algolia搜索功能

传送门：为Hexo增加algolia搜索功能

Next主题启用文章置顶功能

传送门：Hexo中next主题启用文章置顶功能

添加canvas-nest几何条纹动态背景

传送门：Hexo博客添加canvas-nest几何条纹动态背景

关于Hexo+next主题的SEO优化

Typora+Picgo+七牛云实现图片快速上传

Hexo+next主题自定义友情链接页面

hexo+next设置网站运行时间

首页顶部留白

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

效果：

image-20200728123513817

加上如下代码：

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

首页banner渐变色

效果：

image-20200728123524548

修改_other.styl

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

颜色可以自己选

设置所有边框为圆角

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

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

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

阅读人数改为热度

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

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

1
2
3
4
5
6
7
8
9
10
{# 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 %}

在 后面加上 ℃

image-20200729233056695

2.找到\themes\next\languages\zh-CN.yml

更改views的中文译名为 热度

image-20200729233025868

SEO优化：Hexo-abbrlink插件生成永久固定链接

Next7.8主题更换思源宋体

hexo删除algolia搜索增加本地搜索功能

Coding Studio实现hexo的云环境部署

给hexo博客添加fancybox图片灯箱功能

hexo添加相关文章功能

相关文章推荐