Hexo博客主题安装和优化（一）

zoukankan html css js c++ java

Hexo博客主题安装和优化（一）
当你看到这篇文章的时候，想必你已经搭建好了属于你的Hexo博客并且已经部署到了Github上面，如果还没有的话呢，请移步去Hexo+github搭建博客！

因为默认的Hexo主题实在太难看了，所以我们可以去Hexo主题官网主题网去选择自己中意的主题，我用过yilia和yeele这2个主题，最后由于某些原因我换成了现在的主题matery，当然如果你对上面那2个主题感兴趣的话呢，先给2个主题的大佬链接在这里，你们可以进去看看效果，MOxFIVE这个是yelee主题的，Yilia-plus这个是yilia-plus主题，我的博客主题应用的是matery的，晚枫博客！欢迎大家去踩踩！话不多说了，开始我们今天的教程吧。

一、Hexo博客主题安装以及优化

主题大佬博客

闪烁之狐(作者)

过客-砺

洪卫@博客

主题特性
- 简单漂亮，文章内容美观易读
- Material Design 设计
- 响应式设计，博客在桌面端、平板、手机等设备上均能很好的展现
- 首页轮播文章及每天动态切换 Banner 图片
- 瀑布流式的博客文章列表（文章无特色图片时会有 24 张漂亮的图片代替）
- 时间轴式的归档页
- 词云的标签页和雷达图的分类页
- 丰富的关于我页面（包括关于我、文章统计图、我的项目、我的技能、相册等）
- 可自定义的数据的友情链接页面
- 支持文章置顶和文章打赏
- 支持 MathJax
- TOC 目录
- 可设置复制文章内容时追加版权信息
- 可设置阅读文章时做密码验证
- Gitalk、Gitment、Valine 和 Disqus 评论模块（推荐使用 Gitalk）
- 集成了不蒜子统计、谷歌分析（Google Analytics）和文章字数统计等功能
- 支持在首页的音乐播放和视频播放功能
- 支持emoji表情，用markdown emoji语法书写直接生成对应的能跳跃的表情。
- 支持 DaoVoice、Tidio 在线聊天功能
  
  先给你们来几张我博客的预览图，看看效果.....
  
  1. 主题下载与安装
  
  点击传送门下载 master 分支的最新版的代码，解压缩后，将 hexo-theme-matery 的文件夹复制到你 Hexo 的 themes 文件夹中即可。
  
  由于在GitHub里面下载文件很慢的，所以我推荐以为博主写的方法，我亲测可以实现的，前提你要去注册码云,这个博客后面优化的时候会用到，所以提前注册也好。教程在此：github文件下载慢的完美解决方案
  
  如果嫌麻烦的话可以直接点击下载链接来下载主题！
  
  2. 主题配置
  
  2.1 切换主题
  
  注意：首先需要明白什么是站点配置文件，什么是主题配置文件，站点配置文件就是根目录下的配置文件，比如我的博客文件在F:log下，那么站点配置文件就是F:log\_config.yml，主题配置文件就是F:log hemesmatery\_config.yml。另外注意，配置文件中的标点符号不要出现中文格式的标点符号，不然运行会出错。
  
  主题下载完成后，将站点配置文件中的theme值修改为你们自己下载主题的文件名，我的文件名为hexo-theme-matery-develop，那么值就修改为theme: hexo-theme-matery-develop。
  
  一些站点配置文件的其他地方的修改：
  
  语言选择：如果为中文用户，则在language:后添加值zh-CN，如果不修改，默认为英语；
  
  网址修改：url:的值为你的网址名，如http://xxxx.github.io，如果有域名，则修改为你的域名即可，至于有关域名的修改解析，后面我会说到，这里先不说了。
  
  站点配置文件有个per_page属性，建议修改为6的倍数，这样网站在适应设备时，有较好的显示效果
  
  2.2 新建标签 tags 页面
  
  tags 页是用来展示所有标签的页面，如果在你的博客 source 目录下还没有 tags/index.md 文件，那么你就需要新建一个，命令如下：
  
  hexo new page "tags"
  
  编辑你刚刚新建的页面文件 /source/tags/index.md，至少需要以下内容：
  
  --- title: tags date: 2018-09-30 18:23:38 type: "tags" layout: "tags" ---
  
  2.3 新建分类 categories 页面
  
  categories 页是用来展示所有分类的页面，如果在你的博客 source 目录下还没有 categories/index.md 文件，那么你就需要新建一个，命令如下：
  
  hexo new page "categories"
  
  编辑你刚刚新建的页面文件 /source/categories/index.md，至少需要以下内容：
  
  --- title: categories date: 2018-09-30 17:25:30 type: "categories" layout: "categories" ---
  
  2.4 新建关于我 about 页面
  
  about 页是用来展示关于我和我的博客信息的页面，如果在你的博客 source 目录下还没有 about/index.md 文件，那么你就需要新建一个，命令如下：
  
  hexo new page "about"
  
  编辑你刚刚新建的页面文件 /source/about/index.md，至少需要以下内容：
  
  --- title: about date: 2018-09-30 17:25:30 type: "about" layout: "about" ---
  
  2.5 新建留言板 contact 页面 (可选)
  
  contact 页是用来展示留言板信息的页面，如果在你的博客 source 目录下还没有 contact/index.md 文件，那么你就需要新建一个，命令如下：
  
  hexo new page "contact"
  
  编辑你刚刚新建的页面文件 /source/contact/index.md，至少需要以下内容：
  
  --- title: contact date: 2018-09-30 17:25:30 type: "contact" layout: "contact" ---
  
  注：本留言板功能依赖于第三方评论系统，请激活你的评论系统才有效果。并且在主题的 _config.yml 文件中，第 19 至 21 行的“菜单”配置，取消关于留言板的注释即可。
  
  2.6 新建友情链接 friends 页面 (可选)
  
  friends 页是用来展示友情链接信息的页面，如果在你的博客 source 目录下还没有 friends/index.md 文件，那么你就需要新建一个，命令如下
  
  hexo new page "friends"
  
  编辑你刚刚新建的页面文件 /source/friends/index.md，至少需要以下内容：
  
  --- title: friends date: 2018-12-12 21:25:30 type: "friends" layout: "friends" ---
  
  同时，在你的博客 source 目录下新建 _data 目录，在 _data 目录中新建 friends.json 文件，文件内容如下所示：
  
  [{ "avatar": "http://image.luokangyuan.com/1_qq_27922023.jpg", "name": "码酱", "introduction": "我不是大佬，只是在追寻大佬的脚步", "url": "http://luokangyuan.com/", "title": "前去学习" }, { "avatar": "http://image.luokangyuan.com/4027734.jpeg", "name": "闪烁之狐", "introduction": "编程界大佬，技术牛，人还特别好，不懂的都可以请教大佬", "url": "https://blinkfox.github.io/", "title": "前去学习" }, { "avatar": "http://image.luokangyuan.com/avatar.jpg", "name": "ja_rome", "introduction": "平凡的脚步也可以走出伟大的行程", "url": "https://me.csdn.net/jlh912008548", "title": "前去学习" }]
  
  2.7 菜单导航配置
  
  2.7.1. 配置基本菜单导航的名称、路径url和图标icon.
  
  菜单导航名称可以是中文也可以是英文(如：Index或主页)
  
  图标icon 可以在Font Awesome 中查找
  
  menu: Index: url: / icon: fas fa-home Tags: url: /tags icon: fas fa-tags Categories: url: /categories icon: fas fa-bookmark Archives: url: /archives icon: fas fa-archive About: url: /about icon: fas fa-user-circle Friends: url: /friends icon: fas fa-address-book
  
  当然啦，这些图标呢一开始都是默认的，你可以不用修改，像我博客里面这样子
  
  2.7.2. 二级菜单配置方法
  
  如果你需要二级菜单则可以在原基本菜单导航的基础上如下操作
  
  在需要添加二级菜单的一级菜单下添加children关键字(如:About菜单下添加children)
  
  在children下创建二级菜单的名称name,路径url和图标icon.
  
  注意每个二级菜单模块前要加 -.
  
  注意缩进格式
  
  menu: Index: url: / icon: fas fa-home Tags: url: /tags icon: fas fa-tags Categories: url: /categories icon: fas fa-bookmark Archives: url: /archives icon: fas fa-archive About: url: /about icon: fas fa-user-circle-o Friends: url: /friends icon: fas fa-address-book Medias: icon: fas fa-list children: - name: Musics url: /musics icon: fas fa-music - name: Movies url: /movies icon: fas fa-film - name: Books url: /books icon: fas fa-book - name: Galleries url: /galleries icon: fas fa-image
  
  2.8 添加emoji表情支持（可选的）
  
  本主题新增了对emoji表情的支持，使用到了 hexo-filter-github-emojis 的 Hexo 插件来支持 emoji表情的生成，把对应的markdown emoji语法（::,例如：:smile:）转变成会跳跃的emoji表情，安装命令如下：
  
  npm install hexo-filter-github-emojis --save
  
  在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：
  
  githubEmojis: enable: true className: github-emoji inject: true styles: customEmojis:
  
  执行 hexo clean && hexo g 重新生成博客文件，然后就可以在文章中对应位置看到你用emoji语法写的表情了。
  
  2.9 代码高亮
  
  由于 Hexo 自带的代码高亮主题显示不好看，所以主题中使用到了 hexo-prism-plugin 的 Hexo 插件来做代码高亮，安装命令如下
  
  npm i -S hexo-prism-plugin
  
  然后，修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false，并新增 prism 插件相关的配置，主要配置如下：
  
  prism_plugin: mode: 'preprocess' # realtime/preprocess theme: 'tomorrow' line_number: false # default false custom_css:
  
  这里注意了！当你添加代码块时一定要在```后面加上语言的名字不然此功能会无效！看下图：
  
  yml就是语言名字。
  
  2.10 搜索
  
  本主题中还使用到了 hexo-generator-search 的 Hexo 插件来做内容搜索，安装命令如下：
  
  npm install hexo-generator-search --save
  
  在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：
  
  search: path: search.xml field: post format: html limit: 10000
2.11 中文链接转拼音（可选的）

如果你的文章名称是中文的，那么 Hexo 默认生成的永久链接也会有中文，这样不利于 SEO，且 gitment 评论对中文链接也不支持。我们可以用 hexo-permalink-pinyin Hexo 插件使在生成文章时生成中文拼音的永久链接。

安装命令如下：
```
npm i hexo-permalink-pinyin --save
```
在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：
```
permalink_pinyin:
  enable: true
  separator: '-' # default: '-'
