hexo之icarus主题的美化修改以及简单的SEO配置

众所周知，本站（KAYGB）采用的是hexo+github+coding+又拍云CDN+icarus主题的组合，华丽美观，好看高大上，哈哈哈

接下来开始我的魔改吧。

侧边栏修改

本来是三侧边栏的样式，好看是好看，但是我总觉得内容有一点挤，所以我就把所有的侧边栏放置在了左边。

打开左侧边栏固定

打开themes -> icarus -> _config.yml,找到sidebar，将左边栏固定

# Sidebar settings.
# Please be noted that a sidebar is only visible when it has at least one widget
sidebar:# left sidebar settingsleft:# Whether the left sidebar is sticky when page scrolls# https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/make-a-sidebar-sticky-when-page-scrolls/sticky: true     #更改这里为true# right sidebar settingsright:# Whether the right sidebar is sticky when page scrolls# https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/make-a-sidebar-sticky-when-page-scrolls/sticky: false

更改目录挂件显示的位置

目的是在阅读文章的同时配合上方的设定将目录固定在个人信息卡片的上方

复制toc的内容，包括符号【 - 】

 -       #这个也需要复制下来# Widget nametype: toc# Where should the widget be placed, left or rightposition: left

粘贴到profile之前，【widgets：】之后，像这样：

widgets:-# Widget nametype: toc# Where should the widget be placed, left or rightposition: left-# Widget nametype: profile# Where should the widget be placed, left or rightposition: left# Author name to be shown in the profile widgetauthor: KAYGB# Title of the author to be shown in the profile widgetauthor_title: Web Lover# Author's current location to be shown in the profile widgetlocation: WuHan,China

修改为双栏模式

找到widgets，将所有的position改为left

widgets:-# Widget nametype: toc# Where should the widget be placed, left or rightposition: left          #修改为left-# Widget nametype: profile# Where should the widget be placed, left or rightposition: left         #修改为left# Author name to be shown in the profile widgetauthor: KAYGB# Title of the author to be shown in the profile widgetauthor_title: Web Lover# Author's current location to be shown in the profile widgetlocation: WuHan,China# Path or URL to the avatar to be shown in the profile widgetavatar: //file.kaygb.top/static_image/kaygb-logo/tx.png# Email address for the Gravatar to be shown in the profile widgetgravatar: # Whether to show avatar image rounded or squareavatar_rounded: false# Path or URL for the follow buttonfollow_link: 'https://github.com/kaygb/'# Links to be shown on the bottom of the profile widgetsocial_links:网站监控:icon: fa fa-bullseyeurl: 'https://status.kaygb.top'旧站:icon: fab fa-dribbbleurl: 'https://kaygb.kaygb.top'咔叽云盘:icon: fa fa-cloudurl: 'https://cloud.kaygb.top/'咔叽图床:icon: fa fa-picture-ourl: 'https://image.kaygb.top/'Github:icon: fab fa-githuburl: 'https://github.com/kaygb/'# Facebook:#     icon: fab fa-facebook#     url: '#'# Twitter:#     icon: fab fa-twitter#     url: '#'# Dribbble:#     icon: fab fa-dribbble#     url: '#'RSS:icon: fas fa-rssurl: /atom.xml

取消不需要的侧边栏widgets（侧边栏挂件）

这里其实很简简单，可能有些同学直接注释的时候发现在部署的时候可能会出错，其实是因为注释需要将开头的符号【 - 】也一起注释掉

 # -         #这个不注释的话可能会出现错误#     # Widget name#     type: tagcloud#     # Where should the widget be placed, left or right#     position: left# -#     # Widget name#     type: archive#     # Where should the widget be placed, left or right#     position: left# -#     # Widget name#     type: tag#     # Where should the widget be placed, left or right#     position: left

去除个人头像，并添加渐变滚动字体

打开themes -> icarus -> layout -> widget -> profile.ejs

参考下方代码打上注释和添加代码

