修复代码块行号不显示bug

修改 themes/matery/source/css/matery.css第95行左右的 pre和 code两段改为如下代码：

pre {
    /* padding: 1.5rem !important; */
    padding: 1.5rem 1.5rem 1.5rem 3.3rem !important;
    margin: 1rem 0 !important;
    background: #272822;
    overflow: auto;
    border-radius: 0.35rem;
    tab-size: 4;
}
code {
    padding: 1px 5px;
    font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
    /* font-size: 0.91rem; */
    color: #e96900;
    background-color: #f8f8f8;
    border-radius: 2px;
}

然后在根目录的 _config.yml中设置 prism_plugin.line_number为 true。

优化文章url路径

有教程认为，将博客目录结构改为如下，就能减少层级，有利于搜索引擎的SEO。其实不然，网站内容的层级是按照从首页开始点击几次能到达你的文章来算的，所以你改不改都是两层就到达了，不在首页的也可以通过 index-archives-post到达，跟文章url长度没有任何关系，所以如下操作作废，你想改也行，不改也行。但是建议已经建站一段时间的同学千万别改，不然会产生很多死链，并且评论issue全部会清空，很麻烦。

seo搜索引擎优化认为，网站的最佳结构是用户从首页点击三次就可以到达任何一个页面，但是我们使用hexo编译的站点打开文章的url是： sitename/year/mounth/day/title四层的结构，这样的url结构很不利于seo，爬虫就会经常爬不到我们的文章，于是，我们可以将url直接改成 sitename/title的形式，并且title最好是用英文，在根目录的 _config.yml文件下修改permalink如下：

# permalink: :year/:month/:day/:title/
permalink::title/

添加雪花特效

首先在 themes/matery/source/libs/others下新建文件 snow.js，并插入如下代码：

/*样式一*/
(function($){
    $.fn.snow = function(options){
    var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('&#10052;'),
    documentHeight  = $(document).height(),
    documentWidth   = $(document).width(),
    defaults = {
        minSize     : 10,
        maxSize     : 20,
        newOn       : 1000,
        flakeColor  : "#AFDAEF" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */
    },
    options = $.extend({}, defaults, options);
    var interval= setInterval( function(){
    var startPositionLeft = Math.random() * documentWidth - 100,
    startOpacity = 0.5 + Math.random(),
    sizeFlake = options.minSize + Math.random() * options.maxSize,
    endPositionTop = documentHeight - 200,
    endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
    durationFall = documentHeight * 10 + Math.random() * 5000;
    $flake.clone().appendTo('body').css({
        left: startPositionLeft,
        opacity: startOpacity,
        'font-size': sizeFlake,
        color: options.flakeColor
    }).animate({
        top: endPositionTop,
        left: endPositionLeft,
        opacity: 0.2
    },durationFall,'linear',function(){
        $(this).remove()
    });
    }, options.newOn);
    };
})(jQuery);
$(function(){
    $.fn.snow({ 
        minSize: 5, /* 定义雪花最小尺寸 */
        maxSize: 50,/* 定义雪花最大尺寸 */
        newOn: 300  /* 定义密集程度，数字越小越密集 */
    });
});
/*样式二*/
/* 控制下雪 */
function snowFall(snow) {
    /* 可配置属性 */
    snow = snow || {};
    this.maxFlake = snow.maxFlake || 200;   /* 最多片数 */
    this.flakeSize = snow.flakeSize || 10;  /* 雪花形状 */
    this.fallSpeed = snow.fallSpeed || 1;   /* 坠落速度 */
}
/* 兼容写法 */
requestAnimationFrame = window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    function(callback) { setTimeout(callback, 1000 / 60); };
cancelAnimationFrame = window.cancelAnimationFrame ||
    window.mozCancelAnimationFrame ||
    window.webkitCancelAnimationFrame ||
    window.msCancelAnimationFrame ||
    window.oCancelAnimationFrame;