```
注：除了此插件外，hexo-abbrlink 插件也可以生成非中文的链接。

2.12 文章字数统计插件（可选的）

如果你想要在文章中显示文章字数、阅读时长信息，可以安装 hexo-wordcount插件。

安装命令如下：
```
npm i --save hexo-wordcount
```
然后只需在本主题下的 _config.yml 文件中，激活以下配置项即可：
```
wordCount:
  enable: false # 将这个值设置为 true 即可.
  postWordCount: true
  min2read: true
  totalCount: true
```
2.13 添加 RSS 订阅支持（可选的）

本主题中还使用到了 hexo-generator-feed 的 Hexo 插件来做 RSS，安装命令如下：
```
npm install hexo-generator-feed --save
```
在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：
```
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date
```
执行 hexo clean && hexo g 重新生成博客文件，然后在 public 文件夹中即可看到 atom.xml 文件，说明你已经安装成功了。

2.14 添加 DaoVoice 在线聊天功能（可选的）

前往 DaoVoice 官网注册并且获取 app_id，并将 app_id 填入主题的 _config.yml 文件中

2.15 添加 Tidio 在线聊天功能（可选的）

前往 Tidio 官网注册并且获取 Public Key，并将 Public Key 填入主题的 _config.yml 文件中。

2.16 修改页脚

页脚信息可能需要做定制化修改，而且它不便于做成配置信息，所以可能需要你自己去再修改和加工。修改的地方在主题文件的 /layout/_partial/footer.ejs 文件中，包括站点、使用的主题、访问量等。

2.17 修改社交链接

在主题的 _config.yml 文件中，默认支持 QQ、GitHub 和邮箱等的配置，你可以在主题文件的 /layout/_partial/social-link.ejs 文件中，新增、修改你需要的社交链接地址，增加链接可参考如下代码：
```
<% if (theme.socialLink.github) { %>
    <a href="<%= theme.socialLink.github %>" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50">
        <i class="fab fa-github"></i>
    </a>
<% } %>
```
其中，社交图标（如：fa-github）你可以在 Font Awesome 中搜索找到。以下是常用社交图标的标识，供你参考：
- Facebook: fab fa-facebook
- Twitter: fab fa-twitter
- Google-plus: fab fa-google-plus
- Linkedin: fab fa-linkedin
- Tumblr: fab fa-tumblr
- Medium: fab fa-medium
- Slack: fab fa-slack
- Sina Weibo: fab fa-weibo
- Wechat: fab fa-weixin
- QQ: fab fa-qq
- Zhihu: fab fa-zhihu
注意: 本主题中使用的 Font Awesome 版本为 5.11.0。

2.18 修改打赏的二维码图片

在主题文件的 source/medias/reward 文件中，你可以替换成你的的微信和支付宝的打赏二维码图片。

2.19 配置音乐播放器（可选的）

新版主题支持接入第三方音乐，如QQ音乐，网易云音乐，酷狗音乐等等

要支持音乐播放，在主题的 _config.yml 配置文件中激活music配置即可：
```
# 是否在首页显示音乐
music:
  enable: true
  title:             #非吸底模式有效
    enable: true
    show: 听听音乐
  server: netease   #require music platform: netease, tencent, kugou, xiami, baidu
  type: playlist    #require song, playlist, album, search, artist
  id: 503838841     #require song id / playlist id / album id / search keyword
  fixed: false      # 开启吸底模式
  autoplay: false   # 是否自动播放
  theme: '#42b983'
  loop: 'all'       # 音频循环播放, 可选值: 'all', 'one', 'none'
  order: 'random'   # 音频循环顺序, 可选值: 'list', 'random'
  preload: 'auto'   # 预加载，可选值: 'none', 'metadata', 'auto'
  volume: 0.7       # 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
  listFolded: true  # 列表默认折叠