<% function avatar() {const avatar = get_config_from_obj(widget, 'avatar');const gravatar_email = get_config_from_obj(widget, 'gravatar');if (gravatar_email !== null) {return gravatar(gravatar_email, 128);}if (avatar !== null) {return url_for(avatar)}return url_for('images/avatar.png');
} %>
<div class="card widget"><div class="card-content"><nav class="level"><div class="level-item has-text-centered" style="flex-shrink: 1"><div><!--
<!--这里是头像 --><% const is_rounded = get_config_from_obj(widget, 'avatar_rounded', false); %><figure class="image is-128x128 has-mb-6"><img class="<%= is_rounded ? 'is-rounded' : '' %>" src="<%= avatar() %>" alt="<%= get_config_from_obj(widget, 'author') %>"></figure><% if (get_config_from_obj(widget, 'author')) { %><p class="is-size-4 is-block"><%= get_config_from_obj(widget, 'author') %></p><% } %><% if (get_config_from_obj(widget, 'author_title')) { %><p class="is-size-6 is-block"><%= get_config_from_obj(widget, 'author_title') %></p><% } %><% if (get_config_from_obj(widget, 'location')) { %><p class="is-size-6 is-flex is-flex-center has-text-grey"><i class="fas fa-map-marker-alt has-mr-7"></i><span><%= get_config_from_obj(widget, 'location') %></span></p><% } %>-->  <!--这里是头像的结尾部分 --><!-- 渐变滚动字体 --><div id="binft"></div><script>var binft = function (r) {function t() {return b[Math.floor(Math.random() * b.length)]}  function e() {return String.fromCharCode(94 * Math.random() + 33)}function n(r) {for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {var l = document.createElement("span");l.textContent = e(), l.style.color = t(), n.appendChild(l)}return n}function i() {var t = o[c.skillI];c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d)}var l = "",o = ["Hello，KAYGB!","每天学一点，菜鸟变大神。", "不要轻易抱怨","抱怨只能说明自己能力不足。", "自律是最好的老师。","今天你开心了吗？","你好呀，陌生人！","人非圣贤，孰能无过。"].map(function (r) {return r + ""}),a = 2,g = 1,s = 5,d = 75,b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"],c = {text: "",prefixP: -s,skillI: 0,skillP: 0,direction: "forward",delay: a,step: g};i()};binft(document.getElementById('binft'));</script>
<!-- 渐变滚动字体End --></div></div></nav><nav class="level is-mobile"><div class="level-item has-text-centered is-marginless"><div><p class="heading"><%= _p('common.post', post_count()) %></p><p class="title has-text-weight-normal"><%= post_count() %></p></div></div><div class="level-item has-text-centered is-marginless"><div><p class="heading"><%= _p('common.category', category_count()) %></p><p class="title has-text-weight-normal"><%= category_count() %></p></div></div><div class="level-item has-text-centered is-marginless"><div><p class="heading"><%= _p('common.tag', tag_count()) %></p><p class="title has-text-weight-normal"><%= tag_count() %></p></div></div></nav><% if (widget.follow_link) { %><!-- 这里是关注按钮<div class="level"><a class="level-item button is-link is-rounded" href="<%= url_for(widget.follow_link) %>" target="_blank"><%= __('widget.follow') %></a></div>--><% } %><% const socialLinks = get_config_from_obj(widget, 'social_links'); %><% if (socialLinks !== null) { %><div class="level is-mobile"><% for (let name in socialLinks) {let link = socialLinks[name]; %><a class="level-item button is-white is-marginless" target="_blank"title="<%= name %>" href="<%= url_for(typeof(link) === 'string' ? link : link.url) %>"><% if (typeof(link) === 'string') { %><%= name %><% } else { %><i class="<%= link.icon %>"></i><% } %></a><% } %></div><% } %></div>
</div>

背景以及鼠标指针修改

修改背景为漂浮的彩带

打开themes -> icarus -> layout -> layout.ejs

在结尾的【/body】标签之前添加以下代码，两个样式选择一个自己喜欢的就可以了。

