自制dokuwiki的对话框插件

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

已失效

主要参考

• 代码：https://www.dokuwiki.org/plugin:csstimeline
• CSS：https://fantastech.net/kaiwa-text
• CSS：https://gcbgarden.com/2017/05/26/chat-css/

使用方法

<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>

下载

有需要可以拿去用。

制作过程

主要改动文件：

• 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：插件的信息

css的一些改动

结合dokuwiki做了一些改动。

/* dokuwiki现在用的主题整体的p下面都有10px空隙，对话框中没有这个必要 */
.kaiwa-text-right p {
  margin: 0px;
}

/* 对话框中的引用字体改小，颜色改浅 */
.kaiwa-text-right .footnotes {
    color: #666;
    font-size: 85%;
}

其他

没技术，所以其实还留下不少问题：

• 头像原本可以设置在页面左侧或者右侧的，不好切换，就都在左侧了（不嫌烦再单独做一个右侧插件也可以就是……）
• 对话框的css都是固定死的，想做泡泡框什么的也不行（不嫌烦再单独做一个其他风格的对话框插件也可以就是……）
• 手机上看头像占的位置有点浪费，想改成头像在上方……不过觉得麻烦还是算了……