```
server可选netease（网易云音乐），tencent（QQ音乐），kugou（酷狗音乐），xiami（虾米音乐），

baidu（百度音乐）。

type可选song（歌曲），playlist（歌单），album（专辑），search（搜索关键字），artist（歌手）

id获取示例: 浏览器打开网易云音乐，点击我喜欢的音乐歌单，地址栏有一串数字，playlist的id即为这串数字。

3. 文章 Front-matter 介绍

Front-matter 选项详解

Front-matter 选项中的所有内容均为非必填的。但我仍然建议至少填写 title 和 date 的值。

注意:
1. 如果 img 属性不填写的话，文章特色图会根据文章标题的 hashcode 的值取余，然后选取主题中对应的特色图片，从而达到让所有文章都的特色图各有特色。
2. date 的值尽量保证每篇文章是唯一的，因为本主题中 Gitalk 和 Gitment 识别 id 是通过 date 的值来作为唯一标识的。
3. 如果要对文章设置阅读验证密码的功能，不仅要在 Front-matter 中设置采用了 SHA256 加密的 password 的值，还需要在主题的 _config.yml 中激活了配置。有些在线的 SHA256 加密的地址，可供你使用：开源中国在线工具、chahuo、站长工具。
4. 您可以在文章md文件的 front-matter 中指定 reprintPolicy 来给单个文章配置转载规则
以下为文章的 Front-matter 示例。

最简示例
```
---
title: typora-vue-theme主题介绍
date: 2018-09-07 09:25:00
---
```
最全示例
```
---
title: typora-vue-theme主题介绍
date: 2018-09-07 09:25:00
author: 赵奇
img: /source/images/xxx.jpg
top: true
cover: true
coverImg: /images/1.jpg
password: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92
toc: false
mathjax: false
summary: 这是你自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
categories: Markdown
tags:
  - Typora
  - Markdown
