NexT_8.1主题配置

发表于 更新于 分类于 ， 阅读次数：

站点配置文件 .config.yml

1、site 部分

*修改站点配置文件里面的 *

1
2
3
4
5
6
title: 标题
subtitle: 副标题
description: 描述
author: 作者
language: 语言（简体中文是zh-CN）
timezone: 网站时区（Hexo 默认使用您电脑的时区，不用写）

修改生成的链接

默认连接太长，而且不是同一个链接。丢失原来的访问次数

方便分享和管理，推荐设置如下：

1
permalink: :year/:month/:day/:second/

文章按创建时间排序

1
2
3
4
5
6
7
8
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ""
  per_page: 10 # 每页数量
  order_by: -date

修改网站图标

修改主题配置文件的 favicon 部分

修改文章模板

自定义 hexo new file 时生成的 .md文件的模板

修改站点文件夹下的 scaffolds/post.md 和 scaffolds/draft.md 如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
title: {{ title }}
date: {{ date }}
updated: {{ date }}
permalink: 
top: 0
password:
comments: 
copyright: true
tags:
categories: 
keywords:
description:
---

推送设置

1
2
3
4
deploy:
  type: git
  repo: https://github.com/yxhsiao/yxhsiao.github.io
  branch: master

主题配置文件 .config.yml

选择主题样式：

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

1
2
3
4
5
6
7
8
9
10
#Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
#Mist - Muse 的紧凑版本，整洁有序的单栏外观
#Pisces - 双栏 Scheme，小家碧玉似的清新

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

修改菜单栏

1
2
3
4
5
6
7
8
9
menu:
  home: / || fa fa-home		//首页
  archives: /archives/ || fa fa-archive		//归档
  categories: /categories/ || fa fa-th		//分类
  tags: /tags/ || a fa-tags		//标签
  about: /about/ || fa fa-user		//关于
  #schedule: /schedule/ || fa fa-calendar		//日程表
  #sitemap: /sitemap.xml || fa fa-sitemap		//站点地图
  #commonweal: /404/ || fa fa-heartbeat		//公益404

设置侧边栏

1
2
3
4
5
6
7
8
9
10
11
12
13
sidebar:
# Sidebar Position - 侧栏位置（只对Pisces | Gemini两种风格有效）
  position: left        //靠左放置
  #position: right      //靠右放置

# Sidebar Display - 侧栏显示时机（只对Muse | Mist两种风格有效）
  #display: post        //默认行为，在文章页面（拥有目录列表）时显示
  display: always       //在所有页面中都显示
  #display: hide        //在所有页面中都隐藏（可以手动展开）
  #display: remove      //完全移除
  offset: 12            //文章间距（只对Pisces | Gemini两种风格有效）
  b2t: false            //返回顶部按钮（只对Pisces | Gemini两种风格有效）
  scrollpercent: true   //返回顶部按钮的百分比

添加搜索功能

要安装插件

1
npm install hexo-generator-searchdb --save

然后修改站点配置文件中的 search:

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

修改主题配置文件：

1
2
3
4
# Local Search
# Dependencies: https://github.com/next-theme/hexo-generator-searchdb
local_search:
  enable: true

隐藏页脚的 “由 xxxx 强力驱动”

修改主题配置文件 footer 部分的 powered 的值为你想要的

1
2
footer:
 powered: false # false: 不显示 true: 显示

博客主题跟随系统主题

修改主题配置文件的 darkmode 部分

1
2
# Dark Mode
darkmode: auto   # dark|light|auto

加载条阅读进度提示

修改主题配置文件 reading_progress 部分

1
2
3
4
5
6
reading_progress:
  enable: true # 是否启用
  # Available values: top | bottom
  position: bottom # top: 顶部 bottom: 底部
  color: "#37c6c0" #颜色
  height: 3px #高度

侧栏回到顶部按钮

修改主题配置文件 back2top 部分

1
2
back2top:
  enable: true # 是否启用

