首先,第一次那么努力地做封面图,请让我在这里展示一下可爱的futaba

封面图

再次感谢制作的主題饭饭’s Homepage 2.0

正式开始

安装

在博客根目录中使用命令安装

1
git clone -b master https://github.com/NatsunoZero/hexo-theme-navi.git themes/navi

应用主题

修改hexo配置文件_config.yml,把主題改為navi

1
theme: navi

配置navi

下述配置项目,可以不填的内容已经完全给出,其他项必填,否则可能会引起未知错误

配置基本信息

修改theme/navi/_config.yml文件中的内容如下

1
2
3
4
5
6
7
8
9
config:
title: # 这里填写网页标题
name: # 这里是作者名称,也就是头像下边的文字
intro: # 这里是网页介绍
welcome: # 这里是介绍下边的内容(可不填)
favicon: # 这里是浏览器图标
icon: # 这里是主页图标
mask_color: rgba(60,91,147,.6) # 这里是背景的颜色遮罩层
apple_touch_icon: # 这里是苹果设备特有的图像标签(可以和favicon设置成一样的内容)

具体内容可以参考这张图

配置指导

其中favicon属性为浏览器的图标,如下图的YouTube的红色播放按键和github的小章鱼图标

浏览器图标展示

其中apple_touch_icon属性,其为苹果为iOS设备配备了apple-touch-icon私有属性,添加该属性,在iPhone,iPad,iTouch的safari浏览器上可以使用添加到主屏按钮将网站添加到主屏幕上,方便用户以后访问。

建议设置一个144*144pixels的图像,不过也可设置和favicon相同的图片

其中mask_color属性为网页背景的颜色遮罩层,可设置为你喜欢的颜色,甚至透明(建议透明时候是用深色背景,文字颜色已固定为浅色)

默认颜色为█████

这里是用了rgba方式,其中a代表透明度。

配置背景图

修改theme/navi/_config.yml文件中的内容如下

1
2
3
4
5
background_image:
timer: 15 # 自动换背景时长(不填写不启用)
img: # 可以写一个或者多个,多个会在每次刷新或载入网页时随机选择,也可以使用api接口
- https://xxx.JPG
- https://xxx.JPG

其中img属性填写背景图片,可以填写一个或多个。

多个壁纸会在每次加载网页时随机选择。

其中timer属性为定时更换壁纸功能,默认单位为秒(S),如果不填则每次加载刷新壁纸。如果启用该功能则代表:网页加载后随机选择壁纸,之后按照顺序更换壁纸。

配置认证信息

修改theme/navi/_config.yml文件中的内容如下

1
2
3
4
5
# 认证图标(头像旁边)
identify_icon:
enable: false
icon: /img/dahuiyuan.svg # 可自定义
text: 年度大会员 # 建议跟随图标内容进行自定义

本设置模仿X浪微博的认证,可以在icon的右下角添加一个如上图的认证图标。

配置enable属性来控制启用

配置icon属性来设置认证图标样式,可以为相对或者绝对连接,如需使用fontawsome或者fonticon等图标需要下载后使用。

本主题自带bilibili大会员、bilibili小会员、X浪企业认证三个图标,具体可在theme/navi/source/img中进行查看。

在您配置图标的同时,建议配置text属性,该属性会在您鼠标指向认证图标时显示相应文字。

配置Google Analytics

1
2
# Google Analytics
google_analytics: # 改成你的google分析id,如 UA-xxxxxxxxx-x

您需要修改上述属性

配置hitokoto

1
2
3
4
# hitokoto
hitokoto: # 加载一言的功能
enable: true
loadmoji: 『一言加载中…』

您可以配置enable属性来控制启用

属性loadmoji代表加载时显示的内容

配置手机菜单

您可以配置如下属性

1
2
# mobile menu
mobile_menu: true # 手机版菜单,可不启用

如果您启用该功能,您的网站在移动设备中的按钮部分将会以可收起的菜单形式予以展示,如图

启用手机端菜单属性

如果您不启用该功能,您的网站在移动端仍然会按照配置指导图片展示的布局进行重新排版,如图

禁用手机端菜单属性

配置按钮

按钮分为largesmall两款

其中large代表如上图的博客关于按钮,只有文字没有图标

small代表如上图的githubemail等按钮,只有图标没有文字

数量均可自由增减,配置方法如下

1
2
3
4
5
6
7
8
button:
large:
- 博客(按钮名称) || https://blog(改成你自己的链接) || 鼠标覆盖后显示的信息
- 关于 || https://blog.cha.moe/about/index.html || 关于我的信息
small:
- fab fa-github || https://github.com/NatsunoZero || github我是新手
- fas fa-envelope || mailto:[email protected] || 要给我发邮件么?
- fas fa-rss || https://blog.cha.moe/atom.xml || 点击这里就能订阅我的博客啦

关于small图标的第一项属性可以使用fontawsome的图标,也可以使用阿里的fonticon图标(使用fonticon图标需要填写配置页面最下方的icon.fonticon属性。

其中fonticon的属性样式为//at.alicdn.com/t/font_xxxxxxx_xxxxxxxxxx.css(直接复制无效)

关于使用方法这里不进行赘述,您可以尝试访问Google或者度娘搜索。

配置页脚信息

正常配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
footer:
owner: # 拥有者信息
enable: true
name: RTMACHA
since: 2017
modified: # 修改者信息
enable: false
mark: Modified by
name: cha.moe
link: https://blog.cha.moe/article/3e7a7caf.html
ICP: # Chinese ICP License
enable: false
url:
text: afsddfa
icon: /img/icp.png

您可以配置每一项内容

属性owner被关闭的话,Copyright © 2017 ~ 2020 RTMACHA. All rights reserved.改行信息将会消失。

owner.name属性如果不被设置的话会默认调用根目录的_config.yml配置中的author属性

属性modified如果设置的话,效果如下图

modified展示

如果您网站拥有备案信息,您可以启用和修改ICP属性。

其他内容

如果您不希望在您的页面中显示Power by Hexo || Theme from navi这段文字,您可以尝试修改主题目录下的footer.ejs文件,这里不做过多叙述。

但是非常建议您保留该内容

其他

本主题使用的fontawsome5.14.0版本,如果您需要其他版本,可以直接修改配置中的icon.fontawsome属性。

本主题部分地方使用了jQuery。

本项目遵循Apache License 2.0 开源协议

项目仓库地址:https://github.com/NatsunoZero/hexo-theme-navi