elelogger：一款明快的博客園主題

<!-- run -->
<div id="highlights">
  <div class="inner">
    <div class="point">
      <div>功能豐富</div>
      <p>風格簡約但功能豐富，提供三種代碼高亮方案，提供導航大綱，提供黑夜模式，提供魔法注釋，適配移動端。</p>
    </div>
    <div class="point">
      <div>易用易改</div>
      <p>基於模塊化開發，顏色全局定義，對頁面加載速度進行了優化，提供源碼和注釋，方便管理和修改。</p>
    </div>
    <div class="point">
      <div>平台優勢</div>
      <p>對比自建博客，博客園的SEO效果做的更好。對比思否、知乎專欄等平台，博客園的自由度更高。</p>
    </div>
  </div>
</div>
<style>
  #highlights {
    font-size: 14px;
  }
  #highlights .inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
  }

  #highlights .point div {
    color: #409eff;
    font-size: 1.5em;
    font-weight: 400;
    margin: 0;
    padding: 0.5em 0;
  }

  #highlights .point {
    width: 30%;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    padding: 0 2em;
  }

  @media screen and (max-width: 600px) {
    #highlights .point {
      display: block;
      margin: 0 auto;
      width: 300px;
      padding: 0 40px 30px;
    }
  }
</style>

eleLogger 簡潔的博客園主題 一個好看的博客園主題 博客園主題美化_定制 重新定義博客園 適合記錄前端_算法的博客

如何使用

1. 申請 JS 權限（申請理由填“美化博客園主題”）
2. 在設置界面中選擇博客皮膚為 Custom（注意要勾選禁用模板默認 CSS）
3. 在頁面定制 CSS 代碼，頁首 HTML 代碼和頁腳 HTML 代碼的多行表單處復制壓縮包內的代碼
4. 進入你的博客園主頁，Ctrl + F5或Command + Shift + R強制刷新。

主題細節

本主題布局結構十分簡潔，對於隨筆頁，僅包含下面三個部分。

• 頂部菜單欄
• 懸浮按鈕區
• 側邊欄

頂部菜單欄

右上角的頂部菜單為博客園的原生連接。

懸浮按鈕區

右下角有五個懸浮按鈕，當滾輪向上滑動或者手指向下滑動時，會出現這些按鈕。其功能如下。

1. 返回頂部 （只有返回頂部才能看到頂部菜單欄...）
2. 切換全屏 （適用於閱讀很寬的代碼，如Java/ HTML）
3. 切換主題 （黑夜模式參考 Atom 編輯器的配色）
4. 切換高亮 （默認為 Vscode 的代碼高亮）
5. 切換側邊 （PC 端首次加載默認打開側邊欄，移動端默認關閉側邊欄，緩存僅對 PC 端有效）

側邊欄

側邊欄的風格參考自 Typora(一款優秀的跨平台 Markdown 編輯工具)

• 通過查看大綱，你可以時時掌握閱讀進度或者跳到指定內容
  • 當博客存在二級、三級標題時，會默認顯示大綱視圖。
• 通過查看文件，你可以找到所有的隨筆。
  • 原博客園控件被整合到隨筆檔案。
    • 隨筆評論 和 我的標簽以單獨的頁面進行展示
    • 最新隨筆、積分與排名等以通知的形式進行展示
  • 常用連接可自定義自己收藏的網址（目前僅支持通過修改源碼的方式修改）。
  • 若標簽名以_開頭，則標簽不會展示在側邊欄，如 _office 使用小技巧。通過這種方法，你可以隱藏標簽，防止側邊欄過亂。通過我的標簽可以查看所有標簽，點擊我的標簽或我的標簽（不顯示）可進入標簽管理界面。

隨筆正文

關於正文的樣式，可以查看這個連接：博客園對.md 的支持

本主題的代碼倉庫地址為github/eleLogger，你可以進行二次開發。

<!-- run -->
<div id="advanced">
  <el-alert title="若想了解本主題的高級功能，可繼續往下閱讀" :effect="effect" type="info"> </el-alert>
</div>
<script>
  const vue = new Vue({
    el: '#advanced',
    data: {
      effect: g.theme,
    },
  })
  $(document).on('themeChange', function (e, data) {
    vue.effect = data
  })
</script>

魔法注釋

魔法注釋的靈感來源於Jupyter記事本的魔法函數，其目的在於規范和簡化博客書寫。

在 JS 中使用

對於 JS 代碼來說，只要在開頭聲明一行// log，博客將自動將console.log的輸出結果展示在代碼的下面，比如：

// 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的例子：

<!-- run -->
<button id="async-btn">我是#async-btn，點我進行測試</button>

$('#async-btn').click(function () {
  // log-async
  console.log('Hello')
})

$.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('啊偶，兩個接口都失效了...')
      })
  })

不同的執行代碼塊是互不干擾的，各有各的變量作用域，下面是一個例子。

// log
function Person() {
  this.name = '張三'
}
console.log(new Person())

// log
console.log(new Person())

如果要建立兩個代碼塊之間的通信，可以通過全局對象來傳遞，這里不做演示。此外有一點需要注意，對於 JS 代碼錯誤，頁面只打印錯誤概要，完整的 stack 信息則需要查看控制台。

除了// log，還有另外兩個 JS 的魔法注釋：

• 如果你只想靜默執行一段 JS，使用// run
• 如果你想展示代碼 + 執行代碼，但是用不到輸出，使用// no-log

