BlogVN 构思
July 19, 2020•216 words
想开坑，写一个能够把 HTML 当作脚本的网页视觉小说引擎。这样子就可以把博文当作视觉小说展示了。
黄鼠希望它所用的脚本能尽量符合 HTML 语义，并且尽量做到能够使同一篇文章（同一段 HTML）既能以直接文章方式显示，又能够以视觉小时方式被这个引擎显示。
项目描述大概会是 "Turn your blog article into a visual novel" 这样子。名字还没有想到特别满意的，暂且叫 BlogVN 这个没有创造力的名字好了，希望没有撞名字。
这里是大概的构思：
一个 <p> 在 HTML 中含义是一个段落，所以在 BlogVN 中，每段 <p> 中的内容结束之后，就会是一个需要点一下才会前进的文字内容。在遇到下一个 <p> 开始时，先清空对话框中的内容，然后再显示下一个 <p> 中的文字。在 <p> 外的文字会被忽略。
如果 <p> 中内容的开头几个字包含冒号（全角或半角都可），则冒号之前的文字会被当作角色名称显示，冒号之后的文字会被当作该角色说的话显示。这个行为要能通过为 <p> 添加 blogvn-no-dialog 类来禁用，以避免真的在独白中要包含冒号时没有办法。此外，最好还能够让文章作者自定义对话的这个解析方式，也许可以让文章作者提供一个 RegEx 来作为引擎初始化的选项，比如可以把它设置成 (?<name>.*?)：「(?<text>.*)」 来让文章中可以把对话包上引号。
<img> 中的图片会被默认会被作为背景显示，替换掉当前使用的背景图片。 data-blogvn-bg-size 属性可以是 cover 或 contain ，对应 CSS 中 background-size 这两个值的含义。
人物立绘可以在引擎初始化选项中定义，然后每当人物出现于对话中时，立绘也会被显示。此行为默认启用，默认值可以被引擎初始化选项更改。此行为也可以被单个 <p> 中的 blogvn-character-image-enable 和 blogvn-character-image-disable 类来单次启用和禁用。
遇到 <audio> 会播放效果音。遇到 <video> 会播放视频。
一个带有 blogvn-goto 类的 <a> 会被当作 goto 对待，标签的内容会被忽略。它的 href 属性中若只包含有 URL fragment ， goto 的目标则是此 fragment 指定的 HTML 元素。脚本的解释会从那个元素继续进行。因此，每个带有 id 的元素都可以被当作 label 。
一个带有 blogvn-choices 类的标签（通常会是 <p> 、 <div> 、 <ul> 或 <ol>）会被当作视觉小说的选项列表，玩家需要选择一个选项才可继续。其中每个带有 blogvn-choice 类的 <a> 都会被当作一个选项，点击后行为与 goto 一致。
一个带有 data-blogvn-if 属性的标签（通常是 <aside> 或 <section>）会首先 eval 此属性中的 JS ，只有 truthy 才会解释其中的内容。 data-blogvn-unless 属性的行为与此相反。如果这两个属性被用在 <p> 上，其中的文字会被忽略，这可以用来编写这样的内容： <p data-blogvn-if="gameVars.goodDeedCount >= 3">如果你做了 3 件或以上好事，<a class="blogvn-goto" href="#good-end">前往好结局章节继续</a>。 ，指示用户点击链接的文字不会在视觉小说中显示。
要设定会改变剧情走向的变量，使用 <script type="application/x-blogvn-javascript"> 标签并在其中写 JS ，其中含有的 JS 会在引擎遇到它时被执行。其中的 JS 可访问的变量有 gameVars ，一个用于保存玩家过去行为的 Object 。
不计划做存档功能。考虑到这些视觉小说大概都会是博文的长度，存档似乎没有必要。
不计划做语音功能。考虑到这些视觉小说大概都是随便简单写的博文，大概不会有配音的需求。
BlogVN 应该会能够嵌入在现有的任何能自定义 HTML 的 CMS 中。启动 BlogVN 的方式大概会是这样的：作者首先需要在网页中创建一个 <iframe> 作为引擎渲染视觉小说的目标，将其指定在 BlogVN 的初始化参数中。与此同时指定于初始化参数中的，还有包含有“游戏脚本”的 HTML 元素。举例：
<iframe id="vn-render-target"></iframe>
<div style="height: 40px"></div>
<article class="post">
<p>这是一个测试。</p>
<p>你好。</p>
<script type="application/x-blogvn-javascript">
gameVars.random = Math.random();
</script>
<section data-blogvn-if="gameVars.random < 0.5">
<p>这句话只有 50% 的几率被显示。</p>
</section>
<p>再见。</p>
</article>
<script src="blogvn.min.js"></script>
<script>
var a = new BlogVN({
renderTarget: document.getElementById('vn-render-target'),
scriptElement: document.getElementsByTagName('article')[0],
defaultBackground: 'black',
});
</script>
这只是黄鼠日常想开的大坑中的又一个，感觉很大，所以会和 Posea 那样咕咕咕也是十分正常的。
也希望会有人对这个计划有兴趣，能够提出一点想法呢。