博客园主题美化 最详细的美化过程

一、前言

很多小伙伴是不是也和我一样，想拥有一个自定义样式的博客网站呀！看到这篇随笔你就能随意地定义自己的博客网了，拥有一个完美的主题博客网，不过这篇文章教的不是当前正在使用的主题（cute-cnblogs主题），这篇文章教的是我上一次使用的主题（Sakura主题），由于各种原因我就换成了当前的主题,如果你喜欢上一款的Sakura主题，详细教程往下看，如果你喜欢当前的主题，就去看看我这篇教程： 博客园主题美化，博客主题又换了，这款主题爱了。

二、首页主题预览

image

image

想看详细主题样式可以进首页看看：https://www.cnblogs.com/cyy22321-blog/（文章中的主题已被更换）

三、功能目录

  • 首页
  • 导航标题
  • 其他网站链接
  • 音乐播放器
  • 自动生成文章目录

四、主题部署

1、前期准备工作

image

  • 申请开通js权限(我这里已经开通)，并把博客皮肤选为Custom

image

2、开始部署

  • 引入样式，把page.css中的代码复制粘贴到博客园后台页面定制 css 代码中

image

  • 引入文件 main.js 放在博客侧边栏公告中

<script src="https://blog-static.cnblogs.com/files/blogs/742501/main.js"></script>
注意：这一步很重要，而且 src 后的路径要填你自己的，点击下载后复制 main.js 文件的路径放在 src 中：

  • 复制foot.html文件中代码，放在博客页脚中

五、基本修改

1、main.js的基本修改

  • 修改Text文本（这里我已修改过）

    topInfo: {
	title: 'Welcom MyBlog',
    text: '如果不能成为她心中的盖世英雄，那就努力变成自己仰慕的角色吧',
  }

  • 修改导航栏，把地址改成自己的，或改为其他模块

    $("#navList").append('<li><a id="blog_nav_myyoulian" class="menu"href="https://www.cnblogs.com/zouwangblog/articles/11177049.html">友链</a><i></i></li><li><a id="blog_nav_myzanshang" class="menu" href="https://www.cnblogs.com/zouwangblog/articles/11340077.html">赞赏</a><i></i></li><li><a id="blog_nav_myguanyu" class="menu" href="">关于</a><i></i></li>');

  • 菜单子目录设置，菜单悬浮触发的菜单子目录，在这里也可以按自己的想法修改

    let guanyu = '<ul class="sub-menu">' +
					'<li><a href="https://www.cnblogs.com/zouwangblog/articles/11157339.html "><i class="fa fa-meetup" aria-hidden="true"></i> 我？</a></li>' +
					'<li><a href="https://www.cnblogs.com/zouwangblog/articles/11346906.html "><i class="fa fa-area-chart" aria-hidden="true"></i> 统计</a></li>' +
					'<li><a href="https://www.cnblogs.com/zouwangblog/articles/11350777.html "><i class="fa fa-heartbeat" aria-hidden="true"></i> 监控</a></li>' +
					'<li><a href="https://www.cnblogs.com/zouwangblog/articles/11350787.html"><i class="iconfont icon-taohua" aria-hidden="true"></i> 主题</a></li>' +
					'</ul>';
			$('#blog_nav_myguanyu').after(guanyu);

注意：如果你修改了 main.js 中的内容，那请重新上传并下载 main.js 文件，把原来侧边栏公告中那个 main.js 文件路径替换掉，否则你修改的内容将不会生效。

2、脚本设置

为了配置方便，侧边栏里设置了一些常用参数，可根据自己的需要开启和配置，如果都需要的话就直接把代码复制到侧边栏公告中

