个性化设置Hexo博客的NexT主题

给基于Hexo+GitHub搭建的博客下载并安装NexT主题后,发现自己博客呈现的效果跟主题的预览网站好像哪里不太一样。
看了一下文档,发现还是要自己修改主题的配置文件,根据自己喜好来手动设置才成。于是得鹿自己动手丰衣足食,根据NexT的设置文档,给博客进行了个性化设置。

先看个设置前后的对比:

  • 个性化设置前
    个性化设置Hexo博客的NexT主题_第1张图片

  • 个性化设置后
    个性化设置Hexo博客的NexT主题_第2张图片

整体风格

打开博客目录下的themes/next/_config.yml文件,所有的设置都是修改这个文件的内容。

主题选择

整体风格有四种可选,默认是Muse,也就是上面个性化设置前的样子,侧边栏隐藏款。
可以通过加#注释掉其他scheme行,只留下想尝试的样式,来每种样式都试验一下看看效果。最后我选择了Gemini,它侧边栏不隐藏,每篇文章之间分隔明显。
此外,还可以设置是否启用夜间模式。如果启用,将darkmode设置成true即可。

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

# Dark Mode
darkmode: true

Logo个性化

博客tab页等地方的logo也支持个性化。

在这里插入图片描述

可以将自己的logo放在themes/next/source/images文件夹下,然后更改下面设置,把favicon-16x16-next.png的名字换成你logo图片的名字即可。

favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg

Menu显示

默认menu是不显示的,我们可以通过对menu下面的home等去掉注释,来显示menu。想要显示哪些,就去掉哪行注释。

  • 无menu
    个性化设置Hexo博客的NexT主题_第3张图片

  • menu显示home和archives
    个性化设置Hexo博客的NexT主题_第4张图片

比如,去掉了home和archives行前面的注释,menu就显示了这两项。

menu:
  home: / || fa fa-home
  #about: /about/ || fa fa-user
  #tags: /tags/ || fa fa-tags
  #categories: /categories/ || fa fa-th
  Hexo搭建与使用: /Hexo搭建与使用 || fa fa-home
  archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

除了home和archives之外,menu下其他所有的选项,都需要手动创建。
例如,想要创建 "categories"页面,则需要在终端中执行下面代码,其中Blogs是我的博客根目录:

$ cd Blogs
$ hexo new page categories

执行成功后,在Blogs/source/下会创建一个名为categories的文件夹,打开文件夹中的index.md文件,添加type属性:

title: categories
date: 2024-02-01 17:32:34
type: categories

然后把menu下的下面语句取消注释。

categories: /categories/ || fa fa-th

此时,menu下就出现了categories。那么categories下的分类该怎么设置呢?
这需要我们在写文章的时候指定文章分类。

title: 个性化设置Hexo博客的NexT主题
date: 2024-02-01 10:51:56
tags: [Hexo, NexT]
categories: 
    - [Hexo搭建与使用]

点击menu下的categories,就会出现分类页面,它会自动将文章分类。

个性化设置Hexo博客的NexT主题_第5张图片


各种小细节

隐藏archives页面的Keep on posting提示

在archives页面的最上面,有行很烦的提示"Um…! 3 posts in total. Keep on posting.",按照下面步骤可以将它隐藏。

  • 隐藏前
    个性化设置Hexo博客的NexT主题_第6张图片

  • 隐藏后
    个性化设置Hexo博客的NexT主题_第7张图片

首先在【博客根目录/source/】下新建一个名为_data的文件夹,在_data下新建styles.styl文件。然后把下面代码粘贴进新建的文件里,保存。

.archive .collection-title {
  display: none !important;
}

找到【博客根目录/themes/next/_config.yml】文件,将custom_file_path下这行代码的注释取消,就可以隐藏这行提示了。

style: source/_data/styles.styl

博文显示摘要/全文

在每个页面,会显示多篇文章,可以设置文章是显示全文还是只显示一部分内容。参考下图,可以看到两种显示方式的区别。

  • 全文显示
    个性化设置Hexo博客的NexT主题_第8张图片

  • 显示摘要
    个性化设置Hexo博客的NexT主题_第9张图片

如果要只显示摘要,就在博文的md文件中想要隐藏的内容上方,添加

语言及博客名称设置

到现在为止,我的博客菜单栏还是英语,扔然可以通过设置Blogs/themes/next/_config.yml中的language修改语言为中文:将en修改为zh-CN即可。
此外,还可以在这里设置自己的博客名称、简介以及作者等。

# Site
title: 林间得鹿
subtitle: ''
description: '林间得鹿的博客'
keywords:
author: 林间得鹿
language: en
timezone: ''

你可能感兴趣的:(Hexo博客搭建与使用,经验分享,github)