Hexo 搭建博客（三）

最新推荐文章于 2024-07-18 15:11:39 发布

sever默默

最新推荐文章于 2024-07-18 15:11:39 发布

阅读量2k

点赞数 2

本文链接：https://blog.csdn.net/baidu_35145586/article/details/89033631

版权

本文详细介绍了如何使用Hexo搭建个人博客，并重点讲解了Next主题的安装与配置，包括侧边栏美化、统计功能、评论系统、阅读数统计等，帮助读者打造独特、功能丰富的博客空间。

摘要由CSDN通过智能技术生成

上一篇文章，介绍了如何利用 hexo+github pages 搭建个人博客。那么这篇文章则以我的博客为例详细教你打造个性超赞博客 Hexo+GitHubPages+NexT 的主题。
我这里选择了 GitHub 上面最多人用的一款主题：Next
在这里插入图片描述

安装 next 主题

第一步：下载next主题

进入博客 hexo 文件夹里面空白处 D:\blog\hexo，鼠标右键选择 Git Bash here 运行下述命令：git clone https://github.com/iissnan/hexo-theme-next themes/next然后回车。这样next主题就会下载到themes文件夹里面了。（这个命令窗口不要关掉，后面还要用）

git clone https://github.com/iissnan/hexo-theme-next themes/next

在这里插入图片描述

第二步：设置 _config.yml 文件

用 sublime 打开 D:\blog\hexo _config.yml 文件，找到 theme 字段，修改参数为：theme: next，(注意：后面有一个空格)
修改完，保存。

第三步：本地测试

在刚才的命令窗口分别输入以下代码：
第一个命令： hexo clean 然后按回车 ,等一会，出现 $ 符号
第二个命令： hexo s -g 然后按回车 ,等一会，出现:
打开浏览器访问 :http://localhost:4000，查看一下新的博客页面
在这里插入图片描述
可以看到，博客页面非常简洁，（或许和你实际看到的，略有不同，没有关系，后面我们还要进一步美化）。
这款主题包含4种风格，默认的是Muse，也可以尝试其他风格。具体操作：
打开 D:\blog\hexo_config.yml，定位到 Schemes，想要哪款主题就取消前面的#，我的博客使用的是 Gemini

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

好了，我们已经看到基本效果了，现在转到命令窗口，Ctrl+C 停止运行。（窗口不用关掉，后面还要用）

首先更换语言成中文，点击blogs文件夹（也就是你博客项目的根目录文件夹）中的_config,yml配置文件，进行修改：
在这里插入图片描述

如果要用记事本编辑，一定要另存为，编码选 utf-8 。建议用：notepad 或者 subline text。

修改完成后说明主题已经换成next主题，并且样式为Gemini样式，接下来在blogs博客目录下，使用Git 调试运行看看效果：
hexo c //清空缓存
hexo s -g
在这里插入图片描述

浏览器：http://localhost:4000/，效果展示如下：

下面就需要根据个人需求，对该blog主题进行装修了······

侧边栏美化

在这里插入图片描述
添加博客名字和slogan
修改站点文件如下：
文件路径：hexo_config.yml （hexo 的配置文件）

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: python爱好者    # 更改为你自己的
subtitle: Bright Future
description: Stay Hungry,Stay Foolish
keywords: python,hexo
author: 爱好者
language: zh-CN
timezone:

新建标签、分类、关于页面

第一个：hexo new page “tags” 然后回车
第二个：hexo new page “categories” 然后回车
第三个：hexo new page “about” 然后回车
然后，打开 D:\blog\hexo\source 就可以看到上述三个文件夹。
要添加关于博主的介绍，只需要在 D:\blog\hexo\source\about\index.md 文件中，用 markdown 书写内容即可.
在这里插入图片描述

侧栏社交链接图标设置

可以添加你的github、Email、知乎、简书等社交网站账号。
文件路径：hexo\themes\next_config.yml (主题next 的配置文件)

# ---------------------------------------------------------------
# Sidebar Settings
# ---------------------------------------------------------------
# Social Links.
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimeter is the target permalink.
# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded.
social:
  GitHub: https://github.com/jaybinkoo || github
  E-Mail: mailto:jaybin@aliyun.com || envelope
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:jaybinkoo?call|chat || skype

添加侧栏友情链接

在主题配置文件 _config.yml中Sidebar Settings部分添加字段：网址可以自定义
在这里插入图片描述
Hexo c
Hexo s –g
看下效果：

添加头像并设置随光标转动

博客添加头像有两种方法：
第一种是放在本地文件夹中：D:\blog\hexo\public\uploads，并且命名为avatar.jpg。
第二种是将图片放在七牛云中，然后传入链接。推荐这种方式，可以加快网页打开速度。
打开站点文件，搜索 avatar ,在下面添加下面代码：（我选择了第二种）
在这里插入图片描述
Hexo c
Hexo s –g
看下效果：

页脚美化

