部落格園好像更新了，正在修復中。。

eleLogger 簡潔的部落格園主題 一個好看的部落格園主題 部落格園主題美化_定製 重新定義部落格園 適合記錄前端_演算法的部落格

功能豐富

風格簡約但功能豐富，提供三種程式碼高亮方案，提供導航大綱，提供黑夜模式，提供魔法註釋，適配移動端。

易用易改

基於模組化開發，顏色全域性定義，對頁面載入速度進行了優化，提供原始碼和註釋，方便管理和修改。

平臺優勢

對比自建部落格，部落格園的SEO效果做的更好。對比思否、知乎專欄等平臺，部落格園的自由度更高。

## 如何使用 1. 申請 JS 許可權（申請理由填“美化部落格園主題”） 2. 在[設定介面](https://i.cnblogs.com/settings)中選擇部落格面板為 `Custom`（注意要勾選禁用模板預設 CSS） 3. 在`頁面定製 CSS 程式碼`，`頁首 HTML 程式碼`和`頁尾 HTML 程式碼`的多行表單處複製[壓縮包內的程式碼](https://files-cdn.cnblogs.com/files/oceans/eleLogger.zip) 4. 進入你的部落格園主頁，`Ctrl + F5`或`Command + Shift + R`強制重新整理。 ## 主題細節 本主題佈局結構十分簡潔，對於隨筆頁，僅包含下面三個部分。 - 頂部選單欄 - 懸浮按鈕區 - 側邊欄 ### 頂部選單欄 右上角的頂部選單為部落格園的原生連線。如果你是部落格園老使用者，自然知道他們是幹什麼的。 ### 懸浮按鈕區 右下角有五個懸浮按鈕，當`滾輪向上滑動`或者`手指向下滑動`時，會出現這些按鈕。其功能如下。 1. 返回頂部 （只有返回頂部才能看到頂部選單欄...） 2. 切換全屏 （適用於閱讀很寬的程式碼，如`Java/ HTML`） 3. 切換主題 （黑夜模式參考 `Atom` 編輯器的配色） 4. 切換高亮 （預設為 `Vscode` 的程式碼高亮） 5. 切換側邊 （PC 端首次載入預設開啟側邊欄，移動端預設關閉側邊欄，`快取`僅對 PC 端有效） ### 側邊欄 側邊欄的風格參考自 `Typora`(一款優秀的跨平臺 Markdown 編輯工具) - 通過檢視`大綱`，你可以時時掌握閱讀進度或者跳到指定內容 - 當部落格存在二級、三級標題時，會預設顯示大綱檢視。 - 通過檢視`檔案`，你可以找到所有的隨筆。 - 原部落格園控制元件被整合到`隨筆檔案`。 - [隨筆評論](https://www.cnblogs.com/oceans/RecentComments.html) 和 [我的標籤](https://www.cnblogs.com/oceans/tag/)以單獨的頁面進行展示 - 最新隨筆、積分與排名等以通知的形式進行展示 - `常用連線`可自定義自己收藏的網址（目前僅支援通過修改原始碼的方式修改）。 - 若標籤名以`_`開頭，則標籤不會展示在側邊欄，如 [\_office 使用小技巧](https://www.cnblogs.com/oceans/tag/_office使用小技巧/)。通過這種方法，你可以隱藏標籤，防止側邊欄過亂。通過[我的標籤](https://www.cnblogs.com/oceans/tag/)可以檢視所有標籤，點選`我的標籤`或`我的標籤（不顯示）`可進入標籤管理介面。 ### 隨筆正文 關於正文的樣式，可以檢視這個連線：[部落格園對.md 的支援](https://www.cnblogs.com/oceans/p/md.html) 本主題的程式碼倉庫地址為[github/eleLogger](https://github.com/oceans-pro/eleLogger/)，你可以進行二次開發。 ```js // run const vue = new Vue({ el: '#advanced', data: { effect: g.theme, }, }) $(document).on('themeChange', function (e, data) { vue.effect = data }) ``` ## 魔法註釋 `魔法註釋`的靈感來源於`Jupyter`記事本的`魔法函式`，其目的在於規範和簡化部落格書寫。 ### 在 JS 中使用 對於 JS 程式碼來說，只要在開頭宣告一行`// log`，部落格將自動將`console.log`的輸出結果展示在程式碼的下面，比如： ```js // log function logPrimitive() { console.log(undefined) console.log(null) console.log(true) console.log(123456) console.log('Hello world!') } logPrimitive() var arr = [1, '2', null] console.log(arr) var obj = { username: 'oceans', password: 123456, pets: ['dog1', 'dog2', { type: '蜜桃貓', age: 3 }], } console.log(obj) console.log(logPrimitive) ``` 這一功能省去了在寫部落格時手動複製控制檯輸出結果這一步驟，可以更加高效地進行部落格寫作。輸出結果的樣式參考自`Chrome`的控制檯，不同的資料型別輸出顯示的顏色不同，輸出結果有黑夜和白天兩種模式。 `// log`僅適用於同步方法，對於非同步方法，需要注意： - 使用`// log-async`代替`// log` - 對位置有要求，需要放在回撥函式中，`console.log`之前 下面是些`// log-async`的例子： 我是#async-btn，點我進行測試 ```js $('#async-btn').click(function () { // log-async console.log('Hello') }) ``` ```js $.get('https://api.github.com/search/repositories?q=PDE-net&sort=starts&per_page=2') .done(function (data) { const list = data.items.map((item) => ({ 專案名稱: item.name, 地址: item.html_url, 星星數: item.stargazers_count, 描述: item.description, 程式語言: item.language, })) // log-async console.log('學習偏微分方程') // log-async console.log(list) }) .fail(function () { // log-async console.log('啊偶，你好像無法訪問國外網站，更換為國內地址...') $.ajax('https://api.apiopen.top/musicRankingsDetails?type=1') .done(function (data) { const list = data.result .map((item) => ({ 歌名: item.title, 熱度: item.hot * 1, })) .splice(0, 2) // log-async console.log(list) }) .fail(function () { // log-async console.log('啊偶，兩個介面都失效了...') }) }) ``` 不同的執行程式碼塊是互不干擾的，各有各的變數作用域，下面是一個例子。 ```js // log function Person() { this.name = '張三' } console.log(new Person()) ``` ```js // log console.log(new Person()) ``` 如果要建立兩個程式碼塊之間的通訊，可以通過全域性物件來傳遞，這裡不做演示。此外有一點需要注意，對於 JS 程式碼錯誤，頁面只打印錯誤概要，完整的 stack 資訊則需要檢視控制檯。 除了`// log`，還有另外兩個 JS 的魔法註釋： - 如果你只想靜默執行一段 JS，使用`// run` - 如果你想`展示程式碼` + `執行程式碼`，但是用不到輸出，使用`// no-log` ````markdown ```js // run console.warn('run') ``` ```js // no-log console.warn('no-log') ``` ```` 效果如下 ```js // run console.warn('run') ``` ```js // no-log console.warn('no-log') ``` ### 在 HTML 中使用 儘管部落格園隨筆頁的 Markdown 支援 HTML，但是當要將`程式碼` 和 `效果`同時展現時，你需要複製一次重複的程式碼。 ````md some content... ```html some content... ``` ```` 而在本主題中，只需要在 html 程式碼中寫入 ``，就無需複製相同的程式碼了，下面是一個例子 ```html ``` 預設情況下，預覽效果會出現在上面。你也可以使用`` ```html ``` 如果不想展示`html`程式碼，使用``。 ````md ```html 百度一下，你就知道 ``` ```` 效果如下： ```html 百度一下，你就知道 ``` 當你想為某個隨筆頁引入額外的第三方 JS 庫時可以使用``。這種`按需`引入方式僅對當前隨筆有效。通常配合`// log`使用，方便記錄一些 `JS 庫`的筆記。 ```html ``` ```js // log console.log(_.last([1, 2, 3])) console.log(_.camelCase('hello world')) let x = moment([2016, 11, 24]).fromNow() console.log(x) ``` 需要注意： - 一個隨筆頁應當只有一個含有``魔法註釋的程式碼塊。但是你可以匯入多個 js 庫，就像上面那樣。 - 當所有的新`script`載入完畢後，主題才會去執行`// log`等魔法註釋的程式碼。 - 預設情況下會顯示程式碼，如果不想顯示，請使用`` 如果你的部落格未完成，可以使用``來進行標記以提醒讀者。該註釋應直接放在`.md`檔案中，如 ```md ``` [點我進入效果預覽](https://www.cnblogs.com/oceans/p/ide.html) ### 小結 最後我們對所有的魔法註釋進行小結 | 魔法註釋 | 說明 | 顯示程式碼 | 獨立作用域 | | -------------------- | --------------------------- | -------- | ---------- | | `// log` | 輸出結果到頁面 | 是 | 是 | | `// log-async` | 輸出結果到頁面（非同步） | 是 | 是 | | `// no-log` | 不輸出結果 | 是 | / | | `// run` | 靜默執行 | / | / | | `` | 輸出 dom 元素到程式碼之前 | 是 | / | | `` | 輸出 dom 元素到程式碼之後 | 是 | / | | `` | 輸出 dom 元素代替原來的位置 | / | / | | `` | 臨時擴充 JS 庫 | 是 | / | | `` | 臨時擴充 JS 庫 | / | / | |`` |用在.md檔案中，標記部落格未完成 |/ |/ | ## 使用 ElementUI 在`.md`檔案中使用 ElementUI 本質還是使用 JS。下面是一些例子。 ### 自行建立 Vue 例項 可以自行建立 Vue 例項，比如 ```html 增加 減少 ``` ```js // run new Vue({ name: 'progress', el: '#progress-container', data: { arr: [], arr0: [ { num: 5, status: 'exception', color: '#f56c6c' }, { num: 25, status: 'warning', color: '#e6a23c' }, { num: 50, status: null, color: '' }, { num: 75, status: null, color: '#13ce66' }, ], arr1: [ { num: 25, status: 'exception', color: '#e6a23c' }, { num: 50, status: null, color: '#20a0ff' }, { num: 75, status: null, color: '#13ce66' }, { num: 100, status: 'success', color: 'purple' }, ], }, created() { this.arr = this.arr0 this.disabled = false }, methods: { handleClick(flag) { this.disabled = !this.disabled if (flag) { this.arr = this.arr1 } else { this.arr = this.arr0 } }, }, }) ``` 只需要在.md 檔案中按照如下格式書寫即可 ````md 按鈕 ```js // run new Vue({ name: 'just_a_button', el: '#just_a_button', data: {}, created: {}, }) ``` ```` 詳情請參考 Element 文件 https://element.eleme.cn/#/zh-CN/component/ ### 使用內建的 Vue 例項 主題內部預先建立了一個名為`ele`的 Vue 例項，可用於提示等功能。 ```html 點我測試訊息提示功能 ``` 部落格園預設禁用了`window.alert()`，本部落格將其還原了 ```html test_alert ``` ### 預置的 UI 元件 除了 ElementUI 自帶的 UI 元件外，本主題還增加了一些新的元件，其效果和使用方法如下。 ```html ``` ## 相關建議 **分類和標籤的選擇** 部落格系統一般有`分類`和`標籤`用以構建知識體系。兩者和隨筆之間均可構成`多對多`的關係，差別並不是很大。考慮到標籤更為靈活，本主題更推薦使用`標籤`。對於系列文章，將放到`分類`，並遵循`一對多`的約定（儘管可以不遵循）。比如[部落格園美化系列教程](https://www.cnblogs.com/oceans/category/1838114.html) **快速釋出** 部落格園的線上 Markdown 編輯體驗很差。為此不得不使用本地 Mardown 編輯器。 編輯器推薦 Typora 或者 Vscode，你可以安裝一些第三方外掛讓寫作+部署更加流暢。 - VsCode 外掛 vsc-markdown-image - https://github.com/imlinhanchao/vsc-markdown-image - 將剪下版的圖片複製到本地或第三方網路圖床 - 推薦圖床:coding.net - Typora 外掛 EasyBlogImageForTypora - https://github.com/xiajingren/ - 將剪下版的圖片複製到 cnblog 自帶的網路圖床 - VsCode 外掛 writeCnblog - https://github.com/kotcmm/writeCnblog - 無需複製，就可以在`Vscode的Mardown` 中釋出/修改部落格 - 該外掛存在一定的缺陷，如釋出文章時隨筆的標籤會消失 ## 已知問題 - 由於側邊欄部落格園採用的是 Ajax 載入，當網速過慢時，側邊欄會出現空白期。空白期應該加入提示。 - 考慮到部落格的受眾為追求技術的程式設計師，故本部落格`放棄相容IE`，但是 Edge 仍然相容 本主題仍在更新中，敬請持續關注... ## 參考網址 本主題製作過程中參考瞭如下網站 - https://element.eleme.cn/#/zh-CN/guide/design - https://www.vuepress.cn/guide/ - http://theme.typora.io/ - https://www.cnblogs.com/gshang/ - https://www.cnblogs.com/bndong/ - https://www.cnblogs.com/makergyt - https://www.cnblogs.com/esofar/ - https://www.cnblogs.com/yjlaugus/ - http://sunshiyong.com/ - https://kouss.com/ ## 反饋與建議 本頁面用作主題文件，評論請到[eleLogger_comments.html](https://www.cnblogs.com/oceans/p/eleLogger_comments.html) ```js // run $('#comment_form').remo