Hexo站點實戰

魯鵬發表於2015-06-06

學習完官方的文件，有很多地方都不明白那就對了，要不然你肯定就不是小白了。接下來的內容就是按照之前學習的步驟一步步搭建起自己的部落格站點，遇到問題，解決問題，慢慢地就會變成大白。這裡將要記錄的內容就是從小白慢慢變成大白的經歷。

我定義的大白階段就是能夠針對自己的需求隨心所欲的定製自己的站點，這裡就需要大量的前端知識了，如HTML、CSS、Javascript，對於一直想學習前端開發的我來說，這應該是個絕好的機會，通過對站點主題的一些改變，可以作為學習前端開發的最佳實踐。同時可以在部落格中記錄學習心得，豈不是一舉兩得的美事！

初步瞭解Hexo站點的佈局

Every templates apply to layout template by default.
每個模板都預設使用layout佈局。

剛看完Hexo Docs中模版那一部分的時候，很不理解這是什麼意思？這裡就來談談Hexo的站點佈局到底是怎樣的？我覺得這是非常重要的，瞭解了這些，就可以對你的站點佈局『為所欲為』了。

1、前提

上面說了，每個模版都預設使用layout佈局，首先來看看themes目錄下的light-ch目錄，light-ch主題是基於hexo預設主題light的china適用版，詳細請fork light-ch，這裡主要以該主題為例。可以看到主題根目錄下有如下結構：

light-ch/
├── _config.yml
├── languages/
├── source/
└── layout/
    ├── _partial/
    ├── _widget/
    ├── archive.ejs
    ├── category.ejs
    ├── index.ejs
    ├── layout.ejs
    ├── page.ejs
    ├── post.ejs
    └── tag.ejs

2、預設佈局

Hexo的主題佈局檔案基本上是在layout這個資料夾下，每個模版都預設使用layout佈局，那麼來看看layout.ejs這個檔案的內容。

<%- partial('_partial/head') %>
<body>
  <header id="header" class="inner"><%- partial('_partial/header') %></header>
  <div id="content" class="inner">
    <div id="main-col" class="alignleft"><div id="wrapper"><%- body %></div></div>
    <aside id="sidebar" class="alignright"><%- partial('_partial/sidebar') %></aside>
    <div class="clearfix"></div>
  </div>
  <footer id="footer" class="inner"><%- partial('_partial/footer') %></footer>
  <%- partial('_partial/after_footer') %>
</body>
</html>

結合區域性模組的知識，不難看出這個layout.ejs就是一個完整的頁面，有head、header、content、sidebar、footer以及after_footer，頁面所有的部分都通過區域性模組嵌入在這個檔案中。然而中間有一段<%- body %>指的是什麼呢？這裡就是各個佈局的關鍵所在。

每個Hexo站點基本上分為index（首頁）、post（文章詳情頁）、page（導航標籤頁）、archive（歸檔頁）、category（類別頁）以及tag（標籤頁），沒錯就是Layout資料夾下的幾個檔案。它們每個都代表一種佈局，將它們用來替換掉layout.ejs檔案裡的<%- body %>就得到了各個佈局的頁面程式碼。

其實你開啟各個佈局的檔案，你會發現他們有些其實是很相似的，甚至是一樣的。比如post.ejs和page.ejs，這兩者程式碼如下（以light-ch主題為例）：

<!-- post.ejs -->
<%- partial('_partial/article', {item: page, index: false}) %>

<!-- page.ejs -->
<%- partial('_partial/article', {item: page, index: false}) %>

可以看出他們是一模一樣的，他們都引用了_partial/article區域性模組，事實上這兩種在light-ch主題裡的佈局是一樣的，當然你也可以通過在article.ejs裡判斷layout來使他們不一樣。

3、首頁佈局

最後來看看index.ejs，它是首頁佈局，跟其他的佈局還是不一樣的。程式碼如下：

<!-- index.ejs -->
<% page.posts.each(function(item){ %>
    <%- partial('_partial/article', {item: item, index: true}) %>
<% }); %>

這一塊什麼意思？首先是一個迴圈語句，因為首頁要顯示出近期釋出的幾篇文章，引入區域性模組的時候使用了Local Variables（本地變數）的相關內容，這裡是將post頁面變數賦值給了本地變數item，換句話說，在_partial/article.ejs這個檔案中所有的item變數都指的是post頁面變數，裡面使用了很多頁面變數的一些鍵值，參考這裡頁面變數看article.ejs的程式碼就容易多了。

下面分析article.ejs中一小段程式碼如下：

<article class="<%= item.layout %>">
  <% if (item.photos && item.photos.length){ %> <!--當文章存在照片的時候，也就是在前置宣告中加入了photos變數-->
    <%- partial('post/gallery') %>    <!--就會引入這段程式碼，用來顯示相簿-->
  <% } %>
  <div class="post-content">
......

後面的程式碼可以自行分析一下，接下來我會新增一個全新的resume佈局到站點中，通過這個實戰應該會對Hexo的佈局有更進一步的瞭解。

