Githun&HEXO建站小记

---

title: 建站小记

date: 2018-03-04 11:10:54

updated: 2018-03-06 12:00:00

tags: [hexo,next,建站,学习,前端技术,折腾,博客,记录]

description:

keywords:

comments:

image:

前言

三月四日，建站小记。

开学事情不算多，在这个还未适应学习的时间，得找一些事情来避免这段时间被浪费掉，正好搞个blog,有兴趣，也不算完全浪费时间。

博客基本已经不被大众使用了，还在使用的多半都是些it从业者，不知为何我会喜欢一些逐渐被人们抛弃的东西，很久之前就想搞一个博客，也尝试过用wordpress，直接用的模板，最后也没有在上面坚持写字。

现在这个blog陆陆续续花了一周的时间，虽然hexo系统建立博客已经相当简单了，一个是没有基础比较愚笨（随着年龄增长越发觉得自己智商低于平均值），另一个原因是把next的很多特性都折腾了一下。

折腾了很多，最后其实样式也和官方的差不多，没有设计能力不敢大改，生怕搞出个乡村非主流，所以只能在官方的基础上修改吧。大佬们的博客很漂亮，奈何技术能力不足，尝试过模仿最后还是四不像。

我是一个不容易坚持的人，所以不敢轻易期望能够坚持什么，也是这样，凡是我认为能够坚持的一般也不会放弃。博客应该还是能够坚持下来的，因为有记录的需求。记录一些学习的成果问题，记录一些想说的字。

到目前为止博客的框架完成了，几经测试应该没有什么bug，但是也有一些想要实现的东西没有完成，未来的修改计划都在lofter上记录了。以后也会抽时间慢慢完善。markdown语法也还不熟悉，慢慢的我希望能够融入这个圈子。

**注意本文没有使用标准markdown语法,格式非常奇怪,如果有时间我会修改一下,如果要查看正常的请点击这里 https://e1sewhere.github.io/2018/03/04/建站小记/ **

建议

这是给来到这里想要建站的朋友们的建议

博客目前没有加入搜索引擎收录，所以不太可能被搜索到，如果你有幸看到这里，奇迹了。我会当作有很多人在看来写这篇博客，这样会让我写的更仔细，以后自己也方便参考。

1. next目前是使用的最多的主题，网上能找到的教程基本都是基于next的，所以入门组好先选择next，等熟悉了前端知识和hexo的特点后就可以使用其他主题甚至自己写配置文件。
2. 使用next主题时最先查看next官方文档,你会学到一些名词，很多网上的教程都是基于官方文档。
3. 看教程时最好看完一个再看别的，一个好的教程博主都会尽可能系统的构建，你看完一篇可以更好的了解hexo，不至于再各个页面切换浪费时间。
4. 如果你对hexo有了初步的了解就可以学习下html/css的知识，如果你想系统的学习前端入门知识，建议去w3school学习。
5. 善用git的版本控制，很多错误的操作都可以靠它便捷的回滚，如果要了解可以从这个廖雪峰老师的网站入门。
6. 你需要学会使用markdown语言，可以参考这篇HEXO下的Markdown语法(GFM)写博客: https://zhuzhuyule.com/blog/HEXO/HEXO下的Markdown语法(GFM)写博客.html
7. 未完。。。

参考链接

• 这是一些我建站过程中参考的比较好的教程，其他还有很多零散的没有记录也找不到了

• reuixiy:https://reuixiy.github.io/technology/computer/computer-aided-art/2017/06/09/hexo-next-optimization.html

• 距离:https://segmentfault.com/a/1190000009544924
• SORA:http://mashirosorata.vicp.io/HEXO-NEXT主题个性化配置.html

---

实现内容

很多容易找到的东西我就不写出来了，这里只记录一些我建站过程中不宜找到的内容。

必要的安装

这部分比较简单参考：

使用Hexo+Github一步步搭建属于自己的博客（基础）

使用Hexo+Github一步步搭建属于自己的博客（进阶）

我的一部分配置文件

这部分是我的一部分custom.styl代码，你可以参考我的代码做一些简单的静态样式配色修改，当你掌握css后就可以使用开发者工具坐到页面内任何元素的调整，建议使用chrome浏览器。

