johnpoint

johnpoint

(｡･∀･)ﾉﾞ嗨
github
首頁封存关于我小伙伴们

安裝hexo博客及其優化記錄

#折腾#建站#hexo46
AI 翻譯
這篇文章透過AI由簡體中文翻譯成繁體中文。查看原文
AI 生成的摘要
这篇文章介绍了如何安装和优化Hexo博客。首先使用lnmp.org的lnmp安装一键包来安装Hexo，并创建一个虚拟主机。然后按照官网说明的方法安装node.js和hexo-cli。接下来部署博客并调整nginx配置文件。之后介绍了如何更换主题，并对NexT主题进行优化，包括设置主题风格、菜单项的显示文本和图标、菜单项的文件目录和对应图标，以及设置头像。

使用lnmp.org的 lnmp 安裝一鍵包，按程序安裝好即可，並順手創建一個虛擬主機，不需要重寫，不需要數據庫。

本文採用 lvcshu.com 為示例域名

安裝 HEXO#

按照官網說明的方法一步步安裝

安裝 node.js#

curl:

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash

或

wget:

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash

然後重啟終端或者 ssh 重新連接

nvm install stable

安裝 hexo-cil#

npm install -g hexo-cli

隨後就會很快安裝完成！

部署博客#

安裝 Hexo 後，運行以下命令以初始化目標中的 Hexo 。

此處的 folder 就是我們博客的主目錄，即 lnmp 虛擬主機的目錄，進入目錄以後執行

hexo init .  
npm install  
hexo g

此時我們博客的靜態頁面已經成功生成了，但是訪問頁面是沒有辦法看到的，接著下一步

調整 nginx 配置文件#

打開 nginx 相應站點 的配置文件，找到

root  /home/wwwroot/lvcshu.com;

改為

root  /home/wwwroot/blog.lvcshu.com/public;

記住：有兩個地方要改，對應 http 與 https

推薦：可以將 http 通過 301 跳轉，跳轉到 https

lnmp nginx restart

看看效果吧！

更換主題#

網絡上有很多開源的，十分漂亮的 hexo 主題而默認主題是真的醜我想不使用默認主題，找到了一个極簡但是十分美觀的主題 ——“NexT”

安裝 NexT 主題#

進入博客主目錄

git clone https://github.com/theme-next/hexo-theme-next themes/next

然後前往 站點配置文件 (博客主目錄下 ‘_config.yml’) 將 theme 字段改為 next ，然後執行 hexo clean && hexo g , 打開網站即可看到效果。

Next 主題優化#

以下內容來自 Hexo+Next 主題優化 建議前往圍觀及點讚！

設置主題風格#

打開 themes/next/_config.yml 文件，搜索 scheme 關鍵字，將你需用啟用的 scheme 前面註釋 # 去除即可。

\# ---------------------------------------------------------------  
\# Scheme Settings  
\# ---------------------------------------------------------------  
  
\# Schemes  
#scheme: Muse # 默認 Scheme，這是 NexT 最初的版本，黑白主調，大量留白  
#scheme: Mist # Muse 的緊湊版本，整潔有序的單欄外觀  
scheme: Pisces # 雙欄 Scheme，小家碧玉似的清新  
#scheme: Gemini # 類似 Pisces

設置菜單項的顯示文本和圖標#

NexT 使用的是 Font Awesome 提供的圖標， Font Awesome 提供了 600+ 的圖標，可以滿足絕大多數的場景，同時無須擔心在 Retina 屏幕下圖標模糊的問題。

設置菜單項的顯示中文文本：#

打開 themes/next/languages/zh-Hans.yml 文件，搜索 menu 關鍵字，修改對應中文或者新增。

menu:  
 home: 首頁  
 archives: 归档  
 categories: 分类  
 tags: 标签  
 about: 关于  
 search: 搜索  
 schedule: 日程表  
 sitemap: 站点地图  
 commonweal: 公益404  
 # 新增menu  
 catalogue: 目录

設定菜單項的文件目錄和對應圖標（新版兩項合併）#

打開 themes/next/_config.yml 文件，搜索 menu_icons 關鍵字，修改對應圖標名稱或者新增對應 menu 的圖標。

\# ---------------------------------------------------------------  
\# Menu Settings  
\# ---------------------------------------------------------------  
  
\# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash from link value (/archives -> archives).  
\# Usage: \`Key: /link/ || icon\`  
\# Key is the name of menu item. If translate for this menu will find in languages - this translate will be loaded; if not - Key name will be used. Key is case-senstive.  
\# Value before `||` delimeter is the target link.  
\# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, question icon will be loaded.  
menu:  
 home: / || home  
 archives: /archives/ || history  
 categories: /categories/ || list  
 tags: /tags/ || tags  
 tools: /categories/工具資源/ || briefcase  
 about: /about/ || user  
 #schedule: /schedule/ || calendar  
 #sitemap: /sitemap.xml || sitemap  
 #commonweal: /404/ || heartbeat  
  
