更换 icarus 主题
- 下载 icarus 主题
- 配置 icarus 主题
- 查看 icarus 效果
- 修改上方导航栏
- 修改下方导航栏
- 修改个人信息
一. 下载 icarus 主题
方法 1
在博客根目录右键点击 Git Bash Here,输入:
npm install hexo-theme-icarus
检查themes文件夹,看是否出现了 icarus 文件夹
方法 2
在博客根目录右键点击 Git Bash Here,输入:
git clone https://github.com/ppoffice/hexo-theme-icarus themes/icarus
检查themes文件夹,看是否出现了 icarus 文件夹
方法 3
若前面的方法无效的话,进入icarus项目,点击 code 下载文件。
将下载好的安装包解压至themes文件夹,并重命名:icarus。
二. 配置 icarus 主题
在博客根目录右键点击 Git Bash Here,依次输入:
hexo config theme icarus
hexo clean
hexo g
hexo s
如果中间出现错误信息,则按提示下载缺少的依赖。
三. 查看 icarus 效果
在浏览器中打开:localhost:4000。成功的效果如下:
如出现白屏,并有如下显示:
const { Component } = require(‘inferno’); const classname = require(‘hexo-component-inferno/lib/util/classname’); const Head = require(‘./common/head’); const Navbar = require(‘./common/navbar’); const Widgets = require(‘./common/widgets’); const Footer = require(‘./common/footer’); const Scripts = require(‘./common/scripts’); const Search = require(‘./common/search’); module.exports = class extends Component { render() { const { site, config, page, helper, body } = this.props; const language = page.lang || page.language || config.language; const columnCount = Widgets.getColumnCount(config.widgets); return ; } };
则需要在 Git Bash Here 中依次执行:
npm install –save bulma-stylus@0.8.0 hexo-renderer-inferno@^0.1.3
hexo clean
hexo g
hexo s
这样,我们就完成了 icarus 主题的更换。
如果还遇到了其他问题,请查看:icarus用户指南。
四. 修改logo与图标
打开 themes\icarus\source\img,其中:
网站logo为 /img/logo.svg
网站图标为 /img/favicon.svg
你的头像为 /img/avatar.png
替换相应的图标即可。
若想改变图像名称,如将 favicon.svg 改为 touxiang.svg,还需要在根目录下的 _config.icarus.yml 中同时更改字段:
logo: /img/logo.svg
favicon: /img/favicon.svg
推荐两个可能用到的网站:svg图片转换网站、2. 圆角图片制作网站
五. 修改上方导航栏
打开根目录下的 _config.icarus.yml 文件,找到 navbar 字段。
menu 字段下是导航栏的各个选项,可对其名称和路径进行增加、删除和修改。
1. 增加新导航栏选项
在 Git Bash Here 中输入如下指令,其中双引号中添加选项名称。
hexo new page “ “
在 source 文件夹下便可以找到选项所对应的文件夹。
打开文件加,修改对应的 .md 文件,便可以实现对相应页面的渲染。
2. 删除与修改新导航栏选项
删除与修改相应的字段即可。
icarus 默认带有的选项无对应文件夹,但是存在代码实现对应的页面。
3. 修改 github 链接
找到 links 字段下的 url 字段,将其替换为自己的 github 主页链接。
可以对导航栏的链接进行替换,如换成 b站 或 微博 的链接。
方法是直接修改 icon 和 url 字段。
其中,icon 字段的值由图标库所定义,具体可以查看:FontAwesome图标库
如要向导航栏右侧添加链接,请向links设置项中添加 链接名: 链接URL。
五. 修改下方导航栏
打开根目录下的 _config.icarus.yml 文件,找到 footer 字段。
这里有三个位置可供修改,修改方法同上。
可以删掉多余的字段,即保留少于三个链接。
六. 修改个人信息
打开根目录下的 _config.icarus.yml 文件,找到 widgets 字段。这个字段下配置着基本信息和设置。
- author: 昵称
- author_title: 作者身份描述
- location: 作者当前居住地
- avatar: 头像url
- follow_link: 个人链接,可设为GitHub主页
- social_links: 社交平台链接,可进行删除和修改。
更多设置可参考:Hexo+icarus主题配置