轉載儲存：Hexo | LP's Blog

Hexo主題中新新增resume佈局

上一篇大致介紹了Hexo站點的佈局，每個主題的佈局結構是不一樣的，但是都是類似的，所以明白了Hexo生成站點的原理就能看懂所有主題的佈局，這裡還是以主題light-ch為例來講解如何新增一個新的佈局resume.ejs。

1、在`layout`資料夾中新增布局檔案

想要一個新的佈局，要麼通過對layout的判斷在article.ejs區域性模組中修改，要不就是新建一個resume.ejs佈局檔案，指向另外一個區域性模組。這裡我選擇了後面一種方法，避免混亂。

首先在layout檔案下建立resume.ejs檔案，裡面程式碼如下：

<%- partial('_partial/resume') %>

它指向的是一個區域性模組，裡面就是想要顯示的樣式了。把它替換到layout.ejs檔案中<%- body %>的位置上就是你的resume頁面了。

假如這裡替換到<%- body %>的樣式也不是我想要的，那麼就可以修改layout.ejs檔案如下：

<%- partial('_partial/head') %>
<body>
  <header id="header" class="inner"><%- partial('_partial/header') %></header>
    <% if(page.layout == 'resume') {%>
      <%- body %>
    <% }else{ %>
      <div id="content" class="inner">
          <div id="main-col" class="alignleft"><div id="wrapper"><%- body %></div></div>
          <aside id="sidebar" class="alignright"><%- partial('_partial/sidebar') %></aside>
           <div class="clearfix"></div>
      </div>
      <% } %>
   <footer id="footer" class="inner"><%- partial('_partial/footer') %></footer>
  <%- partial('_partial/after_footer') %>
</body>
</html>

我只想要保留header以及footer的部分，其他的部分我想單獨設計，那麼如上加個判斷條件就行了。當佈局為resume的時候，完全按照我的_partial/resume模版樣式。那麼接下來就是考驗設計網頁的功底了。

2、resume佈局的區域性模組

在_partial目錄下建立resume.ejs區域性模組，這裡的內容就是想顯示的頁面佈局了，可以發揮自己的設計能力，設計一個漂亮的頁面，我的示例程式碼如下：

<div class="resume">
    <div class="resume-left">
      <img src="/assets/img/avatar/psb.jpg" alt="photo">
          <span>Email:</span>
          <a href="#">1911986273@qq.com</a>
    </div>
    <div class="resume-entry">
        <%- page.content %>
    </div>
</div>

頁面結構有了，下面就要新增樣式檔案了，你可以在source/css/_partial/目錄中新增resume.styl，然後在source/css/style.styl中引入（在最後一行加入@import '_partial/resume'）就行了。

3、在頁面中新增page

通過命令hexo new page resume建立一頁，Hexo會自動在根目錄下的source資料夾下建立resume資料夾，資料夾下有index.md檔案，編輯index.md寫上你的簡歷主要內容。

index.md的前置宣告一定要加上layout: resume，不然你的佈局就形同虛設了。（如果不設定，預設會是page佈局）

 source/
    ├── _drafts/
    ├── _posts/
    ├── resume/
        ├──index.md

然後開啟主題light-ch目錄下的_config.yml配置檔案，在menu下新增一行程式碼。

menu:
    首頁: /
    個人簡歷: /resume

至此，大功告成，瀏覽一下個人簡歷頁面。Demo

轉載儲存：Hexo | LP's Blog

Hexo站點中新增文章目錄以及歸檔

通過前面的介紹，Hexo站點的佈局應該瞭解得差不多了，這次主要介紹一下如何使用Hexo自帶的幫助函式在站點中新增歸檔以及文章目錄。新增這兩塊功能都是使用了Hexo提供的幫助函式，建立對應區域性模組之前，首先要想想這兩塊內容應該屬於哪個佈局？要新增到哪個區域性模組下？考慮這些是為了整潔性，當你新增的東西越來越多的時候才不至於令自己混亂。

一、文章目錄

文章目錄肯定是新增到post佈局上，這個毋庸置疑，因為只有看文章詳情頁的時候才需要目錄。那麼我們在目錄layout/_partial/post/下建立toc.ejs檔案，程式碼如下：

<div id="toc" class="toc-article">
    <div class="toc-title">目錄</div>
    <%- toc(item.content, {list_number: false}) %>
</div>

這裡使用了Hexo提供的toc()幫助函式，它的使用方法如下：

<%- toc(str, [options]) %>

str就是文章內容，options有兩個引數，一個是class，也就是html標籤的class值，預設為toc；一個是list_number，是否顯示列表編號，預設值是true。

接下考慮把這個區域性模組放到哪呢，既然屬於post佈局，那麼就看看layout/post.ejs程式碼如下:

<%- partial('_partial/article', {item: page, index: false}) %>

很明顯，我們要到_partial/article.ejs檔案裡新增toc.ejs，新增後article.ejs程式碼如下：

