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

時間  2019-12-05
標籤 搭建 hexo 博客 進階 主題 自定義 简体版
原文   原文鏈接

本文續接 Hexo 文檔講解篇javascript

Yelee主題介紹

更換主題

建立 Hexo 主題很是容易，您只要在 themes 文件夾內，新增一個任意名稱的文件夾，並修改 _config.yml 內的 theme 設定，便可切換主題。一個主題可能會有如下的結構：css

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

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

  1. Layout前端

    佈局文件夾。用於存放主題的模板文件，決定了網站內容的呈現方式，Hexo 內建 Swig 模板引擎，您能夠另外安裝插件來得到 `EJS`、`Haml` 或 `Jade` 支持，Hexo 根據模板文件的擴展名來決定所使用的模板引擎，例如：
    layout.ejs   - 使用 EJS
layout.swig  - 使用 Swig

    yelle主題採用的是EJS模板，EJS模板能夠參考 ejs中文文檔java

  2. sourcenode

    資源文件夾，除了模板之外的 Asset，例如 CSS、JavaScript 文件等，都應該放在這個文件夾中。文件或文件夾開頭名稱爲 _（下劃線線）或隱藏的文件會被忽略。

    若是文件能夠被渲染的話，會通過解析而後儲存到 public 文件夾，不然會直接拷貝到 public 文件夾。git

模板

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

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

佈局

若是頁面結構相似，例如兩個模板都有頁首（Header）和頁腳（Footer），您可考慮經過「佈局」讓兩個模板共享相同的結構。一個佈局文件必需要能顯示 body 變量的內容，如此一來模板的內容纔會被顯示，舉例來講：github

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

{% 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 href="http://www.google.com" title="http://www.google.com">http://www.google.com</a>
<%- link_to('http://www.google.com', 'Google') %>
// <a href="http://www.google.com" title="Google">Google</a>
<%- link_to('http://www.google.com', 'Google', {external: true}) %>
// <a href="http://www.google.com" 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主題的文件目錄:

clipboard.png

根據這個目錄咱們來分析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的模板，能夠肯定新建的文章或者草稿的基本配置

看下圖：

clipboard.png 功能實現

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

clipboard.png

具體實現

clipboard.png

想要自定義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);

  4. 新建文件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;

  5. 運行，就能夠看到結果啦
    這個我並無實際操做，緣由很簡單，最近比較忙，還有一個就是，node安裝canvas實在是太麻煩了呀，

這裏給出地址：

Yelee 主題配置

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

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

參考資料

  1. Hexo官方網站 : https://hexo.io/

  2. 利用d3-cloud實現標籤雲 : http://www.cnblogs.com/lilyimage/p/5207697.html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程