<!-- 样式一（鼠标点击更换样式） -->
<script src="//g.joyinshare.com/hc/ribbon.min.js" type="text/javascript"></script>
<!-- 样式二（飘动的彩带） -->
<script src="//g.joyinshare.com/hc/piao.js" type="text/javascript"></script>

这里改动之后可能会出现背景不生效的问题，以下是解决办法

打开themes -> icarus -> source-> css -> style.styl

找到body，将background属性注释掉

body//background-color: #096

修改鼠标指针样式

打开themes -> icarus -> source-> css -> style.styl

找到body，在后面添加

cursor: url(//cdn.jsdelivr.net/gh/TRHX/CDN-for-itrhx.com@2.1.6/images/mouse.cur),auto;

由于背景是是白色的，看起来没有层次感，所以我们加一点灰度

添加background-color

background-color: rgba(10, 10, 10, 0.02);

修改之后应该是这个样子的：

body//background-color: #096background-color: rgba(10, 10, 10, 0.02);cursor: url(//cdn.jsdelivr.net/gh/TRHX/CDN-for-itrhx.com@2.1.6/images/mouse.cur),auto;

添加404公益页面

icarus主题默认是不带404页面的（可能只有我自己《 - _ - 》），如果访问不存在的页面会直接出现can’t get xxx，所以我添加了腾讯的404公益页面，也算是尽了一份力吧！

开始折腾

在source文件夹下新建404.html文件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>404 - Hello KAYGB</title><link rel="icon" href="你的icon链接"></head><body><script type="text/javascript"            src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js"  homePageUrl="你的博客链接"homePageName="回到我的主页"charset="utf-8"></script></body>
</html>

不要以为这就搞定了，如果只是单纯的deploy，你就会发现hexo吧这个文件也进行了渲染，所以我们要让hexo不渲染这个html文件。

找到博客根目录下的_config.yml，打开并修改

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:        #如果也有别的页面不需要渲染，直接在下方添加就可以了- 404.html     #将404.html加进去，【-】之后要有空格隔开

然后

hexo g -d

访问一下http://yoursite/404

添加简单的SEO设置

安装hexo nofollow插件

参考我的文章：

Hexo自动为站内链接加上nofollow插件

安装sitemap插件

控制台输入

npm install hexo-generator-sitemap --save #sitemap.xml适合提交给谷歌搜素引擎
npm install hexo-generator-baidu-sitemap --save #baidusitemap.xml适合提交百度搜索引擎

然后在站点配置文件_config.yml中添加以下代码

# 自动生成sitemap
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml

最后修改站点配置文件_config.yml中的域名

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://你的网站

修改文章链接显示方式

网上看到说蜘蛛只爬取三层目录，再往下就不行了，所以我将链接修改成了http://site/posts/2019-11-22-english_url.html

打开博客根目录下的_config.yml

找到URL的配置项并修改

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://kaygb.top
root: /
# permalink: :year/:month-:day-:title.html
permalink: posts/:year:month:day-:english_url.html      #这里是我修改过的
# permalink: posts/:abbrlink/           #这里请忽略
#   abbrlink:
#   alg: crc32
#   rep: hex
permalink_defaults:lang: en
pretty_urls:trailing_index: true # Set to false to remove trailing index.html from permalinks

以后只要在写文章的时候改一下english_url就可以了

关于那个abbrlink，我设置的时候出错了，也就没有管它了，大家可以尝试一下

如果大家觉得每次需要去手写english_url很烦的话，可以直接在模板中添加属性

找到博客根目录下的sacffolds文件夹下的post.md，添加属性就可以了

---
title: {{ title }}
english_url:
date: {{ date }}
tags:
toc: true
comments: true
categories:
thumbnail:
---

总结

目前修改的内容大概就这么多了吧，icarus这个主题虽然不如next的名气大，但是我认为她是一个非常优秀的主题，当然也得益于作者良好的代码习惯，我们才可以更好的自定义，贴上icarus的主题链接：https://github.com/ppoffice/hexo-theme-icarus，大家可以尝试一下，有什么需要我帮助的也可以直接在下方评论哦！

原文链接：

hexo之icarus主题的美化修改以及简单的SEO配置