点击上方蓝字  关注我们

小罗giaogiao屋

简单易懂的才是最好的

前言：
    嗨，老铁们！上一篇文章介绍了如何基础地创建一个博客，今天呢，就再续前章，把我们目前这么丑丑的博客变成一见倾心的美物~所以，废话不多说，进阶！向着美丽出发！

ONE

1

主题个性化设置

个人比较喜欢的主题是hexo-theme-matery，下面也都是基于这个主题的一些配置

TWO

2

主题下载

项目下执行

1.git clone https://github.com/blinkfox/hexo-theme-matery.git themes/matery


更换根目录下的_config.yml配置文件中的theme参数

## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: matery

修改成你刚刚clone到本地要更换的主题

文章头部设置

将/scaffolds/post.md修改为如下代码：

---
title: {{ title }}
date: {{ date }}
top: false
cover: false
password:
summary:
tags:
categories:
---


效果示例：

---
title: TypeScript声明文件
date: 2019-09-05 10:29:29
categories: 
- TypeScript
tags: 
- TypeScript
---


Three

3

导航配置

根目录_config.yml配置

title: Luo's Blog
subtitle: Alexd star
description: Welcome to Luo'Blog
keywords: Luo,github
author: 罗成
language: zh-CN
timezone:


menu:
  主页:
    url: /
    icon: fa-home
  标签:
    url: /tags
    icon: fa-tags
  分类:
    url: /categories
    icon: fa-bookmark
  工具:
    url: /friends
    icon: fa-rocket
  归档:
    url: /archives
    icon: fa-archive
  关于:
    url: /about
    icon: fa-user-circle-o


效果：

标签

页面文章标签配置：

---
title: nvm版本管理
date: 2019-09-05 10:29:29
tags: 
- nodejs
- npm
- nvm
---


在每个md文件的头部添加tags标签属性， 标签下面可以写任意的标签value值；

文章里面展示效果如下（左侧）：

导航上配置完标签之后需要在本地新建标签的目录

hexo new page tags


切换到标签页展示如下：

点击每个标签都能筛选出该标签下对应的文章。

分类

文章分类配置：

---
title: nvm版本管理
date: 2019-09-05 10:29:29
categories: 
- nodejs
---


文章内部展示效果如下（右侧）：

导航上配置完分类之后需要在本地新建分类的目录

hexo new page categories


切换到分类页展示如下：

404页面

原来的主题没有404页面，首先在/source/目录下新建一个404.md，内容如下：

---
title: 404
date: 2017-07-19 16:41:10
type: "404"
layout: "404"
description: "你访问的页面被外星人叼走了 :("
---


然后在/themes/matery/layout/目录下新建一个404.ejs文件，内容如下：

<style type="text/css">
    /* don't remove. */
    .about-cover {
        height: 75vh;
    }
</style>

<div class="bg-cover pd-header about-cover">
    <div class="container">
        <div class="row">
            <div class="col s10 offset-s1 m8 offset-m2 l8 offset-l2">
                <div class="brand">
                    <div class="title center-align">
                        404
                    </div>
                    <div class="description center-align">
                        <%= page.description %>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // 每天切换 banner 图.  Switch banner image every day.
    $('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');
</script>


效果如下：

添加建站时间

修改/themes/matery/layout/_partial/footer.ejs文件，在最后加上

<script language = javascript >
    function siteTime() {
        window.setTimeout("siteTime()", 1000);
        var seconds = 1000;
        var minutes = seconds * 60;
        var hours = minutes * 60;
        var days = hours * 24;
        var years = days * 365;
        var today = new Date();
        var todayYear = today.getFullYear();
        var todayMonth = today.getMonth() + 1;
        var todayDate = today.getDate();
        var todayHour = today.getHours();
        var todayMinute = today.getMinutes();
        var todaySecond = today.getSeconds();
        var t1 = Date.UTC(2018, 08, 11, 00, 00, 00); //北京时间2018-2-13 00:00:00 
        var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond); 
        var diff = t2 - t1; var diffYears = Math.floor(diff / years); 
        var diffDays = Math.floor((diff / days) - diffYears * 365); 
        var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours); 
        var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes); 
        var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours - diffMinutes * minutes) / seconds); document.getElementById("sitetime").innerHTML = "本站已运行 " +diffYears+" 年 "+diffDays + " 天 " + diffHours + " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒"; 
    } 
    siteTime(); 
</script>


然后在适当位置加上一下代码

<span id="sitetime"></span>


如：

 <div class="col s12 m8 l8 copy-right">
    <span id="sitetime"></span> <br>
    本站由&copy;<a href="https://gongchenghuigch.github.io/" target="_blank">gongchenghui</a>基于
    <a href="https://hexo.io/" target="_blank">Hexo</a> 的
    <a href="https://github.com/blinkfox/hexo-theme-matery" target="_blank">hexo-theme-matery</a>主题搭建.


添加萌萌的动漫人物（看板娘）

先看看添加卡通人物之后的效果：

安装插件

 npm install --save hexo-helper-live2d


安装下载动画人物库 如：

npm install live2d-widget-model-z16 -D


根目录_config.yml配置里面添加：

live2d: 
  enable: true 
  scriptFrom: local 
  pluginRootPath: live2dw/ 
  pluginJsPath: lib/ 
  pluginModelPath: assets/ 
  tagMode: false 
  log: false 
  model: 
    use: live2d-widget-model-z16 
  display: 
    position: right 
    width: 150 
    height: 300 
  mobile: 
    show: true 
    react: 
      opacity: 0.7


动画库的样式示例：

shizuku：

Epsilon2.1

z16：

添加网易云音乐

如何在文章里面插入音乐呢？

打开网易云音乐网页版，找到你自己想听的音乐

点击生成外链接：

然后把里面的HTML代码复制到你的文章里面就可以了。

添加搜索

安装搜索插件：

npm install hexo-generator-search --save


根目录_config.yml配置：

search:
  path: search.xml
  field: post

END

        

        到这里就大功告成啦！！现在你就能看到一个人见人爱的博客，并且还可以拿去分享(ZhuangBi)。哈哈哈，喜欢本教程嘛？纯手打，希望各位大老爷们儿，漂亮姐姐们动动小手“点赞，关注，在看”。一键三连！（可不要下次一定哈）

小刘
“咦？我进自己的网站感觉很慢很卡啊？”
嘿嘿，下期就出网站优化加速的教程啊~不见不散~

小罗

小刘
这么肝嘛？！爱了爱了~

扫码关注 公众号

给你不一样的爱