自己写了一套博客园主题合集

somboy

2019-12-06

关注关注

文件目录

index.js
readme.md
theme
- acg
  - acg.css
  - acg.js
  - readme.md
- light
  - light.css
  - light.js
  - readme.md
- other themes ...

总体是怎么运行的

index.js
index.js是入口文件，它将用户配置和默认配置合并然后将它放到window对象下，根据用户所选主题加载主题入口文件theme.js
theme.js
使用window对象下的用户配置对象，构建主题
theme.css
主题样式文件

一步步看主题是怎么实现的

所有主题都放在 theme 文件夹下，至少包含一个 js 文件和一个 css 文件, 下面以已存在的主题 acg 为例

acg.js

const userMassage = {
    // 储存用户基本信息
    // 通过DOM获取
};
const urls = {
    // 储存该主题依赖的文件（js css）名称 按需加载
    // 仓库地址 ...
    // 为了访问更快这个主题的依赖都放在了 gitee
};
const icons = {
    // 储存iconfont图标名称  
    // symbol引用  
};
const headerElements = {
    // 储存博客header  DOM元素 
    // 因为我需要给他们批量添加事件 包含移动端和 pc 端的事件
};

class ACG{
    constructor() {
      this.defaultOptions = window.userOptions;   // 拿到window下的用户配置
      this.v = 'v1.0.0';  // version
    }

    // ------- 初始化 ----
    init() {
        // 调用loadFiles加载必须依赖如iconfont文件
        // 根据客户端和当前页面名称调用对应方法构建页面
    }

    // ---------- tools --------
    get pageName() {
       // 储存函数  返回当前页面名称
       // 包含主页 随笔页 标签页 ...
       // 在 init 函数中判断，当进入这些页面时执行对应的方法
    }

    get userAgent() {
       // 储存函数  返回当前用户的客户端 
       // 包含  PC  手机  ...
       // 在 init 函数中判断并执行对应的方法
    }

    loadFiles() {
        // 加载依赖文件
    }

    iconInSvg(icon) {
        // 根据传入的 icons.xxx 返回对应的 <svg>
    }

    // Other instrumental functions.

    // ------构建博客的函数-------
    setHeader() {
        // do something for setting header.
    }

    // Other functions that build blog.
}

// 实例化类并调用初始化方法
new ACG().init();

关于全局主题颜色

使用css自定义属性即可很方便做到，js 根据用户配置的颜色值插入样式

:root {
  --themeColor: color ；
  /* Other custom properties */
}
/* 其他 css 通过 var(--themeColor) 来使用它 */

关于图标

symbol 引用支持多色图标，可通过 css 代码代码改变样式，较灵活，缺点是仅支持 ie9+

需要引入生成的 iconfont js文件
这样使用

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

详细使用步骤见点这里

关于音乐播放器

使用网易云音乐的 iframe
- 配置简单，使用方便
- 不够灵活
使用 APlayer 插件，地址见点这里
- 配置多样
- 需要加载依赖

主题acg已完成的功能

移动端适配
音乐
首页改版
代码样式优化
代码复制按钮
代码行号
文章目录
自定义全局主题色
友情链接
顶部进度条
评论优化
...

如何使用主题

博客园首页 -> 管理 -> 切换旧版后台 -> 设置
如果使用主题 acg 或 light 请将博客默认皮肤设为 Buildtowin
复制对应 theme 中 css 粘贴到 页面定制css
勾选禁用默认css样式
复制如下粘贴到 博客侧边栏公告（支持HTML代码）（支持 JS 代码）

<script src="https://guangzan.gitee.io/awescnb-files/js/flexible.min.js"></script>
    <script src="https://github923665892.github.io/awesCnb-G/index.js"></script>
    <script>$.awesCnb({
                // 主题
                theme: {
                    name: 'acg',  // 'acg' (默认) | 'light' | 待添加
                    color: '#FFB3CC'  // #FFB3CC （默认）  | random
                },
                // 代码高亮
                highLight: {
                    type: 'atomOneDark' // 'atomOneDark' （默认） | 'atomOneLight' | 'github'
                },
                // 代码行号
                lineNumbers: {
                    enable: true  // true (默认) | false
                },
                // 文章目录
                catalog: {
                    enable: true  // true (默认) | false
                },
                // 音乐播放器
                musicPlayer: {
                    enable: true,  // true (默认) | false
                    type: 'APlayer'    // 'APlayer' （默认） | 'iframe'
                },
                // 底部友情链接
                links: [
                    {
                    name: 'theme awesCnb',
                    link: 'https://github.com/github923665892/awesCnb-G'
                    }
                ]
            });
    </script>

复制下面的 html 粘贴到 页首HTML

<section id='loading'>
     <div class="sk-fold">
         <div class="sk-fold-cube"></div>
         <div class="sk-fold-cube"></div>
         <div class="sk-fold-cube"></div>
         <div class="sk-fold-cube"></div>
      </div>
</section>