......
    <div class="entry">
      <% if (item.excerpt && index){ %>   <!--01-->
        <%- item.excerpt %>
      <% } else { if (item.toc !== false) {%>   <!--02-->
        <%- partial('post/toc') %>
      <% } %>
        <%- item.content %>
      <% } %>
    </div>
......

01、判斷是否有摘要以及index值，顯然post.ejs傳過來的index值為false； 02、接下來判斷page.toc是不是不等於false，這一塊的主要作用是可以在文章的前置宣告裡設定toc: false來關閉目錄功能。當沒有設定false時，插入上面寫的toc.ejs區域性模組。

OK！完美嵌入進去，接下來就是設定樣式了，進入source/css/_partial/目錄下，建立toc.styl，程式碼這裡就不貼出了，具體檢視github。最後別忘了在source/css/style.styl檔案里加入這句了@import '_partial/toc'。顯示如下圖，樣式可以自行調整。

二、歸檔sidebar

預設的hexo-theme-light主題沒有新增歸檔的sidebar掛件，於是我將該widget新增到了主題light-ch中。先看一下效果如下圖：

sidebar中的區域性模組都在layout/_widget中，於是在該資料夾下建立archive.ejs，程式碼如下：

<% if (site.posts.length){ %>
  <div class="widget tag">
    <h3 class="title">歸檔</h3>
    <%- list_archives({format: "YYYY年MM月"}) %>
  </div>
<% } %>

然後在主題的配置檔案中_config.yml中加入該widget，如下所示：

widgets:
    - category
    - archive
    - tagcloud
    - weibo

最後就是設定樣式了，在source/css/_partial/sidebar.styl檔案中加入了這麼一段就能如上顯示了。

.archive-list
    font-size 0.9em
    padding 15px 20px 
    .archive-list-count
        margin-left 8px
        font-size 0.8em
        color color-meta
        &:before
            content '('
        &:after
            content ')'

這段樣式是為了和分類列表保持一致。詳細程式碼參照github來自定義樣式。

總結

這裡通過新增文章目錄以及歸檔側邊欄的實戰練習，大致瞭解瞭如何在Hexo站點中新增區域性模組和widget，基本上也就這兩種型別。
諸如新增百度統計、多說評論以及微博小外掛等等，都可以歸屬為上述兩類，這裡就不再贅述，詳情可以參照github上程式碼，有什麼問題可以隨時向我提issue。

轉載儲存：Hexo | LP's Blog

Hexo主題中響應式佈局設計

幾乎所有的Hexo主題都是響應式佈局的主題，在現在這個多屏的時代，特別是移動網際網路時代，一個網站如果沒有做成響應式的佈局都不好意思拿出來，所以響應式佈局非常的重要。

什麼是響應式佈局？響應式佈局就是一套網頁樣式適應所有的螢幕，站點的內容不變，但是隨著螢幕的大小不一樣，網頁的佈局會隨之改變。如下圖所示。

其實我只是剛剛接觸響應式佈局，因為最近一直在學習前端相關知識，當我接觸了它，並且在我的Hexo站點實戰後，真是感覺太棒了，頁面隨著不同的螢幕大小呈現不同的樣式。這樣就解決了移動客戶端訪問頁面時的尷尬。

響應式佈局的最核心的內容應該就是CSS中的媒介查詢，通過它可以在一個CSS檔案中定製針對不同螢幕的樣式，從而實現了響應式佈局。想要簡要了解一下的請檢視媒介型別 | w3school。當然要掌握響應式佈局可不僅僅只需這麼點知識。建議找本書完整的學習一下。

前端時間我在Hexo站點中新增了resume佈局，這一頁的內容拋棄了原主題light-ch自帶的佈局及樣式，但是隨之拋棄就是原本已經設定好的響應式佈局檔案，下面通過我對resume頁面的改造來了解一下響應式佈局的魅力。主要內容就是要手動新增CSS程式碼中的媒介查詢，使resume頁面符合響應式佈局。首先看一下最後的效果，如下圖：

如何實現這種佈局？先簡單看一下resume頁面的結構：

<div class="resume">
    <div class="resume-left"></div>
    <div class = 'resume-content'>
        <div class="resume-entry">
            <%- page.content %>
        </div>
    </div>
    <div class="clearfix"></div>
</div>

結構很簡單，分為resume-left以及resume-content，resume-content裡包含文章主要內容resume-entry。實現佈局的重點還是要看CSS程式碼，開啟resume.styl檔案，檢視部分程式碼如下：

.resume{
    margin: 0 auto;
    width: 800px;
    @media screen and (max-width: 860px){
        width: 100%;
    }
}
.resume-content{
    float: right;
    width: 580px;
    @media screen and (max-width: 860px) {
        width: 100%;
        margin-left: -210px;
    }
    @media screen and (max-width: 500px){
        margin-left: 0;
        float: none;
    }
}
.resume-entry{
    margin: 30px;
    @media screen and (max-width: 860px) {
        margin-left: 200px;
    }    
    @media screen and (max-width: 500px){
        padding-left: 30px;
        margin-left: 0px;
    }

}

