最近在自定义博客园主题页面样式时，遇到一些问题。所以决定写下此文作为第一篇博客。
完整主页效果图如下（点击右侧目录可以快速跳转）：
一、申请开通个人博客
1.1 注册账号（步骤略）
1.2 申请写博客权限
在注册完博客园账号后，在首页右上角点击 -> 我的博客
点击后，会出现如下图所示：
按照要求填写申请理由（例如记录个人技术成长，学习笔记记录等），其他信息据实填写，然后点击提交
接下来请耐心等待，几分钟到半天左右会审核通过，并出现如下界面：
1.3 审核通过，开通博客
点击 ->立即开通博客
填写博客地址后缀（皮肤先随便选一个），然后点击 -> 注册 即可：
PS：园子还是很地道的，地址后缀每半年可以更换一次，所以不用太担心名字起不好
1.4 注册完成，进入博客
在注册完成页点击对应链接，或在博客园首页点击 -> 写随笔 ， 即可开始撰写博文。
二、自定义漂亮博客主页样式
在1.3中选择的已经有博客园皮肤，但是博客园自带皮肤比较古老，可能不是很符合个人需求。所以我们需要自定义设置一个好看的皮肤，
**在首页点击，写随笔按钮后，进入此页面，然后我们点击 ->设置
会有如下界面出现：
2.1 申请js权限
设定美观且自定义更强的主页样式需要js代码的支持，在下图所示位置点击申请js权限（理由填“适度美化博客”等）：
几分钟便可审核完成，在这个过程中，继续进行下面步骤即可。
2.2 开始自定义
2.2.1 设置博客皮肤，和代码高亮样式
如下设置博客皮肤为 Custom， 代码高亮按照个人审美设置即可：
2.2.2 设置 【页面定制CSS代码】
博客侧边栏公告无需修改
勾选：禁用模板默认CSS代码 重要！！！！！！！！！！
然后填入如下代码：
#loading{bottom:0;left:0;position:fixed;right:0;top:0;z-index:9999;background-color:#f4f5f5;pointer-events:none;}.loader-inner{will-change:transform;width:40px;height:40px;position:absolute;top:50%;left:50%;margin:-20px 0 0 -20px;background-color:#3742fa;border-radius:50%;animation:scaleout 0.6s infinite ease-in-out forwards;text-indent:-99999px;z-index:999991;}@keyframes scaleout{0%{transform:scale(0);opacity:0;}40%{opacity:1;}100%{transform:scale(1);opacity:0;}}
2.2.3 设置 【页首 HTML】
2.2.4 设置 【页脚 HTML 代码】 （需要 js 权限开通才能使用）
基本配置：
如果想要类似博主一样的完整效果，请参考如下完整代码按需修改：
点击查看代码
本文至此完毕！欢迎点赞评论哦！
参考：
Github项目theme-geek
在博客园中安装皮肤