实现方法： 修改文件 >*\themes\next\source\css_custom\custom.styl

直接添加如下代码，根据你的需要修改参数

// Custom styles.

body{   //页面主体背景
       background:url(/images/wp1_1280x1024_jpg.jpg);
       background-size:cover;
       background-repeat:no-repeat;
       background-attachment:fixed;
       background-position:center;
    }

.content {	//文章背景色
           border-radius: 5px;
           margin-top: 60px;
   		padding: 60px;
           background:rgba(255 255 255,0.8) none repeat scroll !important;
        }
.main-inner {width: 900px;}

.header {	//头部颜色
         background:rgba(0 0 0,0.8) none repeat scroll !important;
       }
.footer { //底部颜色
         background:rgba(0 0 0,0.8) none repeat scroll !important;
       }

#lv-container { //来必力背景色
      border-radius: 10px;
      background:rgba(255 255 255,0.8) none repeat scroll !important;
   }

#sidebar {
           background:rgba(0 0 0,0.8) none repeat scroll !important;

           //p,span,a {color: 颜色代码;}
}

.post-button {  //阅读全文位置
   margin-top: 20px;
   text-align: center;
   //border-radius: 2px;
   //radius: 10px;
}
a.btn{
   //border-radius: 5px;

}
.post-button a:hover { //阅读全文颜色样式
   background: rgba(255 255 255,0.0);
   color: #8f0008;
   border-radius: 8px;
   border-bottom-color: #8f0008;
}

// 文章标题字体
.posts-expand .post-title {
   font-size: 26px;
   font-weight: 700;
}

// 分割线样式
hr {
   color: #a40000;
}

//运行时间样式
div#days {
   //color: #a40000;
   font-size: 15px;
}
div#days:hover {
   color: #a40000;
}

//标题横线样式

.posts-expand .post-title-link::before{
   background-color: #a40000;
}

//首页按钮颜色
.menu .menu-item a:hover {
  color: #a40000;
  background: #000000;

}

//侧边栏概览目录样式
.sidebar-nav .sidebar-nav-active{
   color: white;
   border-bottom-color: #a40000;
}
.sidebar-nav:hover .sidebar-nav-active:hover{
   color: #a40000;

}

//侧边栏按钮三横线颜色
.sidebar-toggle-line {
   background: #000000;
}
.page-post-detail .sidebar-toggle-line {
   background: #101010;
}
//侧边栏回到顶部样式
.back-to-top{
   color: #000000;
}

//文章内链接颜色
a:hover {
   border-bottom-color: #d60036;
}

//侧栏文章目录下的颜色
.post-toc .nav .active-current > a {
   color: #eee;
}
.post-toc .nav .active > a {
   color: white;
   border-bottom-color: #d60036;
}
.post-toc .nav .active-current > a:hover {
   color: #d60036;
}

注意 有些元素在这个custom内无法修改，而是在css文件夹内的其他文件夹内，内容过于零散就不一一列出，你可以使用f12自行修改，这里只列出最基础的几个修改。代码内有一些类可能你并没有比如运行时间样式，这个是需要在主题配置文件添加代码的，如果你没有添加，上文代码依然可以全部复制到你的custom文件并不会出现错误。

零散的一些设置

关闭某个页面的评论

直接在 你需要禁用评论的markdown文档(.md)头加入代码(三个短横线之上)

comments: false

例如

Title:helloworld
Data:2011-11-11 11:11:11
Comments:false
--
正文

为每篇文章添加"本文结束"标记

效果见本文末尾

实现方法

在路径 \themes\next\layout_macro 中新建 passage-end-tag.swig 文件,并添加以下内容：

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束-------------</div>
    {% endif %}
</div>

接着打开\themes\next\layout_macro\post.swig文件，在post-body 之后， post-footer 之前添加如下代码

<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

然后打开主题配置文件（_config.yml),在末尾添加：

Passage-end-tag:

enabled: true

此处注意:passage-end-tag.swig文件中有中文字所以最好使用utf-8编码

设置站点图标

选择好图片放置在/themses/next/source/images内

通常为两张png图片一张"16x16"一张"32x32"像素

修改 主题配置文件 下favicon的子项目为图片路径(可参考默认代码)

页面底部添加 网站总字数统计

主题配置文件post_wordcount:下的参数修改为true

