# atum主題部署文件 ## 介紹 這是一款由VUE打造的簡約型部落格主題，相容各大主流瀏覽器，響應式設計，PC、平板、手機等均可正常瀏覽。 ## 特性 - 響應式設計，相容手機端瀏覽器。 - 提供多種配置資訊，方便各類使用者進行個人定製化。 - 部署文件十分詳細且部署快捷。 - 主題整體偏向簡約、無太多不必要的特效畫面、偏向於簡潔型部落格。 - 請求區域性HTML重新整理，實現全站無重新整理式載入。 ## 二次開發 > 如果您不想進行二次開發可以跳過本節，直接進入下一節檢視如何進行主題急速部署。 > 如果您只想簡單修改CSS樣式，則不建議您在此處進行二次開發，您可以通過控制檯線上調整樣式後將自定義樣式寫入css檔案中，通過atum引數配置`extCss`進行原生樣式覆蓋。（具體可參考下一節急速部署） > 如果您只想簡單擴充套件JS功能的話，同樣也不建議您在此處進行二次開，您可以通過atum引數配置`extJs`進行Js程式碼塊的呼叫。 > 請先確保您正在使用的機器已經安裝 Node.js 和 Git 客戶端。 ### 程式碼構建 ``` git clone https://github.com/cjunn/cnblog_theme_atum.git # 克隆原始碼 cd cnblogs-theme-silence # 進入專案 npm install # 安裝依賴 npm run build # 重新構建 ``` ### 構建後生成程式碼結構 

其中img為圖片素材庫,cnblogLoader.js負責從遠端伺服器載入app.css,app.js,manifest.js,vendor.js檔案

其中需要新建code資料夾並且將css資料夾與js資料夾放入其中，然後將img資料夾與code資料夾部署到您的伺服器上即可。

在部落格園引用cnblogLoader.js前,定義好atum的`staticSrc`、`staticVer`等引數使其cnblogLoader.js載入為您伺服器上的靜態檔案檔案。具體可參考下一節介紹。

### 原始碼程式碼結構  如果您具有一定VUE開發經驗一定能夠理解原始碼，這裡不展開詳細介紹。 ## 急速部署 前提：已經開通`js`許可權，沒開通的可以向部落格園官方申請開通。 ###程式碼塊部署位置 ``` ``` 將上述程式碼塊拷貝至 `部落格園設定->頁首HTML程式碼` 。 ``` ``` 將上述程式碼塊拷貝至 `部落格園設定->部落格側邊欄公告（支援HTML程式碼） （支援 JS 程式碼）` ，並且按需配置好所需要的引數並且賦值給全域性變數__BLOG_CONFIG__中。  同樣這裡需要對部落格園進行控制元件設定 ###可配置的相關引數 ``` //部落格名稱 let blogName = "C君"; //音樂請求介面API地址 let musicApiUrl = "https://api.i-meto.com/meting/api?server=netease&type=:type&id=:id&r=:r"; //擴充套件素材庫地址根路徑 let extendStylePath = "https://cjunn.gitee.io/blog_theme_atum" //作者頁背景圖片地址URL let headBackImg = `${extendStylePath}/img/ing/autorbimg.jpg`; //首頁背景圖片地址URL let bigBackImg = `${extendStylePath}/img/body/background.jpg`; //文章塊前置圖片URL，陣列[]。 let panelItemPic=Array.from(Array(35), (v,k) => (`${extendStylePath}/img/pageItem/page-item-$I.jpg`).replace("$I",k+1)); //右側快速導航圖片URL，陣列[] let panelRightImgPic=Array.from(Array(10), (v,k) =>(`${extendStylePath}/img/menuIcon/menuicon-$I.png`).replace("$I",k)); //預設音樂播放器音樂圖片URL let musicSignImg=`${extendStylePath}/img/body/music_play.png`; //部落格簽名 let blogSign = "自慚多情汙梵行，入山又恐誤傾城。世間安得雙全法，不負如來不負卿。"; //作者頁關於我 HTML let aboutmeHtml = ` `; //作者簽名 let avatarSign = " ↗↗點選頭像關注我。"; //心情欄簽名 let ingTitle = "你的一字一句猶如刀疤劃心上，我的一舉一動隨你改變多荒唐。"; //友鏈 let blogFriendList = []; //{name: '', url: ''}格式 //暫時無用 let blogUsedLinks = []; //{name: '', url: ''}格式 //網易雲音樂ID ，陣列[] let musicIds = ["1382596189"]; let qq = "592571519"; let email = "[email protected]" let github = "cjunn"; //評論人預設圖片URL let defHeadImg= `${extendStylePath}/img/body/defAvatar.jpg`; //預設採用主題風格，style0、style1可選。 let themeStyle="style0"; //用於心情展示的部落格ID let feelingBlogId=13393903; //導航連結 let mainExtNav = [ {title: "首頁",url:"/subject/category/default.html",icon: "home"}, {title: "部落格動態", url: "https://www.cnblogs.com/cjunn/", icon: "comment1"}, {title: "博主簡歷", url: "https://www.cnblogs.com/cjunn/", icon: "face2"}, {title: "主題反饋", url: '/c/subject/p/12494785.html', icon: "bug"}, {title: "讚賞博主", url: '/c/subject/p/12495086.html', icon: "gift"} ]; //廣告欄的HTML let adDisplay="\n" + " \n" + " \n" + " \n" + " \n" + " "; ``` 上方是可配置的引數目前的預設引數值。可以根據目前自己所需要的修改相關引數值，然後設定進全域性引數__BLOG_CONFIG__中。 ## 部署後效果  具體效果可至 [點我跳轉](https://www.cnblogs.com/cjunn/) 檢視。 ## 新增特性 1.相對1.0版本，該版本只要做JS引入就可以立刻構建出相應主題，無需做任何配置項必填。 2.新增style1風格可選，該風格更加偏向小清新。 3.修改API介面為獨立模組來應對常變動的部落格園介面問題。 ## 最後 - 開源地址[Gitee](https://gitee.com/cjunn/cnblog_theme_atum.git)、[Github](https://github.com/cjunn/cnblog_theme_atum.git)，求些小星星嗯。 - 感謝 [@YJLAugus](https://www.cnblogs.com/yjlaugus/) 在該主題不斷程式碼迭代的時候提供的寶貴意見。 - 另外如果需要進行主題反饋請至[反饋](https://www.cnblogs.com/cjunn/#/c/subject/p/12494785.html) - 原始碼目前已開源、方便具有開發經驗的人進行二次開發、但懇請您二次開發時能夠保留相應的作者資訊。 - 如果你有多餘的RMB的話，可以賞我吃顆糖麼。 - 如果您讚賞了我，請在支付寶或微信上留下部落格園ID號，讓我知道你嗯。