Viết plugin cho Hexo

Blog đang trống, GitHub cũng chẳng có gì.
Thôi thì cũng đang rảnh.
Tôi xách phím di làm thợ nề, xây thêm cái tường GitHub ít gạch.

TL;DR
GitHub repository

Thực ra cũng tò mò muốn làm thử một cái plugin cho Hexo xem thế nào.

Chọn gạch

Dùng Hexo mấy lần, thỉnh thoảng lướt trang plugin xem có gì hay.
Thấy có một số plugin embed được cả Youtube, Instagram… vào post. Khá cool.

Uhm, Wikipedia thì sao, có vẻ chưa có ai làm.
Eureka.

Chọn xi măng

Làm sao lấy được dữ liệu Wiki về -> API
Làm sao hiển thị trên bài viết -> xem doc của Hexo

Xây

Tạo package mới

1
2
3
$ mkdir hexo-tag-wikipedia
$ cd hexo-tag-wikipedia
$ npm init

Nghĩ trong đầu trước dùng plugin này như thế nào: trong file Markdown, khi tôi viết { % wikipedia title:xxx % } thì plugin này sẽ thay đoạn trên bằng một đoạn mã HTML chứa nội dung lấy từ trang Wikipedia có title là xxx. Có thể tuỳ chọn hiện link đến trang Wiki, chọn được ngôn ngữ.

Okay.

Tạo file index.js, viết mã để sinh HTML từ tag của Markdown.

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
function buildArgsHash(args) {
let argsHash = {};
args.forEach(arg => {
const params = arg.split(':');
argsHash[params[0]] = params[1];
});

return argsHash;
}

function generateWikipediaTagHtml(args, content){
  const argsHash = buildArgsHash(args);
  const title = argsHash[‘title’];

  const lang = argsHash[‘lang’] !== undefined ? argsHash[‘lang’] : ‘en’;
  const baseUrl = `https://${lang}.wikipedia.org`;

  const sentenceParam =
argsHash['sentences'] !== undefined
? `&exsentences=${argsHash['sentences']}` : ''
const url =
`${baseUrl}/w/api.php?action=query&origin=*&prop=extracts`
+ `${sentenceParam}&format=json&exintro=&titles=${title}`;

  const tagId = `wiki-${title}`;
  const embeddedScript = `
    window.addEventListener(‘load’, function() {
      $.getJSON(‘${url}’, function(result) {
        const pages = result.query.pages;
        const firstPageIndex = Object.keys(pages)[0];
        const extract = pages[firstPageIndex].extract;
        $(‘#${tagId}’).prepend(extract);
      });
    });
  `;
  let contentText = `<script>${embeddedScript}</script>`;
  if (argsHash[‘wikiButton’] === ‘true’) {
    contentText += `<p><a href="${baseUrl}/wiki/${title}">Wikipedia</a></p>`;
  }

  return `<blockquote id=’${tagId}’>${contentText}</blockquote>`;
}

hexo.extend.tag.register(‘wikipedia’, generateWikipediaTagHtml);

Điểm chốt của đoạn mã này là dòng cuối cùng, ta sẽ đăng ký vào flow generate trang của Hexo rằng: khi nào mày gặp tag tên là wikipedia, gọi hàm generateWikipediaTagHtml, rồi lấy đoạn HTML sinh được thêm vào trang web cho tao nhé.

Kết quả:

1
{% wikipedia title:KISS_principle wikiButton:true %}

Wikipedia

Kết

Đẩy lên GitHub.
Đăng ký account trên NPM, ấn publish package.
Ồ, không quên đẩy plugin lên trang Hexo documentation, hên xui sẽ có ai đó xài.

Hello World
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×