logo头像

技术引领生活!

hexo next主题美化闭坑教程

教程 2022/07/06

本文于 336 天之前发表，文中内容可能已经过时。

1修改文章底部带#号的标签

将 # 换成标签图标。
[NexT 7.1.0 Released]修改方法为：
打开模板/themes/next/layout/_macro/post.swig，搜索 rel=”tag”，进行如下修改：

修改前

1
2
3
4
5
<div class="post-tags">
            {%- for tag in post.tags.toArray() %}
              <a href="{{ url_for(tag.path) }}" rel="tag">{{ tag_indicate }} {{ tag.name }}</a>
            {%- endfor %}
          </div>

修改后

1
2
3
4
5
<div class="post-tags">
          {% for tag in post.tags.toArray() %}
            <a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>
          {% endfor %}
</div>

2页面阅读统计

1
2
3
4
5
6
7
8
busuanzi_count:      # 页面阅读统计
  enable: true    #设true 开启
  total_visitors: true     #总阅读人数 uv数
  total_visitors_icon: user  #阅读总人数的图标
  total_views: true  #总阅读次数 pv数
  total_views_icon: eye  #阅读总次数的图标
  post_views: true #开启内容阅读次数
  post_views_icon: eye #内容页阅读数的图标

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

首先安装依赖：

1
git clone https://github.com/theme-next/theme-next-fancybox3 themes/next/source/lib/fancybox

安装后打开主题配置文件，找到fancybox

fancybox: true

完毕

3添加站点访问人数和总访问量

修改next主题配置文件，搜索busuanzi_count

busuanzi_count:
enable: true
total_visitors: true
total_visitors_icon: user
total_views: true
total_views_icon: eye
post_views: true
post_views_icon: eye

4设置背景图片

  • 找到CSS存放位置：

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

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

插入博客背景的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的链接就是你想要替换的博客背景图片链接，建议上传到图床，然后粘贴上去

5设置所有边框为圆角

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

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

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

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

首先安装依赖：

1
git clone https://github.com/theme-next/theme-next-fancybox3 themes/next/source/lib/fancybox

安装后打开主题配置文件，找到fancybox

1
fancybox: true

完毕！

6hexo博客如何隐藏或者自定义图片名

开头会有一个[*****]，这个方括号里面填写的是默认的图片名称。如果你不修改的话，显示就是下面这样

如果你想隐藏图片名，直接把方括号里面的内容删去即可，或者你想自定义图片名，修改方括号内部文字即可。

7hexo框架next主题统计访问人数

网络有很多博客的统计方法 最方便的就是不蒜子 next主题的较高级的版本内置不蒜子

打开主题配置文件,路径如下

1
2
3
themes\next\_config.yml
#主题配置文件

搜索busuanzi或者找到它,大概在代码720行

1
2
3
4
5
6
7
8
9
busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  post_views: true
  post_views_icon: eye

如上设置,使用hexo s 命令发现访问数很多,在本地查看的变量是错误, hexo c ,hexo d之后打开网页,就能看到正确的访问人数

8hexo博客侧边栏增加微信公众号二维码

2.1 获取微信公众号二维码图片
从公众号管理后台获取公众号二维码图片，如下图所示。将选中的图片放入博客根目录下的./themes/next/source/images/目录中，并将图片改名为wechat_channel.png，注意不是放在public/images/目录。

2.2 设置next主题侧边栏文件

编辑themes/next/layout/_macro/sidebar.swig 文件，在里面搜索theme.back2top.enable，在这个if语句之前添加下面的代码

1
2
3
4
5
6
<div class="wechat_channel">
        <br>
        <!-- 这里添加你的二维码图片 -->
        <img src ="/images/wechat_channel.png">
        <!-- <span>公众号</span> -->
      </div>

如下图所示，

9hexo博客文章底部增加微信公众号二维码

获取微信公众号二维码图片

同2.1所示。

10在菜单中添加链接

编辑主题的_config.yml，在menu中的添加如下:

1
2
3
menu:
  resources: /resources || download

||之前的值是目标链接，之后的是分类页面的图标，图标名称来自于FontAwesome icon。若没有配置图标，默认会使用问号图标。

图标库

|| fa fa-folder-open fa加空格后面是图标的名字

http://www.fontawesome.com.cn/faicons/

主页样式修改教程

https://blog.z7sz.top/post/554e69bd.html

11给文章设置分类属性

首先打开需要添加分类的文章，在文章里添加上以下文案就设置好分类了

1
2
3
4
---
categories: 
- Android
---

如上categories:Android表示添加这边文章到 “Android” 这个分类下。
然后我们就可以在博客到分类里看到该分类了。

