Edited at

【Hexo入門】Hexoでブログを作成する時のTipsまとめ

More than 1 year has passed since last update.


はじめに

Hexoは数分で自分のブログを作ることができるとんでもなく便利なフレームワークです。

この便利なHexoをもっと便利に使うためのTipsをまとめてみました。

特に今回は、デザインがきれいで気に入った「Phantom」テーマを使います。


Hexoのインストール

Hexoを使うには、Node.jsGitをを事前にインストールする必要があります。

その後、下記コマンドでインストールします。

$ npm install -g hexo-cli

詳しくはHexoのホームページ(英語サイトです)を参照してください。

https://hexo.io/docs/index.html


テーマの適用

公開されているテーマを適用するには、使いたいテーマをthemesフォルダの直下に配置し、_config.ymlファイルのthemeを使いたいテーマに設定します。

ここで修正する_config.ymlファイルは、テーマの中にある同名のファイルではなく、プロジェクトフォルダの一番上の階層にあるファイルです。

今回はPhantomテーマを使うため、theme: phantomのように設定します。

Phantomは、以下からダウンロードできます。

https://github.com/klugjo/hexo-theme-phantom

他の公開されているテーマはHexoのホームページでも見ることができます。

https://hexo.io/themes/


SCSSプラグインの導入

Phantomテーマを適用して$ hexo sでサイトを起動すると、サイトのレイアウトが全て崩れてしまうことがあります。

Phantomは画面を描画するのにSCSSを使っており、SCSSに対応するプラグインを導入する必要があるのです。

プロジェクトフォルダで下記コマンドを実行し、hexo-renderer-scssをインストールします。

$ npm install --save hexo-renderer-scss


記事の作成

$ hexo new <title>コマンドもしくは直接source/_postsにMarkdownファイルを置くことで、記事を作成することができます。


コードブロック

Markdownでコードブロックを書く時はバッククォート3つ(```)で囲みますが、Phantomではコードブロックの言語を正しく指定しないとレイアウトが崩れてしまいます。

現在、Phantomのデフォルトで指定できる言語及びファイル形式は、以下の通りです。


  • apacheconf

  • bash

  • coffeescript

  • cs

  • css

  • diff

  • go

  • http

  • ini

  • java

  • js

  • json

  • less

  • mak

  • md

  • nginx

  • objectivec

  • perl

  • php

  • puppet

  • python

  • ruby

  • scss

  • sql

  • stylus

  • swift

  • yml

Phantomフォルダ内の_code.scssを修正することで、コードブロックの仕様の変更ができます。


テーマのカスタマイズ

テーマをカスタマイズするには、主にlayoutフォルダとsourceフォルダ内のファイルを修正します。

Phantomの場合、layoutフォルダには画面の構成とロジックを記述するejsファイルが、sourceフォルダにはフォントやデザイン等を決めるファイルが入っています。

ここでは、いくつかカスタマイズの例を説明します。


検索機能の追加

Phantomは検索機能を持っていませんが、カスタマイズで検索機能を追加することができます。

まずhexo-generator-searchプラグインをインストールします。

$ npm install --save hexo-generator-search

プロジェクトフォルダ直下の_config.ymlに下記を追記します。


_config.yml

search:

path: search.xml
field: all

source/jsに検索ロジックを持つsearch.jsを作ります。

(出典:http://hahack.com/codes/local-search-engine-for-hexo/


search.js

var searchFunc = function(path, search_id, content_id) {

'use strict';
$.ajax({
url: path,
dataType: "xml",
success: function( xmlResponse ) {
// get the contents from search data
var datas = $( "entry", xmlResponse ).map(function() {
return {
title: $( "title", this ).text(),
content: $("content",this).text(),
url: $( "url" , this).text()
};
}).get();
var $input = document.getElementById(search_id);
var $resultContent = document.getElementById(content_id);
$input.addEventListener('input', function(){
var str='<ul class=\"search-result-list\">';
var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
$resultContent.innerHTML = "";
if (this.value.trim().length <= 0) {
return;
}
// perform local searching
datas.forEach(function(data) {
var isMatch = true;
var content_index = [];
var data_title = data.title.trim().toLowerCase();
var data_content = data.content.trim().replace(/<[^>]+>/g,"").toLowerCase();
var data_url = data.url;
var index_title = -1;
var index_content = -1;
var first_occur = -1;
// only match artiles with not empty titles and contents
if(data_title != '' && data_content != '') {
keywords.forEach(function(keyword, i) {
index_title = data_title.indexOf(keyword);
index_content = data_content.indexOf(keyword);
if( index_title < 0 && index_content < 0 ){
isMatch = false;
} else {
if (index_content < 0) {
index_content = 0;
}
if (i == 0) {
first_occur = index_content;
}
}
});
}
// show search results
if (isMatch) {
str += "<li><a href='"+ data_url +"' class='search-result-title'>"+ data_title +"</a>";
var content = data.content.trim().replace(/<[^>]+>/g,"");
if (first_occur >= 0) {
// cut out 100 characters
var start = first_occur - 20;
var end = first_occur + 80;
if(start < 0){
start = 0;
}
if(start == 0){
end = 100;
}
if(end > content.length){
end = content.length;
}
var match_content = content.substr(start, end);
// highlight all keywords
keywords.forEach(function(keyword){
var regS = new RegExp(keyword, "gi");
match_content = match_content.replace(regS, "<em class=\"search-keyword\">"+keyword+"</em>");
});

str += "<p class=\"search-result\">" + match_content +"...</p>"
}
str += "</li>";
}
});
str += "</ul>";
$resultContent.innerHTML = str;
});
}
});
}


menu.ejsに下記を追記し、サイドメニューに検索機能を付けます。


menu.ejs

<div id="site_search">

<input type="text" id="local-search-input" name="q" results="0" placeholder="search my blog..." class="form-control"/>
<div id="local-search-result"></div>
</div>
<script type="text/javascript">
 var search_path = "<%= config.search.path %>";
 if (search_path.length == 0) {
  search_path = "search.xml";
 }
 var path = "<%= config.root %>" + search_path;
 searchFunc(path, 'local-search-input', 'local-search-result');
</script>


メインのタイルボタンのデザイン変更

マイン画面にあるデフォルトのタイルボタンを、縦並びのボタンにしてみます。

Phantomフォルダ内の_config.ymlのdefault_cover_indexを下記のように修正し、タイルイメージのサイズを変更します。


_config.yml

default_cover_index: "http://placehold.it/2000x180"


また、_tiles.scssの.tiles articleに記述されている下記のwidth属性を削除します。


_tiles.scss

width: calc(#{(100% / 3)} - #{$gutter * 1});



その他

Hexoでブログを作成する時、デザイン・内容を見ながらソースを修正するが、時には修正したにも関わらず画面に反映されない場合があります。

記事の内容(Markdown)やcss、ejsの修正時はブラウザーをリフレッシュするだけで修正点が反映されますが、_config.ymlを修正した時は、一度Hexoを停止させて$ hexo sで再実行する必要があるのです。


最後に

Hexoでブログを作成してみてデザインすることの楽しさを感じました。

ブログやっている方は是非Hexoを使って自分のブログを作ってみてください!