---
```
4. 自定制修改

在本主题的 _config.yml 中可以修改部分自定义信息，有以下几个部分：
- 菜单
- 我的梦想
- 首页的音乐播放器和视频播放器配置
- 是否显示推荐文章名称和按钮配置
- favicon 和 Logo
- 个人信息
- TOC 目录
- 文章打赏信息
- 复制文章内容时追加版权信息
- MathJax
- 文章字数统计、阅读时长
- 点击页面的’爱心’效果
- 我的项目
- 我的技能
- 我的相册
- Gitalk、Gitment、Valine 和 disqus 评论配置
- 不蒜子统计和谷歌分析（Google Analytics）
- 默认特色图的集合。当文章没有设置特色图时，本主题会根据文章标题的 hashcode 值取余，来选择展示对应的特色图
我认为个人博客应该都有自己的风格和特色。如果本主题中的诸多功能和主题色彩你不满意，可以在主题中自定义修改，很多更自由的功能和细节点的修改难以在主题的 _config.yml 中完成，需要修改源代码才来完成。以下列出了可能对你有用的地方：

4.1 修改主题颜色

在主题文件的 /source/css/matery.css 文件中，搜索 .bg-color 来修改背景颜色：
```
/* 整体背景颜色，包括导航、移动端的导航、页尾、标签页等的背景颜色. */
.bg-color {
    background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%);
}
/*如果想去掉banner图的颜色渐变效果，请将以下的css属性注释掉或者删除掉即可*/
@-webkit-keyframes rainbow {
   /* 动态切换背景颜色. */
}
@keyframes rainbow {
    /* 动态切换背景颜色. */
}
```
4.2 修改 banner 图和文章特色图

你可以直接在 /source/medias/banner 文件夹中更换你喜欢的 banner 图片，主题代码中是每天动态切换一张，只需 7 张即可。如果你会 JavaScript 代码，可以修改成你自己喜欢切换逻辑，如：随机切换等，banner 切换的代码位置在 /layout/_partial/bg-cover-content.ejs 文件的 `` 代码中：
```
$('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');
```
在 /source/medias/featureimages 文件夹中默认有 24 张特色图片，你可以再增加或者减少，并需要在 _config.yml 做同步修改。

如果想改为每小时或者每分钟切换banner图的话，需要将getDay()改为getHours()或者getMinutes()即可

4.3 修改网站相关信息

首先看一个图，如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7JotyEqo-1582883898873)(https://cdn.jsdelivr.net/gh/baifeng66/picgophots/images/20200115115221.png)]

紧接着放上相关的配置文件信息：
1. 网站信息的修改
```
#这是根目录下的配置文件信息
title: 过客~励む   #这是网站标题
subtitle: 励む    #这是网站副标题subtitler
# 下面两个description,keywords，需要填上，如果想让搜索引擎收录，这个做SEO优化必不可忽视的两个属性
description: 专注于Web,分享生活,分享知识  #网站描述
keywords: [HTML, CSS, JavaScript, JQuery, React, Vue.js等]  #网站的关键词
author: YangAir  #作者，文章版权所显示的
language: zh-CN  #网站语言，不填写，默认为英文
timezone:   #时区，可以不填写
```
```
# 这是主题配置文件的相关信息
# 配置网站favicon和网站LOGO
# 此处我用的CDN，也可以使用本地文件
favicon: https://cdn.jsdelivr.net/gh/Yafine/cdn@3.1.2/source/favicon.png
logo: https://cdn.jsdelivr.net/gh/Yafine/cdn@3.1.2/source/logo.png

