浅谈博客（园）的美化

前言

我看到已经有（至少）六篇的洛谷日报讲了博客方面的知识，可是基本上讲的都是从零搭建博客，基本上没有美化博客方面的知识（除了这篇，但是这篇的网址12cow.com已经无法正常访问）。试问：辛辛苦苦搭建完了博客，忽然发现自己的博客丑的一批该怎么办？这篇教程旨在让你的博客变得美观、大气。

正文

一.博客园的美化

你需要有的

• 一个博客园的账户及博客

• 博客园的 JS 权限：
  

• 一颗热爱美化的心

• 至少 \(60\) 分钟使用电脑的时间

你需要做的

• \(SimpleMemory\) 皮肤 ：

  预计花费时间： \(10\) ~ \(60\) \(min\) 。

  具体美化教程：

  1.按照官网的教程将该皮肤安装至你的博客园；

  2.将博客侧边栏公告中的信息更改为你的个人信息；

  3.按照官网的定制化信息中的内容一步步配置你的博客，配置项都加在博客侧边栏公告中的window.cnblogsConfig下。

  推荐设置的配置项：

  • blogIcon 博客图标：

   info: {
   	blogIcon: '你图标的URL',
   },
  

  • infoBackground 你个人信息的背景：

    sidebar: {
   infoBackground: '你背景的URL',
  },
  

  • banner-home-background 你主页的头部图片（支持多张，每次刷新随机设置一张）：

   banner: {
       home: {
           background: [
               "你的头图1的URL",
               "你的头图2的URL",
               "你的头图3的URL",
           ],
       },
   },
  

  • banner-article-background 你文章页的头部图片（支持多张，每次刷新随机设置一张）：

   banner: {
       article: {
           background: [
               "你的头图1的URL",
               "你的头图2的URL",
               "你的头图3的URL",
           ],
       },
   },
  

  • links-footer 你页脚的友链（支持多个）：

   links: {
   footer: [
       ["你的友链1的标题", '你的友链1的URL'],
       ["你的友链2的标题", '你的友链2的URL'],
   ],
  },
  

  • 所有的动态效果（不加上有点丑）。
  • articleSuffix-imgUrl 你默认显示在文章后缀左侧的图片（建议采用随机图片API）：

   articleSuffix: {
     imgUrl: '你图片的URL',
   },
  

  • code-options-macStyle mac风格代码框：

  code: {
   options: {
     macStyle: true,
   },
  },
  

  • articleSuffix-aboutHtml 你的博客页脚的关于博主：

   articleSuffix: {
       aboutHtml: "你的自我介绍",
   },
  

  • articleSuffix-copyrightHtml 你的博客页脚的版权声明：

   articleSuffix: {
       copyrightHtml: "你的版权信息",
   },
  

  • articleSuffix-supportHtml 你的博客页脚的声援博主：

   articleSuffix: {
       supportHtml: "如何声援你",
   },
  

  • articleSuffix-imgUrl 你默认显示在文章后缀左侧的图片（建议采用随机图片API）：

  articleSuffix: {
   imgUrl: '你图片的URL',
  },
  

