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>