1. 技术文章
  2. 分享几套不一样的博客园皮肤 ？

分享几套不一样的博客园皮肤 ？

由 ε祈祈猫儿з 提交于 2020-02-03 18:08:48

产生

    博客园第三方主题数不胜数，或者你肯定也为你的博客园作了一些优化。接下来无论如何你都可以将你已经存在的代码稍作修改（无非就是建一个文件夹，修改一下文件名）加入这个仓库，安装过的人都可以互相共享主题样式。ok，先放个效果GIF，如果有兴趣请往下看吧，笔芯。

当然还可以切换更多全局主题，它在不断扩充！

介绍

    awesCnb 是多套主题的合集，可以快速切换多套主题，安装（所谓安装就是几次复制粘贴）后，只需要在博客园设置页面更改 name 的值就能直接切换整套主题。

  • 风格变化莫测（因为你可以快速切换多套主题）
  • 根据配置加载 （没有使用的插件不会加载）
  • 安装后静静享受更新
  • 兼容性强（通过 gulp 自动处理 js css）
  • 访问快速 （代码部署在 码云 而不是 GitHub，你看我的博客导航栏有个大大的 GitHub 链接，其实点击去是 Gitee码云 ）
  • 易于安装
  • 大量的可选配置
  • 都是废话我不啰嗦了

安装

这个过程看起来很长，其实只是简单的复制粘贴，我写的足够详细每个人都能够安装它，哪怕你刚刚注册博客园！

  1. 你的博客首页 -> 管理 -> 设置
  2. 设置博客默认皮肤为 Custom
  3. 复制如下 css 粘贴到 页面定制 css
:root{--sk-size:60px;--sk-color:#ffb3cc}
#home{display:none}
#loading{position:fixed;top:0;left:0;right:0;height:100vh;display:flex;justify-content:center;align-items:center;background-image:url(https://guangzan.gitee.io/awescnb/assets/images/background/cell.gif);z-index:99999}
.sk-fold{width:var(--sk-size);height:var(--sk-size);position:relative;transform:rotateZ(45deg)}
.sk-fold-cube{float:left;width:50%;height:50%;position:relative;transform:scale(1.1)}
.sk-fold-cube:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sk-color);animation:sk-fold 2.4s infinite linear both;transform-origin:100% 100%}
.sk-fold-cube:nth-child(2){transform:scale(1.1) rotateZ(90deg)}
.sk-fold-cube:nth-child(4){transform:scale(1.1) rotateZ(180deg)}
.sk-fold-cube:nth-child(3){transform:scale(1.1) rotateZ(270deg)}
.sk-fold-cube:nth-child(2):before{animation-delay:.3s}
.sk-fold-cube:nth-child(4):before{animation-delay:.6s}
.sk-fold-cube:nth-child(3):before{animation-delay:.9s}
@keyframes sk-fold{
0%,10%{transform:perspective(140px) rotateX(-180deg);opacity:0}
25%,75%{transform:perspective(140px) rotateX(0);opacity:1}
100%,90%{transform:perspective(140px) rotateY(180deg);opacity:0}}
  1. 禁用默认 css 样式
  2. 复制如下 js 粘贴到 博客侧边栏公告（支持 HTML 代码） （支持 JS 代码） 没开通 js 权限请先开通
    <script src="https://guangzan.gitee.io/awescnb/index.js"></script>
    <script>$.awesCnb({
                theme: {
                    name: 'reacg',  // 在这里配置全局主题
                }
            });
    </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>

切换全局主题

安装完之后，过了很久，难免喜新厌旧。这一套主题玩够了，ok，接下来打开设置，将 theme 对象下的 name 的值修改一下( 你可以看上面 安装中的 js )，点击保存，重新进入你的博客。Oh my God！你换了一整套新的皮肤！

大量的可选配置

如果你迫不及待想要加入进来那么请你直接跳过这部分，通过 文章目录 转到下方 项目目录 吧！

theme（全局主题）

名称 类型 可选值 默认值 描述
name String 'acg' 'gshang' 'light' 'reacg' 'acg' 全局主题
color String 所有色值 '#FFB3CC' 全局主题色
avatar String 图片链接 '' 头像
headerBackground String 图片链接 '' 头部背景图

live2d（模型）

名称 类型 可选值 默认值 描述
enable Boolean true false true 是否启用
page String 'index' 'post' 'all' 'all' 生效页面
agent String 'pc' 'mobile' 'all' 'all' 生效用户端
model String 见下方 'random' 模型
width Number 图片链接 150 头像
height Number 图片链接 200 头像
position String 'left' 'right' 'right' 头像

model

  • chitose
  • epsilon2_1
  • haru-01
  • haru-02
  • hijiki
  • izumi
  • shizuku
  • tororo
  • 小埋
  • ....