簡單分析一下這段程式碼，這裡有兩個臨界點，一個是寬度為860px時，一個是寬度為500px時。那麼整個頁面就分為3段寬度來分析：

（1）當寬度大於860px時，忽略掉所有@media部分就是它的樣式情況；
（2）當寬度在500px到860px之間時，樣式就變成了@media screen and (max-width: 860px)這裡面規定的程式碼了；
（3）當寬度小於500px時，樣式又替換成了@media screen and (max-width: 500px)裡規定的程式碼了。

原理就是這樣，頁面比較簡單，實現也很簡單。學到這裡，記載在此。待深入學習後再分享。

上述例子詳細程式碼請點選light-ch | github檢視。

轉載儲存：Hexo | LP's Blog

Hexo主題中實現多級分類

大部分的Hexo主題都將文章的分類放在了sidebar上面，並且都是支援多級分類的，然而預設的light主題並沒有實現多級分類的功能，主要原因應該是該主題太老了，沒人更新了，但是偏偏就有像我這樣喜歡它的簡潔風格的人。

有折騰就有收穫，下面就來了解一下Hexo中是如何實現多級分類的。還是以light-ch主題為例。首先看一下最終效果如下圖：

上面提到分類一般放到sidebar上，於是在主題中找到layout/_widget/category.ejs檔案，light主題最開始的程式碼如下：

<% if (site.categories.length){ %>
<div class="widget tag">
  <h3 class="title"><%= __('categories') %></h3>
   <% site.categories.sort('name').each(function(item){ %>
    <li><a href="<%- config.root %><%- item.path %>"><%= item.name %></a><small><%= item.posts.length %></small><  /li>
    <% }); %>
</div>
<% } %>

這裡將site.categories的所有分類，按照名字的順序進行遍歷，並顯示在列表標籤下，從這段程式碼可以看出，實現分類列表的主要原理就是這樣。

然而這樣並不能區分多級分類，因為多級分類名也會按照同樣的等級以及樣式顯示在<li>標籤下，不能跟一級分類區分開來。那麼該如何區分呢？我最初的想法是通過判斷一個列表是否有下階分類，並通過設定不同的class類名來區分，如下程式碼所示。

<% if (site.categories.length){ %>
<div class="widget tag">
  <h3 class="title"><%= __('categories') %></h3>
   <% site.categories.sort('name').each(function(item){ %>
    <% if(item.parent) {%>
        <li><a class = "list-2"href="<%- config.root %><%- item.path %>"><%= item.name %></a><small><%= item.posts.length %></small></li>
     <% }else{%>
        <li><a href="<%- config.root %><%- item.path %>"><%= item.name %></a><small><%= item.posts.length %></small></li>
    <% } %>
  <% }); %>
</div>
<% } %>

這裡在分類的迴圈遍歷里加了一個判斷語句，當遍歷到某個分類的時候，先判斷它是否有父分類，也就是判斷它是否為二級分類。如果是二級分類，放到帶有class="list-2"的列表標籤下，這樣就跟一級分類區分開了，然後通過css，將list-2設定個margin-left值，進行縮排就OK了。

然而當有3級、4級分類怎麼辦？總不能list-3、list-4吧，所以這種方式不可取，那麼就要從html標籤身上動手了，很自然就可以想到無序列表標籤，一級分類下包含一個<ul>標籤的二級分類。然而設定樣式的時候只需要對所有li下ul設定縮排就行了。

那麼問題就來了，頁面結構的邏輯怎麼寫？這個就不用擔心了，因為Hexo有封裝好的幫助函式list_categories()。有了這個幫助函式就簡單了，改寫category.ejs程式碼如下：

<% if (site.categories.length){ %>
<div class="widget tag">
  <h3 class="title"><%= __('categories') %></h3>
     <%- list_categories(site.categories) %> 
</div>
<% } %>

頁面結構搞定了，在source/css/_partial/sidebar.styl中新增樣式程式碼就行了。

.category-list
  font-size 0.9em
  padding 15px 20px 
  .category-list-count
    margin-left 8px
    font-size 0.8em
    color color-meta
    &:before
      content '('
    &:after
      content ')'

ul, ol, dl
  list-style none
  ul, ol, dl
    margin-left 20px
    li:before
      content '> '

這裡的樣式顯示的效果就如上圖那樣，你可以自定義出你的樣式。

補充：
list_categories([categories], [options])幫助函式可以新增引數。
例如當你不想顯示多級分類了，不必去修改每篇文章的前置申明，只需設定depth引數就行了。
list_categories(site.categories,{depth: 1})這樣就只會顯示一級分類了。用法可以參考一下官方Docs或者這裡。

轉載儲存：Hexo | LP's Blog

Hexo部署至多個repo上，多域名指向

