BlogVN/All-Feature Showcase
以下 HTML 代码将展示 BlogVN 所计划的所有特性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BlogVN 全功能展示</title>
<style>
.blogvn-textbox-style-novel {
background: rgba(0, 0, 0, 0.6);
color: white;
}
.blogvn-textbox-style-dialog {
position: relative;
background: rgba(0, 0, 0, 0.6);
color: white;
}
.blogvn-textbox-style-dialog .blogvn-textbox-namebox {
position: absolute;
left: 0px;
top: -32px;
width: 160px;
height: 32px;
background: rgba(0, 0, 0, 0.6);
border: 1px grey solid;
color: white;
font-weight: bold;
}
.blogvn-textbox-style-dialog .blogvn-textbox-namebox.blogvn-textbox-namebox-no-name {
display: none;
}
</style>
</head>
<body>
<iframe id="vn-render-target"></iframe>
<script>
document.addEventListener('DOMContentLoaded', () => {
var showcase = new BlogVN({
renderTarget: document.querySelector('#vn-render-target'),
scriptElement: document.querySelector('article'),
treatATagWithFragmentHrefAsGotoByDefault: false,
defaultBackground: 'black',
textboxDefinitions: {
novel: {
defaultPosition: 'fullscreen',
},
dialog: {
defaultPosition: ['0', '20%', '100%', '100%']
},
},
defaultTextbox: 'novel',
characterDefinitions: {
'伤者': {
nameColor: 'blue',
image: 'injured-man.png'
autoShowImage: true,
autoHideImageOnBackgroundChange: true,
},
'医生': {
nameColor: 'yellow',
image: 'practitioner.png',
autoShowImage: true,
autoHideImageOnBackgroundChange: true,
gestures: {
'疑惑': 'practitioner-puzzled.png',
},
},
},
gameVars: {
stamina: 1,
},
});
});
</script>
<article>
<p><img src="riverside.png"></p>
<p>早饭后，我来到河边独自散步。</p>
<p>河里的水十分清澈，令人难以置信地。
城市中的水大都污染严重，而农村多数也没有很强的环保意识。<br data-blogvn-pause>
能在这里见到这样清澈的水，简直像回到长辈小时候的年代一样。</p>
<p data-blogvn-choice-list>
<a data-blogvn-choice href="#swim">也许可以尝试在这里游泳</a>
|
<a data-blogvn-choice href="#continue-walking">继续散步</a>
</p>
<hr>
<a id="swim"></a>
<p><img src="underwater" data-blogvn-bg-size="cover"></p>
<audio src="water-splash.ogg" controls></audio>
<script type="application/x-blogvn-javascript">
gameVars.stamina--;
</script>
<p data-blogvn-pause="false">哗！好冷！一下子跳进去真是个错误的决定。</p>
<p>不过我很快适应了，来回地游了几圈，感到十分爽快。</p>
<p>然后先到此为止吧。</p>
<p><a data-blogvn-goto href="#s2">点击此处继续</a></p>
<hr>
<a id="continue-walking"></a>
<p>我继续前行了一会，乡下的空气也很清新，呼吸了一会令人感到心情舒畅。</p>
<p id="s2">突然，周围传来一声惨叫。似乎就来自与前方的丛林中。</p>
<p>我该怎么办？
如果是那人需要帮助，那样我应该前行。
可如果是丛林中有野兽攻击，那我应该赶紧逃跑自保。</p>
<p id="scream-choices" data-blogvn-choice-list>
<a data-blogvn-choice href="#into-woods">前进</a>
|
<a data-blogvn-choice href="#run">逃跑</a>
|
<a data-blogvn-choice href="#ignore-scream">无视</a>
</p>
<hr>
<p id="ignore-scream">不行，我不能无视它，
这声惨叫要么预示着危险，要么也是我不能坐视不管求救信号。</p>
<p><a data-blogvn-goto href="#scream-choices">重新选择</a></p>
<hr>
<p id="into-woods"><img src="woods.png"></p>
<p data-blogvn-clear-text="false">
我来到了丛林中，看到地上躺倒着一个人。</p>
<p>地上可以看到有斑点的血迹。</p>
<p data-blogvn-textbox="dialog">伤者：救命……</p>
<p>我：发生什么事了？我可以把你抬起来吗？</p>
<p>伤者：不……我的生命在这时是次要的。快回去，通知村里人，<i>鬼子</i>要进村了！</p>
<p>鬼子？这个年代哪还有什么鬼子？这老人家是幻想症发作了吧……</p>
<p>我：鬼子是指……？</p>
<p>伤者：……</p>
<p>他失去了意识，但呼吸还在。</p>
<p>
<span data-blogvn-if="gameVars.stamina >= 1">
如果之前没有游泳，请
<a data-blogvn-goto href="#carry-injured-man">点击此处继续阅读</a>
。</span><br>
<span data-blogvn-if="gameVars.stamina < 1">如果之前游泳过，请
<a data-blogvn-goto href="#insufficient-stamina">点击此处继续阅读</a>
。</span>
</p>
<hr>
<p id="carry-injured-man">
但尽管鬼子也许是幻想出来的，他身上的伤可是货真价实的，得及时送医才行。
我用尽全力将倒地者背了起来。</p>
<p><img src="village-clinic.png"></p>
<p>艰难地将倒地者背到了这附近唯一的村庄。
我想他大概是这里的当地人吧，希望这里就是他的家所在的地方。</p>
<p>幸运地，村中的医生在检查过后，对我说：</p>
<p>医生：这是我们村中的人，多亏了你，不然他很快就会没命了。</p>
<p>舒了一口气的我，正准备离开，医生却开口了。</p>
<p>医生：他的血流了很多，伤口像是被捅了一刀。</p>
<p>我停下了脚步，难道他口中的“鬼子”，是指在树林中有歹徒无故捅人吗？</p>
<p>我将鬼子的事告诉了医生，医生也很不解。</p>
<p>医生（疑惑）：这老人家还活在上个世纪吧。</p>
<p>看了医生和我想的一样。</p>
<p>这时，病床上的伤者似乎苏醒了，但却又似乎没醒，在梦游般反复地喊同一句话。</p>
<p>伤者：他们来了，他们来了！</p>
<p>我：谁来了？</p>
<p>伤者：他们来了啊！</p>
<p>对话无果，我只能继续回到我的思考中。</p>
<p data-blogvn-hide-character="伤者">医生：不过现在也没有更多事可以做了。</p>
<p>我：好的，那我就先走了。</p>
<p>医生：好人一路平安。</p>
<p><a data-blogvn-goto href="#good-end">点击此处继续</a></p>
<hr>
<a id="run"></a>
<p><img src="vilage.png"></p>
<p data-blogvn-clear-text="false">
我飞快地跑到附近的唯一的村庄，并告诉了村民林中的惨叫。</p>
<p>村民们面色凝重，在意识到了潜在的野兽威胁后，商讨了一下，让一队人拿好武器，准备一探究竟。</p>
<p><img src="woods.png"></p>
<p>众人大张锣鼓地探寻，却什么也没有找到，包括那个发出惨叫的人。</p>
<p><a data-blogvn-goto href="#bad-end">点击此处继续</a></p>
<hr>
<a id="insufficient-stamina"></a>
<p>但尽管鬼子也许是幻想出来的，他身上的伤可是货真价实的，得及时送医才行。
但是我用尽全力，也无法将倒地者背起来。</p>
<p><img src="vilage.png"></p>
<p data-blogvn-textbox="novel" data-blogvn-clear-text="false">
我飞快地跑到附近的唯一的村庄，并告诉了村民林中的伤者。</p>
<p>村民们面色凝重，在意识到了潜在的威胁后，商讨了一下，让一队人拿好武器，准备一探究竟。</p>
<p><img src="woods.png"></p>
<p>众人大张锣鼓地探寻，却什么也没有找到，包括那个倒地的人。</p>
<p><a data-blogvn-goto href="#bad-end">点击此处继续</a></p>
<hr>
<a id="bad-end"></a>
<p><img src="inside-tent.png"></p>
<p data-blogvn-clear-text="false">
紧张地忙碌了一整天，却什么成果也没有。
坐在帐篷中，挫败感向我袭来。</p>
<p data-blogvn-clear-text="false">
本身平静的乡下放松计划，却被这样的事情打搅了。我只好这样抱怨道。</p>
<p>“明天忘掉这件事吧。”</p>
<p>说罢我便进入了梦乡。</p>
<p data-blogvn-set-bg="black">但是，第二天却永远也没有到来。</p>
<p data-blogvn-show-end-screen>完。</p>
<hr>
<a id="good-end"></a>
<p><img src="riverside.png"></p>
<p data-blogvn-textbox="novel">
我回到了河边，一切同早上一样。太阳仍然还很高，水还是一样的清澈。
尽管花了些时间，但救人一命，还是十分值得的。</p>
<p>不过这个故事也就此结束了。</p>
</article>
<script src="blogvn.min.js"></script>
</body>
</html>