Githun&HEXO建站小记

时间 2019-11-18

标签 githun&hexo githun hexo 建站繁體版

原文原文链接

title: 建站小记
date: 2018-03-04 11:10:54
updated: 2018-03-06 12:00:00
tags: [hexo,next,建站,学习,前端技术,折腾,博客,记录]
description:
keywords:
comments:
image:
---javascript

前言

三月四日，建站小记。
开学事情不算多，在这个还未适应学习的时间，得找一些事情来避免这段时间被浪费掉，正好搞个blog,有兴趣，也不算彻底浪费时间。

博客基本已经不被大众使用了，还在使用的多半都是些it从业者，不知为什么我会喜欢一些逐渐被人们抛弃的东西，好久以前就想搞一个博客，也尝试过用wordpress，直接用的模板，最后也没有在上面坚持写字。
如今这个blog陆陆续续花了一周的时间，虽然hexo系统创建博客已经至关简单了，一个是没有基础比较愚笨（随着年龄增加愈加以为本身智商低于平均值），另外一个缘由是把next的不少特性都折腾了一下。
折腾了不少，最后其实样式也和官方的差很少，没有设计能力不敢大改，生怕搞出个乡村非主流，因此只能在官方的基础上修改吧。大佬们的博客很漂亮，奈何技术能力不足，尝试过模仿最后仍是四不像。css

我是一个不容易坚持的人，因此不敢轻易指望可以坚持什么，也是这样，凡是我认为可以坚持的通常也不会放弃。博客应该仍是可以坚持下来的，由于有记录的需求。记录一些学习的成果问题，记录一些想说的字。html

到目前为止博客的框架完成了，几经测试应该没有什么bug，可是也有一些想要实现的东西没有完成，将来的修改计划都在lofter上记录了。之后也会抽时间慢慢完善。markdown语法也还不熟悉，慢慢的我但愿可以融入这个圈子。
注意本文没有使用标准markdown语法,格式很是奇怪,若是有时间我会修改一下,若是要查看正常的请点击这里 https://e1sewhere.github.io/2018/03/04/%E5%BB%BA%E7%AB%99%E5%B0%8F%E8%AE%B0/ 前端

建议

### 这是给来到这里想要建站的朋友们的建议 ###
博客目前没有加入搜索引擎收录，因此不太可能被搜索到，若是你有幸看到这里，奇迹了。我会看成有不少人在看来写这篇博客，这样会让我写的更仔细，之后本身也方便参考。java

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

### 参考连接 ###git

这是一些我建站过程当中参考的比较好的教程，其余还有不少零散的没有记录也找不到了github
- reuixiy:https://reuixiy.github.io/technology/computer/computer-aided-art/2017/06/09/hexo-next-optimization.html
距离:http://www.javashuo.com/article/p-kttrzkqr-dw.html
SORA:http://mashirosorata.vicp.io/HEXO-NEXT%E4%B8%BB%E9%A2%98%E4%B8%AA%E6%80%A7%E5%8C%96%E9%85%8D%E7%BD%AE.htmlchrome

实现内容

不少容易找到的东西我就不写出来了，这里只记录一些我建站过程当中不宜找到的内容。
### 必要的安装 ###
这部分比较简单参考：npm

使用Hexo+Github一步步搭建属于本身的博客（基础）
使用Hexo+Github一步步搭建属于本身的博客（进阶）segmentfault

### 个人一部分配置文件 ###
这部分是个人一部分custom.styl代码，你能够参考个人代码作一些简单的静态样式配色修改，当你掌握css后就可使用开发者工具坐到页面内任何元素的调整，建议使用chrome浏览器。
实现方法： 修改文件 >*\themes\next\source\css_custom\custom.styl

直接添加以下代码，根据你的须要修改参数
```css
// 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;
}

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 文件,并添加如下内容：

{% if not is_index %}

-------------本文结束-------------

{% endif %}

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

{% if not is_index %} {% include 'passage-end-tag.swig' %} {% endif %}

而后打开主题配置文件（_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%E5%B1%85%E4%B8%AD%E8%B0%83%E6%95%B4-%E5%9F%BA%E4%BA%8ENext%E4%B8%BB%E9%A2%98/

回到顶部按钮添加百分比

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

# 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;
}

结尾

还会随着使用更新