最近有好友會問，你那個部落格站點域名是啥來著？我就發現之前申請的域名確實很難記，就算告訴過了很快就會忘了，雖然當時還覺得.com的域名很牛X的樣子，發現問題後，果斷入手了lupeng.me，這個域名雖然不是.com國際域名，但是相比而言要好記得多了，直接就是名字全拼，二級域名.me也比較新穎，由於站點只是一個簡單的Blog，直接訪問lupeng.me就OK了。

那麼現在就有一個問題了，後臺統計發現還是有一些老使用者會訪問我的Blog站點的，如果直接廢除掉，感覺很不負責任。於是只能將該域名指向到之前的域名了。

顯性URL指向 or 隱性URL指向，由於域名都是在萬網上申請的，很遺憾被告知沒有備案的域名不支援該功能。

當然你可以將兩個域名都指向你的伺服器一樣OK了，但是這個部落格站點只是搭載在了Github上，使用了Github的Pages功能，並沒有自己的伺服器，而且Github Pages是不支援多域名指向的，於是只能另尋他法了。

其實國內也有一家提供類似Github pages服務的公司，那就是Gitcafe。通過將Hexo部署到它上面，同樣也可以獲得類似pages的服務（因為伺服器在國內，速度會比Github更加快），具體方法可以自己去Gitcafe官方站點上去找。

既然是同一個站點，而又部署到完全不同的伺服器上，必須要一鍵部署才是最完美的，不然就得來回折騰，好在Hexo是支援這個功能的，非常方便，只要在_config.yml配置檔案中如下配置，就OK了。

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: 
    github: https://github.com/pengloo53/pengloo53.github.io.git
    gitcafe: https://gitcafe.com/pengloo53/pengloo53.git
  branch: master

上面repo替換成自己的repo地址就可以了。以後只要執行hexo d -g，就會自動將Hexo站點佈置到上述兩個Git repo中。

最後分別設定兩個域名的CNAME型別的域名解析，使它們分別指向Github以及Gitcafe的pages就可以了。

當訪問www.linux2me.com時，使用的是Github Pages服務，當訪問lupeng.me時，使用的是Gitcafe Pages服務。

寫在最後，當然有能力的完全可以搭載在自己的伺服器上，使用自己的資源才是正確的價值觀。

參考文章：Hexo多Repo部署——使用Github和GitCafe同時託管部落格 | Less is More

轉載儲存：Hexo | LP's Blog

Hexo資料檔案功能新增友情連結

Hexo3版本新增了一項資料檔案的功能，大概意思就是可以將資料儲存在檔案中，然後從檔案中讀取資料，最後展示在站點上。官方Docs中簡要介紹了一下Data files的使用方法。

正好想在站點上新增友情連結的功能，使用這個資料檔案的功能，就可以將友情連結的資料儲存在檔案中，這樣就避免了將資料直接寫進HTML或者_config.yml配置檔案中。

1. 新增資料檔案

在Hexo根目錄中的source目錄中建立_data目錄，然後在_data目錄中新建links.yml檔案，內容如下：

LP's Blog: http://pengloo53.farbox.com
xiaoxiao's Blog: http://xiaoyun.farbox.com
說說事: http://www.saysays.com

新增了兩行資料，代表兩條友情連結。

2. 新增主題佈局檔案

將友情連結放到右側的sidebar中，於是需要在主題目錄下的layout/_widget中新增檔案links.ejs，內容如下：

<% if (site.data.links){ %>
  <div class="widget tag">
    <h3 class="title">友情連結</h3>
      <ul class="entry">
        <% for (var i in site.data.links){ %>
          <li class='link'><a href='<%- site.data.links[i] %>'><%= i %></a></   li>
        <% } %>
      </ul>
  </div>
<% } %>

其中的site.data.links就是上面建立的links.yml資料檔案所對應的物件。

3. 填寫配置檔案

這裡使用的是Hexo-theme-light_cn主題，在主題目錄下的_config.yml檔案中widgets下新增上links就OK了，如下圖：

啟動服務就可以看到如下圖樣式了。

以後想要新增友情連結，直接編輯links.yml檔案就可以了，而不必去修改主題的配置檔案。

轉載儲存：Hexo中資料檔案功能新增友情連結 | LP's Blog

Hexo主題中新增日曆雲功能

從部落格園還有wordpress站點中都能看到類似於下圖所示的小模組，方便檢視日曆以及文章發表的日期。

之前檢視每月寫的文章都是通過歸檔的功能來實現的，顯示年月以及對應月份的文章數量，如下圖。

但是隨著時間的不斷增長，頁面這塊也會不斷的增長，於是就想到要用日曆雲的小模組來替代掉目前的歸檔顯示在站點widget區域。最終顯示效果如下：

很清晰的看到4月份寫了5篇文章，分別在6、7、12、13以及23號。點選對應的日期能直接定位到該日期下的文章，嘗試一下效果請點選這裡。

這裡使用了淨土大哥開發的小外掛，然後「厚顏無恥」的移植到了自己的部落格裡，如果使用的是正好淨土大哥的Hexo主題，那麼請移步到它的站點-Hexo日曆外掛 | 淨土。

如果使用的Hexo-theme-light_cn主題或者想移植到其他主題下，接著往下看。