侧栏阅读进度提示

修改主题配置文件 back2top 部分

1
2
3
4
back2top:
  # Scroll percent label in b2t button.
  scrollpercent: true # 是否显示阅读进度

边栏显示图像和社交信息

修改主题配置文件的 avatar 和 social 部分 

1
2
3
4
5
6
7
# Sidebar Avatar
avatar:
  url: /images/site/avatar.jpeg # 图片地址
  rounded: true # 是否可旋转
  rotated: true # 是否圆角
  # Posts / Categories / Tags in sidebar.
  site_state: true
1
2
3
4
5
6
7
8
9
social:
  GitHub: https://github.com/iitii || fab fa-github
  E-Mail: mailto:ccmejx@gmail.com || fa fa-envelope
  Telegram: https://t.me/callmehelp || fab fa-telegram

social_icons:
  enable: true # 是否启用
  icons_only: false # 只显示图标
  transition: false

添加书签(记录阅读位置)

  • 修改主题配置文件 bookmark 部分
1
2
3
4
bookmark:
  enable: true # 是否启用
  color: "#222" # 颜色
  save: auto # auto: 自动保存 manual: 手动保存

页脚设置站点建立时间

比如文章底部的: © 2018 – 2021

修改主题配置文件 footer 部分的 since 的值为你想要的

1
2
3
footer:
  # Specify the year when the site was setup. If not defined, current year will be used.
  since: 2021

修改页脚时间和作者之间的图标

修改主题配置文件 footer 部分的 icon 的值为你想要的

1
2
3
4
5
6
7
footer:
  icon:
    name: fa fa-heart # 图标 See: https://fontawesome.com/icons
    animated: true # 是否有动画效果
    color: "#ff0000" #图标颜色

  copyright: # 不填写将以站点配置文件里面的作者填充

版权信息

搜索creative_commons：

1
2
3
4
5
creative_commons:
  license: by-nc-sa
  sidebar: false #首页边栏是否显示
  post: true #文章底部是否显示
  language:

站点访问人数和总访问量

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

1
2
3
4
5
6
7
8
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

修改文章底部的标签带标签图标

修改主题配置文件 tag_icon 部分

1
tag_icon: true # true: 显示为图标

自定义文件的路径

修改主题配置文件 custom_file_path 部分

路径为根目录，而非主题目录

1
2
3
4
5
6
7
8
9
10
11
custom_file_path:
  head: source/_data/head.njk #添加自定义内容在 head
  #header: source/_data/header.njk #添加自定义内容在顶栏
  #sidebar: source/_data/sidebar.njk #添加自定义内容在边栏
  #postMeta: source/_data/post-meta.njk #添加自定义文章的 meta 信息
  postBodyEnd: source/_data/post-body-end.njk #添加自定义内容在文章尾部
  #footer: source/_data/footer.njk #添加自定义内容在页脚
  #bodyEnd: source/_data/body-end.njk
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl #添加自定义css

页脚添加运行时间

添加如下内容到 source/_data/footer.njk

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<br /> #换行
<!-- 网站运行时间的设置 -->
<span id="timeDate">载入天数...</span>
<span id="times">载入时分秒...</span>
<script>
    var now = new Date();
    function createtime() {
        var grt= new Date("04/21/2019 15:54:40");//此处修改你的建站时间或者网站上线时间
        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>

页脚添加总访问量

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

1
2
3
4
5
6
7
8
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

文章尾部添加本文结束标记

在博客根目录/source/_data下新建post-body-end.njk文件写入以下内容：

1
2
3
<div>
  <div class="end-slogan" style="text-align:center;font-size:22px;letter-spacing:10px;user-seclect:none;color:#bbb">----------- 本文结束<i class="fa fa-star"></i>感谢阅读-----------</div>		
</div>

然后在主题配置文件中取消注释：

1
2
- #postBodyEnd: source/_data/post-body-end.njk
+ postBodyEnd: source/_data/post-body-end.njk