絕對實用教程:如何在PhalApi定製自己的線上文件模板?
阿新 • • 發佈:2018-12-01
絕對實用教程:如何在PhalApi定製自己的線上文件模板?
PhalApi官方的線上文件,預設長這樣:雖然有線上文件可以使用,但在實際情況下,考慮到專案需要顯示自己的公司Logo、專案名稱,以及其他一些樣式的調整,因此這時可以使用自定義模板。
如何在PhalApi定製自己的線上文件模板??
實現起來很簡單,就像我們平時開放網站頁面那樣,只需要把模板的路徑修改一下即可。
線上文件共有兩份模板,分別是:
第1份:線上列表頁文件模板
- 原生代碼路徑是:./vendor/phalapi/kernal/src/Helper/api_list_tpl.php
- 遠端程式碼路徑是:https://github.com/phalapi/ker ... l.php
第2份:線上詳情頁文件模板
- 原生代碼路徑是:./vendor/phalapi/kernal/src/Helper/api_desc_tpl.php
- 遠端程式碼路徑是:https://github.com/phalapi/ker ... l.php
也就是說,如果你只是想改專案的模板,那麼就修改本地的; 如果你想分享給更多同學,就可以修改遠端的,然後提交PR。
如何修改本地的線上文件列表頁模板?
首先,把本地模板複製一份,放到自己的專案中。建立一個新目錄 ./src/app/view,然後拷貝過去。
$ cp ./vendor/phalapi/kernal/src/Helper/api_list_tpl.php ./src/app/view/
然後,自由發揮,修改 ./src/app/view/api_list_tpl.php 模板中的內容或樣式。
例如,加一個頂部的選單項,追加以下程式碼:
<a href="https://www.phalapi.net/" class="item">PhalApi</a> <a href="接著儲存。http://docs.phalapi.net/#/v2.0/" class="item">文件</a> <a href="http://qa.phalapi.net/" class="item">社群</a> <!-- 新加一個選單 --> <a href="https://my.oschina.net/dogstar" class="item">dogstar的部落格</a> <div class="right menu">
最後,這一步很關鍵,就是告訴PhalApi切換到你自己的模板檔案。修改 ./public/docs.php 檔案,然後在render渲染時修改為自己的模板路徑。
例如,新加的選單顯示效果是:
if (!empty($_GET['detail'])) { $apiDesc = new \PhalApi\Helper\ApiDesc($projectName); $apiDesc->render(); } else { $apiList = new \PhalApi\Helper\ApiList($projectName); $apiList->render(API_ROOT . '/src/app/view/api_list_tpl.php'); // 修改為自己的模板路徑 }
再訪問線上文件,就能看到自己的模板啦!
如何修改本地的線上文件介面詳情頁模板?修改線上詳情頁模板的做法和修改列表的類似,也是首先,複製一份:
$ cp ./vendor/phalapi/kernal/src/Helper/api_desc_tpl.php ./src/app/view/然後,修改模板。
最後,切換模板。
if (!empty($_GET['detail'])) { $apiDesc = new \PhalApi\Helper\ApiDesc($projectName); $apiDesc->render(API_ROOT . '/src/app/view/api_desc_tpl.php'); // 修改為自己的模板路徑 } else { $apiList = new \PhalApi\Helper\ApiList($projectName); $apiList->render(API_ROOT . '/src/app/view/api_list_tpl.php'); }
小白介面的定製模板效果
例如,PhalApi官網的創新專案,小白介面的定製模板效果如下:
線上文件連結是:http://pre.api.okayapi.com/docs.php?api=Ext.QrCode
如何分享自己的模板和主題?
如果有好的模板要和主題,歡迎在下方回覆留言,貼上原始碼的連結 ^_^