文件目录

–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
    主题样式文件

使用主题

代码地址点我♥

  1. 博客园首页 -> 管理 -> 切换旧版后台 -> 设置
  2. 如果使用主题 acglight 请将博客默认皮肤设为 Buildtowin
  3. 复制对应 theme 中 css 粘贴到 页面定制css
  4. 勾选禁用默认css样式
  5. 复制如下粘贴到 博客侧边栏公告(支持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>
  1. 复制下面的 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>
  1. 保存

主题 acg 已完成的功能

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

加入进来

  • 如果你已经自己定义了很多你的博客园样式,你只需要将你的博客代码稍作修改,加入进来!
  • 从零开始!
  • 和我一起优化已有的主题!

    欢迎啊 欢迎啊 欢迎啊

如何做

  1. 你需要在 theme 文件夹下新建主题文件夹如 demo
  2. 新建 demo.js demo.css

    注意js文件名称与文件夹名称一致

  3. 开始你的工作

问题

有任何问题你都可以评论在最后。

版权声明:本文为guangzan原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/guangzan/p/11990887.html