张会挽's Blog

hexo-next主题优化

Posted on Edited on

修改网站描述

在blog/_config.yml 配置文件中进行修改

1
2
3
4
5
6
7
# Site
title: Zhanghuiwan's Blog
subtitle: ''
description: '一行白鹭上青天'
keywords:
author: Zhanghuiwan
language: zh-CN

next主题

下载next主题

1
2
$ cd hexo
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

next主题相关配置都在blog/themes/next/_config.yml文件中修改

更改next主题风格

1
2
3
4
5
# Schemes
# scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

更改博客图标

博客网站的图标可以在easyicon、bitbug、iconfont等网站选择和制作，然后选择或者创建相应大小的图标文件，放置在Myblog/themes/next/sources/images目录下，并在主题配置文件中进行如下配置，只需要设置small和medium两个就可以：

1
2
3
4
5
6
7
favicon:
  small: /images/favicon.ico
  medium: /images/favicon.ico
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

添加作者头像

1
2
3
4
5
6
7
8
# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/bitbug_favicon 128*128.ico
  # If true, the avatar will be dispalyed in circle.
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: false

文章结束标志

添加标签页面、分类和公益404页面

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

在配置文件中打开tag，categories，和archives，然后运行如下命令

1
2
3
hexo new page "404"
hexo new page "tags"
hexo new page "categories"

运行结果如下，会再source文件下创建about、tags、categories文件夹，每个文件夹下还会创建一个index.md文件表示404、标签页和分类页面，编辑这三个MarkDown文件可以自定义这三个页面的内容.

设置博客底部布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
footer:
  # Specify the date when the site was setup. If not defined, current year will be used.
  #since: 2015

  # Icon between year and copyright info.
  icon:
    # Icon name in Font Awesome. See: https://fontawesome.com/icons
    name: fa fa-heart
    # If you want to animate the icon, set it to true.
    animated: false
    # Change the color of icon, using Hex Code.
    color: "#ff0000"

  # If not defined, `author` from Hexo `_config.yml` will be used.
  copyright: zhanghuiwan

  # Powered by Hexo & NexT
  powered: false

开启摘要

Next主题自7.6.0版本开始，自动在首页对文章进行摘要描述作为前言文本的功能被移除，请自行安装第三方插件hexo-excerpt 即可。

这里建议使用下面两种方法

  1. 写概述
1
2
3
4
5
---
title: 让首页显示部分内容
date: 2023-02-2 21:55:10
description: 这是显示在首页的概述，正文内容均会被隐藏。
---
  1. 文章截断
1
<!--more-->

参考链接

hexo 个人博客基于 NexT 主题的基本配置和定制优化

Hexo之next主题优化