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/%E5%BB%BA%E7%AB%99%E5%B0%8F%E8%AE%B0/
建議
### 這是給來到這裏想要建站的朋友們的建議 ###
博客目前沒有加入搜索引擎收錄，所以不太可能被搜索到，如果你有幸看到這裏，奇跡了。我會當作有很多人在看來寫這篇博客，這樣會讓我寫的更仔細，以後自己也方便參考。
- 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
- 未完。。。
### 參考鏈接 ###
這是一些我建站過程中參考的比較好的教程，其他還有很多零散的沒有記錄也找不到了
- 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%E4%B8%BB%E9%A2%98%E4%B8%AA%E6%80%A7%E5%8C%96%E9%85%8D%E7%BD%AE.html
實現內容
很多容易找到的東西我就不寫出來了，這裏只記錄一些我建站過程中不宜找到的內容。
### 必要的安裝 ###
這部分比較簡單參考：
使用Hexo+Github一步步搭建屬於自己的博客（基礎）
使用Hexo+Github一步步搭建屬於自己的博客（進階）
### 我的一部分配置文件 ###
這部分是我的一部分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;
}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 文件,並添加以下內容：接著打開\themes\next\layout\_macro\post.swig文件，在post-body 之後， post-footer 之前添加如下代碼然後打開主題配置文件（_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;
}結尾
還會隨著使用更新
Githun&HEXO建站小記