<script type="text/javascript"> 
$.silence({
        profile: {
            enable: true,
            avatar: '',
            favicon: 'https://files-cdn.cnblogs.com/files/zouwangblog/blog_logo.gif',
        },
        catalog: {
            enable: true,
            move: true,
            index: true,
            level1: 'h2',
            level2: 'h3',
            level3: 'h4',
        },
        signature: {
            enable: true,
            home: 'https://www.cnblogs.com/zouwangblog/',
            license: 'CC BY 4.0',
            link: 'https://creativecommons.org/licenses/by/4.0'
        },
        sponsor: {
            enable: true,
            paypal: null,
            wechat: 'https://www.cnblogs.com/images/cnblogs_com/zouwangblog/1477590/t_%e5%be%ae%e4%bf%a1%e5%9b%be%e7%89%87_20190704175553.png',
            alipay: 'https://www.cnblogs.com/images/cnblogs_com/zouwangblog/1477590/t_%e5%be%ae%e4%bf%a1%e5%9b%be%e7%89%87_20190704174158.png'
        },
        github: {
            enable: false,
            color: '#fff',
            fill: '#FF85B8',
            link: 'https://github.com/Zou-Wang'
        },
	topImg: {
		homeTopImg: [
"https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190828104950450-644943924.jpg",
"https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190806172418911-2037584311.jpg",
					],
              notHomeTopImg: [
"https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190807151151330-1121103170.png",
"https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190807151203983-873040918.jpg",
					]
		},
    topInfo: {
					title: 'Hi,Toretto',
                      text: 'You got to put the past behind you before you can move on.',
					github: "https://github.com/Zou-Wang",
					weibo: "https://weibo.com/5682002748/profile?topnav=1&wvr=6&is_all=1",
					telegram: "",
					music: "https://music.163.com/#/user/home?id=436757779",
					twitter: "",
					zhihu:"https://www.zhihu.com/people/zouwang/activities",
					mail: "http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=KlBFX11LRE0SGBlqW1sESUVH",
				}
    });
</script>

六、音乐播放器

关于音乐播放器就直接用作者的吧，他用的是网易云的外链接播放器，如果不想用作者的，就把作者的 data-id 替换称自己的网易云的：
替换方式：
把作者的 data-id 替换为自己的，如果不行的话就直接删掉作者以下代码：<div id="player" class="aplayer aplayer-withlist aplayer-fixed" data-id="2878443703" data-server="netease" data-type="playlist" data-order="random" data-fixed="true" data-listfolded="true" data-theme="orange"></div>
然后把自己网易云中的那个复制过来替换。对于怎么使用网易云音乐的外链接播放也有使用教程，不知道具体怎么使用的就去看看

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
<script src="https://blog-static.cnblogs.com/files/zouwangblog/APlayer.min.js"></script>
<script src="https://unpkg.com/meting@1.2/dist/Meting.min.js"></script>
<div id="player" class="aplayer aplayer-withlist aplayer-fixed" data-id="2878443703" data-server="netease" data-type="playlist" data-order="random" data-fixed="true" data-listfolded="true" data-theme="orange"></div>

七、博客logo

左上角的logo，需要去main.js中修改，可以改成自己的昵称等

var title = '<div class="site-branding">' +
					'<span class="logolink moe-mashiro">' +
					'<a href="https://www.cnblogs.com/zouwangblog/" alt="富士的雪">' +
					'<ruby><span class="sakuraso">ふじさん</span><span class="no">の</span><span class="shironeko">雪</span>' +
					'<rt class="chinese-font">富士的雪</rt></ruby></a></span>' +
					'</div>'
			$('body').prepend(title);

八、写在最后

按照我的步骤去定义都能成功，没成功的话你在回头看看是不是漏了那个步骤或者不小心改错了那些代码，又或者没有保存，该博客网主题源码中有很多地方都与自己的页面不符合，特别是导航栏部分（也不知道你们遇到没有），BUG还是蛮多的，不过都已经修复好了，如果你也遇到了同样的BUG，可以去我的这篇 博客园Sakura主题美化中BUG修复方法文章看看，里面会有如何解决美化过程中的一些BUG方案。另外在写博的时候注意：在写随笔或者文章的时候添加摘要图片和摘要文字，摘要文字一定要添加，如果不添加摘要图片会给一张默认图片。发布随笔的时候不要再同一天发布超过一篇文章，因为博客园同一天的文章会归档在一起导致我构建html的时候出现bug，我个人没有使用这款主题了，所以这个bug到现在还没有解决，只能一天发布一篇文章。

posted @ 2022-03-24 11:11  CodeFan*  阅读(19888)  评论(36)  编辑  收藏  举报