# 网站副标题，打字效果
# 如果有符号 ‘ ，请在 ’ 前面加上 
subtitle: 
  enable: true
  loop: true # 是否循环
  showCursor: true # 是否显示光标
  startDelay: 300 # 开始延迟
  typeSpeed: 100 # 打字速度
  backSpeed: 50 # 删除速度
  sub1: 志之所向，金石为开，谁能御之？
  sub2: 花开不是为了花落，而是为了开的更加灿烂。
  sub3: 没有伞的孩子必须努力奔跑！
  sub4: 欲望以提升热忱，毅力以磨平高山。
  sub5: 如果放弃太早，你永远都不知道自己会错过什么。
  sub6: 没有礁石，就没有美丽的浪花；没有挫折，就没有壮丽的人生。
```
注意：

网站打字效果副标题默认有两个，即sub1和sub2，如果想写多个，则需要修改两处地方，首先修改配置文件，如上面所示，在sub1和sub2后面继续添加即可，然后在去主题目录下的layout文件夹下的_partial文件夹，修改bg-cover-content.ejs文件，大约在12行左右，如下面所示：
```
 <div class="description center-align">
     <% if (theme.subtitle.enable) { %>
         <span id="subtitle"></span>
         <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
        <script>
            var typed = new Typed("#subtitle", {
                strings: ['<%= theme.subtitle.sub1 %>',
                          '<%= theme.subtitle.sub2 %>',
                          '<%= theme.subtitle.sub3 %>',
                          '<%= theme.subtitle.sub4 %>',
                          '<%= theme.subtitle.sub5 %>',
                          '<%= theme.subtitle.sub6 %>'],
                 startDelay: <%= theme.subtitle.startDelay %>,
                 typeSpeed: <%= theme.subtitle.typeSpeed %>,
                 loop: <%= theme.subtitle.loop %>,   
                 backSpeed: <%= theme.subtitle.backSpeed %>,
                 showCursor: <%= theme.subtitle.showCursor %>
              });
          </script>
      <% } else { %>
            <%= config.description %>
      <% } %>
