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權限，沒開通的可以向博客園官方申請開通。並且確保博客中至少有一篇隨筆。
代碼塊部署位置
<style type="text/css">
#page_begin_html{top: 0;bottom: 0;left: 0;right: 0;position: fixed;z-index:99999;}
#home #main #mainContent{display:none}
body{margin:0;padding:0;overflow:hidden;margin-top:100%}#shade_animal_wrap{opacity:1;margin:0;padding:0;display:flex;position:absolute;top:0;left:0;right:0;bottom:0;align-items:center;justify-content:center;height:100vh;width:100%;background-color:#f2f2f2;z-index:99999;transition:all .5s ease 0s;}.lds-hourglass{display:inline-block;position:relative;width:64px;height:64px;transform:translateX(-30px) translateY(-60px);}.lds-hourglass:after{content:" ";display:block;border-radius:50%;width:0;height:0;margin:6px;box-sizing:border-box;border:60px solid #fff;border-color:#ff8d00 transparent #ff3004 transparent;animation:lds-hourglass 1.2s infinite;}@keyframes lds-hourglass{0%{transform:rotate(0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19);}50%{transform:rotate(900deg);animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);}100%{transform:rotate(1800deg);}}</style>
<div id="shade_animal_wrap"><div class="lds-hourglass"></div></div>
將上述代碼塊拷貝至 博客園設置->頁首HTML代碼 。
<script>
$("link").remove();$("script").remove();$(function(){$("link").remove();$("script").remove()});window.blogCommentManager=function(){this.renderComments=function(){}};window.loadViewCount=function(){};window.loadNewsAndKb=function(){};window.loadBlogSignature=function(){};window.LoadPostCategoriesTags=function(){};window.LoadPostInfoBlock=function(){};window.GetPrevNextPost=function(){};window.loadBlogCalendar=function(){};window.loadBlogSideColumn=function(){};window.loadBlogTopLists=function(){};window.GetHistoryToday=function(){};window.deliverAdT2=function(){};window.getFollowStatus=function(){};window.deliverAdC1=function(){};
</script>
<script type="text/javascript">
(()=>{
//該處用於配置atum主題參數，具體配置參數可參考下方。
let p={};
p.blogSign="自慚多情污梵行，入山又恐誤傾城。世間安得雙全法，不負如來不負卿。";
p.avatarSign= " ↗↗點擊頭像關注我。";
window.__BLOG_CONFIG__=p;
})();
</script>
<script type=text/javascript src=https://cjunn.gitee.io/blog_theme_atum/cnblogLoader2.js></script>
將上述代碼塊拷貝至 博客園設置->博客側邊欄公告（支持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 = "https://cjunn.gitee.io/blog_theme_atum/img/ing/autorbimg.jpg";
//首頁背景圖片地址URL
let bigBackImg = "https://cjunn.gitee.io/blog_theme_atum/img/body/background.jpg";
//文章塊前置圖片URL，數組[]。
let panelItemPic=Array.from(Array(35), (v,k) => ("https://cjunn.gitee.io/blog_theme_atum/img/pageItem/page-item-$I.jpg").replace("$I",k+1));
//右側快速導航圖片URL，數組[]
let panelRightImgPic=Array.from(Array(10), (v,k) =>("https://cjunn.gitee.io/blog_theme_atum/img/menuIcon/menuicon-$I.png").replace("$I",k));
//默認音樂播放器音樂圖片URL
let musicSignImg="https://cjunn.gitee.io/blog_theme_atum/img/body/music_play.png";
//博客簽名
let blogSign = "自慚多情污梵行，入山又恐誤傾城。世間安得雙全法，不負如來不負卿。";
//作者頁關於我 HTML
let aboutmeHtml = "<img src='https://cjunn.gitee.io/blog_theme_atum/img/ing/aboutme.jpg'/>";
//作者簽名
let avatarSign = " ↗↗點擊頭像關注我。";
//心情欄簽名
let ingTitle = "你的一字一句猶如刀疤划心上，我的一舉一動隨你改變多荒唐。";
//友鏈
let blogFriendList = []; //{title: '', url: ''}格式
//暫時無用
let blogUsedLinks = []; //{name: '', url: ''}格式
//網易雲音樂ID ，數組[]
let musicIds = ["1382596189"];
let qq = "592571519";
let email = "592571519@qq.com"
let github = "cjunn";
//設置代碼風格
let language = ['xml', 'css', 'dos', 'java', 'javascript', 'json', 'php', 'python', 'scala', 'shell', 'sql', 'yaml']
//評論人默認圖片URL
let defHeadImg= "https://cjunn.gitee.io/blog_theme_atum/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="<div class=\"blog-cloud-ad-item\">\n" +
" <img src=\"https://img.alicdn.com/tfs/TB1nkoQDlv0gK0jSZKbXXbK2FXa-440-240.jpg\"\n" +
" onclick=\"window.open('https://www.aliyun.com/activity/daily/cloud?userCode=njf7bpon')\">\n" +
" </div>\n" +
" <div class=\"blog-cloud-ad-item\">\n" +
" <img src=\"https://upload-dianshi-1255598498.file.myqcloud.com/345-60759ea0b2a21d3d1c764570c2a9f2960bfdf128.200.jpg\"\n" +
" onclick=\"window.open('https://url.cn/OLi4lNzq')\">\n" +
" </div>";
//頁面ICON
let defStaticIco = "https://cjunn.gitee.io/blog_theme_atum/img/body/miao.ico"
//數學公式是否開啟
let openMathJax=false;
上方是可配置的參數目前的默認參數值。可以根據目前自己所需要的修改相關參數值，然后設置進全局參數__BLOG_CONFIG__中。
部署后效果
具體效果可至 點我跳轉 查看。
新增特性
1.相對1.0版本，該版本只要做JS引入就可以立刻構建出相應主題，無需做任何配置項必填。
2.新增style1風格可選，該風格更加偏向小清新。
3.修改API接口為獨立模塊來應對常變動的博客園接口問題。
最后
- 開源地址Gitee、Github，求些小星星嗯。
- 感謝 @YJLAugus 在該主題不斷代碼迭代的時候提供的寶貴意見。
- 另外如果需要進行主題反饋請至反饋
- 源碼目前已開源、方便具有開發經驗的人進行二次開發、但懇請您二次開發時能夠保留相應的作者信息。
- 如果你有多余的RMB的話，可以賞我吃顆糖么。
- 如果您贊賞了我，請在支付寶或微信上留下博客園ID號，讓我知道你嗯。
