beaudar-bot commented 4 years ago

Beaudar（表达）

A lightweight commenting system using GitHub issues.

http://localhost:4000/index.html

zsdycs commented 4 years ago

markdown 测试用例🌼

六级标题☀️

后面跟着一些文字

五级标题☀️

后面跟着一些文字

四级标题☀️

后面跟着一些文字

三级标题☀️

后面跟着一些文字

二级标题☀️

后面跟着一些文字

一级标题☀️

后面跟着一些文字

文本

斜体文本

粗体文本

粗斜体文本

~~删除删除~~

链接 github.com/beaudar

脚注 ^脚注1。内容🌾，内容🍀 ^脚注2

图片

dino

表格

左对齐	右对齐	居中对齐
左	中	右
左	中	右
左	中	右

分隔线 1

被分隔的内容内容内容内容 1

分隔线 2

被分隔的内容内容内容内容 2

无序列表

第一项
第二项
第三项
第1篇
- 第1.1章
  - 第1.1.1节

有序列表

第一项
第二项
第三项
第一项：
- 第一项嵌套的第一个元素
- 第一项嵌套的第二个元素
第二项：
- 第二项嵌套的第一个元素
- 第二项嵌套的第二个元素

区块

区块引用区块引用区块引用

代码

code 是一个块，code。

有一些 javascript 代码片段

const addDaysToDate = (date, n) => {
  const d = new Date(date);
  d.setDate(d.getDate() + n);
  return d.toISOString().split('T')[0];
};

const HSBToRGB = (h, s, b) => {
  s /= 100;
  b /= 100;
  const k = (n) => (n + h / 60) % 6;
  const f = (n) => b * (1 - s * Math.max(0, Math.min(k(n), 4 - k(n), 1)));
  return [255 * f(5), 255 * f(3), 255 * f(1)];
};

const binarySearch = (arr, item) => {
  let l = 0,
    r = arr.length - 1;
  while (l <= r) {
    const mid = Math.floor((l + r) / 2);
    const guess = arr[mid];
    if (guess === item) return mid;
    if (guess > item) r = mid - 1;
    else l = mid + 1;
  }
  return -1;
};

比较变化

    "source.fixAll.stylelint": true
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": false,
+  "editor.rulers": [
+    80
+  ],
+  "editor.tabSize": 2,
+  "editor.wordWrap": "on",
}

引用代码，只能引用当前安装的仓库的代码

https://github.com/zsdycs/beaudar-demo/blob/734f7cad5652b4832eeb06f292d579b20f4230c6/beaudar.json#L1-L3

zsdycs commented 4 years ago

1234567
1234567
- 1234567
1234567

zsdycs commented 4 years ago

Beaudar(表达)

zsdycs commented 4 years ago

{ "origins": [ "http://localhost:4000" ] }

zsdycs commented 4 years ago

{
  "origins": [
    "http://localhost:4000"
  ]
}

zsdycs commented 4 years ago

~~del!!!!~~

zsdycs commented 4 years ago

code

zsdycs commented 3 years ago

test

zsdycs commented 3 years ago

20201211!!!

zsdycs commented 3 years ago

/**
 * @theme 可选：
 * [
 *   'icy-dark',
 *   'dark-blue',
 *   'photon-dark',
 *   'github-dark',
 *   'github-light',
 *   'github-dark-orange',
 *   'preferred-color-scheme'
 *   ……
 * ]
 */
const message = {
  type: 'set-theme',
  theme: 'github-light'
};

const beaudarIframe = document.querySelector('iframe');
// 与 beaudar 通信
beaudarIframe.contentWindow.postMessage(message, 'https://beaudar.lipk.org');

zsdycs commented 3 years ago

Q：与 Utterances 比较，Beaudar 增加了什么

中文界面，拉近距离增加评论友好性。
- 是 Utterances 的中文版。
完整头像，移动端与桌面端一致显示。
- Utterances 在页面宽度缩小后会隐藏头像。
身份标识，在任何情况下都不会换行。
- Utterances 在页面宽度缩小后身份标识会换行。
评论时间，缩小至与身份标识相同大。
- 针对中文，优化显示。
名称显示，评论者名称放大增加辨识。
- 针对中文，优化显示。
链接打开，从新标签页打开符合习惯。
- 新标签页打开链接，才是操作友好、符合习惯的。
错误信息，使用对话框形式友好呈现。
- Utterances 的错误信息只打印在浏览器控制台。
评论头像，增加可以使用 Tab 键选中。
- 头像可以跳转到用户 GitHub，Utterances 头像设置为了不可选中，无障碍操作不友好。
加载状态，默认加载状态可配置去除。
- Utterances 没有加载中的状态，配置 loading="false" 可以去除加载状态。
移除来源，点击加载图标跳转至主页。
- 移除了 powered by utteranc.es 的超链接。
刷新页面，出现错误异常可进行刷新。
- 因为国内请求 api.github.com 非常不稳定，故添加了这个功能。
保持主题，刷新页面时主题将会保持。
- 状态保持在浏览器 sessionStorage 中关闭页面会重新加载。
分支选项，增加仓库分支项用于校验。
- 获取公开库指定分支代码，校验 beaudar.json 配置，默认 'master'。
……

