css – 重新创建类似的Travis CI控制台日志界面

2023年4月1日 280次阅读

我第一次看到
Travis CI实时更新构建控制台日志时,我承认,我非常印象深刻.我知道一些非常耗时的CSS样式和JS编码,我可能会得到一半好的东西.但是,我的问题是,是否有任何库可以使这样的构建更容易？我意识到Travis CI使用Ember作为他们的Web应用程序框架,但我猜这不是Ember的组件,对吧？ 最佳答案 “travis-web”使用Ember,但“log-container”的功能是自定义的.它包含日志文件的文本(“下载日志”).请下载原始版本的日志并查看.

您将看到,日志文件有几个“注释”.它是一种语法,用于指示应用某些自定义样式的区域.
这些行由Log script处理,然后删除.

好吧,让我们分解一下：

►代码折叠

折叠以“travis_fold：start：section_name”开头,以“travis_fold：end：section_name”结尾

折叠内的内容放置在跨度中.
默认情况下,跨度高度为0.最初,内容不会显示.

单击鼠标,将额外的css样式打开添加到范围.
样式打开将span元素的高度设置为auto – 并且将显示折叠的内容.

行号：// url#L100

从日志文件内容中删除注释

(总行数=原始日志文件行 – 注释行).

所有行号都是锚元素(a),因此可以进行逐行引用.

编号本身由CSS完成 – 在锚点之前添加数字.

log-body p a :: before {
  内容：计数器(行号);
  反增量：行号;

颜色

在整个原始日志文件中使用ansi-color代码.
内容由AnsiParser script解析,颜色代码转换(deansi’ed)为其css类颜色名称.

字符串

[0K [33; 1m建立系统信息[0m

变

< span id =“1-3”class =“yellow bold”>构建系统信息< / span>

Scroll-To-End-Of-Log&移至顶部

Scroll-To-End-Of-Log类似于滚动到div的结尾：this.scrollIntoView(false);

当激活滚动时,激活按钮本身位于顶部以使其保持在同一位置.

“移至顶部”位于底部.

主动线路悬停

当前光标线的样式为p：hover：#color.

部分和持续时间显示

在右侧显示“部分或文件夹名称”和“持续时间”.
两者都是基于以下标记的跨度：

travis_time：启动：0759cab0

CMDS

travis_time：end：0759cab0：start = 1434311411734827664,finish = 1434311413318517466,duration = 1583689802

But, my question is, are there any libraries out there that would make building something like this easier?

对于小型站点,您可以使用基于Javascript的主题CodeEditor,如CodeMirror.

应用黑暗主题,为代码折叠和代码突出显示添加一些自定义规则,主动线悬停.这将很快让你接近.

> https://codemirror.net/demo/theme.html
> https://codemirror.net/demo/folding.html

点赞