Doxygen 自定义 CSS 用于私有、受保护和 public 项目 [已解决]

Question

背景
我正在使用 Doxygen v1.8.14 为开发人员记录一些嵌入式 C++ 项目。已记录的 class 成员函数的访问修饰符标记为私有、受保护或 public 在项目标题的最右侧带有一个小标签。浏览文档时，必须在远离函数名的地方寻找这个标签。

预期结果
我想将项目的 header 背景更改为蓝色（私有）、黄色（受保护）和绿色（public）以便于识别它们。

问题
我浏览了 customdoxygen.css 文件，但找不到任何与 C++ 访问修饰符 （私有、受保护和 public）相关的标签。我还检查了 Firefox 中的 HTML 和 CSS，但似乎 Doxygen 没有区分访问修饰符（它们都是相同的 CSS class）。访问修饰符是标记中的纯文本（除了没有标记的 public）。

<span class="mlabel">private</span>

在早期的项目中，我使用 ALIAS 重新定义代码示例的显示方式，但这需要使用新的 Doxygen 标记命令（别名）。

关于如何做到这一点或什至可能的任何想法？

编辑
这已得到解决，并在我自己的答案中提供了 step-by-step 描述。

Answer 1

坏消息 – 我认为 Doxygen 没有特定的 command/config 来支持对生成的 HTML 输出进行这种级别的自定义。

好消息 – 您可以利用现有的支持来真正发挥创意来注入自定义 HTML，例如 HTML_HEADER tag。例如，您可以包含一个 JavaScript 来检查标签并更新背景颜色 onload()。这是一个伪代码（警告 - 我还没有测试过）显示建议的方法：

<script type="text/javascript">
// Go over all labels in the file 
var labels = document.getElementsByClassName("mlabel");
for (var i = 0; i < labels.length; i++) {
   // Set all private labels to red
   if(labels.item(i).textContent == “private”) {
       labels.item(i).style.backgroundColor = "red";
   }
}
</script>

Answer 2

这很微不足道，我过去做过类似的事情（我已经忘记了）。 @albert 和@diogoslima 让我想起了 HTML_HEADER 配置设置，然后我想起了我的旧项目。我看了一下，然后就很简单了。

这里的关键是不要触摸任何原始文件，或者至少尽可能少。首先，您需要生成用于自定义的模板文件。

doxygen -w html header.html footer.html memberaccess.css

为此你可以删除footer.html，这里不会用到。打开 header.html 并在 <head> 部分添加以下行（就在 $treeview 之前是一个不错的位置）：

<script type="text/javascript" src="$relpath^memberaccess.js"></script>

...然后将 onload 事件添加到 <body> 标签。

<body onload="DoAccessModifiers()">

就是这样，保存 header.html 文件。

打开 memberaccess.css 文件并将其所有内容替换为：

