Hexo博客搭建系列Chapter4——Hexo博客美化

浏览次数 : 次 2020-07-31

博文字数统计 : 1.8k字 | 阅读所需时长 : 9分

× 文章目录

1. Hexo博客搭建系列——Chapter 4
1. 1.1. 四、博客设置美化

在Windows系统上利用Hexo搭建博客系列——Chapter4
Chapter4：
- 更换Yilia主题
- 配置图片和链接资源
- 增加摘要、目录、归档
- 美化目录、字体、背景
- 增加文章总数(底部)、用户信息、个性签名

Hexo博客搭建系列——Chapter 4

四、博客设置美化

各功能教程超链接汇总

1. 主题更换：Yilia

下载开源的主题，存放在HexoBlog/themes目录下
选择Github上很多人Star的[Yilia主题](https://github.com/litten/hexo-theme-yilia.git themes/yilia)，此外，还有Yilia-plus主题、Next主题等。
1
2
># 在HexoBlog目录下Git bash
git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

修改_config.yml文件

1
2
3

theme : landscape
# 改为
theme : yilia

清理hexo并重新生成页面，部署到Github上

# 清理
hexo clean

# 生成
hexo g
hexo generate

# 本地预览
hexo s

# 部署
hexo d

2. 配置图片资源和链接资源

添加图片资源文件夹

路径为 themes/yilia/source/下，可添加一个 assets 文件夹，里面存放图片资源即可。
配置文件中直接引用
路径为 themes/yilia/_config.yml，添加WeChat、Email、Github等作为博主的联系方式，添加个人头像、网页favicon。
1
2
3
4
5
6
# 微信二维码图片
weixin: /assets/wechat.jpg
# 头像图片
avatar: /assets/avatar.jpg
# 网页图标
favicon: /assets/favicon.png
链接资源——配置文件中直接引用链接地址
路径为 themes/yilia/_config.yml，如：Github、Facebook、Twitter、Bilibili等。
1
2
>github: "https://github.com/Chthollists"
bilibili: "https://space.bilibili.com/2030799"
注意：_config.yml的语句对空格、缩进要求严格

3. 博客文章美化设置

3.1 显示文章摘要

在MD格式文章正文，一般在标题后插入 
同时需要注释掉 themes/yilia/_config.yml内的excerpt_link: more项。
1
2
# 文章太长，截断按钮文字
# excerpt_link: more

3.2 显示文章目录TOC

TOC(table of content) 在 themes/yilia/_config.yml中进行配置

# 目录设定：
# 0-不显示目录； 
# 1-文章对应的md文件里有toc:true属性，才有目录； 
# 2-所有文章均显示目录
toc: 2

3.3 增加归档菜单

修改 themes/yilia/_config.yml配置

1
2
3

menu:
 主页:  /
 归档:  /archives/index.html

3.4 美化目录

原始目录

通过toc = 2生成的蓝底目录不够美观，通过修改css和ejs文件来自制滑动白色目录，注意：此时yilia主题的原目录无法显示。

修改css文件

themes\yilia\source\路径下找到main.xxxxx.css，在最后添加代码

#container .show-toc-btn,
#container .toc-article{display:block}

.toc-article{
    z-index:100;
    background:#fff;
    border:1px solid #ccc;
    max-width:250px;
    min-width:150px;
    max-height:500px;
    overflow-y:auto;
    -webkit-box-shadow:5px 5px 2px #ccc;
    box-shadow:5px 5px 2px #ccc;
    font-size:12px;
    padding:10px;
    position:fixed;
    right:35px;
    top:129px
}

.toc-article .toc-close{
    font-weight:700;
    font-size:20px;
    cursor:pointer;
    float:right;color:#ccc
}

.toc-article .toc-close:hover{
    color:#000
}

.toc-article .toc{
    font-size:12px;
    padding:0;
    line-height:20px
}

.toc-article .toc .toc-number{
    color:#333
}

.toc-article .toc .toc-text:hover{
    text-decoration:underline;
    color:#2a6496
}

.toc-article li{
    list-style-type:none
}

.toc-article .toc-level-1{
    margin:4px 0
}

.toc-article .toc-child{}

@-moz-keyframes cd-bounce-1{
    0%{
        opacity:0;
        -o-transform:scale(1);
        -webkit-transform:scale(1);
        -moz-transform:scale(1);
        -ms-transform:scale(1);
        transform:scale(1)
    }
    60%{
        opacity:1;
        -o-transform:scale(1.01);
        -webkit-transform:scale(1.01);
        -moz-transform:scale(1.01);
        -ms-transform:scale(1.01);
        transform:scale(1.01)
    }
    100%{
        -o-transform:scale(1);
        -webkit-transform:scale(1);
        -moz-transform:scale(1);
        -ms-transform:scale(1);
        transform:scale(1)}
}

@-webkit-keyframes cd-bounce-1{
    0%{
        opacity:0;
        -o-transform:scale(1);
        -webkit-transform:scale(1);
        -moz-transform:scale(1);
        -ms-transform:scale(1);
        transform:scale(1)
    }
    60%{
        opacity:1;
        -o-transform:scale(1.01);
        -webkit-transform:scale(1.01);
        -moz-transform:scale(1.01);
        -ms-transform:scale(1.01);
        transform:scale(1.01)
    }
    100%{
        -o-transform:scale(1);
        -webkit-transform:scale(1);
        -moz-transform:scale(1);
        -ms-transform:scale(1);
        transform:scale(1)}
}

@-o-keyframes cd-bounce-1{
    0%{
        opacity:0;
        -o-transform:scale(1);
        -webkit-transform:scale(1);
        -moz-transform:scale(1);
        -ms-transform:scale(1);
        transform:scale(1)
    }
    60%{
        opacity:1;
        -o-transform:scale(1.01);
        -webkit-transform:scale(1.01);
        -moz-transform:scale(1.01);
        -ms-transform:scale(1.01);
        transform:scale(1.01)
    }
    100%{
        -o-transform:scale(1);
        -webkit-transform:scale(1);
        -moz-transform:scale(1);
        -ms-transform:scale(1);
        transform:scale(1)}
}

@keyframes cd-bounce-1{
    0%{
        opacity:0;
        -o-transform:scale(1);
        -webkit-transform:scale(1);
        -moz-transform:scale(1);
        -ms-transform:scale(1);
        transform:scale(1)
    }
    60%{
        opacity:1;
        -o-transform:scale(1.01);
        -webkit-transform:scale(1.01);
        -moz-transform:scale(1.01);
        -ms-transform:scale(1.01);
        transform:scale(1.01)
    }
    100%{
        -o-transform:scale(1);
        -webkit-transform:scale(1);
        -moz-transform:scale(1);
        -ms-transform:scale(1);
        transform:scale(1)}
}

.show-toc-btn{
    display:none;
    z-index:10;
    width:30px;
    min-height:14px;
    overflow:hidden;
    padding:4px 6px 8px 5px;
    border:1px solid #ddd;
    border-right:none;
    position:fixed;
    right:40px;
    text-align:center;
    background-color:#f9f9f9
}

.show-toc-btn .btn-bg{
    margintop:2px;
    display:block;
    width:16px;
    height:14px;
    background:url(https://7xtawy.com1.z0.glb.clouddn.com/show.png) no-repeat;
    -webkit-background-size:100%;
    -moz-background-size:100%;
    background-size:100%
}

.show-toc-btn .btn-text{
    color:#999;
    font-size:12px
}

.show-toc-btn:hover{
    cursor:pointer
}

.show-toc-btn:hover .btn-bg{
    background-position:0 -16px
}

.show-toc-btn:hover .btn-text{
    font-size:12px;
    color:#ea8010
}

.toc-article li ol, .toc-article li ul {
    margin-left: 30px;
}
.toc-article ol, .toc-article ul {
    margin: 10px 0;
}

修改ejs文件：

找到themes\yilia\layout\_partial\article.ejs，在 </header> <% } %>下面加入

<!-- 目录内容 -->
<% if (!index && post.toc){ %>
 <p class="show-toc-btn" id="show-toc-btn" onclick="showToc();" style="display:none">
       <span class="btn-bg"></span>
       <span class="btn-text">文章导航</span>
       </p>
	<div id="toc-article" class="toc-article">
	    <span id="toc-close" class="toc-close" title="隐藏导航" onclick="showBtn();">×</span>
		<strong class="toc-title">文章目录</strong>
        <%- toc(post.content) %>
      </div>
<script type="text/javascript">
	function showToc(){
		var toc_article = document.getElementById("toc-article");
		var show_toc_btn = document.getElementById("show-toc-btn");
		toc_article.setAttribute("style","display:block");
		show_toc_btn.setAttribute("style","display:none");
		};
	function showBtn(){
		var toc_article = document.getElementById("toc-article");
		var show_toc_btn = document.getElementById("show-toc-btn");
		toc_article.setAttribute("style","display:none");
		show_toc_btn.setAttribute("style","display:block");
		};
</script>
   <% } %>
<!-- 目录内容结束 -->

注意：此时MD文件，即文章开头需要设置toc属性——toc: true

---
title: 				 #文章标题
categories:          #文章分类路径，可以省略    
toc: true            #是否显示目录，需要安装插件或者主题自带
date:                #文章日期
tags:                #标签
---

3.5 字体美化

正文字体美化

1	<font color="purple" face="Microsoft YaHei" size= 5><b>content内容 </b></font>

修改文件路径为theme\yilia\source\main.0cf68a.css

# font-family:字体
font-family : Times New Roman

# .article-entry .highlight .line(color:#FFF----默认白色
.article-entry .highlight .line(color : 十六进制颜色

4. 博客主页美化

4.1 修改博客标题、子标题、用户

修改文件路径为博客根路径下的_config.yml

# Site
title: Chthollists的平凡之路
subtitle: '今日物语'
description: ''
keywords: xxx
author: 'xxx'
# 设置为英文 en
language: Zh-cn
timezone: ''

4.2 主页左侧显示文章总数

在themes\yilia\layout\_partial\left-col.ejs文件

# 查找
<nav class="header-menu">
 <ul>
 <% for (var i in theme.menu){ %>
     <li><a href="<%- url_for(theme.menu[i]) %>"><%= i %></a></li>
 <%}%>
 </ul>
</nav>

# 后面添加
<nav>
 总文章数 <%=site.posts.length%>
</nav>

4.3 设置个性签名

在 themes/yilia/_config.yml文件中，修改aboutme项

1	aboutme: <font color="purple" face="Microsoft YaHei" size= 5><b>content内容<br> </b></font>

本文作者： Chthollists
发布时间： 2020-07-31 15:49:00
最后更新： 2022-01-21 23:09:05
本文标题： Hexo博客搭建系列Chapter4——Hexo博客美化
本文链接： https://chthollists.github.io/post/139f76f2.html
版权声明： 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明作者和出处！