Doxygen 可以用于代碼API與文檔的導出,格式是html格式,能在網頁端直接瀏覽
優(yōu)點:
拓展性高
操作簡單
支持MarkDown
一鍵導出靜態(tài)網頁
缺點:
界面古董(可解決)
代碼注釋格式嚴格(可配置)
最終效果
image.png
使用教程:
安裝doxygen: https://www.doxygen.nl/download.html
我通常在項目下面建立一個doxygen文件夾,然后關于文檔的東西都放里面
打開doxygen,填寫信息:
-
填寫一下Project信息,此時我們保存一下Doxygen,Ctrl + S即可,圖中的 Doxyfile 就是這么來的, 這一步很重要
image.png Mode信息,選一下你要導出什么語言的
image.png
- 運行并生成
image.png
- 此時即可查看到,你生成的網頁了,Classes里面還包含了你的代碼的API內容,前提是你弄好了注釋內容
image.png
進階
上面我們告訴了你怎么生成一個最簡單的doxygen網頁api模板,接下就是修改版面內容與調整樣式了
自定義多標簽頁
來到你的安裝目錄 .../doxygen/bin .找到 doxygen.exe ,我裝在C盤位置如圖:
image.png
管理員身份打開cmd,用命令行調用生成文件命令,將生成的4個文件復制到我們的工作目錄
//去到doxygen.exe目錄下
cd C:\Program Files\doxygen\bin
//生成DoxygenLayout.xml文件
doxygen.exe -l
//生成 header.html footer.html stylesheet.css 三個文件
doxygen.exe -w html header.html footer.html stylesheet.css
此時我們在 .../project/doxygen/ 下的目錄應該是這樣的,下面開始配置進去
Doxyfile //doxygen保存的工程文件
DoxygenLayout.xml //用于配置多個標簽頁分布的xml
footer.html //用于后續(xù)改好看樣式的文件
header.html //用于后續(xù)改好看樣式的文件
stylesheet.css //用于后續(xù)改好看樣式的文件
md / main.md //主頁面使用的markdown
md / quickstart.md //快速開始頁面使用的markdown
- 打開 DoxygenLayout.xml文件,添加一行
<tab type="mainpage" visible="yes" title=""/>
<!-- 添加一行選項 使用方法,統(tǒng)一格式:md_{filepath}.html (md_代表markdown文件,后面開始就是文件路徑md_quickstart) -->
<tab type="user" visible="yes" url="md_md_quickstart.html" title="快速開始"/>
<!-- 最好注釋掉下面這行 -->
<!-- <tab type="pages" visible="yes" title="" intro=""/> -->
回到我們的doxygen程序,配置以下內容
Expert > Input > INPUT 把我們的md文件夾配置進去,上面那個是項目代碼地址
image.png
- Expert > Input > USE_MDFILE_AS_MAINPAGE
image.png
- Expert > Build > LAYOUT_FILE
image.png
- 完成后Run一次再查看,就有主頁內容與自定義的標簽頁了
image.png
下面開始講樣式調整
第三方的很精美的css庫: https://github.com/jothepro/doxygen-awesome-css
- 下載下來,放在Doxfile同級目錄,并把該文件加入到使用列表
image.png
- 修改以下屬性
image.png
image.png
docxygen-awesome上是用文本方式打開Doxyfile修改的,也可以.
# Doxyfile
GENERATE_TREEVIEW = YES # optional. Also works without treeview
HTML_EXTRA_STYLESHEET = doxygen-awesome-css/doxygen-awesome.css
橫線內是非必要內容
*黑暗模式(這個功能有時候不好使,就是黑暗模式)
image.png
footer.html 復制到相同位置
<!--END !GENERATE_TREEVIEW-->
<script type="text/javascript">
$(document).ready(function(){
toggleButton = document.createElement('doxygen-awesome-dark-mode-toggle')
toggleButton.title = "Toggle Light/Dark Mode"
document.getElementById("MSearchBox").parentNode.appendChild(toggleButton)
})
</script>
</body>
</html>
header.html
---
$mathjax
<link href="$relpath^$stylesheet" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="$relpath^doxygen-awesome-darkmode-toggle.js"></script>
$extrastylesheet
</head>
- 保存后重新打開運行一下,最終效果,簡直完美
image.png
使用doxygen style的自動注釋(VS 2019才支持)
image.png
輸入///即可自動提示注釋內容
- PS,那個黑暗樣式我到現(xiàn)在也沒成功弄出來,有弄出來的可以告訴一下怎么搞的