/* 开始下雪 */
snowFall.prototype.start = function(){
    /* 创建画布 */
    snowCanvas.apply(this);
    /* 创建雪花形状 */
    createFlakes.apply(this);
    /* 画雪 */
    drawSnow.apply(this)
}
/* 创建画布 */
function snowCanvas() {
    /* 添加Dom结点 */
    var snowcanvas = document.createElement("canvas");
    snowcanvas.id = "snowfall";
    snowcanvas.width = window.innerWidth;
    snowcanvas.height = document.body.clientHeight;
    snowcanvas.setAttribute("style", "position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;");
    document.getElementsByTagName("body")[0].appendChild(snowcanvas);
    this.canvas = snowcanvas;
    this.ctx = snowcanvas.getContext("2d");
    /* 窗口大小改变的处理 */
    window.onresize = function() {
        snowcanvas.width = window.innerWidth;
        /* snowcanvas.height = window.innerHeight */
    }
}
/* 雪运动对象 */
function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) {
    this.x = Math.floor(Math.random() * canvasWidth);   /* x坐标 */
    this.y = Math.floor(Math.random() * canvasHeight);  /* y坐标 */
    this.size = Math.random() * flakeSize + 2;          /* 形状 */
    this.maxSize = flakeSize;                           /* 最大形状 */
    this.speed = Math.random() * 1 + fallSpeed;         /* 坠落速度 */
    this.fallSpeed = fallSpeed;                         /* 坠落速度 */
    this.velY = this.speed;                             /* Y方向速度 */
    this.velX = 0;                                      /* X方向速度 */
    this.stepSize = Math.random() / 30;                 /* 步长 */
    this.step = 0                                       /* 步数 */
}
flakeMove.prototype.update = function() {
    var x = this.x,
        y = this.y;
    /* 左右摆动(余弦) */
    this.velX *= 0.98;
    if (this.velY <= this.speed) {
        this.velY = this.speed
    }
    this.velX += Math.cos(this.step += .05) * this.stepSize;
    this.y += this.velY;
    this.x += this.velX;
    /* 飞出边界的处理 */
    if (this.x >= canvas.width || this.x <= 0 || this.y >= canvas.height || this.y <= 0) {
        this.reset(canvas.width, canvas.height)
    }
};
/* 飞出边界-放置最顶端继续坠落 */
flakeMove.prototype.reset = function(width, height) {
    this.x = Math.floor(Math.random() * width);
    this.y = 0;
    this.size = Math.random() * this.maxSize + 2;
    this.speed = Math.random() * 1 + this.fallSpeed;
    this.velY = this.speed;
    this.velX = 0;
};
// 渲染雪花-随机形状（此处可修改雪花颜色！！！）
flakeMove.prototype.render = function(ctx) {
    var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);
    snowFlake.addColorStop(0, "rgba(255, 255, 255, 0.9)");  /* 此处是雪花颜色，默认是白色 */
    snowFlake.addColorStop(.5, "rgba(255, 255, 255, 0.5)"); /* 若要改为其他颜色，请自行查 */
    snowFlake.addColorStop(1, "rgba(255, 255, 255, 0)");    /* 找16进制的RGB 颜色代码。*/
    ctx.save();
    ctx.fillStyle = snowFlake;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();
};
/* 创建雪花-定义形状 */
function createFlakes() {
    var maxFlake = this.maxFlake,
        flakes = this.flakes = [],
        canvas = this.canvas;
    for (var i = 0; i < maxFlake; i++) {
        flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed))
    }
}
/* 画雪 */
function drawSnow() {
    var maxFlake = this.maxFlake,
        flakes = this.flakes;
    ctx = this.ctx, canvas = this.canvas, that = this;
    /* 清空雪花 */
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (var e = 0; e < maxFlake; e++) {
        flakes[e].update();
        flakes[e].render(ctx);
    }
    /*  一帧一帧的画 */
    this.loop = requestAnimationFrame(function() {
        drawSnow.apply(that);
    });
}
/* 调用及控制方法 */
var snow = new snowFall({maxFlake:60});
snow.start();

然后在主题配置文件里 libs.js里添加一行 snow:/libs/others/snow.js。

在 themes/matery/layout/layout.ejs里添加如下代码：

<!-- 雪花特效 -->
<% if (theme.snow.enable) { %>
<script type="text/javascript" src="<%- theme.libs.js.snow %>"></script>
<% } %>

最后在主题配置文件最后添加：

# 雪花特效
snow:
enable:true

这个特效和动漫一样，有点花里胡哨，并且可能会造成卡顿，所以我并没有开启，还是给大家一个最干净的阅读体验吧。

动态标签栏

在 theme/matery/layout/layout.ejs下添加如下代码：

<script type="text/javascript"> var OriginTitile = document.title, st; document.addEventListener("visibilitychange", function () { document.hidden ? (document.title = "Σ(っ °Д °;)っ喔哟，崩溃啦！", clearTimeout(st)) : (document.title = "φ(゜▽゜*)♪咦，又好了！", st = setTimeout(function () { document.title = OriginTitile }, 3e3)) })
    </script>