Totalcount:true

需要hexo-wordcount插件支持,hexo文件夹下运行cmd输入安装代码npm install hexo-wordcount --save

添加阅读全文

方法一（推荐）#####

在文章中需要截断的地方添加<!--more--> 

之上的文章就会出现在首页摘要并在下方显示阅读全文按钮

方法二

在你要发表的博文md文件头中添加一行description:

在description后写你想要放在首页的文字，它会出现在文章题目下的摘要区域并在下方显示阅读全文按钮。

注意description:必须要有一个英文空格再输入内容。

你也可以直接在模板文件中插入description这样就不用每篇博文都手动添加这个关键字了。

在模板文件中插入的方法见下一条

模板文件增加项目

我们通常使用hexo new post “title”创建一个空的博文，post就是你要使用的模板如果不输入就是默认模板文件，我通常就使用的默认。

下面以默认模板为例子添加页面变量项目

我们修改如下位置

~/blog/scaffolds/post.md

这个文件下下也可以创建其他的模板文件，要使用只需要在new文件的时候声明使用的哪个文件就好了，很方便。

---
title:
date: 2018-03-04 11:10:54
updated:
tags:
description:
keywords:
comments:
image:
---

以上变量是我的模板文件，是几个我最常用的项目，你也可以参照下面的描述来查看自己需要哪些变量项目，需要注意的是每个变量的冒号都是英文冒号，而且冒号后必须有一个英文空格。

这是模板文件的一些解释 摘自reuixiy:https://reuixiy.github.io/technology/computer/computer-aided-art/2017/06/09/hexo-next-optimization.html

你可以在reuixiy的文章中查看更加详细的关于模板文件的解释

/* ！！！！！！！！！！
** 每一项的 : 后面均有一个空格
** 且 : 为英文符号
** ！！！！！！！！！！
*/
title:
/* 文章标题，可以为中文 */
date:
/* 建立日期，如果自己手动添加，请按固定格式
** 就算不写，页面每篇文章顶部的发表于……也能显示
** 只要在主题配置文件中，配置了 created_at 就行
** 那为什么还要自己加上？
** 自定义文章发布的时间
*/
updated:
/* 更新日期，其它与上面的建立日期类似
** 不过在页面每篇文章顶部，是更新于……
** 在主题配置文件中，是 updated_at
*/
permalink:
/* 若站点配置文件下的 permalink 配置了 title
** 则可以替换文章 URL 里面的 title（文章标题）
*/
categories:
/* 分类，支持多级，比如：
- technology
- computer
- computer-aided-art
则为technology/computer/computer-aided-art
（不适用于 layout: page）
*/
tags:
/* 标签
** 多个可以这样写[标签1,标签2,标签3]
** （不适用于 layout: page）
*/
description:
/* 文章的描述，在每篇文章标题下方显示
** 并且作为网页的 description 元数据
** 如果不写，则自动取 <!-- more -->
** 之前的文字作为网页的 description 元数据
** 建议每篇文章都务必加上！
*/
keywords:
/* 关键字，并且作为网页的 keywords 元数据
** 如果不写，则自动取 tags 里的项
** 作为网页的 keywords 元数据
*/
comments:
/* 是否开启评论
** 默认值是 true
** 要关闭写 false
*/
layout:
/* 页面布局，默认值是 post，默认值可以在
** 站点配置文件中修改 default_layout
** 另：404 页面可能用到，将其值改为 false
*/
type:
/* categories，目录页面
** tags，标签页面
** picture，用来生成 group-pictures
** quote？
** https://reuixiy.github.io/uncategorized/2010/01/01/test.html
*/
photos:
/* Gallery support，用来支持画廊 / 相册，用法如下：
- photo_url_1
- photo_url_2
- photo_url_3
https://reuixiy.github.io/uncategorized/2010/01/01/test.html
*/
link:
/* 文章的外部链接
** https://reuixiy.github.io/uncategorized/2010/01/01/test.html
*/
image:
/* 自定义的文章摘要图片，只在页面展示，文章内消失
** 此项只有参考本文 5.14 节配置好，否则请勿添加！
*/
sticky:
/* 文章置顶
** 此项只有参考本文 5.15 节配置好，否则请勿添加！
*/
password:
/* 文章密码，此项只有参考教程：
** http://shenzekun.cn/hexo的next主题个性化配置教程.html
** 第 24 节，配置好，否则请勿添加！
** 发现还是有 bug 的，就是右键在新标签中打开
** 然后无论是否输入密码，都能看到内容
*/

