Next主题设置

发表于 更新于

由于本站使用Next主题，且对本主题做了相关修改化设置，所以单独一篇文章合并主题设置相关文章。2022-10-26 重新添加内容时顺便添加了代码高亮.

菜单项的开启和设置

  1. 打开主题配置文件 _config.next.yml ,然后搜索 menu ，找到如下部分
1
2
3
4
5
6
7
8
9
10
11
12
13
# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-senstive.
# Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
# External url should start with http:// or https://
menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
#  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
#  schedule: /schedule/ || fa fa-calendar
  sitemap: /sitemap.xml || fa fa-sitemap
#  commonweal: /404/ || fa fa-heartbeat
  1. 将要在首页显示的menu项前的注释符去掉，则开启对应项。但是在重新使用 hexo g 生成后，可以看到新增menu项，单击后却出现如下错误
1
2
3
Cannot GET /about/
Cannot Get /tags/
Cannot Get /categories/

这是因为还没有构建相关页面，执行如下命令新建相关页面

1
2
3
hexo n page "about"
hexo n page "tags"
hexo n page "categories"

运行后会在source文件夹下创建about、tags、categories文件夹，每个文件夹下会有创建一个index.md文件，编辑这三个文件可以自定义相关内容。

  1. 打开各index.md文件，添加type,即可
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---
title: About
date: 2021-07-12 10:39:26
type: "about"
---

---
title: Tags
date: 2021-07-12 10:39:37
type: "tags"
---
---
title: categories
date: 2021-07-12 10:39:53
type: "categories"
---

站点地图（sitemap)

简介

站点地图描述了一个网站的架构。 它可以是一个任意形式的文档，用作网页设计的设计工具，也可以是列出网站中所有页面的一个网页，通常采用分级形式。这有助于访问者以及搜索引擎的爬虫找到网站中的页面。

Hexo生成 sitemap

  1. Google版本
1
# npm install hexo-generator-sitemap --save
  1. Baidu版本
1
# npm install hexo-generator-baidu-sitemap --save
  1. 生成站点地图

安装完成，在_config.yml 中找到url,改成自己的域名

1
2
3
4
5
6
url: http://fengzhenhua-vip.github.io
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

这样，每次使用hexo g生成文件时，会自动在public文件夹下生成sitemap.xml和baidusitemap.xml分别用于Google和百度。

  1. 查看

使用hexo d提交后，通过域名/sitemap.xml或域名/baidusitemap.xml可以进行诘问sitemap. 最后到Google或百度对应的站长工具进行提交sitemap就可以了。

Next主题加入本地搜索

时间久了，写的文章越来越多，这就需要加入一个本地文章搜索功能。自然的步骤就是百度一下别人的教程，但是按照网上的方法设置在Next主题上并不能正常的工作，所以我打开Next主题官网，按照说明文档逐步操作，完美解决问题，本文记录这个正确的设置方法。

在Hexo根目录下，安装hexo-generator-searchdb 执行命令： 

1
2
$cnpm install hexo-generator-searchdb --save
$npm install hexo-generator-searchdb --save
在国内一般npm直接安装软件速度较慢，于是推荐使用第一个命令cnpm更快一些，这两个命令使用哪一个都行。

编辑站点配置文件，加入以下内容

1
2
3
4
5
6
7
$ vim ~/xxxx/_config.yml
search:
    # path: search.xml
    path: search.json
    field: post
    content: true
    format: html

注意： 本配置选自Next主题官网 ,之前按照网上的配置，Next主题在Linux本地测试时可以正常工作，部署到gitee后在Linux下使用Firefox可以正常工作，但是在Windows下浏览还是不能工作，于是决定按照主题官网设置，终于完美解决问题。这个错误的配置，放在这里大家参考：

这里的搜索框有时候图显示不正常，在2022-05-10 我对Next主题进行了一次升级，在升级之前我使用path: search.xml 才可以正常显示图示，但是升级后不能正常显示，于是改成 path:search.json 后又可以正常显示了。目前不能判断具体原因，今后若再升级Next主题，则检查此项设置。

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 1000
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$ vim ~/xxxx/_config.next.yml
# Local search
# Dependencies: https://github.com/next-theme/hexo-generator-searchdb
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false
1
2
3
4
$ hexo clean
$ hexo g
$ hexo s
$ hexo d

自定义NexT主题

由于目前互联网网站充满了广告，同时流氓软件层出不穷，为了更好的办公我专门构建了一个主页网站，收录了教师平时经常登录的办公网站及平时工作中需要的软件，这些软件都是多年来我自己实践出来的良心软件或开源软件。但是基于Next主题构建的网站，是博客风格，不太符合主页的要求。于是决定进行改造，本文就是记录对Next主题的修改操作。