常见问题及解答（FAQ）

这个章节主要更新许多同学在搭建博客的过程中咨询我的一些问题。

为什么本地生成完ssh key之后没有.ssh文件夹？

这是我没有想到会遇到的问题，但是很多人还是遇到了，主要问题就是在输入完 ssh-keygen-t rsa-C"792321264@qq.com"之后，很多同学没有按照提示继续输入，而是就这么结束了，然后报错了也没有发现。正确做法是按照提示，一路按回车就行了。

为什么代码块显示有问题？

代码要显示正确，要注意以下几个点：

根目录 _config.yml文件下的 highlight中的 line_number要设置为 false，因为行号有bug，当然如果你按照上面教程修复了bug，就可以改成 true。
不要按照网上教程安装 kramed插件，已经装了的卸载掉。
修改 node_modules/marked/lib/marked.js文件中的 escape和 em两行（在538行左右），改成下面：

escape:/^\\([`*\[\]()#$+\-.!_>])/,
em:/^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

为什么博客本地预览没问题，push到github上就显示不正常？

这个问题可能原因有很多，我暂时列举遇到的情况：

github博客的仓库名称一定要和你的github名字完全一样，比如你github名字叫 abc，那么仓库名字一定要是 abc.github.io。这是大多数人会犯的错误，会导致显示不正常。

更换主题之后，配置文件是修改根目录下的还是主题目录下的？

这个其实都要修改，一般也不会出现重复的属性。具体使用哪个，要看主题的源代码，如果是 config.xxx那就是用的根目录配置文件，如果是 theme.xxx那就用的是主题目录的配置文件。

在哪建立github分支？

点击仓库的 settings-branches，右边点击 addnewbranch即可。

个性化设置（beantech主题，已停更）

下面的个性化设置主要针对的是我之前使用的 beantech主题，当然如果你想用我现在博客这个主题，可以不看这部分。这部分已经停止更新，今后我只会更新 matery主题的各种配置。

更换主题

网上大多数主题都是github排名第一的 Next主题，但是我个人不是很喜欢，我更喜欢 beantech主题，地址在传送门。

首先要注意的是，这个github项目不仅包含了主题文件，还包含了hexo的各种文件。

所以首先下载下来这个项目，然后推荐将下图所有文件全部替换你原本博客根目录下的文件：

当然一般的主题和这个主题有点不一样，只含有主题文件夹，所以把整个文件夹丢到 theme下就行了。

然后运行 hexo clean清空所有生成的网页缓存， hexo g、 hexo d。这时候新的主题网页就生成好了，博客根目录的情况应该大致如下：

博客目录构成介绍

从上图可以看出，博客的目录结构如下：

- node_modules
- public
- scaffolds
- source
    - _posts
    - about
    - archive
    - img
    - tags
- themes

node_modules是node.js各种库的目录， public是生成的网页文件目录， scaffolds里面就三个文件，存储着新文章和新页面的初始设置， source是我们最常用到的一个目录，里面存放着文章、各类页面、图像等文件， themes存放着主题文件，一般也用不到。

我们平时写文章只需要关注 source/_posts这个文件夹就行了。

网站图片都保存在 D:\study\program\blog\source\img目录下，可以修改成自己的图片。

修复文档分类bug

这个主题文档分类功能有个bug，一直没有得到解决，直到最近，我才发现是源文件的单词拼错了。。。

打开 D:\study\program\blog\scaffolds\post.md，单词 catagories改为 categories。

添加畅言评论插件

主题自带了多说评论插件，但是多说已经关闭了，所以我换成了畅言评论插件。

首先你得注册一个畅言账号，地址。然后打开如下页面，复制该段代码：

打开 D:\study\program\blog\themes\beantech\layout\post.ejs，将代码粘贴到如下位置：

然后重新生成一下网页，可以看到效果图如下：

更多插件例如热评话题之类的，可以自行在畅言后台找到代码添加。

添加图片放大功能

首先下载 zooming.js文件地址，保存在 D:\study\program\blog\themes\beantech\source\js目录下。

打开 D:\study\program\blog\themes\beantech\layout\post.ejs，在最下方粘贴如下代码：

<scripttype="text/javascript"src="/js/zooming.js"></script>

然后文章里的图片就可以单击全屏啦。

添加数学公式显示

打开 D:\study\program\blog\themes\beantech\layout\post.ejs，在最下方粘贴如下代码：

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=default"></script>

由于markdown语法与mathjax语法存在冲突，所以还需要修改源文件。

打开 D:\study\program\blog\node_modules\marked\lib\marked.jsescape:处替换成：

escape:/^$[`*\[\]()#$+\-.!_>])/

em:处替换成：

em:/^\*((?:\*\*|[\s\S])+?)\*(?!\*)/

这时在文章里写数学公式基本没有问题了，但是要注意： 数学公式中如果出现了连续两个{，中间一定要加空格！

举个例子: 行内公式：$y = f(x)$ 代码：

$y = f(x)$

行间公式：\[y = {f{ {g1}}}(x)\] 代码：

\\[y ={f_{{g_1}}}(x)\\]

注意上面花括号之间有空格！

添加留言板

在 D:\study\program\blog\themes\beantech\layout中新建 bbs.ejs，文件内容如下：

---
layout: page
---
<style type="text/css">
    header.intro-header{
        background-position: right; 
    }
</style>
<!-- Chinese Version -->
<div class="zh post-container">
    <%- page.content %>
</div>

然后在 D:\study\program\blog\source中新建 \bbs文件夹，里面在新建 index.md文件，内容如下：

---
layout: "bbs"
title: "BBS"
date: 2017-09-19 12:48:33
description: "欢迎交换友链，一起交流学习！"
header-img: "img/header_img/home-bg-2-dark.png"
comments: true
---
此处替换为你的畅言评论代码~~~

添加置顶功能

运行如下两条命令安装置顶插件：

npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

然后打开 D:\study\program\blog\themes\beantech\layout\index.ejs，在如下位置添加代码：

<% if (post.top) {%>
    <i class="fa fa-thumb-tack"></i>
    <font color=7D26CD>置顶</font>
    <span class="post-meta-divider">|</span>
<%}%>

然后在你想置顶的文章md文件里，添加如下配置选项：

top:true

添加访客人数统计和字数统计

我们使用一个国外的流量统计网站：gostats.com，首先注册一下。

然后自己添加网站地址，过程就不详细说了，然后点击 Getcounter code，选择一个自己喜欢的风格。如下图所示，选择一个样式，选择 HTML，生成代码：

复制这段代码到 D:\study\program\blog\themes\beantech\layout\_partial\footer.ejs，具体位置如下：

默认的代码和我图中不一样，因为我不想点击图片跳转到它统计网站的链接，可以模仿我的自行修改。

字数统计首先安装插件

npm i --save hexo-wordcount

然后打开 D:\study\program\blog\themes\beantech\layout\_partial\footer.ejs，添加如下代码：

<spanclass="post-count"><%= totalcount(site) %> words altogether</span>

具体位置见上图。

文章属性配置

首先解释一下文章开头的属性配置，如下图所示：

title: 文章标题
catalog: 是否显示段落目录
date: 文章日期
subtitle: 子标题
header-img: 顶部背景图片
top: 是否置顶
tags: 标签
categories: 分类

每次写文章修改每个值就行了。

超详细Hexo+Github博客搭建小白教程（三）

修复代码块行号不显示bug

优化文章url路径

添加雪花特效

动态标签栏

常见问题及解答（FAQ）

为什么本地生成完ssh key之后没有.ssh文件夹？

为什么代码块显示有问题？

为什么博客本地预览没问题，push到github上就显示不正常？

更换主题之后，配置文件是修改根目录下的还是主题目录下的？

在哪建立github分支？

个性化设置（beantech主题，已停更）

更换主题

博客目录构成介绍

修复文档分类bug

添加畅言评论插件

添加图片放大功能

添加数学公式显示

添加留言板

添加置顶功能

添加访客人数统计和字数统计

文章属性配置

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

超详细Hexo+Github博客搭建小白教程（三）

修复代码块行号不显示bug

优化文章url路径

添加雪花特效

动态标签栏

常见问题及解答（FAQ）

为什么本地生成完ssh key之后没有.ssh文件夹？

为什么代码块显示有问题？

为什么博客本地预览没问题，push到github上就显示不正常？

更换主题之后，配置文件是修改根目录下的还是主题目录下的？

在哪建立github分支？

个性化设置（beantech主题，已停更）

更换主题

博客目录构成介绍

修复文档分类bug

添加畅言评论插件

添加图片放大功能

添加数学公式显示

添加留言板

添加置顶功能

添加访客人数统计和字数统计

文章属性配置

热门文章

最新文章

相关课程

相关电子书

相关实验场景