AsciiDoc と PlantUML で Blog が書きたい

9602 ワード
asciidoc Blog Hexo plantuml Blog テキストリンク

何使う？

  • 静的サイトジェネレーターの nodejs 実装の Hexo で試す。

Hexo でブログを作成

npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo generate
hexo server

AsciiDoc 対応

npm install hexo-renderer-asciidoc --save

hexo clean
hexo new example
  • 拡張子のデフォルトとか変えられるのかな。 .md を .adoc に変更して編集。
mv source/_posts/example.md source/_posts/example.adoc
vim source/_posts/example.adoc
  • 例えば、こんな AciiDoc。
---
title: example
date: 2019-08-30 21:15:40
tags:
---

= Title

== SubTitle

* abc
** def
*** ghi

[source,js]
----
var express = require('express')
var app = express()

// respond with "hello world" when a GET request is made to the homepage
app.get('/', function (req, res) {
  res.send('hello world')
})
----

hexo generate
hexo server

テーマの変更

git clone https://github.com/HoverBaum/meilidu-hexo.git themes/meilidu
  • _config.yml ファイルの編集
- theme: landscape
+ theme: meilidu

hexo generate
hexo server

PlantUML 対応

npm install --save hexo-filter-plantuml
  • モジュール hexo-filter-plantuml の編集
    • ちゃんとやるなら fork して、commit して、 npm publish するのが良い？、今回は簡易に。
vim node_modules/hexo-filter-plantuml/lib/renderer.js
  • Markdown 記法によるものだったので、 AsciiDoc 記法を認識し(AsciiDoc 記法から抽出し)、AsciiDoc 記法にて出力されるよう編集。

const plantuml = require('./plantuml');

//var reg = /(\s*)(```) *(puml|plantuml) *\n?([\s\S]+?)\s*(\2)(\n+|$)/g;
var reg = /(\s*)\[(source),(plantuml)\] *\n---- *\n([\s\S]+?)\s*\n(----)(\n+|$)/g;

function ignore(data) {
  var source = data.source;
  var ext = source.substring(source.lastIndexOf('.')).toLowerCase();
  return ['.js', '.css', '.html', '.htm'].indexOf(ext) > -1;
}

exports.before = function (data) {
  if (!ignore(data)) {
    data.content = data.content
      .replace(reg, function (raw, start, startQuote, lang, content, endQuote, end) {
        var compress_content = plantuml.compress(content);
        //return start + '<img src="' + compress_content + '" />' + end;
        return start + 'image::' + compress_content + '[width="640"]';
      });
  }
};

hexo generate
hexo server
  • 出た！

まとめ

  • 一応できた。hexo 悪くない。
  • hexo には気に入った theme が無かった。また、blog engine 探しの旅にでる。
  • dark で simple で cool な、テーマが欲しい！(自分の手を動かさずに)