太多了，我歇（写）不过来了，我把她们统统施了魔法，放进 CDN 了，干脆像我一样设为随机显示吧，它不会阻塞加载你的博客。如果你非要知道还有哪些指定的 model 可供你使用，日后再说，这不是重点。

musicPlayer（音乐播放器）

名称 类型 可选值 默认值 描述
enable Boolean true false true 是否启用
page String 'index' 'post' 'all' 'all' 生效页面
agent String 'pc' 'mobile' 'all' 'all' 生效用户端
autoplay Boolean true false false 自动播放
audio Array [{}] [{}] 音乐

click（点击特效）

名称 类型 可选值 默认值 描述
enable Boolean true false true 是否启用
page String 'index' 'post' 'all' 'all' 生效页面
agent String 'pc' 'mobile' 'all' 'all' 生效用户端
auto Boolean true false false 进入页面自动产生特效
colors Array [] [] 颜色列表

topProgress（头部进度条）

名称 类型 可选值 默认值 描述
enable Boolean true false true 是否启用
page String 'index' 'post' 'all' 'all' 生效页面
agent String 'pc' 'mobile' 'all' 'all' 生效用户端
background String 所有色值 '#FFB3CC' 背景色
height String [] '5px' 高度

github（github图标）

名称 类型 可选值 默认值 描述
enable Boolean true false true 是否启用
background String 所有色值 '#000' 颜色
url Number 图片链接 200 链接

postSignature（随笔签名）

名称 类型 可选值 默认值 描述
enable Boolean true false true 是否启用
content Array [''] [''] 颜色

imagebox（图片灯箱）

名称 类型 可选值 默认值 描述
enable Boolean true false true 是否启用

highLight （代码高亮）

名称 类型 可选值 默认值 描述
type String 'atomOneDark' 'atomOneLight' 'github' 'atomOneDark' 类型

lineNumbers（代码行号）

名称 类型 可选值 默认值 描述
enable Boolean true false true 是否启用

catalog（文章目录）

名称 类型 可选值 默认值 描述
enable Boolean true false true 是否启用
position String 'sidebar' 'left' 'right' left 位置

back2top（返回顶部）

名称 类型 可选值 默认值 描述
enable Boolean true false true 是否启用

links（底部链接）

名称 类型 可选值 默认值 描述
links Array [{name: '', link: ''}] 本仓库链接 是否启用

各主题当前支持的配置项

当然不是所有主题都支持所有配置的，目前我一个人精力有限，不过大多数配置都覆盖了。

reacg

  • theme
  • live2d
  • click
  • topProgress
  • musicPlayer
  • github
  • catalog

acg

  • catalog > position x
  • 其他支持

gshang

  • theme
  • live2d
  • click
  • topProgress
  • musicPlayer

light

  • live2d
  • click
  • topProgress
  • musicPlayer
  • theme > avatar x headerBackground x
  1. 保存

目录

  • docs 文档
  • assets 所有插件、依赖
  • index.js 入口
  • theme 存放不同主题
    • acg 一套主题
      • acg.css 主题样式文件
      • acg.js 构建主题的 js
    • light 一套主题
      • light.css
      • light.js
    • ...
  • package 打包生成

如何运行

  • index.js
    将用户配置和默认配置合并然后将它放到 window 下，根据用户所选主题调用方法加载主题入口文件 theme.js (例如 light.js)。index.js 中还集成了

  • theme.js
    使用 window 对象下的用户配置对象，构建主题。

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

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();

如果你不知道如何开始你的 theme.js，那么你直接到项目仓库看看 gshang.js 是如何写的吧! 它只有几行，复制过来修改一下即可！

加入

  • 欢迎任何人加入进来， 哪怕你只会写一点点 css 就足够，大家一起交流，共享彼此的主题 ！

  • 您需要先联系我，我会无条件邀请您加入这个仓库。因为我同时还将代码同步到了 GitHub，你完全不用担心搞乱了代码。（不要问我为什么不新建一个分支）。

  • 代码地址点我-Gitee

如何开始

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

  2. 新建 demo.js demo.css， 注意 js 文件名称与文件夹名称一致

  3. 接下来你可以尽情修改你的 js 和 css

  4. assets 下的依赖供你使用，你可以自行添加

  5. 其他皮肤已经有的功能可以参考

  6. 假设你写完了，运行 gulp 开始打包，当然要事先 npm i

  7. 推送到码云上去

  8. Good work !

另外加入进来的所有主题都直接附带来几个常用插件，哪怕你不写一句代码，都可以使用，因为我在index.js 中将它们配置好了！节省你的时间！

  • 顶部进度条

  • 看板娘 （live2d）

  • 音乐播放器

  • 鼠标点击特效

联系我

qq:：923665892
wx:：wx923665892
qq群：541802647
qq邮箱：923665892@qq.com

感谢

GShang 提供了一套主题。

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