打开主菜单

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>