在这里插入图片描述
这些都很简单，每个true /false注释写的很清楚，看不懂英文的自己复制下来翻译一下。
效果如下：（页脚）

隐藏powered By Hexo/主题

在这里插入图片描述
themes\next\layout_partials\ footer.swig
按下图位置进行注释掉，

页脚显示总访客数和总浏览量

在这里插入图片描述
在themes\next\layout_partials\ footer.swig，文件首行添加如下代码：

<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

#接着修改相应代码：
# 添加总访客量
<span id="busuanzi_container_site_uv">
  访客数:<span id="busuanzi_value_site_uv"></span>人次
</span>

{% if theme.footer.powered %}
  <!--<div class="powered-by">{#
  #}{{ __('footer.powered', '<a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a>') }}{#
#}</div>-->
{% endif %}

# 添加'|'符号
{% if theme.footer.powered and theme.footer.theme.enable %}
  <span class="post-meta-divider">|</span>
{% endif %}


{% if theme.footer.custom_text %}
  <div class="footer-custom">{#
  #}{{ theme.footer.custom_text }}{#
#}</div>
{% endif %}

# 添加总访问量
<span id="busuanzi_container_site_pv">
   总访问量:<span id="busuanzi_value_site_pv"></span>次
</span>

# 添加'|'符号
{% if theme.footer.powered and theme.footer.theme.enable %}
  <span class="post-meta-divider">|</span>
{% endif %}

# 添加博客全站共：
<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>

以上代码#开头的中文要删掉，否则都会显示出来

显示统计字数和估计阅读时长

修改主题文件 _config.yml ：
文件位置：blogs_config.yml
Post wordcount display settings
Dependencies: https://github.com/willin/hexo-wordcount
显示统计字数和估计阅读时长
注意：这个要安装插件，先进入站点文件夹根目录
然后：npm install hexo-wordcount --save

post_wordcount:
  item_text: true
  wordcount: true
  min2read: true
  totalcount: false
  separated_meta: false

设置阅读全文：

在写博客的时候，添加
即从该处分开，隐藏后面文字，需点击“阅读全文”查看
在这里插入图片描述

添加标签

在写文章时，.md文件
在这里插入图片描述
效果

将# 改成标签的图标

具体实现方法

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

主题配置文件中，添加网站版权信息

在这里插入图片描述

生成“分类”页并添加tpye属性

打开命令行，进入博客所在文件夹。执行命令

$ hexo new page categories

成功后会提示：

INFO  Created: ~/Documents/blog/source/categories/index.md

根据上面的路径，找到index.md这个文件，打开后默认内容是这样的：
在这里插入图片描述
添加type: "categories"到内容中，添加后是这样的
标签文件也一样，需要添加 type: tags 才可以跳转到标签页面

打开这几个开关，左侧边栏会出现这种效果：

在这里插入图片描述

在next主题的配置文件里，设置打赏功能

在这里插入图片描述

文章末尾添加“本文结束”标记

在这里插入图片描述
新建 passage-end-tag.swig 文件
在路径\themes\next\layout_macro中添加passage-end-tag.swig文件，其内容为：

{% if theme.passage_end_tag.enabled %}
<div style="text-align:center;color: #ccc;font-size:14px;">
------本文已触底，感谢您的阅读！一看就知道今天的你，比昨天的你更好一些，喵~<i class="fa fa-paw"></i>  ------</div>
{% endif %}

修改 post.swig 文件
在\themes\next\layout_macro\post.swig中，post-body之后，post-footer之前添加如下代码：

<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

在主题配置文件中添加字段
在主题配置文件 _config.yml中添加以下字段开启此功能：

# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

完成以上设置之后，在每篇文章之后都会添加“本文结束”标记。
该功能简易添加方法参见：https://github.com/iissnan/hexo-theme-next/issues/1039

添加网站已运行时间

在这里插入图片描述
在themes/layout/_parrials/footer.swing 中添加
把代码放在你想要的位置，插入位置不同，效果显示的位置也会不同。若想要显示为简体或者英文，只要把对应的文字修改就行。

<!-- 网站运行时间的设置 -->
<span id="timeDate">载入天数...</span>
<span id="times">载入时分秒...</span>  Sometimes your whole life boils down to one insame move.
<script>
    var now = new Date();
    function createtime() {
        var grt= new Date("03/09/2019 13:14:21");//此处修改你的建站时间或者网站上线时间
        now.setTime(now.getTime()+250);
        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
        snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
        document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 ";
        document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
    }
setInterval("createtime()",250);
</script>

文章底部添加版权信息

效果
在这里插入图片描述
教程：
修改文件：themes/next/layout/_macro/post-copyright.swig
若没有post-copyright.swig文件，则自己创建post-copyright.swig文件，添加如下代码，剩余步骤同5.3 文章末尾添加“本文结束”标记方法。

<ul class="post-copyright">
  <li class="post-copyright-author">
    <strong>{{ __('post.copyright.author') + __('symbol.colon') }}</strong>
    {{ post.author | default(config.author) }}
  </li>
  <li class="post-copyright-link">
    <strong>{{ __('post.copyright.link') + __('symbol.colon') }}</strong>
    <a href="{{ post.url | default(post.permalink) }}" title="{{ post.title }}">{{ post.url | default(post.permalink) }}</a>
  </li>
  <li class="post-copyright-license">
    <strong>{{ __('post.copyright.license_title') + __('symbol.colon') }} </strong>
    {{ __('post.copyright.license_content', theme.post_copyright.license_url, theme.post_copyright.license) }}
  </li>
</ul>

设置每页显示数量

在项目的配置文件下面，blogs
在这里插入图片描述

用LeanClound给hexo+next博客添加文章阅读数

注册LeanCloud账号

访问 https://leancloud.cn

创建应用
在这里插入图片描述
新应用名称 (自定义) → 开发版 → 创建即可

创建Class
在创建的应用上点击存储

数据栏中，_开头的都是系统预定义好的表，为了区分，新建一张表来保存数据。为了保证对 NexT 主题的修改兼容，新建 Class 名字必须为 Counter。为了避免权限问题导致次数统计显示不正常，选择无限制，创建 Class。
在这里插入图片描述
获取App ID和App Key

建议设置Web安全域名，填入自己的博客域名。

填写 App ID 和 App Key

打开博客根目录/themes/next/下的_config.yml，查找leancloud，填写复制来的App ID和App Key，重新生成、部署博客即可正常统计文章阅读量。
文件路径：themes\next_config.yml （主题next的配置文件）

# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
  enable: true
  app_id: 0jIPAHo6f5PO-gzGzoHsz
  app_key: RC0L6MlmcTDqRbk
# visitors count
  counter: true

添加 LeanCloud 的 Valine 评论功能

创建 Comment
数据栏中，_开头的都是系统预定义好的表，为了区分，新建一张表来保存数据。为了保证对 NexT 主题的修改兼容，新建 Class 名字必须为 Comment。权限选择限制写入，创建 Class。
在这里插入图片描述
填写 App ID 和 App Key （和上面的是一样的）

打开博客根目录 /themes/next/ 下的 _config.yml，查找 Valine，填写复制来的App ID和App Key，重新生成、部署博客即可正常统计文章阅读量。
文件路径： themes\next_config.yml （next 主题配置文件）

# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
  enable: true
  appid: 0jIPAHSJOq8dN1q3GzoHsz
  appkey: RCiQJH6MlmcTDqRbk
  notify: false # mail notifier , https://github.com/xCss/Valine/wiki
  verify: true # Verification code
  placeholder: 欢迎留言！匿名也可以留言！ # comment box placeholder
  avatar: mm # gravatar style
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # pagination size

添加近期文章板块

参考 https://www.zhyong.cn/posts/7f8f/

打开文件：vim themes/next/layout/_macro/sidebar.swig，找到if theme.links后面的endif，在后面添加：

{% if theme.recent_posts %}
    <div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.recent_posts_layout }}">
      <div class="links-of-blogroll-title">
        <!-- modify icon to fire by szw -->
        <i class="fa fa-history fa-{{ theme.recent_posts_icon | lower }}" aria-hidden="true"></i>
        {{ theme.recent_posts_title }}
      </div>
      <ul class="links-of-blogroll-list">
        {% set posts = site.posts.sort('-date') %}
        {% for post in posts.slice('0', '5') %}
          <li>
            <a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank">{{ post.title }}</a>
          </li>
        {% endfor %}
      </ul>
    </div>
{% endif %}

