簡單修改Hexo Light主題功能樣式

內容
  1. 1. 引用外觀
  2. 2. 修改搜尋框內容為Google自訂搜尋
  3. 3. 增加側邊欄Google Adsense廣告區塊
  4. 4. 增加側邊欄連結區塊
  5. 5. 增加Twitter獨立頁面
  6. 6. 在彙整頁和分類頁增加上下頁
  7. 7. 新增TOC(Table of Contents)
  8. 8. 搜尋引擎最佳化(SEO)
    1. 8.1. 修改網頁描述
    2. 8.2. 網頁加入canonical標記
    3. 8.3. 文章連結加入nofollow
    4. 8.4. 建立網站地圖
  9. 9. 關閉「超連結開新分頁」功能

Hexo Light主題外觀簡單大方,沒有什麼華麗特效,算是很好修改。本文主要紀錄我個人修改需求功能,單一功能樣式修改步驟不多,但想改的東西累積起來,也是蠻多的。修改內容語法不加以詳細解釋,請自行Google結果。

引用外觀

原始引用外觀實在是不太好看,字體太大、句子全部置中。編輯/themes/light/source/css/_partial/article.styl檔案,找到以下段落:

1
2
3
4
5
6
7
8
blockquote
border-top 1px solid color-border
border-bottom 1px solid color-border
font-style italic
font-family font-serif
font-size 1.2em
padding 0 30px 15px
text-align center

改成:
1
2
3
4
5
6
7
8
9
10
blockquote
border-top 1px solid color-border
border-bottom 1px solid color-border
border-right 1px solid color-border
border-left: 7px solid #DDD
font-style italic
font-family font-serif
font-size 1.1em
padding 0 30px 15px
text-align left

效果如圖:
Hexo Light Quote

修改搜尋框內容為Google自訂搜尋

使用主題搜尋框,搜尋結果使用Google代管網頁。不選擇其他自訂搜尋效果,最大原因是只有Google代管才能使用目前視窗點進去搜尋連結,其他效果都是點進去搜尋連結會開新視窗。大型網站資料量夠大或是搜尋包含多個網站,開新視窗很方便。反之,個人網站資料量小,Google搜尋精準,尤其是重疊效果,搜尋結果開新視窗就顯得多餘。

如果你有Google Adsense,建議使用裡面的自訂搜尋設定,設定好後,產生程式碼如下:

1
2
3
4
5
6
7
8
9
10
<form action="http://www.google.com.tw" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="partner-pub-xxxxxxxxxxxxxxxx" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="25" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com.tw/coop/cse/brand?form=cse-search-box&amp;lang=en"></script>

編輯/themes/light/layout/_widget/search.ejs檔案,原始內容:
1
2
3
4
5
6
<div class="search">
<form action="//google.com/search" method="get" accept-charset="utf-8">
<input type="search" name="q" results="0" placeholder="<%= __('search') %>">
<input type="hidden" name="q" value="site:<%- config.url.replace(/^https?:\/\//, '') %>">
</form>
</div>

改成:
1
2
3
4
5
6
<div class="search">
<form action="http://www.google.com.tw" id="cse-search-box">
<input type="hidden" name="cx" value="partner-pub-xxxxxxxxxxxxxxxx" />
<input type="search" name="q" results="0" placeholder="<%= __('search') %>">
</form>
</div>

修改完畢,自行測試效果,其他自訂搜尋效果也是類似修改方式,例如兩頁效果需增加一個獨立頁面,內容為搜尋結果程式碼。

增加側邊欄Google Adsense廣告區塊

到Google Adsense新增一個回應式廣告單元(依螢幕/裝置自動調整大小)。另外複製一個檔案在同資料夾下:/themes/light/layout/_widget/category.ejs,任意取名為adsense.ejs,修改其內容為:

1
2
3
4
5
6
<div class="widget tag">
<h3 class="title">廣告</h3>
<ul class="entry">
放置你的Google Adsense程式碼
</ul>
</div>

編輯/themes/light/_config.yml主題設定檔,在widgets:底下新增一個- adsense區塊。

增加側邊欄連結區塊

