搭建Hexo博客進階篇---主題自定義（三）

本文續接 Hexo 文檔講解篇

Yelee主題介紹

更換主題

創建 Hexo 主題非常容易，您只要在 themes 文件夾內，新增一個任意名稱的文件夾，并修改 _config.yml 內的 theme 設定，即可切換主題。一個主題可能會有以下的結構：

.
├── _config.yml      //這個是主題配置項文件
├── languages        //這個是語言文件
├── layout           //這個是模板文件
├── scripts           
└── source

盛年不重來，一日難再晨。及時當勉勵，歲月不待人

  1. Layout

    布局文件夾。用于存放主題的模板文件，決定了網站內容的呈現方式，Hexo 內建 Swig 模板引擎，您可以另外安裝插件來獲得 EJS、Haml 或 Jade 支持，Hexo 根據模板文件的擴展名來決定所使用的模板引擎，例如：

    layout.ejs   - 使用 EJS
layout.swig  - 使用 Swig

yelle主題采用的是EJS模板，EJS模板可以參考 ejs中文文檔

  1. source

    資源文件夾，除了模板以外的 Asset，例如 CSS、JavaScript 文件等，都應該放在這個文件夾中。文件或文件夾開頭名稱為 _（下劃線線）或隱藏的文件會被忽略。
    如果文件可以被渲染的話，會經過解析然后儲存到 public 文件夾，否則會直接拷貝到 public 文件夾。

模板

模板決定了網站內容的呈現方式，每個主題至少都應包含一個 index 模板，以下是各頁面相對應的模板名稱：

模板 用途 回調
index 首頁
post 文章 index
page 分頁 index
archive 歸檔 index
category 分類歸檔 archive
tag 標簽歸檔 archive

布局

如果頁面結構類似，例如兩個模板都有頁首（Header）和頁腳（Footer），您可考慮通過「布局」讓兩個模板共享相同的結構。一個布局文件必須要能顯示 body 變量的內容，如此一來模板的內容才會被顯示，舉例來說：

{% codeblock index,ejs %}
index
{% endcodeblock %}

{% codeblock layout.ejs %}
<!DOCTYPE html>
<html>
<body><%- body %></body>
</html>
{% endcodeblock %}

生成 ：

<!DOCTYPE html>
<html>
<body>index</body>
</html>

每個模板都默認使用 layout 布局，您可在 front-matter 指定其他布局，或是設為 false 來關閉布局功能，您甚至可在布局中再使用其他布局來建立嵌套布局。

局部模板

局部模板讓您在不同模板之間共享相同的組件，例如頁首（Header）、頁腳（Footer）或側邊欄（Sidebar）等，可利用局部模板功能分割為個別文件，讓維護更加便利。舉例來說：

{% codeblock partial/header.ejs %}
<h1 id="logo"><%= config.title %></h1>
{% endcodeblock %}

{% codeblock index.ejs %}
<%- partial('partial/header') %>
<div id="content">Home page</div>
{% endcodeblock %}

生成：

<h1 id="logo">My Site</h1>
<div id="content">Home page</div>

局部變量

您可以在局部模板中指定局部變量并使用。

{% codeblock partial/header.ejs %}
<h1 id="logo"><%= title></h1>
{% endcodeblock %}

{% codeblock index.ejs %}
<%- partial('partial/header', {title: 'Hello World'}) %>
<div id="content">Home page</div>
{% endcodeblock %}

生成：

<h1 id="logo">Hello World</h1>
<div id="content">Home page</div>

優化

如果您的主題太過于復雜，或是需要生成的文件量太過于龐大，可能會大幅降低性能，除了簡化主題外，您可以考慮 Hexo 2.7 新增的局部緩存（Fragment Caching） 功能。

本功能借鑒于 Ruby on Rails，它儲存局部內容，下次便能直接使用緩存內容，可以減少文件夾查詢并使生成速度更快。

