html - 更改 Fossil-SCM 时间线页面 HTML

Question

我需要更改 timelineTableCell 类 td 元素内由 Fossil-SCM 生成的时间线页面的 HTML。该td元素当前内容如下

<td class="timelineTableCell" style="FOO">
    <a class="timelineHistLink" href="FOO">[DF45GH67MD]</a>
    <span class="timelineLeaf">Leaf:</span>
    <span class="timelineComment">Any comment goes here</span>
    (user: <a href="FOO">User Name</a>,tags: <a href="FOO">Lyca+ HLR</a>)
</td>

我要求单独的 td 中的每个元素如下

<td><a class="timelineHistLink" href="FOO">[DF45GH67MD]</a></td>
<td><span class="timelineLeaf">Leaf(empty if not leaf)</span></td>
<td><span class="timelineComment">Any comment goes here</span></td>
<td>User: <a href="FOO">Usr_Name</a></td>
<td>Tags: <a href="FOO">Tag_Name</a></td>

所以这个页面看起来会更好地对齐并且更具可读性。我该怎么做？

Answer 1

我可以想到两种方法:

1. 通过构建您自己的 Fossil 版本。克隆化石 repository ，并创建一个(私有(private))分支，您可以在其中更改 source code , 并编译你自己的 Fossil 版本。这确实意味着每次你想更新 fossil 时，你都需要将主干合并到你的分支中，然后重新编译它。

2. 使用 CSS 和 Javascript。在 Admin 页面下，您可以在为每个页面生成的页眉和页 footer 分插入内容。

   • 寻找 CSS 页面。在那里，您可以为 .timelineHistLink、.timelineLeaf、.timelineComment 指定 display: table-cell;。这应该将这三个元素变成单独的表格单元格。请注意，我还没有对此进行测试，它可能无法正常工作，因为它们已经在 表格单元格中了。在任何情况下，这都不会将用户和标签变成单独的单元格。这是您使用 Javascript 必须要做的事情。
   • 在Footer 页面中，您可以插入一段Javascript 以您喜欢的方式更改页面。这是我曾经编写的一些脚本示例，用于删除每次 checkin 的 UUID，并将提交文本转换为链接:

(TH1 是 Fossil 的服务器端语言；我在这里使用它来表示此脚本应该只在时间轴页面而不是每个页面上生成)。

<th1>
    if {$current_page eq "timeline"} {
        enable_output 1
    } else {
        enable_output 0
    }
</th1>
<script>
(function() {
        var cells = document.getElementsByClassName('timelineTableCell');
        for (var i = 0; i < cells.length; i++) {
                cells[i].innerHTML = cells[i].innerHTML.replace(/^[^<]*<a href="([^"]*)">[^<]*<\/a>\]\s*(.*)\s+(\(user:[^\0]*\))\s*$/, '<a href="$1">$2</a><br> <span style="font-size: smaller; font-style: italic; opacity: 0.75">$3</span>');
        }
})();
</script>
<th1>
    enable_output 1
</th1>