淺談博客（園）的美化

前言

我看到已經有（至少）六篇的洛谷日報講了博客方面的知識，可是基本上講的都是從零搭建博客，基本上沒有美化博客方面的知識（除了這篇，但是這篇的網址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