博客园美化

博客园美化

第一弹

选择主题

申请博客和 JS 权限就不用在这里多说了。

就算是美化，从无到有也有些过分离谱，我们先在网上找一个现成的主题，然后自己来改。这里我参考的是这篇博文：https://www.cnblogs.com/miluluyo/p/cute-cnblogs.html，在看它的源码的时候似乎看到这个主题也是从其他主题上修改而来的。

首先按照原博文中的“使用方法”栏选择皮肤并且发布一篇后续作为友联界面的随笔。

然后可以看到它给的首页 HTML 中有许多 JS/CSS 外链，我们一一下载下来（嫌一个个下麻烦的话也可以去作者的 Github 下）：

  <link rel='stylesheet' href='https://blog-static.cnblogs.com/files/elkyo/cute-cnblogs.css'>
  <link rel='stylesheet' href='https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css'>
  <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/elkyo/siyuan.css" />
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://blog-static.cnblogs.com/files/elkyo/monitoring.js"></script>
  <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/elkyo/OwO.min.css" />
  <script src="https://blog-static.cnblogs.com/files/elkyo/OwO.min.js"></script>
  <script src="https://blog-static.cnblogs.com/files/elkyo/cute-cnblogs.js"></script>
  <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
  <script src="https://blog-static.cnblogs.com/files/elkyo/three.min.js"></script>
  <script src='https://blog-static.cnblogs.com/files/elkyo/star.js'></script>

这里把它的 JS/CSS下载下来的原因有几个：

• 自己的页面引用他人的私有 JS/CSS 是一件非常危险的事情
• 后续要修改 JS/CSS
• 玩意人家的 JS/CSS 挂了，你的主题也会随着变得像一坨 shit
• ……

下载下来的话也有几个问题，主要就是它提供的源码都是 min 的，挤在一行不好改，这个时候就需要用一些个小工具了：https://tool.lu/js/，这是一个 JS 压缩转换工具，非常好用，同网站内还有 CSS的转换工具！

之后我们用本地 IDE 打开这些样式文件：

这两个文件是我们主要需要修改的，其它的基本上都是一些组件。

把这些文件都一一上传到博客园的文件系统：

把外链链接都改成我们自己的文件的地址：

再粘贴好其它的代码就可以实现我们所选择的主题的效果了，接下来就到了我们自己 DIY 的回合了！

修改主题

业界都知道的，在浏览器里面打开 “开发者工具”，然后用鼠标选择组件，查看其 CSS 对应的文件（主要也是cute-cnblogs.css），然后修改对应源文件，再重新上传，在这里就不做赘述。

这里主要看一下 JS 文件里的代码——也就是cute-cnblogs.js（有被可爱到 qwq）

先看一下代码的结构，只有 6 个函数：

先看第一个：

function miluframe(b) {
	var d = {
		Youself: "https://www.cnblogs.com/locustree/",
		Friends_of_the: "p/15315689.html",
		custom: [{
			name: "相册",
			link: "https://www.cnblogs.com/elkyo/gallery.html",
			istarget: false
		}, {
			name: "技能树",
			link: "https://miluluyo.github.io/",
			istarget: false
		}, {
			name: "留言板",
			link: "https://miluluyo.github.io/p/11578505.html",
			istarget: false
		}],
		resume: {
			"name": "Ermao",
			"link": "https://www.cnblogs.com/locustree/",
			"headurl": "https://images.cnblogs.com/cnblogs_com/blogs/687013/galleries/2034104/o_210920173943profile.jpg",
			"introduction": "欢迎"
		},
		unionbox: [{
			"name": "Ermao's Github",
			"introduction": "同行交友！",
			"url": "https://github.com/Amor128",
			"headurl": "https://images.cnblogs.com/cnblogs_com/blogs/687013/galleries/2034104/o_210920173943profile.jpg"
		}, {
			"name": "Ermao's site",
			"introduction": "自己的小站，分享日常",
			"url": "http://www.sayfeng.com",
			"headurl": "https://images.cnblogs.com/cnblogs_com/blogs/687013/galleries/2034104/o_210920173943profile.jpg"
		}],
		details: [{
			field: "name",
			literal: "昵称",
		}, {
			field: "introduction",
			literal: "标语",
		}, {
			field: "url",
			literal: "链接地址",
		}, {
			field: "headurl",
			literal: "头像地址",
		}],
		ThemeVersion: "https://github.com/miluluyo/cute-cnblogs/",
		IconSource: "https://www.iconfont.cn/illustrations/detail?spm=a313x.7781069.1998910419.dc64b3430&cid=31465",
		githuburl: "https://github.com/amor128",
	};
	$.extend(d, b);
	allpage(d);
	var a = window.location.href;
	if (a.indexOf(d.Friends_of_the) != -1) {
		Friends_of_the(d)
	}
}

主要是定义了一些全局的变量，这些变量在主题上的表现已经非常的对应了，该删的删，改修改的修改，不多赘述。这段代码的最后调用了 allpage函数，主要就是在操作 DOM 树，自行修改，不做赘述，包括后续的代码，它们的作用都非常直观地反应在了页面上，看着修改就可以了。

最后，我的效果是这样的：

主题虽然好看（主页顶部的星空图并不好看！后续会把它换掉），但还是在一定程度上妨碍了阅读（尤其是标题字体的大小和行间距），后续可能还会添加文章目录等功能！