mist风格下修改博客名称双横线风格

首先网上粗略搜索没有找到修改方式，于是使用f12开发者工具（推荐使用chrome）

定位元素的class为.logo-line-before i,.logo-line-after i和.brand 定位css路径为*\next\source\css\_common\components\header\site-meta.styl

步骤：

在*\next\source\css\_common\components\header\site-meta.styl添加如下代码

.brand {
  color: #a40000 !important; //头部标志颜色
  //color: $brand-color;
  position: relative;
  display: inline-block;
  padding: 0 40px;

.logo-line-before i,.logo-line-after i{ //头部双横线颜色
	background: #a40000 !important;;
}

内容居中

内容居中

见:http://wellliu.com/2016/12/29/Blog居中调整-基于Next主题/

回到顶部按钮添加百分比

修改主题配置文件如下代码:

# Scroll percent label in b2t button.
# 在回到顶部按钮里显示阅读百分比
  scrollpercent: true

加载条

方法一（推荐）

打开主题配置文件搜索pace，将pace的值修改为你喜欢的一个代码示例如下

# Progress bar in the top during page loading.
pace: pace-theme-flash #集成的加载条
# Themes list:
#pace-theme-big-counter 大数字
#pace-theme-bounce  弹球
#pace-theme-barber-shop 全屏覆盖遮罩
#pace-theme-center-atom 中心数字
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple 中心读条
#pace-theme-corner-indicator右上旋转
#pace-theme-fill-left   半透明遮罩
#pace-theme-flash   上读条右上角旋转
#pace-theme-loading-bar
#pace-theme-mac-osx 上读条粗
#pace-theme-minimal 上读条
# For example
# pace_theme: pace-theme-center-simple
#pace_theme: pace-theme-flash

方法二（自定义颜色）

集成的加载条我不知道怎么改变颜色所以使用的shenzekun给出的方案

实现步骤：

打开/themes/next/layout/_partials/head.swig文件

添加如下代码

<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">

<style>
.pace .pace-progress {
background: #1E92FB; /*进度条颜色*/
height: 3px;
}
.pace .pace-progress-inner {
box-shadow: 0 0 10px #1E92FB, 0 0 5px     #1E92FB; /*阴影颜色*/
}
.pace .pace-activity {
border-top-color: #1E92FB;    /*上边框颜色*/
border-left-color: #1E92FB;    /*左边框颜色*/
}
</style>

你可以参照代码示例自由修改颜色

注意：这样使用有小bug，如果你之前配置过主题集成的加载条请确保已经完全关闭

打开主题配置文件搜索pace，将pace值改为false，并且用“#”将 所有pace_theme:注释掉

主题添加背景图片

见:http://www.cnblogs.com/tiansha/p/6458894.html

文字背景色以及半透明的设置（包含边距）

在theme/next/source/css/_custom文件夹下打开custom.styl文件，往里面添加以下代码：

.content {
border-radius: 10px;
margin-top: 60px;
background:rgba(颜色rgb,透明度) none repeat scroll !important;
}

由于修改后显示文字贴着边缘所以我又给上面的类.content添加了padding值如下：

.content {
border-radius: 10px;
margin-top: 60px;
background: rgba(颜色rgb,透明度) none repeat scroll !important;
padding: 60px;
}

添加鼠标飘字特效

新建一个js：

*/themes/next/source/js/src/jiazhiguan.js

在js内添加如下代码

/* 鼠标飘字*/
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
var $i = $("<span/>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "#a40000"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});

然后在Blog\themes\next\layout\_layout.swig文件的最下方，</body>前面添加<script type="text/javascript" src="/js/src/jiazhiguan.js"></script>。

本条内容来自:https://newdee.cf/posts/

修改突出显示修改我样式

进入目录: \themes\next\source\css_custom

添加代码

//``小代码块样式
code{
  color: #A40000; // 字体颜色
  background: #bf7f8; //背景颜色
  margin: 2px;
}

结尾

还会随着使用更新