參考〈Hexo中数据文件功能添加友情链接〉,在Hexo根目錄的source資料夾新增一個_data資料夾,在其資料夾再新增一個links.yml檔案。內容範例格式為:

1
2
3
Google: http://www.google.com
Apple: http://www.apple.com
Hexo: http://hexo.io

另外複製一個檔案在同資料夾下:/themes/light/layout/_widget/category.ejs,任意取名為links.ejs,修改其內容為:
1
2
3
4
5
6
7
8
9
10
<% 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>
<% } %>

編輯/themes/light/_config.yml主題設定檔,在widgets:底下新增一個- links區塊。之後編輯側邊欄連結,直接修改/source/_data/links.yml檔案內容就可以了。

增加Twitter獨立頁面

使用command進入Hexo資料夾,輸入指令新增一個Twitter獨立頁面,到Twitter網頁找到小工具程式碼(使用者時間軸顯示):

1
2
<a class="twitter-timeline" href="https://twitter.com/你的帳號" data-widget-id="xxxxxxxxxxxx">@你的帳號 發送的推文</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

以上程式碼放到獨立頁面如果無法使用,可以改成:
1
<a class="twitter-timeline" href="https://twitter.com/你的帳號" data-widget-id="xxxxxxxxxxxx" data-chrome="noborders nofooter" data-tweet-limit="10" >@你的帳號 發送的推文</a><script async src="https://platform.twitter.com/widgets.js"></script>

其中data-tweet-limit="10"為顯示推文數量,評論記得要關閉。

在彙整頁和分類頁增加上下頁

不知為何Light主題在這兩種連結頁面並無上下頁?編輯/themes/light/layout資料夾中的archive.ejs檔案(彙整)和category.ejs檔案(分類),直接在第一行程式碼下方新增內容:

1
2
3
4
5
6
7
8
9
<nav id="pagination">
<% if (page.prev){ %>
<a href="<%- config.root %><%- page.prev_link %>" class="alignleft prev"><%= __('prev') %></a>
<% } %>
<% if (page.next){ %>
<a href="<%- config.root %><%- page.next_link %>" class="alignright next"><%= __('next') %></a>
<% } %>
<div class="clearfix"></div>
</nav>

之後就能在這兩種頁面看到上下頁了。

新增TOC(Table of Contents)

TOC就是文章內容的章節目錄,參考〈Hexo添加文章目录〉,寫長篇教學文時特別好用。編輯/themes/themename/layout/_partial/article.ejs檔案,搜尋<%- item.content %>,新增程式碼放到<%- item.content %>上方,完整內容為:

