我需要更改Fossil-SCM在 timelineTableCell 类td元素中生成的时间轴页面的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>
因此,通过此页面看起来会更好地对齐并且更具可读性。我怎么能这样做?
答案 0 :(得分:2)
我可以想到两种方式:
使用CSS和Javascript 。在Admin
页面下,您可以在为每个页面生成的页眉和页脚部分中插入内容。
CSS
页面。在那里,您可以为display: table-cell;
指定.timelineHistLink, .timelineLeaf, .timelineComment
。这应该将这三个元素转换为单独的表格单元格。请注意,我没有对此进行测试,因为它们已经在表格单元格中,所以它可能无效。在任何情况下,这都不会将用户和标签转变为单独的单元格。这是你必须使用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>