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

正式开始

安装

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

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

应用主题

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

1	theme: navi

配置navi

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

配置基本信息

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

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文件中的内容如下

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

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

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

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

配置认证信息

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

# 认证图标（头像旁边）
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

配置Baidu Analytics

1
2
3

# Baidu Analytics
# https://tongji.baidu.com/web/welcome/login
baidu_analytics: # 改成你的baidu分析id

配置Tencent Analytics

1
2
3

# Tencent Analytics ID
# https://mta.qq.com
tencent_analytics: # 改成你的tencent分析id

配置hitokoto

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

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

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

live2d

更新日期：2020年10月29日

如果小可爱用的之前的版本记得重新拉取一下更新，更新之前记得备份自己魔改的内容哦

1
2
3

live2d:
  enable: true
  link: https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js

这里具体内容可以参考原作者的仓库：https://github.com/stevenjoezhang/live2d-widget

配置手机菜单

您可以配置如下属性

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

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

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

配置按钮

按钮分为large和small两款

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

而small代表如上图的github和email等按钮，只有图标没有文字

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

button:
  large:
    - 博客（按钮名称） || https://blog（改成你自己的链接） || 鼠标覆盖后显示的信息
    - 关于 || https://blog.cha.moe/about/index.html || 关于我的信息
  small:
    - fab fa-github || https://github.com/chmoe || 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或者度娘搜索。

配置页脚信息

正常配置

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.name属性如果不被设置的话会默认调用根目录的_config.yml配置中的author属性

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

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

其他内容

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

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

其他

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

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

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

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

navi主题简明使用教程

正式开始

安装

应用主题

配置navi

配置基本信息

配置背景图

配置认证信息

配置Google Analytics

配置Baidu Analytics

配置Tencent Analytics

配置hitokoto

live2d

配置手机菜单

配置按钮

配置页脚信息

正常配置

其他内容

其他