1
2
3
4
5
6
//设置二级分类
---
categories: 
- Android
- xxx
---

首先尝试了CodeHeap 的文章Hexo+NexT博客归档/标签/分类页美化,对分类栏进行了优化。发现只是增加了效果

然后修改 /themes/next/source/css/_common/components/pages/categories.styl 代码,将 .category-list-child 的 padding-left 属性10px改为 60px。

1
2
3
4
5
6
7
8
# 控制标签云的显示,与标签的颜色属性
tagcloud:
  min: 12
  max: 30
  start: "#e72c33"
  end: "#6f42c1"
  amount: 200

改之前

1
2
3
4
5
min: 12 # Minimun font size in px
 max: 30 # Maxium font size in px
 start: "#ccc" # Start color (hex, rgba, hsla or color keywords)
 end: "#111" # End color (hex, rgba, hsla or color keywords)
 amount: 200 # Amount of tags, change it if you have more than 200 tags

12Hexo+Next 添加菜单分类页面

在[Hexo+Next]主题下新增一个资源分类页面。

新建一个页面，命名为resources。

1
hexo new page "resources"

此时会在hexo > source文件夹中会生成一个resources文件夹。

编辑resources文件夹下的md页面

将类型设置为resources，主题将自动为这个页面显示所有分类。

1
2
3
4
title: 常用工具
date: 2017-12-14 13:05:38
type: "resources"
---

注意：如果有启用多说或者Disqus评论，默认页面也会带有评论。需要关闭的话，请添加字段comments并将值设置为false，如：

1
2
3
4
5
title: 常用工具
date: 2017-12-14 13:05:38
type: "resources"
comments: false
---

13 设置next主题文章底部

1
编辑themes/next/layout/_partials/post/post-copyright.swig文件，在底部的</div>上面增加下述代码，
1
2
3
4
5
<div class="wechat_channel">
  <br>
  <!-- 这里添加你的二维码图片 -->
  <img src ="/images/wechat_channel.png">
</div>

如下图所示

14设置hexo首页只显示部分摘要（不显示全文

方法一：写概述

在文章的front-matter中添加description，其中description中的内容就会被显示在首页上，其余一律不显示。

1
2
3
4
5
---
title: 让首页显示部分内容
date: 2020-02-23 22:55:10
description: 这是显示在首页的概述，正文内容均会被隐藏。
---

方法二：文章截断

在需要截断的地方加入：

1
2
<!--more-->

首页就会显示这条以上的所有内容，隐藏接下来的所有内容。
例如本文会显示到修改配置上面。

这个明显就方便很多，但当然有利有弊，比如开头都是废话首页看着就不是很好看，因此我一般会先选择方法二，如果感觉文章前面的写的不太好再用方法一。

15Hexo Next 修改超链接颜色

Hexo Next自带的超链接颜色为灰色加下划线，看起来不是特别明显，所以将其修改为蓝色。

1.在./themes/next/source/css/_common/components/post/post.styl里添加如下代码。

1
2
3
4
5
6
7
8
9
10
if hexo-config("custom_css.post_body_a.enable")
  .post-body 
    a:not(.btn){
      color: convert(hexo-config("custom_css.post_body_a.normal_color"));
      border-bottom: none;
      &:hover {
        color: convert(hexo-config("custom_css.post_body_a.hover_color"));
        text-decoration: underline;
      }
    }

a:not(.btn)避免修改首页的”阅读全文”按钮

2.在./themes/next/_config.yml里添加如下代码。

1
2
3
4
5
custom_css:
  post_body_a:
    enable: true
    normal_color: "#3296FA"
    hover_color: "#0593d3"

16Hexo nexT主题之文章置顶

Hexo默认只提供了按发布日期的排序，只好网上找了些资料修改。

原理：在Hexo生成首页HTML时，将top值高的文章排在前面，达到置顶功能。

修改Hexo文件夹下的node_modules/hexo-generator-index/lib/generator.js，在生成文章之前进行文章top值排序。

需添加的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
posts.data = posts.data.sort(function(a, b) {
    if(a.top && b.top) { // 两篇文章top都有定义
        if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
        else return b.top - a.top; // 否则按照top值降序排
    }
    else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）
        return -1;
    }
    else if(!a.top && b.top) {
        return 1;
    }
    else return b.date - a.date; // 都没定义按照文章日期降序排
});

原文地址https://zhwhong.cn/2017/03/23/deal-with-hexo-article-top-problem/

赏
微信打赏

赞赏是不耍流氓的鼓励

转载声明： 商业转载请联系作者获得授权,非商业转载请注明出处 © 大师兄
访问量:   |   访客数:
Copyright © 2023 | Powered by Hexo | Theme by Snippet