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)
})