blog 2021 final update

* a post about it
* new: steam, wikipedia tags
* new: enable post asset folders and automatically used as the post root

_config.yml

@@ -44,13 +44,13 @@ external_link:
   exclude: ''
 filename_case: 0
 render_drafts: false
-post_asset_folder: false
+post_asset_folder: true
 relative_link: false
 future: true
 highlight:
   enable: true
   line_number: true
-  auto_detect: false
+  auto_detect: true
   tab_replace: ''
   wrap: true
   hljs: false
@@ -59,6 +59,10 @@ prismjs:
   preprocess: true
   line_number: true
   tab_replace: ''
+marked:
+  prependRoot: true
+  postAsset: true
+
 
 # Home page setting
 # path: Root path for your blogs index page. (default = '')

package.json

@@ -13,18 +13,18 @@
   },
   "dependencies": {
     "hexo": "^5.0.0",
+    "hexo-feed": "^1.1.0",
     "hexo-generator-archive": "^1.0.0",
     "hexo-generator-category": "^1.0.0",
     "hexo-generator-index": "^2.0.0",
     "hexo-generator-tag": "^1.0.0",
     "hexo-renderer-ejs": "^1.0.0",
-    "hexo-renderer-marked": "^3.0.0",
+    "hexo-renderer-marked": "^3.1.0",
     "hexo-renderer-stylus": "^2.0.0",
     "hexo-renderer-swig": "^1.1.0",
     "hexo-server": "^2.0.0",
+    "hexo-tag-steamgame": "^1.0.0",
     "hexo-theme-landscape": "^0.0.3"
   },
-  "devDependencies": {
+  "devDependencies": {}
-    "hexo-feed": "^1.1.0"
-  }
 }

scripts/wikipedia.js

@@ -0,0 +1,48 @@
+
+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);

source/_posts/Blog-2021-Final-Update.md

@@ -0,0 +1,96 @@
+---
+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
+````
+![测试用的可爱Mastodon](mastodon_Elephant_Friend_Curious.png)
+
+## 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。我打算后面把它改成在服务器上获取，这样动态插入一大段文字的体验挺糟糕，而且每一个访客都要获取一次有点滥用资源的意思。

yarn.lock

@@ -553,7 +553,7 @@ hexo-renderer-ejs@^1.0.0:
   dependencies:
     ejs "^2.6.1"
 
-hexo-renderer-marked@^3.0.0:
+hexo-renderer-marked@^3.1.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/hexo-renderer-marked/-/hexo-renderer-marked-3.3.0.tgz#54bce9f00d356c71392b2fc3a881df7ff6dae8bd"
   integrity sha512-U2EomSjsrixQXqqpZ3hYThLpKLg4RSC5hC6dwr/SZG/1LxKKfMoLA48wKgx+xSgzkydye0IBDJ+UAQPLaTfCdw==
@@ -591,6 +591,11 @@ hexo-server@^2.0.0:
     open "^7.0.0"
     serve-static "^1.14.1"
 
+hexo-tag-steamgame@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/hexo-tag-steamgame/-/hexo-tag-steamgame-1.0.0.tgz#d2c1b9ff5f1d0a8af6f98a8260e9452f3b3d04f1"
+  integrity sha512-xbfxgnnt200aKUOVTJcHjEyueIQ3PPrvUj/BrgzS3IV6Ab+n+Bpj//iH+iZ86M0oqncR0pB/fWo8JqEi06jhdg==
+
 hexo-theme-landscape@^0.0.3:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/hexo-theme-landscape/-/hexo-theme-landscape-0.0.3.tgz#87d1f4d613da9be5245dad0d4b80479eab70d386"