GiantPandaCV 一直是以公眾號(hào)的形式和大家見面，但現(xiàn)在隨著分享干貨的日益增多，我們不滿足于公眾號(hào)小小的窗口，為了方便大家快速檢索自己感興趣的知識(shí)，也為了增加和大家的交流， GiantPandaCV.COM 應(yīng)運(yùn)而生，拉到底部點(diǎn)擊 閱讀原文 即可訪問，或者復(fù)制網(wǎng)址到瀏覽器訪問。

同時(shí)我們的網(wǎng)站所有內(nèi)容也在 GitHub 開源，歡迎讀者訪問學(xué)習(xí)或者star。

地址：https://github.com/BBuf/giantpandacv.com

以下為網(wǎng)站搭建過程，有小伙伴需要搭建自己個(gè)人博客網(wǎng)站，項(xiàng)目文檔網(wǎng)站，可以作為參考。

MkDocs 簡(jiǎn)介

公眾號(hào)日常文章都以 Markdown 形式交付BB，通過一定方式轉(zhuǎn)化為公眾號(hào)可讀形式給大家閱讀?；诖?，我們選擇了MkDocs 作為網(wǎng)站首選。

MkDocs 是一個(gè)用于創(chuàng)建項(xiàng)目文檔的靜態(tài)站點(diǎn)生成器，基于 Markdown 和 YAML 配置文件生成HTML文檔。無論配置，使用，調(diào)試都非常方便。

安裝

MkDocs 基于Python，官網(wǎng)支持 Python 2.6，2.7，3.3，3.4，實(shí)測(cè)3.6，3.7也可正常使用。需要使用 pip 安裝，mkdocs 目前最新版本為 1.2.1 ，現(xiàn)在還未完全適配。我們使用的1.1.2版本。

$ pip install mkdocs==1.1.2

MkDocs 基本使用

創(chuàng)建項(xiàng)目

$ mkdocs new giantpandacv
$ cd giantpandacv

項(xiàng)目創(chuàng)建完成后可以看到一個(gè) mkdocs.yml 配置文件和 docs 文件夾，docs下包含一個(gè) index.md 文件，為網(wǎng)站默認(rèn)首頁(yè)。

網(wǎng)站整體結(jié)構(gòu)依據(jù) mkdocs.yml 配置，所有 Markdown 文件分類后放到 docs 目錄下。

調(diào)試

使用 mkdocs serve，啟用內(nèi)置服務(wù)器，控制臺(tái)根據(jù) mkdocs.yml 生成臨時(shí)本地網(wǎng)站預(yù)覽。

[root@giantpandacv giantpandacv]# mkdocs serve
INFO    -  Building documentation... 
INFO    -  Cleaning site directory 
INFO    -  Documentation built in 0.08 seconds 
[I 210711 17:31:16 server:335] Serving on http://127.0.0.1:8000
INFO    -  Serving on http://127.0.0.1:8000
[I 210711 17:31:16 handlers:62] Start watching changes
INFO    -  Start watching changes
[I 210711 17:31:16 handlers:64] Start detecting changes
INFO    -  Start detecting changes

使用瀏覽器打開 http://127.0.0.1:8000/ ，可以看到如下頁(yè)面每次對(duì) mkdocs.yml 修改或者 docs 下的文件進(jìn)行修改，會(huì)自動(dòng)進(jìn)行編譯，瀏覽器刷新即可查看最新改動(dòng)，十分方便。

mkdocs.yml 基礎(chǔ)屬性

這里使用 giantpandacv.com 網(wǎng)站的 mkdocs.yml 配置文件進(jìn)行講解

• 首部主要是網(wǎng)站基本信息

site_name: GiantPandaCV
site_description: GiantPandaCV
site_author: GiantPandaCV
site_url: http://giantpandacv.com

• copyright信息，如網(wǎng)站需要在公網(wǎng)上發(fā)布，記得備案

copyright: 'Copyright &copy; GiantPandaCV Team <a 

• 網(wǎng)站結(jié)構(gòu)nav 塊為網(wǎng)站核心模塊，首頁(yè) 為網(wǎng)站大的模塊劃分，往下依次為一級(jí)目錄，二級(jí)目錄，文章?？梢杂卸嗉?jí)目錄，但從美觀度來看，二級(jí)目錄就可以了。再多會(huì)顯得文字擁擠。

