更改 Fossil-SCM 时间线页面 HTML

Posted 2023-02-19

【中文标题】更改 Fossil-SCM 时间线页面 HTML

【英文标题】：Change Fossil-SCM timeline page HTML

【发布时间】：2014-05-06 13:11:43

【问题描述】：

我需要在 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>

因此，此页面看起来会更好对齐且更具可读性。我该怎么做？

【参考方案1】：

我可以想到两种方法：

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

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

查找CSS 页面。在那里，您可以为.timelineHistLink, .timelineLeaf, .timelineComment 指定display: table-cell;。这应该将这三个元素变成单独的表格单元格。请注意，我没有对此进行测试，它可能无法正常工作，因为它们已经在表格单元格中。无论如何，这不会将用户和标签变成单独的单元格。这是您必须使用 javascript 才能完成的事情。 在Footer 页面中，您可以插入一段Javascript 以按照您喜欢的方式更改页面。这是我曾经编写的一个脚本示例，用于摆脱每次签入的 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>

【讨论】：

第二种将 JavaScript 添加到页脚的方法满足了我的需要，谢谢。