</div>
```
1. 社交链接的修改
默认的配置信息为：
```
# 首页 banner 中的第二行个人信息配置，留空即不启用
socialLink:
  github:  https://github.com/blinkfox
  email: 1181062873@qq.com
  facebook: # https://www.facebook.com/xxx
  twitter: # https://twitter.com/xxx
  qq: 1181062873
  weibo: # https://weibo.com/xxx
  zhihu: # https://www.zhihu.com/xxx
  rss: true # true、false
```
如果想添加简书，CSDN，掘金，博客园等等，需要在主题配置文件添加相关配置，如下是我个人的配置：
```
socialLink:
  qq: 1035800145
  weixin: https://cdn.jsdelivr.net/gh/Yafine/Yafine-imgs/images/wechat.png
  github: https://github.com/Yafine
  email: mailto:1035800145@qq.com
  facebook: # https://www.facebook.com/xxx
  twitter: # https://twitter.com/xxx
  weibo: # https://weibo.com/xxx
  zhihu: https://www.zhihu.com/people/xuan-tian-40-64/activities
  juejin: https://juejin.im/user/5a902053f265da4e7527ae71/activities
  csdn: https://blog.csdn.net/victoryxa
  jianshu: https://www.jianshu.com/u/3b3856869772
  cnblogs: https://www.cnblogs.com/yafine/
  rss: true # true、false