修改主题颜色

修改站点项部边栏为深绿色

/theme/next/_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# Browser header panel color.
theme_color:
  # default color
  #light: "#222"
  #dark: "#222"
  # orange color
  #light: "#ff6600"
  #dark: "#ff6600"
  # green color
  light: "#006600"
  dark: "#006600"

# Bookmark Support
bookmark:
  enable: true
  # Customize the color of the bookmark.
  #color: "#222"
  color: "#006600"
  # If auto, save the reading progress when closing the page or clicking the bookmark-icon.
  # If manual, only save it by clicking the bookmark-icon.
  save: auto

修改深黑色为深绿色

/theme/next/source/css/_variables/base.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Color system
// --------------------------------------------------
$whitesmoke   = #f5f5f5;
$gainsboro    = #eee;
$grey-lighter = #ddd;
$grey-light   = #ccc;
$grey         = #bbb;
$grey-dark    = #999;
$grey-dim     = #666;
$black-light  = #555;
$black-dim    = #333;
//$black-deep   = #222;
$black-deep   = #006600;
$red          = #ff2a2a;
$blue-bright  = #87daff;
$blue         = #0684bd;
$blue-deep    = #262a30;
$orange       = #fc6423;

修改页面大小

1
2
3
4
5
6
7
8
9
10
11
12
$ vim ~/XXXX/themes/next/source/css/_variable/Muse.styl
// Variables of Muse scheme
// ==================================================

$sidebar-width           = hexo-config('sidebar.width') is a 'unit' ? hexo-config('sidebar.width') : 320;
$sidebar-desktop         = unit($sidebar-width, 'px');

$content-padding-bottom     = 60px;
$posts-first-padding        = 70px;
$posts-first-padding-mobile = 35px;
$content-desktop     = 900px;
$content-desktop-large     = 1200px;

由于网站基于主题Muse,所以对此主题风格修改，上面是后两行是做的修改。

去除日志的标题

由于作为主页来讲不需要日志的标题，所以这一点通过修改主题来防止Hexo自动生成日志标题。即

1
2
3
4
5
6
7
8
9
10
$vim ~/XXXX/themes/layout/_macro/_post.njk
{##################}
{### POST BLOCK ###}
{##################}
......
关于标题的生成规则全部删除
......
{#################}
{### POST BODY ###}
{#################}

修改网站标题的背景

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$ vim ~/XXXX/themes/next/source/css/_schemes/Muse/_header.styl
.custom-logo-image {
  background: white;
  margin: 0 auto 10px;
  max-width: 150px;
  padding: 5px;
}

.brand {
}

.header-inner {
  padding-top: 100px;

  +mobile() {
    padding-top: 50px;
  }
}

其中.bradn设定了标题底色为黑色，这里去除即可。

修改网站标题的字号及颜色

1
2
3
4
5
6
$ vim ~/XXXX/themes/next/source/css/_variables/base.styl
......
$font-size-title                = (hexo-config('font.enable') and hexo-config('font.title.size') is a 'unit') ? unit(hexo-config('font.title.size'), em) : 2.875em;
$font-size-subtitle             = $font-size-large;
$subtitle-color                 = LightBlue;
......

以上修改，需要找到文件的 Site Meta 字符，然后在第215行，修改了网站标题字号为2.875em ,第216行修改small为large , 第217行修改为LightBlue 。至此完成主页网站的修改，由于在修改中及编写网站时需要设置字体颜色，这里使用Html实现，各颜色名称参考：Html颜色名

Next主题的升级

升级Next主题，请参考官方说明文档https://theme-next.js.org/docs/getting-started/ 。由于我本人对此主题做出了更改，所以升级完主题后，还需要做的工作有两个

  1. 校对根目录下_config.next.yml 看是否新旧主题有不同的地方，在 2022-05-10 的升级中就有不同地方，我使用 vimdiff对比新主题配置文件themes/next/_config.yml 和旧的 _config.next.yml ，然后找出影响编译的项，按新主题配置修改好，其余的不动。

  2. 由于我对页面的大小做出过修改，所以升级好主题要对所选择的主题相关变量修改，参考如下：

~/XXXX/themes/next/source/css/_variable/Muse.styl
1
2
3
4
5
6
7
8
9
10
11
// Variables of Muse scheme
// ==================================================

$sidebar-width           = hexo-config('sidebar.width') is a 'unit' ? hexo-config('sidebar.width') : 320;
$sidebar-desktop         = unit($sidebar-width, 'px');

$content-padding-bottom     = 60px;
$posts-first-padding        = 70px;
$posts-first-padding-mobile = 35px;
$content-desktop     = 900px;
$content-desktop-large     = 1200px;