1. 安裝hexo-generator-calendar外掛

npm install --save git://github.com/howiefh/hexo-generator-calendar.git 目的是為了產生文章日期資訊的calendar.json檔案,後續通過前端Ajax取得日曆資料，最終展示成日曆表格。

2. 新增相關檔案

不想看我囉嗦的，直接看這次commit:Hexo-theme-light_cn@8f1bae1，相信你對著原始碼能新增上相關檔案。

2.1 js檔案

新增JS實現的日曆模組外框。在主題目錄下source/js目錄下新增下面兩個檔案。

2.2 ejs檔案

我們要在widget區域顯示該模組，那麼在主題目錄layout/_widget目錄下新增calendar.ejs檔案，程式碼如下：

<div class="widget tag">
  <h3 class="title"><%= __('calendar') %></h3>
  <div id="calendar"></div>
</div>

提供一個div來顯示日曆雲模組。注意title那塊可以直接寫成日曆雲，如果想實現多語言，那麼去主題languages目錄下配置對應語言的calendar欄位即可

2.3 styl樣式檔案

在主題source/css/_partial/目錄下新增calendar.styl檔案。具體程式碼拷貝calendar.styl。其中用到兩個樣式變數確保在source/css/_base/variable.styl檔案中已經定義好。一個是color-link，一個是color-calendar-post-bg。

3. 修改相關配置

新增完一些必要的檔案後，現在需要對一些現有檔案進行修改。

3.1 引入js檔案

新增完js檔案，然後在layout/_partial/after_footer.ejs檔案中引入js程式碼。新增內容如下：

<!-- add calendar widget -->
<% if (theme.widgets.indexOf('calendar') != -1){ %>
  <script src="<%- config.root %>js/calendar.js"></script>
  <script src="<%- config.root %>js/languages.js"></script>
  <script type="text/javascript">
    $(function() {
    <% if (theme.calendar.options){ %>
      $('#calendar').aCalendar('<%= theme.calendar.language || config.language %>', $.extend(<%- JSON.    stringify(theme.calendar.options ) %>, {single:<%= config.calendar.single %>, root:'<%= config.calendar.root %>'});
    <% }else{ %>
  $('#calendar').aCalendar('<%= theme.calendar.language || config.language %>',{single:<%= config.    calendar.single %>, root:'<%= config.calendar.root %>'});
    <% } %>
    });
  </script>
<% } %>

3.2 主題配置檔案_config.yml

在widgets下新增calendar，位置自定。然後在最後新增上calendar外掛的配置程式碼：

calendar:
  language: zh-CN

只定義了語言language為中文，這樣的配置就足夠了。如果想自定義的話，可以修改calendar.js檔案最後一段程式碼的相關引數，或者將引數填寫在主題_config.yml裡。例如：

calendar:
  language: zh-CN
  options:
    months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',     'October', 'November', 'December'],
    dayOfWeekShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
    dayOfWeek: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],

這樣，應該就OK了。通過Hexo g重新生成以下，然後hexo s看看效果是否如上圖所示。

轉載儲存：Hexo | LP's Blog

使用Nginx部署Hexo站點

在公司內網環境中，搭建一個靜態站點，用於儲存一些相關知識文件，並通過頁面的形式展現出來。靜態站點生成器這裡我選擇的是Hexo（一個基於Node實現的靜態部落格框架），而Web伺服器首選當然是Nginx，簡單高效。

1. 安裝Nginx

這裡我以Windows Server為例，安裝非常簡單，從官方站點頁面下載Nginx軟體包。下載完成後，直接解壓到本地目錄就行了。

開啟cmd，進入Nginx目錄，執行命令start nginx，然後你就可以在工作管理員中看到nginx的程式了。直接訪問瀏覽器http://127.0.0.1,正常情況下，就能看到Nginx的歡迎介面了。如果不對，90%的可能是因為80埠占用問題，開啟配置Nginx配置檔案，修改一下預設埠就行了。

2. 配置Nginx

Nginx目錄下開啟conf/nginx.conf檔案，部分內容如下：

...
server {
        listen       8080;
        server_name  127.0.0.1;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
            root   html;
            index  index.html;
        }
...

如上，將預設80改成8080，然後在訪問http://127.0.0.1:8080就OK了。下面location就是歡迎頁面的訪問路徑，進入Nginx目錄下html目錄，可以看到有個index.html檔案，這就是歡迎頁面。

那麼如何將Hexo靜態站點部署在Nginx伺服器下呢？

3. 部署靜態站點

通過Hexo g命令生成的靜態站點，預設就是Hexo站點目錄中的public資料夾。

將生成好的靜態站點（也就是public/目錄），拷貝至Nginx目錄下的html資料夾中。然後修改Nginx配置檔案。

