• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

elelogger:一款明快的博客园主题

开发技术 开发技术 2周前 (09-12) 22次浏览

eleLogger 简洁的博客园主题 一个好看的博客园主题 博客园主题美化_定制 重新定义博客园 适合记录前端_算法的博客

功能丰富

风格简约但功能丰富,提供三种代码高亮方案,提供导航大纲,提供黑夜模式,提供魔法注释,适配移动端。

易用易改

基于模块化开发,颜色全局定义,对页面加载速度进行了优化,提供源码和注释,方便管理和修改。

平台优势

对比自建博客,博客园的SEO效果做的更好。对比思否、知乎专栏等平台,博客园的自由度更高。

如何使用

  1. 申请 JS 权限(申请理由填“美化博客园主题”)
  2. 在设置界面中选择博客皮肤为 Custom(注意要勾选禁用模板默认 CSS)
  3. 页面定制 CSS 代码页首 HTML 代码页脚 HTML 代码的多行表单处复制下面压缩包内的代码
<!-- run -->
<div id="download"></div>
<script>
  new DownloadComponent({
    el: '#download',
    href: 'https://files.cnblogs.com/files/oceans/eleLogger.zip?time=' + new Date().getTime(),
    title: '要复制的三个文件',
    version: 'stable',
  })
</script>
  1. 在选项界面按下图进行勾选

elelogger:一款明快的博客园主题

  1. 进入你的博客园主页,Ctrl + F5Command + Shift + R强制刷新。

主题细节

本主题布局结构十分简洁,对于随笔页,仅包含下面三个部分。

  • 顶部菜单栏
  • 悬浮按钮区
  • 侧边栏

顶部菜单栏

右上角的顶部菜单为博客园的原生连接。如果你是博客园老用户,自然知道他们是干什么的。

悬浮按钮区

右下角有五个悬浮按钮,当滚轮向上滑动或者手指向下滑动时,会出现这些按钮。其功能如下。

  1. 返回顶部 (只有返回顶部才能看到顶部菜单栏…)
  2. 切换全屏 (适用于阅读很宽的代码,如Java/ HTML
  3. 切换主题 (黑夜模式参考 Atom 编辑器的配色)
  4. 切换高亮 (默认为 Vscode 的代码高亮)
  5. 切换侧边 (PC 端首次加载默认打开侧边栏,移动端默认关闭侧边栏,缓存仅对 PC 端有效)

侧边栏

侧边栏的风格参考自 Typora(一款优秀的跨平台 Markdown 编辑工具)

  • 通过查看大纲,你可以时时掌握阅读进度或者跳到指定内容
    • 当博客存在二级、三级标题时,会默认显示大纲视图。
  • 通过查看文件,你可以找到所有的随笔。
    • 原博客园控件被整合到随笔档案
      • 随笔评论 和 我的标签以单独的页面进行展示
      • 最新随笔、积分与排名等以通知的形式进行展示
    • 常用连接可自定义自己收藏的网址(目前仅支持通过修改源码的方式修改)。
    • 若标签名以_开头,则标签不会展示在侧边栏,如 _office 使用小技巧。通过这种方法,你可以隐藏标签,防止侧边栏过乱。通过我的标签可以查看所有标签,点击我的标签我的标签(不显示)可进入标签管理界面。

随笔正文

关于正文的样式,可以查看这个连接:博客园对.md 的支持


本主题的代码仓库地址为github/eleLogger,你可以进行二次开发

// 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的输出结果展示在代码的下面,比如:

// 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').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 不输出结果 /
// run 静默执行 / /
<!-- 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,你可以安装一些第三方插件让写作+部署更加流畅。

已知问题

  • 由于侧边栏博客园采用的是 Ajax 加载,当网速过慢时,侧边栏会出现空白期。空白期应该加入提示。
  • 考虑到博客的受众为追求技术的程序员,故本博客放弃兼容IE,但是 Edge 仍然兼容

本主题仍在更新中,敬请持续关注…

参考网址

本主题制作过程中参考了如下网站

反馈与建议

本页面用作主题文档,评论请到eleLogger_comments.html

// run
$('#comment_form').remove()

喜欢 (0)