```
其中的weixin我是用的图片链接，会跳转到一个新的标签页，之后还需要修改ejs文件，文件在主题目录下的layout文件夹下的_partial文件夹，修改social-link.ejs，添加相关的配置，我个人添加的配置如下：
```
<% if (theme.socialLink.jianshu) { %>
    <a href="<%= theme.socialLink.jianshu %>" class="tooltipped" target="_blank" data-tooltip="关注我的简书: <%= theme.socialLink.jianshu %>" data-position="top" data-delay="50">
        <i class="fab fa-jianshu">简</i>
    </a>
<% } %>

<% if (theme.socialLink.csdn) { %>
    <a href="<%= theme.socialLink.csdn %>" class="tooltipped" target="_blank" data-tooltip="关注我的CSDN: <%= theme.socialLink.csdn %>" data-position="top" data-delay="50">
        <i class="fab fa-csdn">C</i>
    </a>
<% } %>
<% if (theme.socialLink.juejin) { %>
    <a href="<%= theme.socialLink.juejin %>" class="tooltipped" target="_blank" data-tooltip="关注我的掘金: <%= theme.socialLink.juejin %>" data-position="top" data-delay="50">
        <i class="fab fa-juejin">掘</i>
    </a>
<% } %>

<% if (theme.socialLink.cnblogs) { %>
    <a href="<%= theme.socialLink.cnblogs %>" class="tooltipped" target="_blank" data-tooltip="关注我的博客园: <%= theme.socialLink.cnblogs %>" data-position="top" data-delay="50">
        <i class="fab fa-juejin">博</i>
    </a>
<% } %>
<% if (theme.socialLink.weixin) { %>
    <a href="<%= theme.socialLink.weixin %>" class="tooltipped" target="_blank" data-tooltip="微信联系我: <%= theme.socialLink.weixin %>" data-position="top" data-delay="50">
        <i class="fab fa-weixin"></i>
    </a>
<% } %>
```
到这里此次教程就完了，下一篇呢，我会把一些美化主题的方法告诉你们，还有一些优化访问博客速度...等等之类的。

只要你有一件合理的事去做，你的生活就会显得特别美好。
查看全文

相关阅读:
微软职位内部推荐-Software Engineer II
微软职位内部推荐-Software Engineer II
微软职位内部推荐-Senior NLP Scientist
微软职位内部推荐-Software Engineer
微软职位内部推荐-Service Engineer for Office365
微软职位内部推荐-Software Engineer II
微软职位内部推荐-Sr. SE
微软职位内部推荐-Sr. SW Engineer for Privacy Id
Kibana常用命令
 API接口规范

原文地址：https://www.cnblogs.com/whiremapple/p/12419097.html

Hexo博客主题安装和优化（一）

一、Hexo博客主题安装以及优化

主题大佬博客

主题特性

1. 主题下载与安装

2. 主题配置

2.1 切换主题

2.2 新建标签 tags 页面

2.3 新建分类 categories 页面

2.4 新建关于我 about 页面

2.5 新建留言板 contact 页面 (可选)

2.6 新建友情链接 friends 页面 (可选)

2.7 菜单导航配置

2.7.1. 配置基本菜单导航的名称、路径url和图标icon.

2.7.2. 二级菜单配置方法

2.8 添加emoji表情支持（可选的）

2.9 代码高亮

2.10 搜索

2.11 中文链接转拼音（可选的）

2.12 文章字数统计插件（可选的）

2.13 添加 RSS 订阅支持（可选的）

2.14 添加 DaoVoice 在线聊天功能（可选的）

2.15 添加 Tidio 在线聊天功能（可选的）

2.16 修改页脚

2.17 修改社交链接

2.18 修改打赏的二维码图片

2.19 配置音乐播放器（可选的）

3. 文章 Front-matter 介绍

Front-matter 选项详解

最简示例

最全示例

4. 自定制修改

4.1 修改主题颜色

4.2 修改 banner 图和文章特色图

4.3 修改网站相关信息