...
server {
        listen       8080;
        server_name  127.0.0.1;
        location / {
            root   html/public;
            index  index.html;
        }
...

只是修改了root欄位為public目錄，其他地方都不變，然後重新載入Nginx，開啟cmd，在Nginx目錄下執行nginx -s reload，重新訪問http://127.0.0.1:8080，就可以看到Hexo靜態站點了。這裡要注意瀏覽器快取的問題

問題

Hexo其實是提供hexo s命令來實時檢視訪問頁面，如果在伺服器端啟動hexo s，在瀏覽器中同樣也可以通過伺服器IP來訪問站點，並且能實時顯示當前狀態。但是，通過我嘗試後發現，hexo s效率非常低，只能適合線上除錯，不適合作為站點訪問。
更新的時候，需要使用hexo g重新生成站點，然後將public目錄拷貝到Nginx目錄中html資料夾下即可。

如何在站點中新增漂亮的小圖示？

在一些頁面上，可以看到一些小圖示，非常漂亮。如下：

這些小圖示看上去非常可愛，給頁面帶來更好觀賞性的同時也提高使用者的互動體驗，這裡簡單介紹一下如何在頁面中新增這些漂亮小圖示，使自己的導航連結從這樣子，

變成這樣子。這裡還是以light_cn主題為例來介紹，看我是如何給頁面加上這些小圖示的。

這些小圖示本質上其實是一種字型，並不是嵌入的圖片，當你從頁面程式碼上去檢視這個元素的時候，你可能會發現這個：

但是，content是個什麼玩意？\f015這又是個啥玩意？

content 屬性與 :before 及 :after 偽元素配合使用，來插入生成內容。

這樣就清晰了一點，在定義有before偽元素前面新增了一個叫\f015的玩意，這個玩意顯示出來就是小房子這個小圖示。

好了，那麼怎麼能隨心所欲的新增我們想要的小圖示呢？

1. 基本原理

這些圖示字型肯定是某人或者某組織設計出來了，這裡就要提到Font Awesome這個網站了，據我所知，絕大部分Hexo站點使用的免費icon都是出自這個網站，它是掛在Github上的一個開源專案。

首先將專案檔案下載下來，這裡我們只使用css和fonts兩個資料夾，將他們拷貝進Hexo專案主題目錄下source目錄中。（注意：拷貝進主題目錄下的source目錄中）

然後在主題目錄下layout/_partial/head.ejs檔案中引用這個css樣式檔案，新增如下一行程式碼。

<!-- Font-Awesome -->
<link rel="stylesheet" href="<%- url_for('/font-awesome/css/font-awesome.min.css') %>">

接下來你就可以隨心所欲的使用它了，使用方法很簡單，在你需要顯示小圖示的元素上加上class="fa fa-***"樣式即可。

例如，首頁連結前面加個小房子圖示：<a class="fa fa-home">首頁</a>即可。fa定義了要使用的Font是FontAwesome；fa-home代表的就是小房子圖示，它的Content值都已經在font-awesome.min.css中定義好了，如下房子圖示的Content值為\f015：

.fa-home:before {
  content: "\f015";
}

2. 導航連結小圖示

light_cn主題的導航連結是通過主題配置檔案中menu以及submenu來進行配置的，如下：

menu:
  home: /
  archives: /archives
  books: /hexo
  about: /resume

submenu:
  rss: /atom.xml
  customization: /customization

這些連結通過配置需要隨時變化，並不是直接寫死在佈局檔案中的，所以無法直接給a標籤新增class屬性，所以我參照了Next主題的處理辦法，連結的圖示名稱對應關係以配置檔案的方式進行維護。如下：

menu_icon:
  home: home
  archives: archive
  books: book
  about: user
  rss: rss
  customization: question-circle

針對每一個導航連結都對應有一個圖示名稱，該名稱即是fa-***中星星字元所代表的圖示。全部圖示的對應關係請參照Font Awesome Icons，這些列舉了官方提供的所有圖示。

最後修改layout/_partial/header.ejs導航部分程式碼如下：

<div class='header-nav-content inner'>
    <div id="main-nav" class="alignleft">
    <% for (var i in theme.menu){ %>
      <a href="<%- theme.menu[i] %>"><i class="fa fa-<%- theme.menu_icon[i] %>"></i><%- __(i) %></a>
      <% } %>
    </div>
    <div id="sub-nav" class="alignright">
    <% for (var i in theme.submenu){ %>
      <a href="<%- theme.submenu[i] %>"><i class="fa fa-<%- theme.menu_icon[i] %>"></i><%-     __(i)%></a>
      <% } %>
    </div>
</div>

通過menu找到要顯示的導航連結，然後通過menu_icon找到顯示的圖示樣式，賦予到class屬性上即可。

3. 不同佈局的圖示

light_cn主題中針對不同的佈局，會顯示不同的導航圖示。例如：

點選分類的時候顯示資料夾圖示

點選標籤的時候顯示標籤圖示

點選日期歸檔的時候顯示日曆圖示

這個如何實現呢？這個就需要藉助Hexo提供的變數來實現，不同的佈局下具有不同的變數，例如分類佈局具有page.category變數等等，然後通過判斷，設定不同的圖示即可。詳細見如下程式碼：

<h2 class="archive-title<% if (page.tag){ %> fa-tag<% } else if (page.category){ %> fa-folder<% } else if (page.archive){ %> fa-calendar<% } %>"><%= title %></h2>

tag佈局圖示fa-tag；category佈局圖示fa-folder；archive佈局圖示fa-calendar。

除了通過使用class屬性值外，還可以直接在css中定義某個元素的Font以及content屬性值便可，這樣就可以更靈活的實現一些樣式。

轉載儲存：如何在站點中新增漂亮的小圖示？ | LP's Blog

站點優化之 WebP 實戰
2019-02-28
優化Web
hexo+GitHub部落格搭建實戰
2017-09-08
HexoGithub
《Python高效開發實戰》實戰演練——開發Django站點1
2016-11-17
PythonDjango
GitHub+Hexo 搭建個人網站
2019-04-16
GithubHexo網站
hexo 實戰：（二）個人獨立部落格豪華裝修合集
2024-06-15
Hexo
【Serverless實戰】傳統單節點網站的Serverless上雲
2022-09-02
Server網站
Python爬蟲，JS逆向之 webpack 打包站點原理與實戰
2022-05-23
Python爬蟲JSWeb
hexo搭建個人網站部落格完全教程
2018-09-14
Hexo網站
使用 Hexo 為自己在 Github 上建一個靜態 Blog部落格站點
2018-07-11
HexoGithub
ChatGPT搭建AI網站實戰
2023-03-31
ChatGPTAI網站
關於HEXO搭建個人部落格的點點滴滴
2018-01-29
Hexo
網站效能優化實戰（二）
2018-09-10
網站優化
開源站點-實時更新
2019-01-05
美團點評點餐 Nuxt.js 實戰
2017-08-09
UXJS
實時熱點網站有哪些？3個超實用的熱點網站，輕鬆找熱點
2022-05-26
網站
SEO實戰:如何處理網站被黑
2015-12-28
網站
非常實用的站點收錄
2020-03-28
使用letsencrypt實現https站點
2016-10-09
HTTP
站點登入功能的實現
2017-05-17
《前端實戰總結》之使用純css實現網站換膚和焦點圖切換動畫
2019-12-20
前端CSS網站動畫
SCCM 2012 R2實戰系列之三：獨立主站點部署
2014-07-24
【Hexo】使用Hexo+github pages+travis ci 實現自動化部署
2020-05-05
HexoGithub
Spark SQL知識點與實戰
2021-11-23
SparkSQL
【jQuery實戰知識點總結】
2017-02-12
jQuery
大型商城網站爬蟲專案實戰
2018-01-15
網站爬蟲
使用Hexo＋ github快速搭建自己的部落格網站(一)
2017-11-30
HexoGithub網站
使用Hexo＋ github快速搭建自己的部落格網站（二）
2017-12-01
HexoGithub網站
Express實戰個人訂閱號實現網站登入
2023-05-18
Express網站
CAS單點登入(SSO)實戰(一)
2019-01-24
Nginx 實戰核心知識點整理（上）
2022-07-05
Nginx
Spark SQL知識點大全與實戰
2021-11-21
SparkSQL
PLSQL重點問題理解和實戰
2017-11-29
SQL
鴻蒙HarmonyOS實戰-ArkUI事件（焦點事件）
2024-05-07
鴻蒙UI事件
基於 Elasticsearch 的站內搜尋引擎實戰
2019-03-04
Elasticsearch
Hexo 使用
2024-07-02
Hexo
一點點入坑JetPack：實戰前戲NetworkBoundResource篇
2019-05-11
Jetpack
《Spring Boot 實戰紀實》之關鍵點文件
2020-12-20
Spring Boot
實戰模擬│單點登入 SSO 的實現
2022-07-08

Hexo站點實戰

初步瞭解Hexo站點的佈局

1、前提

2、預設佈局

3、首頁佈局

Hexo主題中新新增resume佈局

1、在layout資料夾中新增布局檔案

2、resume佈局的區域性模組

3、在頁面中新增page

Hexo站點中新增文章目錄以及歸檔

一、文章目錄

二、歸檔sidebar

總結

Hexo主題中響應式佈局設計

Hexo主題中實現多級分類

Hexo部署至多個repo上，多域名指向

Hexo資料檔案功能新增友情連結

1. 新增資料檔案

2. 新增主題佈局檔案

3. 填寫配置檔案

Hexo主題中新增日曆雲功能

1. 安裝hexo-generator-calendar外掛

2. 新增相關檔案

2.1 js檔案

2.2 ejs檔案

2.3 styl樣式檔案

3. 修改相關配置

3.1 引入js檔案

3.2 主題配置檔案_config.yml

使用Nginx部署Hexo站點

1. 安裝Nginx

2. 配置Nginx

3. 部署靜態站點

問題

如何在站點中新增漂亮的小圖示？

1. 基本原理

2. 導航連結小圖示

3. 不同佈局的圖示

相關文章

1、在`layout`資料夾中新增布局檔案