zsdycs commented 3 years ago

这个问题一般来说，如果网络连接没有问题，点击一下“刷新”按钮就可解决，因为 Beaudar 使用的是 Cloudflare 的网络。在中国境内，部分地区会有网络不稳定的情况。

zsdycs commented 3 years ago

引用引用引用引用引用引用，引用引用引用引用引用引用引用。

——引用来源

内容内容内容内容内容内容内容内容内容内容内容，内容内容内容内容内容内容内容内容。

内容内容内容内容内容。内容内容内容内容内容内容内容内容内容内容内容内容，内容内容内容内容内容内容内容内容内容内容内容内容。

zsdycs commented 3 years ago

无序无序无序无序无序无序
- 无序无序无序无序无序无序
无序无序无序无序无序无序

有序有序有序有序有序
有序有序有序有序有序有序
1. 有序有序有序有序有序
2. 有序有序有序有序有序
有序有序有序有序有序

zsdycs commented 3 years ago

内容内容内容内容内容。内容内容内容内容内容内容内容内容内容内容内容内容，内容内容内容内容内容内容内容内容内容内容内容内容。内容内容内容内容内容内容内容内容内容内容内容，内容内容内容内容内容内容内容内容。

zsdycs commented 3 years ago

内容内容内容内容内容内容内容内容内容内容内容，内容内容内容内容内容内容内容内容。

内容内容内容内容内容。内容内容内容内容内容内容内容内容内容内容内容内容，内容内容内容内容内容内容内容内容内容内容内容内容。内容内容内容内容内容内容内容内容内容内容内容，内容内容内容内容内容内容内容内容。

内容内容内容内容内容。内容内容内容内容内容内容内容内容内容内容内容内容，内容内容内容内容内容内容内容内容内容内容内容内容。

zsdycs commented 3 years ago

普通表格：

表头一表头一表头一	表头二表头二表头二
行一行一行一行一行一	行一行一行一行一行一	行一行一行一行一行一
行二行二行二行二	行二行二	行二行二
行一行一行一行一行一	行一行一行一行一行一
行二行二行二行二	行二行二

带排列格式表格：

第一列	第二列	第三列
居右	居中	居左

zsdycs commented 3 years ago

[x] 无序事项事项事项
[ ] 无序事项事项事项

[x] 有序事项事项事项
[x] 有序事项事项事项
[ ] 有序事项事项事项
[ ] 有序事项事项事项

zsdycs commented 3 years ago

内容内容内容内容内容内容内容内容内容内容内容，内容内容内容内容内容内容内容内容。

内容内容内容内容内容。内容内容内容内容内容内容内容内容内容内容内容内容，内容内容内容内容内容内容内容内容内容内容内容内容。内容内容内容内容内容内容内容内容内容内容内容，内容内容内容内容内容内容内容内容。

内容内容内容内容内容。内容内容内容内容内容内容内容内容内容内容内容内容，内容内容内容内容内容内容内容内容内容内容内容内容。

zsdycs commented 3 years ago

内容内容内容内容内容内容内容内容内容内容内容，内容内容内容内容内容内容内容内容。

内容内容内容内容内容。内容内容内容内容内容内容内容内容内容内容内容内容，内容内容内容内容内容内容内容内容内容内容内容内容。内容内容内容内容内容内容内容内容内容内容内容，内容内容内容内容内容内容内容内容。

内容内容内容内容内容。内容内容内容内容内容内容内容内容内容内容内容内容，内容内容内容内容内容内容内容内容内容内容内容内容。

2 - 1 - 2

内容内容内容内容内容。内容内容内容内容内容内容内容内容内容内容内容内容，内容内容内容内容内容内容内容内容内容内容内容内容。

2 - 1 - 3

内容内容内容内容内容。内容内容内容内容内容内容内容内容内容内容内容内容，内容内容内容内容内容内容内容内容内容内容内容内容。

贰 - 贰 h2

内容内容内容内容内容内容内容内容内容内容内容，内容内容内容内容内容内容内容内容。

内容内容内容内容内容。内容内容内容内容内容内容内容内容内容内容内容内容，内容内容内容内容内容内容内容内容内容内容内容内容。内容内容内容内容内容内容内容内容内容内容内容，内容内容内容内容内容内容内容内容。

内容内容内容内容内容。内容内容内容内容内容内容内容内容内容内容内容内容，内容内容内容内容内容内容内容内容内容内容内容内容。

zsdycs commented 3 years ago

Beaudar - 表达

