Viết plugin cho Hexo

Blog thì trống, GitHub thì xấu.
Rảnh rỗi sinh nông nổi.
Thôi thì tôi xách phím di làm thợ nề, đắp thêm cái tường GitHub ít gạch.

TL;DR
GitHub repository

Chọn gạch

Dùng Hexo mấy lần, thỉnh thoảng lướt trang plugin xem có gì hay.
Ồ tôi embed được Instagram post vào này.
Ô Youtube cũng được luôn đây.
Tiện nhỉ.

Uhm, Wikipedia thì sao (tại tôi hay đọc Wiki).
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
Trộn xi măng.

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

Xuất bản

Đẩ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.

PS

It is my first ever published Javascript package.

Hello World
Your browser is out-of-date!

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

×