产生
博客园第三方主题数不胜数,或者你肯定也为你的博客园作了一些优化。接下来无论如何你都可以将你已经存在的代码稍作修改(无非就是建一个文件夹,修改一下文件名)加入这个仓库,安装过的人都可以互相共享主题样式。ok,先放个效果GIF,如果有兴趣请往下看吧,笔芯。
当然还可以切换更多全局主题,它在不断扩充!
介绍
awesCnb 是多套主题的合集,可以快速切换多套主题,安装(所谓安装就是几次复制粘贴)后,只需要在博客园设置页面更改 name
的值就能直接切换整套主题。
- 风格变化莫测(因为你可以快速切换多套主题)
- 根据配置加载 (没有使用的插件不会加载)
- 安装后静静享受更新
- 兼容性强(通过 gulp 自动处理 js css)
- 访问快速 (代码部署在 码云 而不是 GitHub,你看我的博客导航栏有个大大的 GitHub 链接,其实点击去是 Gitee码云 )
- 易于安装
- 大量的可选配置
- 都是废话我不啰嗦了
安装
这个过程看起来很长,其实只是简单的复制粘贴,我写的足够详细每个人都能够安装它,哪怕你刚刚注册博客园!
- 你的博客首页 -> 管理 -> 设置
- 设置博客默认皮肤为
Custom
- 复制如下 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}}
- 禁用默认 css 样式
- 复制如下 js 粘贴到 博客侧边栏公告(支持 HTML 代码) (支持 JS 代码) 没开通 js 权限请先开通
<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>$.awesCnb({
theme: {
name: 'reacg', // 在这里配置全局主题
}
});
</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>
切换全局主题
安装完之后,过了很久,难免喜新厌旧。这一套主题玩够了,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
- 保存
目录
- docs 文档
- assets 所有插件、依赖
- index.js 入口
- theme 存放不同主题
- acg 一套主题
- acg.css 主题样式文件
- acg.js 构建主题的 js
- light 一套主题
- light.css
- light.js
- ...
- acg 一套主题
- 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,你完全不用担心搞乱了代码。(不要问我为什么不新建一个分支)。
如何开始
你需要在
theme
文件夹下新建主题文件夹如demo
新建
demo.js
demo.css
, 注意 js 文件名称与文件夹名称一致接下来你可以尽情修改你的 js 和 css
assets
下的依赖供你使用,你可以自行添加其他皮肤已经有的功能可以参考
假设你写完了,运行
gulp
开始打包,当然要事先npm i
推送到码云上去
Good work !
另外加入进来的所有主题都直接附带来几个常用插件,哪怕你不写一句代码,都可以使用,因为我在index.js 中将它们配置好了!节省你的时间!
顶部进度条
看板娘 (live2d)
音乐播放器
鼠标点击特效
联系我
qq::923665892
wx::wx923665892
qq群:541802647
qq邮箱:923665892@qq.com
感谢
GShang 提供了一套主题。