自制dokuwiki的对话框插件

把csstimeline插件改造成了对话框插件。主要用在跑团记录的博文上。效果如下:

蒂德莉特

今天周六真开心

<fukidashi>
<entry>
image: {{character_image.jpg|}}←放头像图片,尺寸随意,推荐80*80px
name: character name←名字,随意不过别太长
content: Within the content, you can even use Wiki markup←内容,随意,可以用wiki代码
</entry>
<entry>
image: {{character_image2.jpg|}}
name: Another character name
content: Within the content, you can even use Wiki markup
</entry>
</fukidashi>

有需要可以拿去用。 fukidashi.zip

主要改动文件:

  • syntax.php:改造输出为对话框所需要的html,并删除csstimeline中无用的内容(左右判定等)
  • helper.php:增加下述代码,让头像的图片可以正常显示
    case 'image':
    $data['entries'][$cnt]['image'] = $this->render_text(trim($lineSplit[1]));
    break;

  • style.css:基本全部复制自上述两个css参考来源,gcbgarden.com用到的是对话框主体,fantastech.net用到的是三角小箭头。(因为我不想做成背景有颜色的对话框,只要一个边框就够)
  • plugin.info.txt:插件的信息

结合dokuwiki做了一些改动。

style.css
/* dokuwiki现在用的主题整体的p下面都有10px空隙,对话框中没有这个必要 */
.kaiwa-text-right p {
  margin: 0px;
}
 
/* 对话框中的引用字体改小,颜色改浅 */
.kaiwa-text-right .footnotes {
    color: #666;
    font-size: 85%;
}

没技术,所以其实还留下不少问题:

  • 头像原本可以设置在页面左侧或者右侧的,不好切换,就都在左侧了(不嫌烦再单独做一个右侧插件也可以就是……)
  • 对话框的css都是固定死的,想做泡泡框什么的也不行(不嫌烦再单独做一个其他风格的对话框插件也可以就是……)
  • 手机上看头像占的位置有点浪费,想改成头像在上方……不过觉得麻烦还是算了……
请输入您的评论:
 
  • 最后更改: 2019/08/26 00:43