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

眉间皱痕 提交于 2020-08-18 11:39:09

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

专注

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

易用

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

平台

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

如何使用

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

  1. 申请 JS 权限(申请理由填“美化博客园主题”)
  2. 设置界面中选择博客皮肤为 Custom
  3. 页脚 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/



易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!