\# Enable/Disable menu icons.  
\# Icon Mapping:  
\#   Map a menu item to a specific FontAwesome icon name.  
\#   Key is the name of menu item and value is the name of FontAwesome icon. Key is case-senstive.  
\#   When an question mask icon presenting up means that the item has no mapping icon.  
menu_icons:  
 enable: true

除了 home， archives , / 後面都需要手動創建這個頁面

創建菜單項對應文件目錄#

以分類為例，在終端窗口下，定位到 Hexo 站點目錄下。使用 hexo new page 新建一個頁面，命名為 categories ：

cd your-hexo-site  
hexo new page categories

編輯剛新建的頁面，設置分類

\-\-\-  
title: 分类  
date: 2014-12-22 12:39:04  
categories: Testing #分類名  
type: "categories"  
\-\-\-

頭像設置#

添加頭像#

打開 themes/next/_config.yml 文件，搜索 Sidebar Avatar 關鍵字，去掉 avatar 前面的 #：

\# Sidebar Avatar  
\# in theme directory(source/images): /images/avatar.jpg  
\# in site  directory(source/uploads): /uploads/avatar.jpg  
avatar: http://example.com/avatar.png

或者使用本地圖片，把圖片放入 themes/next/source/images 下，修改 avatar：

avatar: /images/avatar.gif

設置頭像邊框為圓形框#

打開位於 themes/next/source/css/_common/components/sidebar/sidebar-author.syl 文件，修改如下:

.site-author-image {  
 display: block;  
 margin: 0 auto;  
 padding: $site-author-image-padding;  
 max-width: $site-author-image-width;  
 height: $site-author-image-height;  
 border: $site-author-image-border-width solid $site-author-image-border-color;  
 // 修改頭像邊框  
 border-radius: 50%;  
 -webkit-border-radius: 50%;  
 -moz-border-radius: 50%;  
}

特效：鼠標放置頭像上旋轉#

.site-author-image {  
 display: block;  
 margin: 0 auto;  
 padding: $site-author-image-padding;  
 max-width: $site-author-image-width;  
 height: $site-author-image-height;  
 border: $site-author-image-border-width solid $site-author-image-border-color;  
 // 修改頭像邊框  
 border-radius: 50%;  
 -webkit-border-radius: 50%;  
 -moz-border-radius: 50%;  
 // 設置旋轉  
 transition: 1.4s all;  
}  
// 可旋轉的圓形頭像,\`hover\`動作  
.site-author-image:hover {  
 -webkit-transform: rotate(360deg);  
 -moz-transform: rotate(360deg);  
 -ms-transform: rotate(360deg);  
 -transform: rotate(360deg);  
}

瀏覽頁面的時候顯示當前瀏覽進度#

打開 themes/next/_config.yml , 搜索關鍵字 scrollpercent , 把 false 改為 true。

把 top 按鈕放在側邊欄#

如果想把 top 按鈕放在側邊欄，打開 themes/next/_config.yml , 搜索關鍵字 b2t , 把 false 改為 true。

\# Back to top in sidebar  
 b2t: true  
  
\# Scroll percent label in b2t button  
 scrollpercent: true

側邊欄設置#

設置側邊欄社交鏈接#

打開 themes/next/_config.yml 文件，搜索關鍵字 social , 然後添加社交站點名稱與地址即可。

\# ---------------------------------------------------------------  
\# Sidebar Settings  
\# ---------------------------------------------------------------  
  
\# Social Links.  
\# Usage: \`Key: permalink || icon\`  
\# Key is the link label showing to end users.  
\# Value before `||` delimeter is the target permalink.  
\# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded.  
social:  
 E-Mail: mailto:[email protected] || envelope  
 Google: https://plus.google.com/yourname || google  
 Twitter: https://twitter.com/yourname || twitter  
 FB Page: https://www.facebook.com/yourname || facebook  
 # 等等

設置側邊欄社交圖標#

打開 themes/next/_config.yml 文件，搜索關鍵字 social_icons ，添加社交站點名稱（注意大小寫）圖標，Font Awesome 圖標地。

RSS#

在你 Hexo 站點目錄下：

npm install hexo-generator-feed --save

打開 Hexo 站點下的 _config.yml , 添加如下配置：

\# feed  
\# Dependencies: https://github.com/hexojs/hexo-generator-feed  
feed:  
 type: atom  
 path: atom.xml  
 limit: 20  
 hub:  
 content:

友情鏈接#

打開 themes/next/_config.yml 文件，搜索關鍵字 Blog rolls：

\# Blog rolls  
links_title: 友情鏈接 #標題  
links_layout: block #佈局，一行一個連接  
#links_layout: inline  
links: #連接  
 baidu: http://example.com/  
 google: http://example.com/

主頁文章添加邊框陰影效果#

打開 themes/next/source/css/_custom/custom.styl , 向裡面加代碼:

// 主頁文章添加陰影效果  
.post {  
 margin-top: 0px;  
 margin-bottom: 60px;  
 padding: 25px;  
 -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);  
 -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);  
}