/* fix empty documents */
.empty {
  border-bottom: 1px solid;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

/* default access colors */
.memtitle {
    padding: 8px;
    border-color: #a8b8d9
    border-top: 1px solid;
    border-left: 1px solid;
    border-right: 1px solid;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    margin-bottom: -1px;
    background-image: none;
    background-color: #e2e8f2;
    color: #253555;
    line-height: 1.25;
    font-weight: 300;
    float:left;
}

/* private access colors */
.private {
      border-top: 1px solid;
      border-left: 1px solid;
      border-right: 1px solid;
      border-color: #7e96c7;
      /*color: #253555;*/
      background-color: #dfe5f1;
}

/* protected access colors */
.protected {
      border-top: 1px solid;
      border-left: 1px solid;
      border-right: 1px solid;
      border-color: #ffba3b;
      /*color: #253555;*/
      background-color: #ffe9c0;
}

/* public access colors */
.public {
      border-top: 1px solid;
      border-left: 1px solid;
      border-right: 1px solid;
      border-color: #93c77e;
      /*color: #253555;*/
      background-color: #e4f1df;
}

/* default label colors */
span.mlabel {
      background-color: #728dc1;
      border-top:1px solid #5373b4;
      border-left:1px solid #5373b4;
      border-right:1px solid #c4cfe5;
      border-bottom:1px solid #c4cfe5;
      text-shadow: none;
      color: white;
      margin-right: 4px;
      padding: 2px 3px;
      border-radius: 3px;
      font-size: 7pt;
      white-space: nowrap;
      vertical-align: middle;
}

/* private label colors */
span.private {
      background-color: #728dc1;
      border-top:1px solid #5373b4;
      border-left:1px solid #5373b4;
      border-right:1px solid #c4cfe5;
      border-bottom:1px solid #c4cfe5;
      /*color: white;*/
}

/* ptotected label colors */
span.protected {
      background-color: #728dc1;
      border-top:1px solid #5373b4;
      border-left:1px solid #5373b4;
      border-right:1px solid #c4cfe5;
      border-bottom:1px solid #c4cfe5;
      /*color: white;*/
}

/* inherited label colors */
span.inherited {
      background-color: #728dc1;
      border-top:1px solid #5373b4;
      border-left:1px solid #5373b4;
      border-right:1px solid #c4cfe5;
      border-bottom:1px solid #c4cfe5;
      /*color: white;*/
}

/* strong label colors */
span.strong {
      background-color: #728dc1;
      border-top:1px solid #5373b4;
      border-left:1px solid #5373b4;
      border-right:1px solid #c4cfe5;
      border-bottom:1px solid #c4cfe5;
      /*color: white;*/
}

/* static label colors */
span.static {
      background-color: #728dc1;
      border-top:1px solid #5373b4;
      border-left:1px solid #5373b4;
      border-right:1px solid #c4cfe5;
      border-bottom:1px solid #c4cfe5;
      /*color: white;*/
}

/* inline label colors */
span.inline {
      background-color: #728dc1;
      border-top:1px solid #5373b4;
      border-left:1px solid #5373b4;
      border-right:1px solid #c4cfe5;
      border-bottom:1px solid #c4cfe5;
      /*color: white;*/
}

/* virtual label colors */
span.virtual {
      background-color: #bbbbbb;
      border-top:1px solid #606060;
      border-left:1px solid #505050;
      border-right:1px solid #c0c0c0;
      border-bottom:1px solid #c0c0c0;
      color: #404040;
}

/* pure virtual label colors */
span.purevirtual {
      background-color: #ffffff;
      border-top:1px solid #606060;
      border-left:1px solid #505050;
      border-right:1px solid #c0c0c0;
      border-bottom:1px solid #c0c0c0;
      color: #000000;
}

/* delete label colors */
span.delete {
      background-color: #ca3939;
      border-top:1px solid #902626;
      border-left:1px solid #902626;
      border-right:1px solid #eab0b0;
      border-bottom:1px solid #eab0b0;
      /*color: white;*/
}

然后创建 memberaccess.js 文件：

function GetAccessModifier(item) {
  access = 'public';
  Array.prototype.slice.call(item.getElementsByClassName('mlabel')).forEach(function(label) {
    if (label.innerText == 'private' || label.innerText == 'protected') { access = label.innerText; }
    label.className += ' '+label.innerText.replace(/ /g, '');
  });
  return access;
}

function DoAccessModifiers() {
  Array.prototype.slice.call(document.getElementsByClassName('memitem')).forEach(function(item) {
    var title = item.previousElementSibling;
    doc = item.getElementsByClassName('memdoc')[0];
    item = item.getElementsByClassName('memproto')[0];
    modifier = " "+GetAccessModifier(item);
    title.className += modifier;
    item.className += modifier;
    if(doc.childElementCount == 0) { item.className += ' empty'; doc.parentNode.removeChild(doc); }
  });
}

现在当所有文件都准备好后，我们只需要告诉 doxygen 配置使用它们。我很懒，更喜欢 DoxyWizard 来创建配置，但如果你愿意，你可以使用文本编辑器破解你最喜欢的配置文件。

HTML_HEADER           = header.html
HTML_EXTRA_STYLESHEET = memberaccess.css
HTML_EXTRA_FILES      = memberaccess.js

完成！

要更改颜色，请编辑 memberaccess.css 文件：

.private
.protected
.public

这些类定义标题和项目背景和边框。

span.xxxx

这些类控制每个项目右侧的小标签。 xxxx 与标签的文本相同（删除了空格）。

我希望这对登陆这里的任何人都有用。

Doxygen 自定义 CSS 用于私有、受保护和 public 项目 [已解决]

Doxygen custom CSS for private, protected and public items [SOLVED]

css

c++

doxygen