Giter VIP home page Giter VIP logo

beaudar's Introduction

Beaudar - 表达

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

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

Beaudar 与 Utterances 有什么不同?

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

Beaudar 是如何工作的?

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

更多详情

beaudar's People

Contributors

ccknbc avatar dependabot-preview[bot] avatar dependabot[bot] avatar glahajeekn avatar hifocus avatar zsdycs avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

beaudar's Issues

how to use in react

how to use in react ?
I am a personal blog built with dumi. The custom page component is written using react. How can I use it

境内网络无法访问了 🥹

今天发现境内 GitHub 彻底无法访问了,与此同时 beaudar 评论也加载不出来了,不知道是不是同一个原因。

但是 giscus 的评论却能正常加载出来

在同一个网络环境下的对比:

page1 page2
image image

不知道大佬能不能看看怎么办 🥹

UI建议

大佬,有个不是很重要但是每次看到都有点别扭的点,就是没有表情的时候能不能不显示这个表情区域的容器:

image

一些样式方面的建议(第二批)

再补充一些

1. 右上角这个表情的 icon

image

我是挺喜欢这个新 icon 的 😂

<svg aria-hidden="true" viewBox="0 0 16 16" version="1.1" data-view-component="true" height="16" width="16" class="octicon octicon-smiley">
    <path fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM5 8a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zM5.32 9.636a.75.75 0 011.038.175l.007.009c.103.118.22.222.35.31.264.178.683.37 1.285.37.602 0 1.02-.192 1.285-.371.13-.088.247-.192.35-.31l.007-.008a.75.75 0 111.222.87l-.614-.431c.614.43.614.431.613.431v.001l-.001.002-.002.003-.005.007-.014.019a1.984 1.984 0 01-.184.213c-.16.166-.338.316-.53.445-.63.418-1.37.638-2.127.629-.946 0-1.652-.308-2.126-.63a3.32 3.32 0 01-.715-.657l-.014-.02-.005-.006-.002-.003v-.002h-.001l.613-.432-.614.43a.75.75 0 01.183-1.044h.001z"></path>
</svg>

2. 姓名标题 16px -> 14px

image

3. 标题栏高度 44px -> 38px

个人感觉 beaudar 的标题栏高度还是略高了一些,如果有很多只有一行的评论,标题栏就已经占据了比较大的面积。

GitHub 这个头像是 40px ,标题栏高度应该是 38px ,再加上上下的边框高度,刚好头像和标题栏是等高的,很满足强迫症。

4. 表情栏修改建议

目前是这样的:
image
在移动端是这样的:
image

建议修改成这样:
image
移动端:
image

参考的是 GitHub Discussions 页面的样式: volantis-x/hexo-theme-volantis#583

我有一个大胆的想法。。。

IMG_0022

增加一个配置可以选择只显示issue部分如图所示,不显示评论框但可以通过表情回应。

这个应用场景就是在博客文章中任意位置插入来自issue的段落,使得静态博客变得灵活起来

跨域问题

可能由于您的更新,我猜的话,导致了跨域问题,应该不是我网络问题,因为测试过电脑手机
因为本身更换域名问题去查看留言板,顺便更改beaudar.json顺便发现了这个问题
下图为您网站截图
跨域截图

一些样式方面的建议

  1. GitHub Issues 以前的风格是方形头像,后来进行了不少了细节微调,个人感觉现在的样式比以前的好看很多,希望作者有空能更新一下和现在的 GitHub Issues 风格保持一致。例如:40px圆形头像、新的 icon
  2. 手机端屏幕比较窄,和桌面端一样布局会显得很局促,建议和现在的 GitHub Issues 在手机端风格保持一致
  3. markdown 标识后面的描述文字,个人感觉可以省略,因为在较窄屏幕上会导致换行,影响美观。由于会 markdown 的人看到 markdown 的图标就知道支持了,而不知道什么是 markdown 的人即使看了【支持 Markdown 编辑】这几个字也并不会比只看到 markdown 的图标多得到什么信息。所以建议直接去掉。

自定义 GitHub 头像源

GitHub 头像源在国内被 DNS 污染了,无法正常访问。期望可以自定义头像源,使用自建的反向代理。

加载更多显示的位置不对

大佬你好我又来提bug了 😅

IMG_0010

如图所示,我的关于页面有 41 条评论,那个「加载更多」跑到了第1条和第2条评论中间了。(实测逻辑是对的,隐藏了中间的20条评论,点了之后会加载出来。)

请在默认分支中同时支持 master 和 main

GitHub 之前因为政治正确的缘故将近期新建立的repo的默认分支名称由master改成了main,所以叫这两个名字的都无需在配置中指定分支名。

image

默认分支是 main 的不做额外配置就会这样

本地运行报错

在本地运行,请问报下面的错误是什么含义?
image
之前使用utteranc 也是这个错误

token -error

无法访问此网站检查 api.lipk.org 中是否有拼写错误。

降序排序时加载更多的逻辑有点问题

你好,非常喜欢您的这款评论插件,我在使用中发现了一个问题:

目前有64条评论,当评论排序设置为 desc

  1. 第一页应当显示第 55-64 条,而实际显示的是第 61-64 条数据。
  2. 点击加载更多,应该继续按降序从最新的时间往前加载一页(即第 45-54 条数据),但实际却是按升序从最老的时间往后加载一页(第 11-20 条数据)。

评论链接: https://xaoxuu.com/wiki/stellar/

关于官方已经放弃 master 作为项目分支提醒!

缺少 beaudar.json 配置
在存储库 xxx/Blog 中,master 分支下找不到 beaudar.json

获取帮助:关于 Beaudar 的 Q&A


现在的主分支是 main #官方(github) 已经放弃 master 作为项目分支了!

虽然不知道你是否继续更新但还是提醒你一下!

博客文章 与 Issue 映射,可否新增自定义 id 作为 Label 的方式?

参考 gitalk 的配置参数 id 的实现。

这样可以 Issue 标题使用页面的完整 title,而 id 作为寻找唯一 Issue 的映射依据(给 Issue 加一个 Label 值为 id 值,比如我可以使用 page.url 截 50 字符 作为 id),这样有几点好处:

  1. Issues 列表看起来比较美观:

    image
  2. 可以与 gitalk 真.无缝切换,可以不用手动修改任何 Issue;

  3. 可以避免其它映射方式带来的一些问题,如:

    我现在是使用 issue-term="title" 的方式,但是这样存在的一个问题是如果页面 A 的标题包含页面 B 的标题,而页面 A 创建时间早于页面 B 的话,那页面 B 会直接使用 A 对应的 Issue——这会导致一些混乱。比如:

    image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.