1
2
3
4
5
6
7
8
9
10
<% if (item.excerpt && index){ %>
<%- item.excerpt %>
<% } else { %>
<% if (!index && item.toc){ %>
<div id="toc" class="toc-article">
<strong class="toc-title">內容</strong>
<%- toc(item.content) %>
</div>
<% } %>
<%- item.content %>

編輯/themes/light/source/css/_partial/article.styl檔案,在最下方新增語法內容:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/*toc*/
.toc-article
background #eee
border 1px solid #bbb
border-radius 10px
margin 0 0 0.3em 1.5em
padding 1.2em 1em 0 1em
max-width 28%
.toc-title
font-size 120%
padding 0.75em
#toc
line-height 1em
font-size 0.9em
float right
.toc
padding 0
margin 1em
line-height 1.8em
li
list-style-type none
.toc-child
margin-left 1em

之後編輯文章內容時,文章的front matter加入toc: true,在文章內容需要產生目錄開始地方加入<!-- toc -->語法(文章開頭標記有#會辨識為目錄)。進入文章本體才會出現TOC,其他地方都不會出現。原本考慮將編號取消,考慮許久覺得加上是比較好的選擇。當目錄文章非常多時,有助於閱讀到某一個段落方便記憶,讀者只要記住編號而不是符號或標題。
效果如圖:
Hexo Light TOC

搜尋引擎最佳化(SEO)

修改網頁描述

Head模版語法和其他主題相比,網頁描述語法的排列順序對搜尋引擎來說,並不是那麼的友善,Google Search Console會提示出現很多重複的中繼說明。開啟/themes/light/layout/_partial/head.ejs檔案,原始內容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<%
var title = [];
if (page.current > 1) title.push(__('page', page.current));
if (page.title) title.push(page.title);
if (page.category) title.push(page.category);
if (page.tag) title.push(page.tag);
if (page.archive){
if (page.year) title.push(__('archive_b', page.year + (page.month ? '/' + page.month : '')));
else title.push(__('archive_a'));
}
title.push(config.title);
%>
<title><%= title.join(' | ') %></title>
<% if (config.author){ %><meta name="author" content="<%= config.author %>"><% } %>
<% if (page.description){ %>
<meta name="description" content="<%= page.description %>">
<% } else if (config.description){ %>
<meta name="description" content="<%= config.description %>">
<% } else if (page.excerpt){ %>
<meta name="description" content="<%= strip_html(page.excerpt).replace(/^\s*/, '').replace(/\s*$/, '') %>">
<% } else if (page.content){ %>
<meta name="description" content="<%= strip_html(page.content).replace(/^\s*/, '').replace(/\s*$/, '').substring(0, 150) %>">
<% } %>
<% if (page.keywords){ %><meta name="keywords" content="<%= page.keywords %>"><% } %>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<% if (page.title){ %><meta property="og:title" content="<%= page.title %>"/><% } %>
<meta property="og:site_name" content="<%= config.title %>"/>
<% if(page.cover) { %>
<meta property="og:image" content="<%= page.cover %>" />
<% } else { %>
<meta property="og:image" content="<%= config.cover %>"/>
<% } %>
<link href="<%- config.root %>favicon.png" rel="icon">
<link rel="alternate" href="<% if (theme.rss){ %><%- theme.rss %><% } else { %><%- config.root %>atom.xml<% } %>" title="<%= config.title %>" type="application/atom+xml">
<link rel="stylesheet" href="<%- config.root %>css/style.css" media="screen" type="text/css">
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<%- partial('google_analytics') %>
</head>

改成(複製其他主題的head.ejs部分內容):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<%
var title = page.title;
if (is_archive()){
title = __('archive_a');
if (is_month()){
title += ': ' + page.year + '/' + page.month;
} else if (is_year()){
title += ': ' + page.year;
}
} else if (is_category()){
title = __('category') + ': ' + page.category;
} else if (is_tag()){
title = __('tag') + ': ' + page.tag;
}
%>
<title><% if (title){ %><%= title %> | <% } %><%= config.title %></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<%- open_graph({twitter_id: theme.twitter, google_plus: theme.google_plus, fb_admins: theme.fb_admins, fb_app_id: theme.fb_app_id}) %>
<%- autoCanonical(config, page) %>
<% if (theme.rss){ %>
<link rel="alternate" href="<%- theme.rss %>" title="<%= config.title %>" type="application/atom+xml">
<% } %>
<% if (theme.favicon){ %>
<link rel="icon" href="<%- theme.favicon %>">
<% } %>
<%- css('css/style') %>
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<%- partial('google_analytics') %>
</head>

網頁加入canonical標記

安裝hexo-auto-canonical,開啟/themes/light/layout/_partial/head.ejs檔案,最底下加入一段程式碼:

1
<%- autoCanonical(config, page) %>

文章連結加入nofollow

安裝hexo-autonofollow,如果排除特定網域連結,開啟網站設定檔_config.yml,加入程式碼:

1
2
3
4
5
nofollow:
enable: true
exclude:
- exclude1.com
- exclude2.com

建立網站地圖

安裝hexo-generator-sitemaphexo-generator-seo-friendly-sitemap,開啟網站設定檔_config.yml,加入程式碼:

1
2
sitemap:
path: sitemap.xml

如果某篇文章不想加入Sitemap,文章的front matter加上sitemap: false

關閉「超連結開新分頁」功能

這完全是屬於個人習慣問題。如果要關閉「超連結開新分頁」功能,開啟網站設定檔_config.yml,將external_link的預設數值true改成false

如果你有安裝hexo-autonofollow,也要修改/node_modules/hexo-autonofollow/lib/filter.js檔案,找到:

1
target: '_blank'

為它加上註解不執行:
1
<!-- target: '_blank' -->