Githun&HEXO建站小记

2023-01-24 07:36:55

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. 未完。。。

参考链接

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

实现内容

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

必要的安装

这部分比较简单参考：

使用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;

}

结尾

还会随着使用更新

上一篇：golang 中操作nsq队列数据库


下一篇：Asp.net Core中使用Session