它可用于頁首、頁腳、側邊欄等文件不常變動的位置，舉例來說：

<%- fragment_cache('header', function(){
  return '<header></header>';
});

如果您使用局部模板的話，可以更簡單：

<%- partial('header', {}, {cache: true});

但是，如果您開啟了 relative_link 參數的話，請勿使用局部緩存功能，因為相對鏈接在每個頁面可能不同。

變量

這些變量很重要，因為將來自定義ejs,加入新的頁面的時候，都需要了解這些變量

全局變量

變量 描述
site 網站變量
page 針對該頁面的內容以及 front-matter 所設定的變量。
config 網站配置
theme 主題配置。繼承自網站配置。
_ (單下劃線) Lodash 函數庫
path 當前頁面的路徑（不含根路徑）
url 當前頁面的完整網址
env 環境變量

網站變量

變量 描述
site.posts 所有文章
site.pages 所有分頁
site.categories 所有分類
site.tags 所有標簽

頁面變量

變量 描述
site.posts 所有文章
site.pages 所有分頁
site.categories 所有分類
site.tags 所有標簽

A、頁面

變量 描述
page.title 頁面標題
page.date 頁面建立日期（Moment.js 對象）
page.updated 頁面更新日期（Moment.js 對象）
page.comments 留言是否開啟
page.layout 布局名稱
page.content 頁面的完整內容
page.excerpt 頁面摘要
page.more 除了頁面摘要的其余內容
page.source 頁面原始路徑
page.full_source 頁面的完整原始路徑
page.path 頁面網址（不含根路徑）。我們通常在主題中使用 url_for(page.path)。
page.permalink 頁面的完整網址
page.prev 上一個頁面。如果此為第一個頁面則為 null。
page.next 下一個頁面。如果此為最后一個頁面則為 null。
page.raw 文章的原始內容
page.photos 文章的照片（用于相簿）
page.link 文章的外部鏈接（用于鏈接文章）

B、文章

變量 描述
page.published 如果該文章已發布則為True
page.categories 該文章的所有分類
page.tags 該文章的所有標簽

C、首頁

變量 描述
page.per_page 每頁顯示的文章數量
page.total 總文章數
page.current 目前頁數
page.current_url 目前分頁的網址
page.posts 本頁文章
page.prev 上一頁的頁數。如果此頁是第一頁的話則為 0。
page.prev_link 上一頁的網址。如果此頁是第一頁的話則為 ''。
page.next 下一頁的頁數。如果此頁是最后一頁的話則為 0。
page.next_link 下一頁的網址。如果此頁是最后一頁的話則為 ''。
page.path 當前頁面的路徑（不含根目錄）。我們通常在主題中使用 url_for(page.path)。

D、歸檔

變量 描述
page.archive 等于 true
page.year 年份歸檔 (4位)
page.month 月份歸檔 (沒有前導零的2位數)

E、分類

變量 描述
page.category 分類名稱

F、標簽

變量 描述
page.tag 標簽名稱

輔助函數

輔助函數幫助您在模版中快速插入內容。輔助函數不能在源文件中使用。

網址

A、url_for

在路徑前加上根路徑，從 Hexo 2.7 開始您應該使用此函數而不是 config.root + path。

<%- url_for(path) %>

<%- url_for(/2017/02/20/HexoBlog/) %>

B、relative_url

取得與 from 相對的 to 路徑。

<%- relative_url(from, to) %>

C、gravatar

插入 Gravatar 圖片。
如果你不指定 options 參數，將會應用默認參數。否則，你可以將其設置為一個數字，這個數字將會作為 Gravatar 的大小參數。最后，如果你設置它一個對象，它將會被轉換為 Gravatar 的一個查詢字符串參數。

<%- gravatar(email, [options]) %>;

示例：