修改文章間分割線#

打開 themes/next/source/css/_common/components/post/post-eof.styl , 修改：

.posts-expand {  
 .post-eof {  
 display: block;  
 //  margin: $post-eof-margin-top auto $post-eof-margin-bottom;  
 width: 0%; //分割線長度  
 height: 0px; // 分割線高度  
 background: $grey-light;  
 text-align: center;  
 }  
}

代碼塊自定義樣式#

// Custom styles.  
code {  
color: #ff7600;  
background: #fbf7f8;  
margin: 2px;  
}  
// 邊框的自定義樣式  
.highlight, pre {  
margin: 5px 0;  
padding: 5px;  
border-radius: 3px;  
}  
.highlight, code, pre {  
border: 1px solid #d6d6d6;  
}

開啟版權聲明#

主題配置文件下，搜索關鍵字 post_copyright , enable 改為 true：

\# Declare license on posts  
post_copyright:  
enable: true  
license: CC BY-NC-SA 4.0  
license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

自定義文章底部版權聲明

    作者：Dragonstyle  
    鏈接：http://www.dragonstyle.win/2017/09/06/Android-Studio個人設置/  
    來源：簡書  
    版權聲明： 本博客所有文章除特別聲明外，均採用 CC BY-NC-SA 4.0 許可協議。转载请注明出处！

在目錄 themes/next/layout/_macro/ 下添加 my-copyright.swig , 內容如下:

{% if page.copyright %}  
<div class="my\_post\_copyright">  
<script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>  
 
<!-- JS庫 sweetalert 可修改路徑 -->
<!--
<script type="text/javascript" src="http://jslibs.wuxubj.cn/sweetalert_mini/jquery-1.7.1.min.js"></script>  
<script src="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.min.js"></script>  
<link rel="stylesheet" type="text/css" href="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.mini.css">-->
 
<p><span>本文標題:</span>{{ page.title }}</a></p>  
<p><span>文章作者:</span>{{ theme.author }}</a></p>  
<p><span>發佈時間:</span>{{ page.date.format("YYYY年MM月DD日 - HH:mm:ss") }}</p>  
<p><span>最後更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:mm:ss") }}</p>  
<p><span>原始鏈接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>  
<span class="copy-path"  title="點擊複製文章鏈接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="複製成功！"></i></span>  
</p>  
<p><span>許可協議:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商業性使用-禁止演繹 4.0 國際</a> 转载请保留原文鏈接及作者。</p>  
</div>  
<script>  
var clipboard = new Clipboard('.fa-clipboard');  
clipboard.on('success', $(function(){  
$(".fa-clipboard").click(function(){  
swal({  
title: "",  
text: '複製成功',  
html: false,  
timer: 500,  
showConfirmButton: false  
});  
});  
}));  
</script>  
{% endif %}

在目錄 themes/next/source/css/_common/components/post/ 下添加 my-post-copyright.styl, 內容如下:

.my\_post\_copyright {  
width: 85%;  
max-width: 45em;  
margin: 2.8em auto 0;  
padding: 0.5em 1.0em;  
border: 1px solid #d3d3d3;  
font-size: 0.93rem;  
line-height: 1.6em;  
word-break: break-all;  
background: rgba(255,255,255,0.4);  
}  
.my\_post\_copyright p{margin:0;}  
.my\_post\_copyright span {  
display: inline-block;  
width: 5.2em;  
color: #333333; // title color  
font-weight: bold;  
}  
.my\_post\_copyright .raw {  
margin-left: 1em;  
width: 5em;  
}  
.my\_post\_copyright a {  
color: #808080;  
border-bottom:0;  
}  
.my\_post\_copyright a:hover {  
color: #0593d3; // link color  
text-decoration: underline;  
}  
.my\_post\_copyright:hover .fa-clipboard {  
color: #000;  
}  
.my\_post\_copyright .post-url:hover {  
font-weight: normal;  
}  
.my\_post\_copyright .copy-path {  
margin-left: 1em;  
width: 1em;  
+mobile(){display:none;}  
}  
.my\_post\_copyright .copy-path:hover {  
color: #808080;  
cursor: pointer;  
}

修改 themes/next/layout/_macro/post.swig , 在代碼如下：

{% if theme.wechat\_subscriber.enabled and not is\_index %}  
 <div>  
 {% include 'wechat-subscriber.swig' %}  
 </div>  
 {% endif %}

之前添加增加如下代碼：

<div>  
{% if not is_index %}  
{% include 'my-copyright.swig' %}  
{% endif %}  
</div>

修改 themes/next/source/css/_common/components/post/post.styl 文件，在最後一行增加代碼：

@import "my-post-copyright"

設置新建文章自動開啟 copyright, 即新建文章自動顯示自定義的版權聲明，設置 your site/scaffolds/post.md文件

---  
title: {{ title }}  
date: {{ date }}  
tags:  
type: "categories"  
categories:  
copyright: true #新增,開啟  
---
載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。