blog/source/_posts/Blog-2021-Final-Update.md
2022-01-01 17:47:25 +08:00

3.8 KiB
Raw Blame History

title date tags
博客2021年最终功能更新 2021-12-30 21:26:06
Hexo
logbook
博客功能更新

我对博客功能的要求是拒绝花里胡哨一切为阅读服务。现在是2021年年底正好我要为我对年终总结的一些设想给博客更新一些功能快速引用素材、Steam游戏卡片、引用Wikipedia条目。

快速引用素材

之前我引用图片一直都是用图片的完整路径,实在是非常麻烦,所以我一直期待能找到一个简单的方法引用素材。原先的考虑是用hexo-asset但是在一番简单搜索后发现hexo-render-marked在3.1.0+已经携带了类似功能了:https://hexo.io/docs/asset-folders.html#Embedding-an-image-using-markdown 。直接在_config.yml里打开就行。

post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

测试用的可爱Mastodon

Steam游戏卡片

{% steamgame 22380 %}

{% steamgame 412020 "《地铁离乡》确实是非常不错的半开放世界线性流程FPS。" %}

搜刮到hexo-tag-steamgames可以实现这个。

引用Wikipedia条目

{% wikipedia title:Wikipedia lang:zh wikiButton:true %}

原来我是想用hexo-tag-wikipedia。但是:

  1. 这个插件用的不是新的Restful API实际获取到的字符串千奇百怪。
  2. 这东西一开始用不了,我一看控制台发现一串$.getJSON它插入的脚本用的JQuery的API。然而我的网页上并没有JQuery。

最后我改了一下把它改成用XMLHTTPRequest从Wikipedia的Restful API拉取数据。脚本很简单:


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 url = `${baseUrl}/api/rest_v1/page/summary/${title}?redirect=false`;

    const tagId = Math.round(Math.random() * 100000);
    const embeddedScript = `
      window.addEventListener('load', function() {
        var element = document.getElementById('${tagId}');
        var req = new XMLHttpRequest();
        req.addEventListener("load", function() {
          var result = this.response;
          const extract = result.extract;
          element.prepend(extract);
        });
        req.addEventListener("error", function() {
          element.prepend('Failed to fetch wikipedia data for "${title}".');
        });
        req.open('GET', '${url}');
        req.responseType = 'json';
        req.setRequestHeader('accept', 'application/json; charset=utf-8; profile="https://www.mediawiki.org/wiki/Specs/Summary/1.4.2"');
        req.send();
      });
    `;
    let contentText = `<script>${embeddedScript}</script>`;
    if (argsHash['wikiButton'] === 'true') {
        contentText += `<p><a href="${baseUrl}/wiki/${title}">Wikipedia:${title}</a></p>`;
    }

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

hexo.extend.tag.register('wikipedia', generateWikipediaTagHtml);

我把它塞到了我的fork里 https://github.com/thislight/hexo-tag-wikipedia 找时间我可能问问作者再把它合并到上游因为有一个breaking change。我打算后面把它改成在服务器上获取这样动态插入一大段文字的体验挺糟糕而且每一个访客都要获取一次有点滥用资源的意思。