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

結尾

還會隨着使用更新

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。