<%- gravatar('a@abc.com') %>
// http://www.gravatar.com/avatar/b9b00e66c6b8a70f88c73cb6bdb06787
<%- gravatar('a@abc.com', 40) %>
// http://www.gravatar.com/avatar/b9b00e66c6b8a70f88c73cb6bdb06787?s=40
<%- gravatar('a@abc.com' {s: 40, d: 'http://example.com/image.png'}) %>
// http://www.gravatar.com/avatar/b9b00e66c6b8a70f88c73cb6bdb06787?s=40&d=http%3A%2F%2Fexample.com%2Fimage.png

<%- gravatar('a@abc.com') %>
<%- gravatar('a@abc.com', 40) %>
<%- gravatar('a@abc.com' {s: 40, d: 'http://example.com/image.png'}) %>

注意了沒，這個不是在文中中使用的哦，這個是ejs模板語法，要在ejs模板文件中使用

HTML 標簽

A、css

載入 CSS 文件。path 可以是數組或字符串，如果 path 開頭不是 / 或任何協議，則會自動加上根路徑；如果后面沒有加上 .css 擴展名的話，也會自動加上。

<%- css(path, ...) %>

示例：

<%- css('style.css') %>
// <link rel="stylesheet" href="/style.css" type="text/css">
<%- css(['style.css', 'screen.css']) %>
// <link rel="stylesheet" href="/style.css" type="text/css">
// <link rel="stylesheet" href="/screen.css" type="text/css">

B、js

載入 JavaScript 文件。path 可以是數組或字符串，如果 path 開頭不是 / 或任何協議，則會自動加上根路徑；如果后面沒有加上 .js 擴展名的話，也會自動加上。

<%- js(path, ...) %>

示例：

<%- js('script.js') %>
// <script type="text/javascript" src="/script.js"></script>
<%- js(['script.js', 'gallery.js']) %>
// <script type="text/javascript" src="/script.js"></script>
// <script type="text/javascript" src="/gallery.js"></script>

C、link_to

插入鏈接。

<%- link_to(path, [text], [options]) %>
參數 描述 默認值
external 在新視窗打開鏈接 false
class Class 名稱
id ID

示例：

<%- link_to('http://www.google.com') %>
// <a  title="http://www.google.com">http://www.google.com</a>
<%- link_to('http://www.google.com', 'Google') %>
// <a  title="Google">Google</a>
<%- link_to('http://www.google.com', 'Google', {external: true}) %>
// <a  title="Google" target="_blank" rel="external">Google</a>

D、mail_to

插入電子郵箱鏈接。

<%- mail_to(path, [text], [options]) %>
參數 描述
class Class 名稱
id ID
subject 郵件主題
cc 抄送（CC）
bcc 密送（BCC）
body 郵件內容

示例：

<%- mail_to('a@abc.com') %>
// <a href="mailto:a@abc.com" title="a@abc.com">a@abc.com</a>
<%- mail_to('a@abc.com', 'Email') %>
// <a href="mailto:a@abc.com" title="Email">Email</a>

E、image_tag

插入圖片。

<%- image_tag(path, [options]) %>
參數 描述
alt 圖片的替代文字
class Class 名稱
id ID
width 圖片寬度
height 圖片高度

F、favicon_tag

插入favicon。

<%- favicon_tag(path) %>

G、feed_tag

插入 feed 鏈接。

<%- feed_tag(path, [options]) %>
參數 描述 默認值
title Feed 標題
type Feed 類型 atom

條件函數

A、is_current

檢查 path 是否符合目前頁面的網址。開啟 strict 選項啟用嚴格比對。

<%- is_current(path, [strict]) %>

B、is_home

檢查目前是否為首頁。

<%- is_home() %>

C、is_post

檢查目前是否為文章。

<%- is_post() %>

D、is_archive

檢查目前是否為存檔頁面。

<%- is_archive() %>

E、is_year

檢查目前是否為年度歸檔頁面。

<%- is_year() %>

F、is_month

