博客园教程定制皮肤

目录

• 前言
  • 链接
  • 参考
• 笔录草稿
• 步骤
  • 1. 注册博客园
  • 2. 申请开通博客园
  • 3. 申请支持 JS 权限
  • 4. 配置皮肤
    • 添加 页面定制CSS代码
    • 添加 博客侧边栏公告

---

前言

记录博客园皮肤设置。

链接

• 皮肤源码及主要教程
• 我的博客
• 备用博客园定制页面CSS源码

参考

• 上面链接

笔录草稿

步骤

1. 注册博客园
2. 申请开通博客园
3. 申请支持 JS 权限
4. 配置皮肤

1. 注册博客园

1. 进入 http://www.cnblogs.com 该链接进行注册；
2. 注意查收激活邮件；
3. 输入手机接收到的激活码；
4. 完成激活并进入登录页面。

2. 申请开通博客园

1. 进入 我的博客；
2. 申请博客；
   1. 填写申请理由
   2. 等待申请成功

3. 申请支持 JS 权限

1. 进入我的博客
2. 进入选项
3. 进入账户设置
4. 进入博客设置
5. 申请 JS 权限
   1. 等待申请成功

4. 配置皮肤

（当前处于网页页面 A）

1. 进入我的博客

2. 进入选项

3. 进入账户设置

4. 进入博客设置

5. 博客皮肤

   1. 选择 SimpleMemory
      

6. 勾选 禁用模板默认CSS
   

7. 勾选 允许 MetaWeblog 博客客户端访问
   

做好以上步骤后，开始源码配置

添加 页面定制CSS代码

1. 在新的网页打开https://github.com/BNDong/Cnblogs-Theme-SimpleMemory（当前处于网页页面 B）

2. 进入src/style/base.min.css（当前处于网页页面 B）

   1. 复制其源码（全部）（即是base.min.css文件内容）(去该链接复制 李柱明 ，但可能不是最新)
      

3. 粘贴到上面步骤中的 博客设置-->页面定制CSS代码 中（当前处于网页页面 A）
   

添加 博客侧边栏公告

此步骤必须申请并通过 JS 权限

1. 返回到https://github.com/BNDong/Cnblogs-Theme-SimpleMemory链接中（当前处于网页页面 B）
2. 进入说明文档看官方教程或看本简略教程，如 v1.*.*（当前处于网页页面 B）
3. 复制以下代码到 上面步骤中的 博客侧边栏公告 中（当前处于网页页面 A）
   1. 该例子为一个简陋的皮肤配置
   2. 需要丰富显示效果，可以参考官方文档，或留言讨论。

<script type="text/javascript">
    window.cnblogsConfig = {
        GhVersions    : 'v1.3.3', // 版本
        blogUser      : "userName", // 用户名
        blogAvatar    : "https://xxxx.png", // 用户头像
        blogStartDate : "2016-11-17", // 入园时间，年-月-日。入园时间查看方法：鼠标停留园龄时间上，会显示入园时间
    }
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v1.3.3/src/script/simpleMemory.min.js" defer></script>

4. 保存（当前处于网页页面 A）
5. 刷新我的博客页面即可。