```js
// run
console.warn('run')
```

```js
// no-log
console.warn('no-log')
```

效果如下

// run
console.warn('run')

// no-log
console.warn('no-log')

在 HTML 中使用

盡管博客園隨筆頁的 Markdown 支持 HTML，但是當要將代碼 和 效果同時展現時，你需要復制一次重復的代碼。

<div id="content">some content...</div>
<style>
  #content {
    color: red;
  }
</style>

```html
<div id="content">some content...</div>
<style>
  #content {
    color: red;
  }
</style>
```

而在本主題中，只需要在 html 代碼中寫入 <!-- log -->，就無需復制相同的代碼了，下面是一個例子

<!-- log -->
<div class="tri"></div>
<style>
  .tri {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 100px;
    border-color: transparent;
    border-right-color: #409eff;
  }
</style>

默認情況下，預覽效果會出現在上面。你也可以使用<!-- log-after -->

<!-- log-after -->
<div class="tri"></div>

如果不想展示html代碼，使用<!-- run -->。

```html
<!-- run -->
<a href="http://www.baidu.com">百度一下，你就知道</a>
```

效果如下：

<!-- run -->
<a href="http://www.baidu.com">百度一下，你就知道</a>

當你想為某個隨筆頁引入額外的第三方 JS 庫時可以使用<!-- script -->。這種按需引入方式僅對當前隨筆有效。通常配合// log使用，方便記錄一些 JS 庫的筆記。

<!-- script -->
<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.27.0/moment.min.js"></script>

// log
console.log(_.last([1, 2, 3]))
console.log(_.camelCase('hello world'))

let x = moment([2016, 11, 24]).fromNow()
console.log(x)

需要注意：

• 一個隨筆頁應當只有一個含有<!-- script -->魔法注釋的代碼塊。但是你可以導入多個 js 庫，就像上面那樣。
• 當所有的新script加載完畢后，主題才會去執行// log等魔法注釋的代碼。
• 默認情況下會顯示代碼，如果不想顯示，請使用<!-- no-script -->

未完成的博客可以使用<!-- todo -->，這樣會在首部產生一個提示，直接寫在.md文件中即可。

<!-- todo -->

點我進入效果預覽

小結

最后我們對所有的魔法注釋進行小結

魔法注釋	說明	顯示代碼	獨立作用域
// log	輸出結果到頁面	是	是
// log-async	輸出結果到頁面（異步）	是	是
// no-log	不輸出結果	是	是 （但function可提升）
// run	靜默執行	/	是 （但function可提升）
<!-- log -->	輸出 dom 元素到代碼之前	是	/
<!-- log-after -->	輸出 dom 元素到代碼之后	是	/
<!-- run -->	輸出 dom 元素代替原來的位置	/	/
<!-- script -->	臨時擴充 JS 庫	是	/
<!-- no-script -->	臨時擴充 JS 庫	/	/

使用 ElementUI

在.md文件中使用 ElementUI 本質還是使用 JS。下面是一些例子。

自行創建 Vue 實例

可以自行創建 Vue 實例，比如

<!-- 相關代碼如下 -->
<!-- run -->
<div id="progress-container">
  <el-row style="margin-bottom: 10px;">
    <el-col :span="12">
      <el-button style="width: 100%;" icon="el-icon-sunny" type="primary" :disabled="disabled" @click="handleClick(1)"> 增加 </el-button>
    </el-col>
    <el-col :span="12">
      <el-button style="width: 100%;" icon="el-icon-light-rain" type="danger" :disabled="!disabled" @click="handleClick(0)"> 減少 </el-button>
    </el-col>
  </el-row>
  <el-row>
    <el-col v-for="(item, index) in arr" :key="index" :span="6" style="text-align: center">
      <el-progress type="dashboard" :percentage="item.num" :status="item.status" :color="item.color"> </el-progress>
    </el-col>
  </el-row>
</div>

// 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 文件中按照如下格式書寫即可

<div id="just_a_button">
  <el-button>按鈕</el-button>
</div>

```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 實例，可用於提示等功能。

<!-- log -->
<button id="test_msg">點我測試消息提示功能</button>
<script>
  $('#test_msg').click(function () {
    ele.$message({
      message: '恭喜你，這是一條成功消息',
      type: 'success',
    })
  })
</script>

博客園默認禁用了window.alert()，本博客將其還原了

<!-- log -->
<button id="test_alert">test_alert</div>
<script>
$('#test_alert').click(function(){
  // 基於window.ele對象
  alert('用elementUI模擬 alert')
})
</script>

預置的 UI 組件

除了 ElementUI 自帶的 UI 組件外，本主題還增加了一些新的組件，其效果和使用方法如下。

<!-- log -->
<div id="download"></div>
<script>
  new DownloadComponent({
    el: '#download',
    href: 'https://codeload.github.com/oceans-pro/eleLogger/zip/master',
    title: '本項目源代碼',
    version: 'latest',
  })
</script>

相關建議

分類和標簽的選擇
博客系統一般有分類和標簽用以構建知識體系。兩者和隨筆之間均可構成多對多的關系，差別並不是很大。考慮到標簽更為靈活，本主題更推薦使用標簽。對於系列文章，將放到分類，並遵循一對多的約定（盡管可以不遵循）。比如博客園美化系列教程

快速發布
博客園的在線 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

<!-- run -->
<style>
#comment_form{
    display:none;
}
</style>