檢查目前是否為月度歸檔頁面。

<%- is_month() %>

G、is_category

檢查目前是否為分類歸檔頁面。
如果給定一個字符串作為參數，將會檢查目前是否為指定分類。

<%- is_category() %>
<%- is_category('hobby') %>

H、is_tag

檢查目前是否為標簽歸檔頁面。
如果給定一個字符串作為參數，將會檢查目前是否為指定標簽。

<%- is_tag() %>
<%- is_tag('hobby') %>

字符串處理

A、trim

清除字符串開頭和結尾的空格。

<%- trim(string) %>

B、strip_html

清除字符串中的 HTML 標簽。

<%- strip_html(string) %>

示例：

<%- strip_html('It's not <b>important</b> anymore!') %>
// It's not important anymore!

C、titlecase

把字符串轉換為正確的 Title case。

<%- titlecase(string) %>

示例：

<%- titlecase('this is an apple') %>
#   This is an Apple

D、markdown

使用 Markdown 解析字符串。

<%- markdown(str) %>

示例：

<%- markdown('make me **strong**') %>
// make me <strong>strong</strong>

E、render

解析字符串。

<%- render(str, engine, [options]) %>

F、word_wrap

使每行的字符串長度不超過 length。length 預設為 80。

<%- word_wrap(str, [length]) %>

示例：

<%- word_wrap('Once upon a time', 8) %>
// Once upon\n a time

G、truncate

移除超過 length 長度的字符串。

<%- truncate(text, length) %>

示例：

<%- truncate('Once upon a time in a world far far away', {length: 17}) %>
// Once upon a ti...
<%- truncate('Once upon a time in a world far far away', {length: 17, separator: ' '}) %>
// Once upon a...
<%- truncate('And they found that many people were sleeping better.', {length: 25, omission: '... (continued)'}) %>
// And they f... (continued)

模板

A、partial

載入其他模板文件，您可在 locals 設定區域變量。

<%- partial(layout, [locals], [options]) %>
參數 描述 默認值
cache 緩存（使用 Fragment cache） false
only 限制局部變量。在模板中只能使用 locals 中設定的變量。 false

B、fragment_cache

局部緩存。它儲存局部內容，下次使用時就能直接使用緩存。

<%- fragment_cache(id, fn);

示例：

<%- fragment_cache('header', function(){
  return '<header></header>';
}) %>

日期與時間

date

插入格式化的日期。date 可以是 UNIX 時間、ISO 字符串、Date 對象或 Moment.js 對象。format 默認為 date_format 配置信息。

<%- date(date, [format]) %>

示例：

<%- date(Date.now()) %>
// 2013-01-01
<%- date(Date.now(), 'YYYY/M/D') %>
// Jan 1 2013

date_xml

插入 XML 格式的日期。date 可以是 UNIX 時間、ISO 字符串、Date 對象或 Moment.js 對象。

<%- date_xml(date) %>

示例：

<%- date_xml(Date.now()) %>
// 2013-01-01T00:00:00.000Z

time

插入格式化的時間。date 可以是 UNIX 時間、ISO 字符串、Date 對象或 Moment.js 對象。format 默認為 time_format 配置信息。

<%- time(date, [format]) %>

示例：

<%- time(Date.now()) %>
// 13:05:12
<%- time(Date.now(), 'h:mm:ss a') %>
// 1:05:12 pm

full_date

插入格式化的日期和時間。date 可以是 UNIX 時間、ISO 字符串、Date 對象或 Moment.js 對象。format 默認為 date_format + time_format。

<%- full_date(date, [format]) %>

示例：

<%- full_date(new Date()) %>
// Jan 1, 2013 0:00:00
<%- full_date(new Date(), 'dddd, MMMM Do YYYY, h:mm:ss a') %>
// Tuesday, January 1st 2013, 12:00:00 am

moment

Moment.js 函數庫。

列表

list_categories

插入分類列表。

<%- list_categories([options]) %>
參數 描述 默認值
orderby 分類排列方式 name
order 分類排列順序。1, asc 升序；-1, desc 降序。 1
show_count 顯示每個分類的文章總數 true
style 分類列表的顯示方式。使用 list 以無序列表（unordered list）方式顯示。 list
separator 分類間的分隔符號。只有在 style 不是 list 時有用。 ,
depth 要顯示的分類層級。0 顯示所有層級的分類；-1 和 0 很類似，但是顯示不分層級；1 只顯示第一層的分類。 0
class 分類列表的 class 名稱。 category
transform 改變分類名稱顯示方法的函數

list_tags

插入標簽列表。

<%- list_tags([options]) %>
參數 描述 默認值
orderby 標簽排列方式 name
order 標簽排列順序。1, asc 升序；-1, desc 降序。 1
show_count 顯示每個標簽的文章總數 true
style 標簽列表的顯示方式。使用 list 以無序列表（unordered list）方式顯示。 list
separator 標簽間的分隔符號。只有在 style 不是 list 時有用。
class 標簽列表的 class 名稱。 tag
transform 改變標簽名稱顯示方法的函數
amount 要顯示的標簽數量（0 = 無限制） 0

list_archives

插入歸檔列表。

<%- list_archives([options]) %>
參數 描述 默認值
type 類型。此設定可為 yearly 或 monthly。 monthly
order 排列順序。1, asc 升序；-1, desc 降序。 1
show_count 顯示每個歸檔的文章總數 true
format 日期格式 MMMM YYYY
style 歸檔列表的顯示方式。使用 list 以無序列表（unordered list）方式顯示。 list
separator 歸檔間的分隔符號。只有在 style 不是 list 時有用。
class 歸檔列表的 class 名稱。 archive
transform 改變歸檔名稱顯示方法的函數

list_posts

插入文章列表。

<%- list_posts([options]) %>
參數 描述 默認值
orderby 文章排列方式 date
order 文章排列順序。1, asc 升序；-1, desc 降序。 -1
style 文章列表的顯示方式。使用 list 以無序列表（unordered list）方式顯示。 list
separator 文章間的分隔符號。只有在 style 不是 list 時有用。
class 文章列表的 class 名稱。 post
amount 要顯示的文章數量（0 = 無限制） 6
transform 改變文章名稱顯示方法的函數

tagcloud

插入標簽云。

<%- tagcloud([tags], [options]) %>
參數 描述 默認值
min_font 最小字體尺寸 10
max_font 最大字體尺寸 20
unit 字體尺寸的單位 px
amount 標簽總量 40
orderby 標簽排列方式 name
order 標簽排列順序。1, sac 升序；-1, desc 降序 1
color 使用顏色 false
start_color 開始的顏色。您可使用十六進位值（#b700ff），rgba（rgba(183, 0, 255, 1)），hsla（hsla(283, 100%, 50%, 1)）或 顏色關鍵字。此變量僅在 color 參數開啟時才有用。
end_color 結束的顏色。您可使用十六進位值（#b700ff），rgba（rgba(183, 0, 255, 1)），hsla（hsla(283, 100%, 50%, 1)）或 顏色關鍵字。此變量僅在 color 參數開啟時才有用。

其他

paginator

插入分頁鏈接。

<%- paginator(options) %>
參數 描述 默認值
base 基礎網址 /
format 網址格式 page/%d/
total 分頁總數 1
current 目前頁數 0
prev_text 上一頁鏈接的文字。僅在 prev_next 設定開啟時才有用。 Prev
next_text 下一頁鏈接的文字。僅在 prev_next 設定開啟時才有用。 Next
space 空白文字 …
prev_next 顯示上一頁和下一頁的鏈接 true
end_size 顯示于兩側的頁數 1
mid_size 顯示于中間的頁數 2
show_all 顯示所有頁數。如果開啟此參數的話，end_size 和 mid_size 就沒用了。 false

search_form

插入 Google 搜索框。

<%- search_form(options) %>
參數 描述 默認值
class 表單的 class name search-form
text 搜索提示文字 Search
button 顯示搜索按鈕。此參數可為布爾值（boolean）或字符串，當設定是字符串的時候，即為搜索按鈕的文字。 false

number_format

格式化數字。

<%- number_format(number, [options]) %>
參數 描述 默認值
precision 數字精度。此選項可為 false 或非負整數。 false
delimiter 千位數分隔符號 ,
separator 整數和小數之間的分隔符號 ,

示例：

<%- number_format(12345.67, {precision: 1}) %>
// 12,345.68
<%- number_format(12345.67, {precision: 4}) %>
// 12,345.6700
<%- number_format(12345.67, {precision: 0}) %>
// 12,345
<%- number_format(12345.67, {delimiter: ''}) %>
// 12345.67
<%- number_format(12345.67, {separator: '/'}) %>
// 12,345/67

open_graph

插入 open graph 資源。

<%- open_graph([options]) %>
參數 描述 默認值
title 頁面標題 (og:title) page.title
type 頁面類型 (og:type) blog
url 頁面網址 (og:url) url
image 頁面圖片 (og:image) 內容中的圖片
site_name 網站名稱 (og:site_name) config.title
description 頁面描述 (og:desription) 內容摘要或前 200 字
twitter_card Twitter 卡片類型 (twitter:card) summary
twitter_id Twitter ID (twitter:creator)
twitter_site Twitter 網站 (twitter:site)
google_plus Google+ 個人資料鏈接
fb_admins Facebook 管理者 ID
fb_app_id Facebook 應用程序 ID

last: toc

解析內容中的標題標簽 (h1~h6) 并插入目錄。

<%- toc(str, [options]) %>
參數 描述 默認值
class Class 名稱 toc
list_number 顯示編號 true

示例：

<%- toc(page.content) %>

Hexo頁面渲染流程

Yelee目錄說明

看一下，Yelee主題的文件目錄:

目錄結構

根據這個目錄我們來分析Hexo是如何工作的
我們都知道兩個命名，一個是 hexo new page name ,一個是 hexo new post name

  • hexo new page name
    創建一個新頁面 , 頁面具體渲染模板在Theme主題下的layout文件夾下面
  • hexo new post name/hexo new post draft
    是創建一篇新文章，新文章保存在source/_posts目錄下，如果是hexo new draft name,則是保存在source/_drafts目錄下,那么根據scaffolds的模板，可以確定新建的文章或者草稿的基本配置
    看下圖：
原理

下面看一下我們的，引擎模板文件：
入口模板

入口模板

具體實現

實現過程

想要自定義404嗎？想要寫一個個性化的about me嗎？想要實現完全自定義嗎？哈哈這個你還是得去學習 EJS 啦

如何實現用D3-cloud來展現標簽云

有沒有感覺 Hexo 自帶的 tag-cloud 標簽云太丑陋了呢！作為一個前端程序員，對審美可是有著比較高的要求，
github 上面有 d3-cloud 這個項目，那么我們來玩一玩吧，把github上的d3-cloud項目在我們的hexo博客中使用哈！
hexo是靜態博客，所以最后在網上看到的都是靜態的內容，也就是說，我們的看到的標簽云也是靜態的已經生成好的內容，并不會隨著刷新頁面而重新計算生成另外樣式的標簽云。
當然d3-cloud這個項目，提供了瀏覽器端和node端運行的版本，見它的例子，我們可以在客戶端運行，也可以在服務端作為 node運行。

具體操作流程：

  1. 找到關于tagcloud模板文件以及JS和CSS
    我上面說的，應該很容易找到吧，我已經找到了呀

  2. 安裝模塊

    npm install canvas --save
npm install d3-cloud --save
npm install d3 --save

  3. 找到文件： 你的 blog項目 -> node_modules -> hexo ->plugins -> helper -> index.js

    var tagcloud = require('./tagcloud');
helper.register('tagcloud', tagcloud);
helper.register('tag_cloud', tagcloud);

?
//修改為下面的代碼：目的是不直接修改tagcloud.js，保留代碼
var tagcloud = require('./tagcloud');
var tagcloudd3 = require('./tagcloudd3');
helper.register('tagcloud', tagcloudd3);
helper.register('tag_cloud', tagcloudd3);
```

  1. 新建文件tagcloudd3.js ：位置在blog項目 -> node_modules -> hexo ->plugins -> helper -> tagcloudd3.js
    tagcloud3.js的內容如下:

     'use strict';   
 var Canvas = require("canvas");
 var cloud = require("d3-cloud");
 var d3 = require("d3");
     ?    
 var layout = cloud()//利用d3-cloud計算每個標簽的位置
 .size([600, 400])
 .canvas(function() { return new Canvas(1, 1); })
 .padding(7)
 .rotate(function() { return ~~(Math.random() * 2) * 90; })
 .font("Impact")
 .fontSize(function(d) { return d.size; });
 var fill = d3.scale.category20();//利用d3的接口給每個標簽顏色  
 function tagcloudHelper(tags){
     /****與tagcloud.js一樣，獲得tags 開始***/
 if ((!tags || !tags.hasOwnProperty('length'))){
     tags = this.site.tags;
 }

 if (!tags || !tags.length) return '';
 var result = [];
 tags = tags.sort('name', 1);
     // Ignore tags with zero posts
 tags = tags.filter(function(tag){
     return tag.length;
 });
     /****與tagcloud.js一樣，獲得tags 結束***/
     //計算標簽出現次數最大值，比如，博客中一共有兩個標簽，一個是hello,一個是world,hello出現2次，world 出現1次，那么maxsize就是2
 var maxsize = 1;
 tags.sort('length').forEach(function(tag){
         var length = tag.length;
         if(length > maxsize)
         maxsize = length;
 });
     //構建傳入layout的words
 var arr = [],words;
 tags.forEach(function(tag){
     arr.push({"name": tag.name,"num" : tag.length});
 });
 words = arr.map(function(d) {
     var text = d.name.replace(/[^\x00-\xff]/g,"ab");//對中文的投機處理，用ab代替中文字符
     return {name:d.name, text: text, size : Math.log(d.num)/(Math.log(maxsize)-Math.log(1)) * 15 + 30};//size的計算取對數，是為了讓標簽之間的大小相對平均一些。
           因為博客側重前端內容，所以某一些標簽會比較多，標簽最大最小次數的差距會比較大。
 });
 layout.words(words);
 layout.start();
 result.push('<svg width="600" height="400"><g transform="translate(300,200)">');
 words.forEach(function(word,i){
     result.push(
     '<text text-anchor="middle" fill="'+fill(i)+'" transform="translate('+word.x+','+word.y+')rotate('+
     word.rotate+')" style="font-size:'+word.size+'px;font-family:Impact">'+word.name+'</text>'
     );
 });
 result.push('</g></svg>');
 return result.join('');         
 }
 module.exports = tagcloudHelper;

  2. 運行，就可以看到結果啦
    這個我并沒有實際操作，原因很簡單，最近比較忙，還有一個就是，node安裝canvas實在是太麻煩了呀，
    這里給出地址：

Yelee 主題配置

關于主題的配置，這篇文章講的很詳細啦，Yelee中文參考手冊

關于Hexo,還有最后一篇文章，請看 ：搭建Hexo博客進階篇--API和一些小部件

參考資料

  1. Hexo官方網站 : https://hexo.io/
  2. 利用d3-cloud實現標簽云 : http://www.cnblogs.com/lilyimage/p/5207697.html
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容