• \(Sakura\) 皮肤：

  预计花费时间： \(60\) ~ \(120\) \(min\) 。

  具体美化教程：

  1. 按照官网教程将该皮肤安装至你的博客园；
  2. 修改个性化信息（太多了，后面一个个说）。

  个性化信息之所在：

  • main.js 与 博客侧边栏公告 中，和教程里的 参数说明表 相同的参数；
  • 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);
  

  • main.js 中的如下代码：

    $("#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>');
  

  • main.js 中的如下代码：

    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 中的如下代码：

    //<!--离开页面改变title-->
  		var time;
  		var normar_title = document.title;
  		document.addEventListener('visibilitychange', function () {
  			if (document.visibilityState == 'hidden') {
  				clearTimeout(time);
  				document.title = '桥豆麻袋(＃°Д°)';
  			} else {
  				document.title = '你终于回来了(。・∀・)ノ';
  				time = setTimeout(function () {
  					document.title = normar_title;
  				}, 3000);
  
  			}
  		});
  

  • main.js 中的如下代码：

    /**
  	 * 构建自定义 DOM 元素
  	 */
  	buildCustomElements() {
  		// Change page title.
  		const blogTitle = $(this.cnblogs.blogTitle).find('h1 a').html();
  		const autherName = $(this.cnblogs.publicProfile).find('a:eq(0)').html();
  		let $title = $('head').find('title');
  		$title.html($title.html().replace(`春原庄的雪 | ${autherName}`, `${blogTitle}`));
  

  • main.js 中的如下代码：

    /**
  	 * 构建博主信息
  	 */
  	buildBloggerProfile() {
  		const config = this.defaluts.profile;
  
  		if (!config.enable) {
  			return;
  		}
  
  		if (!this.isPostPage && config.avatar) {
  			$(this.cnblogs.sideBarMain).prepend(`<img class="esa-profile-avatar" src="${config.avatar}" />`);
  		}
  
  		if (config.favicon) {
  			$('head').append(`<link rel="shortcut icon" href="${config.favicon}" type="image/x-icon" />`);
  		}
  
  		//博客logo
  		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);
  
  
  	}
  

  • CSS 中的如下代码：

  body {
  	cursor: url(https://files-cdn.cnblogs.com/files/zouwangblog/cursor.ico), auto;
  	background: #fff;
  	color: #314659;
  	min-height: 100% !important;
  	font-family: Lato, "PingFang SC", "Microsoft YaHei", sans-serif !important;
  }
  

  • CSS 中的如下代码：

  body::before {
  background: url(https://img2018.cnblogs.com/blog/1646268/201907/1646268-20190709145111387-899901278.jpg) center/cover no-repeat;
  }
  

  • CSS 中的如下代码：

  	/**主页头图*/
  .main-header {
  	display: table;
  	width: 100%;
  	height: 100vh;
  	max-height: 100vh;
  	text-align: center;
  	background-image: url(https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190806114008215-138720377.jpg);
  	background-repeat: no-repeat;
  	background-attachment: fixed;
  	background-size: cover;
  	overflow: hidden;
  	position: absolute;
  	top: 0;
  	left: 0;
  	z-index: -1;
  	box-shadow: 0 1px 2px rgba(150, 150, 150, .7);
  }
  

以上两个皮肤二选一即可。

二、 Wordpress 博客的美化。

关于 Wordpress 的教程网络上太多了，这里就不班门弄斧了，仅选取一些供大家观看：

• http://www.seoyh.net/1897.html

• https://cloud.tencent.com/developer/article/1543481

• https://www.zmki.cn/blog/wordpress

• https://www.cxgreat.cn/tag/wordpressmh

三、全体博客通用的美化（精髓之所在）。

• 禁止右键：

<script type="text/javascript">
        function stop() {
            return false;
        }
        document.oncontextmenu = stop;
</script>

• 看板娘：

<script src="https://cdn.jsdelivr.net/gh/Fofade/cnblogsThemes/live2dw/lib/L2Dwidget.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/Fofade/cnblogsThemes/live2dw/lib/L2Dwidget.0.min.js"></script>
<script type="text/javascript">
    L2Dwidget.init({
        "model": {
            "scale": 1,
            "hHeadPos": 0.5,
            "vHeadPos": 0.618,
            "jsonPath": "https://cdn.jsdelivr.net/gh/Fofade/cnblogsThemes/live2dw/assets/miku.model.json"
        },
        "display": {
            "superSample": 2,
            "width": 100,
            "height": 200,
            "position": "right",
            "hOffset": 0,
            "vOffset": -20
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 0.7,
            "opacityOnHover": 0.2
        }
    });</script>
<div id="live2d-widget">

• 鼠标单击出现烟花：

<script src="https://blog-static.cnblogs.com/files/zouwangblog/mouse-click.js"></script>
<canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>

• 页面下方音乐播放器：

<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>

• 12月自动添加雪花特效：

<div class="Snow">
    <canvas id="Snow"></canvas>
</div>
<script src="https://blog-static.cnblogs.com/files/zouwangblog/xue.js"></script>

附注

1. 如果好奇是哪六篇：

• https://www.luogu.com.cn/blog/65360/ling-ji-chu-ling-cheng-ben-da-jian-shu-yu-zi-ji-di-wordpresshexo-bo-ke

• https://www.luogu.com.cn/blog/ak-ioi/building-a-blog

• https://www.luogu.com.cn/blog/12cow/wordpress

• https://www.luogu.com.cn/blog/Venus/build-hexo-github-blog

• https://www.luogu.com.cn/blog/dgsyrc/hexo-guide

• https://www.luogu.com.cn/blog/AC-WA-RE-TLE-MLE/rang-ni-di-hexo-bo-ke-zhi-chi-yuan-cheng-bian-ji