Beaudar 名称源于粤语“表达”的发音，是 Utterances 的中文版本。在这篇博客查看更多。

开源。📖
没有追踪，没有广告，永久免费。♻️
不保留数据，所有数据保存在用户 GitHub issue 中。📚
有源于 Github primer 的多个主题。🌈
轻量化，没有字体下载，没有 JS 框架加载，没有 polyfills。🍜

zsdycs commented 3 years ago

Beaudar - 表达

Beaudar 名称源于粤语“表达”的发音，是 Utterances 的中文版本。在这篇博客查看更多。

开源。📖
没有追踪，没有广告，永久免费。♻️
不保留数据，所有数据保存在用户 GitHub issue 中。📚
有源于 Github primer 的多个主题。🌈
轻量化，没有字体下载，没有 JS 框架加载，没有 polyfills。🍜

Beaudar 与 Utterances 有什么不同？

中文界面，拉近距离增加评论友好性。
完整头像，移动端与桌面端一致显示。
身份标识，在任何情况下都不会换行。
评论时间，缩小至与身份标识相同大。
名称显示，评论者名称放大增加辨识。
链接打开，从新标签页打开符合习惯。
错误信息，使用对话框形式友好呈现。
评论头像，增加可以使用 Tab 键选中。
加载状态，默认加载状态可配置去除。
移除来源，点击加载图标跳转至主页。
刷新页面，出现错误异常可进行刷新。
保持主题，刷新页面时主题将会保持。
分支选项，增加仓库分支项用于校验。
评论顺序，可选按时间的升序或倒序。
评论位置，可设置评论输入框的位置。

Beaudar 是如何工作的？

Beaudar 加载时，将使用 GitHub issue 搜索 API 根据 url，“路径名”或“标题”查找与页面相关的 issue。如果找不到与页面匹配的 issue，即没有评论，当有人首次发表评论时，Beaudar-bot 会自动创建一个 issue。查看如何在本地运行。

更多详情

zsdycs commented 3 years ago

内容内容内容内容内容内容内容内容内容内容内容，内容内容内容内容内容内容内容内容。

内容内容内容内容内容。内容内容内容内容内容内容内容内容内容内容内容内容，内容内容内容内容内容内容内容内容内容内容内容内容。内容内容内容内容内容内容内容内容内容内容内容，内容内容内容内容内容内容内容内容。

内容内容内容内容内容。内容内容内容内容内容内容内容内容内容内容内容内容，内容内容内容内容内容内容内容内容内容内容内容内容。内容内容内容内容内容内容内容内容内容内容内容，内容内容内容内容内容内容内容内容。内容内容内容内容内容。内容内容内容内容内容内容内容内容内容内容内容内容，内容内容内容内容内容内容内容内容内容内容内容内容。

zsdycs commented 3 years ago

内容内容内容内容内容内容内容内容内容内容内容，内容内容内容内容内容内容内容内容。

内容内容内容内容内容。内容内容内容内容内容内容内容内容内容内容内容内容，内容内容内容内容内容内容内容内容内容内容内容内容。内容内容内容内容内容内容内容内容内容内容内容，内容内容内容内容内容内容内容内容。

内容内容内容内容内容。内容内容内容内容内容内容内容内容内容内容内容内容，内容内容内容内容内容内容内容内容内容内容内容内容。

zsdycs commented 3 years ago

27

zsdycs commented 3 years ago

28

zsdycs commented 3 years ago

29

zsdycs commented 3 years ago

30

zsdycs commented 3 years ago

31

zsdycs commented 3 years ago

32

zsdycs commented 3 years ago

33

zsdycs commented 3 years ago

34

zsdycs commented 3 years ago

35

zsdycs commented 3 years ago

36

zsdycs commented 3 years ago

37

zsdycs commented 3 years ago

38

zsdycs commented 3 years ago

39

zsdycs commented 3 years ago

40

zsdycs commented 3 years ago

41

zsdycs commented 3 years ago

42

zsdycs commented 3 years ago

43

zsdycs commented 3 years ago

44

zsdycs commented 3 years ago

45

zsdycs commented 3 years ago

46

zsdycs commented 3 years ago

47

zsdycs commented 3 years ago

48

zsdycs commented 3 years ago

49

zsdycs commented 3 years ago

50

zsdycs / beaudar-demo

Beaudar - 表达 #1

Beaudar（表达）

markdown 测试用例🌼

六级标题☀️

五级标题☀️

四级标题☀️

三级标题☀️

二级标题☀️

一级标题☀️

文本

图片

表格

分隔线 1

分隔线 2

无序列表

有序列表

区块

代码

Q：与 Utterances 比较，Beaudar 增加了什么

2 - 1 - 2

2 - 1 - 3

贰 - 贰 h2

Beaudar - 表达

Beaudar - 表达

Beaudar 与 Utterances 有什么不同？

Beaudar 是如何工作的？

更多详情