博客园博客申请教程,附自定义漂亮主页样式详细教程--2024

最近在自定义博客园主题页面样式时,遇到一些问题。所以决定写下此文作为第一篇博客。
完整主页效果图如下(点击右侧目录可以快速跳转):

一、申请开通个人博客

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】

<div id="loading"><div class="loader-inner"></div></div>

2.2.4 设置 【页脚 HTML 代码】 (需要 js 权限开通才能使用)

基本配置:

<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
  const opts = {      
    theme: {
      name: 'geek',    //name: 设置博客主题为 geek ,其他主题请参考`https://www.yuque.com/awescnb/user/kyi19z`
      // 在这里添加自定义配置
      // 当前为全部使用默认配置
    },
  }
  $.awesCnb(opts)
</script>

如果想要类似博主一样的完整效果,请参考如下完整代码按需修改:

点击查看代码
 <script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
 const opts = {
    theme: {
      name: 'geek',     //name: 设置博客主题的名称为 geek
      url: "https://acnblogs.gitee.io/acnb-theme-geek/index.iife.js",
      log: true,        //是否在控制台显示日志信息,true 表示启用
      avatar: "https://ts1.cn.mm.bing.net/th/id/R-C.ed60eef82da5f4430340dc2fed171473?rik=hs40Z24PyoNhMQ&riu=http%3a%2f%2fimg.keaitupian.cn%2fuploads%2f2020%2f11%2f30%2f1583303259241451.jpg&ehk=HQ%2bAxhBxQJPB6gQYX1z4ucXMUz%2bQkdj4I1aTt%2fE%2f7Yk%3d&risl=&pid=ImgRaw&r=0", //博客的头像图片 URL
      headerBackground:
        "https://www.2008php.com/2022_Website_appreciate/2022-01-05/20220105101407.jpg",        //博客头部背景图片的 URL
    },
    highLight: {
      enable: true,
    },
    lineNumbers: {
      enable: true,
    },
    github: {       //是否启用 GitHub 链接,false 表示禁用
      enable: true,
      url: "https://blog.csdn.net/LogicYarn?spm=1000.2115.3001.5343",
    },
    click: {        //启用鼠标点击特效
      enable: true,
    },
    emoji: {
      enable: true,
    },
    darkMode: {     //启用黑暗模式。
      enable: true,
      autoDark: true,
      autoLight: false,
    },
    signature: {
      enable: true,
      contents: [
        "<b>欲望以提升热忱,毅力以磨平高山!</b>",
        "我们登上的并非我们所选择的舞台,演出并非我们所选择的剧本。-- 爱比克泰德 (古罗马哲学家) 。",
        "<b>开头很简单,最难的是坚持。</b>",
        "<b>如果你只做能力范围之内的事,你就永远不会有进步!</b>",
        "<b>💡 有理想,但不妄想, 💭 有希望,但不奢望, 🐬 有作为,但不妄为。</b>",
      ],
    },
    postSignature: {
      enable: true,
      enableLicense: true,
      content: ['署名-非商业性使用-相同方式共享 4.0 国际', 'https://creativecommons.org/licenses/by-nc-sa/4.0/'],
    },
    links: {                      //友链列表,包含名称和链接。
      enable: false,
      value: [
        {
          name: "🍞 CSDN主页",
          link: "https://blog.csdn.net/LogicYarn?spm=1000.2115.3001.5343",
        }
      ],
    },
  };
  $.awesCnb(opts);
</script>

本文至此完毕!欢迎点赞评论哦!

参考:
Github项目theme-geek
在博客园中安装皮肤

热门相关:重生童养媳:枭宠不乖娇妻   我的抖音太无敌   逼婚首席:影后前妻很抢手   绝天武帝   非人类基因统合体