Hexo博客使用Next主题

爪哇程序人生
835 阅读5分钟

这是我参与8月更文挑战的第20天，活动详情查看：8月更文挑战

使用Hexo创建自己的静态博客后，我们可以对博客内容进行简单的配置，让博客更加的个性化，拥有我们自己的信息。N我们在Hexo博客中使用了next主题，并在此基础上进行自定义的配置。 对于如何使用Hexo创建免费的静态博客页面，可以参考# GitHub上搭建个人博客

Hexo博客使用Next主题

Next主题

Next是一款符合程序员审美的主题，Hexo中切换Next主题的方式非常简单，只需要将主题文件拷贝至根目录下的themes文件夹中，然后修改_config.yml文件中的theme字段即可。

Next主题仓库地址，我们可以前往仓库地址手动下载文件，也可以使用Git命令的方式进行下载。

使用Git下载主题文件

Next主题是一款开源的主题项目，我们可以直接在Git客户端中下载整个项目，并放在Hexo项目的theme文件夹下等待使用。在Hexo/theme目录下执行如下命令：

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

配置Next主题

  • 进入Hexo根目录下，编辑_config.yml配置文件，将theme属性值修改为next，即使用theme/next主题，重启后生效。
  • Next主题默认风格为Muse，可以在主题配置文件中修改scheme字段来选择喜欢的主题风格 
    themes\next_config.yml
# Schemes
scheme: Muse
#scheme: Mist  #Muse的紧凑版本，整洁有序的单栏外观
#scheme: Pisces	#双栏Scheme，小家碧玉似的清新
#scheme: Gemini

站点优化

theme/next目录下的_config.yml文件代表使用当前主题时的博客配置信息，通过修改此文件可以定义站点相关信息，修改完成后需要重启服务器才能看到效果。

基本信息

#_config.yml中配置相关信息 
# 注意字段属性和值之间要有 一个空格 间隔 
title: Shone's Blog	#站点名称 
description: harry up! #站点描述 
language: zh-CN	#站点使用语言为简体中文 
author: shone	#设置站点作者

网站Favicon

Favicon代表网页打开时浏览器标签左侧的图标，可以在配置文件中自定义设置图标。

# themes\next_config.yml 
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  # safari浏览器标签页图标

侧栏信息

Next主题中的侧栏信息默认停靠在左侧，且默认不开启，需要手动点击。

  • 停靠位置：设置侧栏的位置，修改主题配置文件中 sidebar.position 的值
    • left：停靠左边
    • right：停靠右边
  • 显示时机：修改侧栏的显示时机，修改主题配置文件中 sidbar.display 的值
    • post：默认，在文件页面（拥有目录时）显示
    • always：在所有页面都显示
    • hide：所有页面都隐藏，可以手动点击展开
    • remove：完全移除
  • 文章目录：默认目录不全部展开，只显示第一级，可以在主题配置文件中修改设置 image-20201216195130377

头像信息展示

修改展示头像时，需要主题配置文件中设定 avatr 字段的值，设置成头像的链接地址。可以是：

  1. 完整的网络URI：http://example.com/avatar.png
  2. 站内地址：头像放在themes/next/source/images目录下，使用路径/images/avatar.png引用 image-20201216154025479

博客首页显示信息

Next主题默认显示每一篇文章的全文内容，如果只想要显示文章的摘要部分，可以在主题配置文件中设置，并在摘要最后添加阅读全文的按钮。文章摘要信息可以通过以下三种方法进行设置：

  1. 用户可以使用<!-- more --> 标记来精确划分摘要信息，标记之前的段落将作为摘要显示在首页。
    • 建议使用此种方式，可以精确控制摘要内容，且Hexo中插件更好识别。
  2. 在文章的头部Front-Matter中设置description字段内容，该内容会作为摘要显示在首页
  3. 通过对配置文件进行配置来自动形成摘要信息 
    # themes\next_config.yml 
auto_excerpt: 	enable:true	#开启自动摘要提取 	
length:150	#设置摘要内容为150个字符

文章meta信息

Next主题配置中，打开文章时标题下方默认显示文章的创建时间和分类信息，用户可以在主题配置文件中自定义设置需要显示的meta元信息。

默认显示内容

# themes\next_config.yml 
post_meta:   item_text: true  # 显示文字说明   
created_at: true  # 显示文章创建时间   
updated_at:     enabled: false  # 隐藏文章修改时间     
another_day: true  # 只有当修改时间和创建时间不是同一天的时候才显示   
categories: false  # 隐藏分类信息

文章内容

在编辑博客文章内容时，可以针对内容的不同进行设置来显示不同的风格。如文章中代码的高亮设置，在Next主题中使用Tomorrow Theme作为代码高亮，有5中主题可以选择。在配置文件中的hightlight_theme字段设置具体值。

  • normal
  • night
  • night blue
  • night bright
  • night eighties

文章底部

如果想要我们的每篇文章最后都显示版权等信息，则可以在Next主题配置文件中设置post_copyright的属性值，设置开启后我们博客中内容在被复制时会带有自定义的版权信息。 image-20210320112122199

最后

我们对Hexo搭建的静态博客网站进一步的优化，使用了Next主题并对博客站点的相关显示信息进行简单的自定义操作，这样之后这个Hexo博客就是属于我们自己的独一无二的了！

avatar
文章
阅读
粉丝