自己写了一套博客园主题合集
文件目录
–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
主题样式文件
使用主题
- 博客园首页 -> 管理 -> 切换旧版后台 -> 设置
- 如果使用主题
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>
- 保存
主题 acg
已完成的功能
- 移动端适配
- 音乐
- 首页改版
- 代码样式优化
- 代码复制按钮
- 代码行号
- 文章目录
- 自定义全局主题色
- 友情链接
- 顶部进度条
- 评论优化
…
加入进来
- 如果你已经自己定义了很多你的博客园样式,你只需要将你的博客代码稍作修改,加入进来!
- 从零开始!
-
和我一起优化已有的主题!
欢迎啊 欢迎啊 欢迎啊
如何做
- 你需要在
theme
文件夹下新建主题文件夹如demo
-
新建
demo.js
demo.css
,注意js文件名称与文件夹名称一致
-
开始你的工作
问题
有任何问题你都可以评论在最后。