nav:
    - 首頁(yè):
        - Getting Started: index.md
        - GiantPandaCV 簡(jiǎn)介: introduction/introduction.md
    - 傳統(tǒng)圖像: 
        - 專欄介紹: 傳統(tǒng)圖像/README.md
        - 一些有趣的圖像算法: 
            - OpenCV圖像處理專欄一  盤點(diǎn)常見顏色空間互轉(zhuǎn): 傳統(tǒng)圖像/一些有趣的圖像算法/OpenCV圖像處理專欄一  盤點(diǎn)常見顏色空間互轉(zhuǎn).md
            - OpenCV圖像處理專欄二 《Local Color Correction 》論文閱讀及C++復(fù)現(xiàn): 傳統(tǒng)圖像/一些有趣的圖像算法/OpenCV圖像處理專欄二 《Local Color Correction 》論文閱讀及C++復(fù)現(xiàn).md
            - OpenCV圖像處理專欄三  灰度世界算法原理和實(shí)現(xiàn): 傳統(tǒng)圖像/一些有趣的圖像算法/OpenCV圖像處理專欄三  灰度世界算法原理和實(shí)現(xiàn).md
            - OpenCV圖像處理專欄四  自動(dòng)白平衡之完美反射算法原理及C++實(shí)現(xiàn):  傳統(tǒng)圖像/一些有趣的圖像算法/OpenCV圖像處理專欄四  自動(dòng)白平衡之完美反射算法原理及C++實(shí)現(xiàn).md
            - OpenCV圖像處理專欄五  《Real-time adaptive contrast enhancement for imaging sensors》論文解讀及實(shí)現(xiàn): 傳統(tǒng)圖像/一些有趣的圖像算法/OpenCV圖像處理專欄五  《Real-time adaptive contrast enhancement for imaging sensors》論文解讀及實(shí)現(xiàn).md
            - OpenCV圖像處理專欄六  來自何凱明博士的暗通道去霧算法(CVPR 2009最佳論文): 傳統(tǒng)圖像/一些有趣的圖像算法/OpenCV圖像處理專欄六  來自何凱明博士的暗通道去霧算法(CVPR 2009最佳論文).md
            ······

配置主題

官方有多種主題和參數(shù)進(jìn)行配置，具體可參照 mkdocs主題樣式配置

theme:
  name: 'material'
  language: 'zh'
  palette:
    primary: 'white'
    accent: 'red'
    scheme: preference
    
  icon:
    logo: 'material/school'
  features:
    - navigation.tabs
  font:
    text: 'Noto Sans'
    code: 'Source Code Pro'

站點(diǎn)生成

文檔調(diào)試完畢后，使用以下命令生成 HTML 文檔

$ mkdocs build

第一次執(zhí)行命令后，會(huì)在目錄下生成 site 目錄，所有內(nèi)容均生成 site 目錄中。將 site 目錄中所有文件拷貝到你的 Apache 或者 Nginx 服務(wù)器網(wǎng)站目錄中即可正常訪問網(wǎng)站內(nèi)容。

注：不需要 mysql，php 等環(huán)境支持。

更多介紹和使用可以參見  MkDocs中文文檔 ((https://mkdocs.zimoapps.com/)

MkDocs 各種轉(zhuǎn)換 bug 踩坑

• 文字下方圖片未正常換行

修改方法：在圖片下方加換行

• 數(shù)字標(biāo)題序號(hào)未按正常序列進(jìn)行排列

修正方法一：直接加粗

修改方法二：修改為4級(jí)標(biāo)題（這樣改會(huì)修改正文右邊的目錄結(jié)構(gòu)，所以我一般在上面?zhèn)€方法不生效的時(shí)候用）

• 公式未正常解析

修改方法：源碼模式給每個(gè)公式前后進(jìn)行換行

• 無序標(biāo)題未正常解析

修改方法：在無序標(biāo)題前進(jìn)行換行（只需要在第一行進(jìn)行換行就行了，如果無需標(biāo)題間包含較多復(fù)雜公式和代碼，可能需要在多個(gè)無序標(biāo)題之間進(jìn)行換行）

• 超鏈接顯示與實(shí)際不一致

修改方法：在超鏈接前后加空格

• [Errno 2] No such file or directory: 'C:\Users\TIANQI~1\AppData\Local\Temp\mkdocs_xrkyz_r5\........

修改方法：

檢查文件名前后是否含有多余空格

歡迎關(guān)注GiantPandaCV, 在這里你將看到獨(dú)家的深度學(xué)習(xí)分享，堅(jiān)持原創(chuàng)，每天分享我們學(xué)習(xí)到的新鮮知識(shí)。( ? ?ω?? )?

有對(duì)文章相關(guān)的問題，或者想要加入交流群，歡迎添加BBuf微信：