ele-cnblog 一款使用了ElementUI的博客园主题

专注

eleBlog的宗旨是让阅读更加专注。提供三种代码高亮方案，提供大纲用于阅读导航，提供黑夜模式。

易用

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

平台

对比自己搭建博客，博客园的百度SEO效果做的更好。对比Segmentfault等平台，博客园的自由度更高。

如何使用

你仅需要三步就可以使用本主题

申请 JS 权限（申请理由填“美化博客园主题”）
在设置界面中选择博客皮肤为 Custom
在页脚 HTML 代码处复制如下代码

<!--********************************************* 要最先运行的JS ***********************************************-->
<script>
  // 我们要让其最先加载，所以不要使用 $(document).ready()
  // -- 图标
  $('#favicon').replaceWith('<link rel="shortcut icon" href="https://blog-static.cnblogs.com/files/oceans/favicon.ico">')
  // -- ajax监听
  window.ajaxStorage = []
  $(document).ajaxComplete(function (event, xhr, option) {
    var item = {}
    item.url = option.url
    if (window.isBundleJSCome) {
      // 后来的请求可以被监听到，需要在bundle.js调用ajaxListener
      item.later = true
      $(document).trigger('ajax-later', item) // 传递item的引用
    } else {
      item.later = false
    }
    item.event = event
    item.xhr = xhr
    item.option = option
    item.time = new Date()
    window.ajaxStorage.push(item) // 简单备份下
  })
</script>
<!--********************************************* HTML ***********************************************-->
<section class="oceans-sou">
  <!--  友情链接 -->
  <a href="https://100jiancai.cn">潍坊百年建材</a>
</section>
<!--********************************************* CSS ***********************************************-->
<link rel="stylesheet" href="https://blog-static.cnblogs.com/files/oceans/vscode.css" title="code-theme" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" />
<link rel="stylesheet" href="https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.css" />
<script>
  // 防止七牛云缓存，增加时间戳
  var href1 = 'https://oceans.100jiancai.cn/style.css?time=' + new Date().getTime()
  $('head').append('<link rel="stylesheet" href="' + href1 + '">')
  var href2 = 'https://oceans.100jiancai.cn/main.css?time=' + new Date().getTime()
  $('head').append('<link rel="stylesheet" href="' + href2 + '">')
</script>
<!--********************************************* JavaScript ***********************************************-->

<!-- Vue, 请注意在开发时切换为Vue的Debug版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<!-- UI框架 -->
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>
<!-- cookie -->
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<!-- 组件美化 -->
<!--<script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>-->
<script src="https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.js"></script>
<script src="https://blog-static.cnblogs.com/files/oceans/scroll-spy.js"></script>
<!-- 站长统计，请切换为你自己的 -->
<div style="display: none;">
  <script type="text/javascript" src="https://s9.cnzz.com/z_stat.php?id=1279140987&web_id=1279140987"></script>
</div>
<script>
  // IIFE
  ;(function () {
    // \script需要加转义
    var src = 'https://oceans.100jiancai.cn/bundle.js?time=' + new Date().getTime()
    $('head').append('<script type="text/javascript" src="' + src + '"><\/script>')
  })()
</script>
<!--*********************************************
说明：
1. 目前main.css和bundle.js均为动态导入的，放在七牛云/Gitee/Coding中。
2. 这样做的好处是：方便开发：利用node脚本一键部署，不必每次改完代码都要在博客园页脚处复制一次。
3. 这样做的坏处是：CSS加载时间延后，如果你网速很慢，初始加载页面效果不佳
4. 解决方法也很简单，当你确定不再有开发（自定义）需求时，将 main.css的内容直接复制到页面定制 CSS 代码 处即可（https://i.cnblogs.com/settings）
5. 特别是:root{ display:none }
***********************************************-->

如果你有二次开发的需求，可以下载本博客主题的源码版本。

$(document).ready(function () {
  var x = new MyDownloadComponent({
    el: '#download',
    href: 'https://codeload.github.com/oceans-pro/eleBlog/zip/master',
    title: 'eleBlog-src',
    version: '1.0',
  })
  console.log(x.$vue)
})

主题细节

全屏模式

进入全屏模式后，会有两个附加变化

代码区域的字号变大
正文内容充满整个页面，左右两侧的留白变少

你可以点击右下角的第二个按钮来进行切换为全屏模式

黑夜模式

你可以点击右下角的第三个按钮来进行切换，默认主题为白天。

代码高亮

目前支持的三款主题分别为：

vscode
atom
solarized

默认情况下，代码区域右上角会显示语言类型，当鼠标移动到代码区域内，则会显示快捷复制（仿 CSDN）的按钮。

你可以点击右下角第四个按钮来进行切换，默认主题为vscode，主题设置未进行缓存。

使用 Vue

在.md文件中使用 Vue 本质上是使用 JS。关于如何在博客园的 Markdown 中使用 JS，你可以参考博客园在markdown中使用js

// todo

高效发布

VsCode 插件
Typora 插件
// todo

已知问题

目前已知问题如下，

侧边栏出现滚动条时，在侧边栏滚动会卡顿。之后应该将文件,大纲固定住不滑动。
在 Edge 上切换侧边栏会卡顿，chrome 则无该问题
在 Edge 上点击大纲的标题会卡顿，chrome 则无该问题
在手机端的夸克浏览器浏览会出现样式问题，推荐使用其他浏览器如 QQ 浏览器、华为浏览器等
黑夜模式部分颜色有些不太和谐，考虑到白天主题更常用，这个后续有时间再修改。

本主题仍在更新中..

参考网站

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

[1] https://element.eleme.cn/#/zh-CN/guide/design
[2] https://www.cnblogs.com/gshang/
[3] http://sunshiyong.com/2018/05/13/tree-win/#comments
[3] https://www.vuepress.cn/guide/
[4] http://theme.typora.io/

lblog_lufowbjl

eleBlog：一款简洁明快的博客园主题