98 lines
3.8 KiB
Markdown
98 lines
3.8 KiB
Markdown
---
|
||
title: 博客2021年最终功能更新
|
||
date: 2021-12-30 21:26:06
|
||
tags:
|
||
- Hexo
|
||
- logbook
|
||
- 博客功能更新
|
||
---
|
||
|
||
我对博客功能的要求是拒绝花里胡哨，一切为阅读服务。现在是2021年年底，正好我要为我对年终总结的一些设想给博客更新一些功能：快速引用素材、Steam游戏卡片、引用Wikipedia条目。
|
||
|
||
<!--more-->
|
||
|
||
## 快速引用素材
|
||
|
||
之前我引用图片一直都是用图片的完整路径，实在是非常麻烦，所以我一直期待能找到一个简单的方法引用素材。原先的考虑是用[hexo-asset](https://github.com/cnzsb/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
|
||
````
|
||
|
||
|
||
## Steam游戏卡片
|
||
|
||
{% steamgame 22380 %}
|
||
|
||
{% steamgame 412020 "《地铁：离乡》确实是非常不错的半开放世界线性流程FPS。" %}
|
||
|
||
搜刮到[hexo-tag-steamgames](https://github.com/HCLonely/hexo-tag-steamgame)可以实现这个。
|
||
|
||
## 引用Wikipedia条目
|
||
|
||
{% wikipedia title:Wikipedia lang:zh wikiButton:true %}
|
||
|
||
原来我是想用[hexo-tag-wikipedia](https://github.com/tuanna-hsp/hexo-tag-wikipedia)。但是：
|
||
|
||
1. 这个插件用的不是新的Restful API，实际获取到的字符串千奇百怪。
|
||
2. 这东西一开始用不了，我一看控制台发现一串`$.getJSON`：它插入的脚本用的JQuery的API。然而我的网页上并没有JQuery。
|
||
|
||
最后我改了一下把它改成用XMLHTTPRequest从[Wikipedia的Restful API](https://en.wikipedia.org/api/rest_v1/#/)拉取数据。脚本很简单：
|
||
|
||
````
|
||
|
||
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。我打算后面把它改成在服务器上获取，这样动态插入一大段文字的体验挺糟糕，而且每一个访客都要获取一次有点滥用资源的意思。
|