在next主题_config.yml配置文件中添加：

recent_posts_title: 近期文章
recent_posts_layout: block
recent_posts: true

在这里插入图片描述

设置背景动画

参考： https://blog.csdn.net/sinat_33381791/article/details/82827842
由于在Next 6.0后设置 Canvas_nest: true是背景将会有动画效果，但是没有反应，查看一下官方文档有解释说明。
#解决方案

打开Git进入自己文件夹下/themes/next文件夹下
$ cd themes/next
运行git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest即:
git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest
进入 thems/next/_config.yml文件下修改 canvas_nest: true(注意: 冒号后面要空格)

在这里插入图片描述
效果如图：

到此为止，我个人觉得博客装修，就完工了。
下一篇如何可以通过域名来实现访问的博客？

如何可以通过域名来实现访问的博客？

sever默默

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
Hexo 搭建博客（三）

上一篇文章，介绍了如何利用 hexo+github pages 搭建个人博客。那么这篇文章则以我的博客为例详细教你打造个性超赞博客 Hexo+GitHubPages+NexT 的主题。我这里选择了 GitHub 上面最多人用的一款主题：Next安装 next 主题第一步：下载next主题进入博客 hexo 文件夹里面空白处 D:\blog\hexo，鼠标右键选择 Git Bash her...
复制链接

扫一扫