之前曾经是有过一个基于 \(GitHub\)的博客的, 但是代码的操控不是特别熟悉, 在就博客里面还发了关于 \(Blog\)转移的文章 https://www.cnblogs.com/Yeasio-Nein/p/Lomen.html , 但是后来由于某种 \(unfortunately\)的原因它挂掉了 (我搞了一个星期的博客啊!!!), 现在只有一个空荡荡的 \(README\) 文件挂在上面.
因此短时间内不考虑 \(GitHub\)的博客了, 转手进行博客园美化.
博客今本上是照着 \(\_rqy\)的 "Next" 模式依葫芦画瓢的, 但是因为 \(cnblogs\)的功能并没有 \(Hexo\)那么强, 因此差距还是略微比较大, 但是还是有比较独特的地方的.
先上页面定制 \(CSS\)
整体框架
https://blog-static.cnblogs.com/files/Yeasio-Nein/Page_CSS.css
上面这个网站保存的是我本地的整个 CSS.
可以看到最上面的一大坨叠到一起的是博客的整体框架. 这里选用的基本皮肤是 Custom,(可别勾上了禁用模板 CSS).
接下来的那个注释叫 "\(comment~area\)" 的是我评论框里面趴着的那个橙色头发的孩子, 我觉得很有爱, 就粘上了.
接下来是每篇文章都会有的背景里面的姑娘, 当然如果有代码部分的话是会被遮住的. 以上两个模块大家觉得不好看的话可以删掉.
接下来是侧边栏.
侧边栏
侧边栏是基本所有的代码类型都支持的, HTML 和 JS 都支持, 因此大多数的东西都放在这里面. 首先是最上面的头像.
<img id="preview_large" alt=""src="https://example.png"class="preview-image"style=""/>
把上面的 https://example.png 换成你的头像地址就可以啦! 有时可能照片比较大, 建议用画图缩小一下.
下面各种东西的链接就很简单了..
<a target="_blank" href="https://example.com" style="text-decoration:none;">Example</a>
就是这种格式啦.
然后是鼠标特效, 我觉得花花的颜色不是很好看, 配上我得纯白背景, 就改成了黑色的.
- <div id="hitokoto"><script>hitokoto()</script></div>
- <script type="text/javascript">
- var a_idx = 0;
- jQuery(document).ready(function($) {
- $("body").click(function(e) {
- var a = new Array("Example1","Example2");
- var $i = $("<span/>").text(a[a_idx]);
- a_idx = (a_idx + 1) % a.length;
- var x = e.pageX,
- y = e.pageY;
- $i.CSS({
- "z-index": 1,
- "top": y - 20,
- "left": x,
- "position": "absolute",
- "font-weight": "bold",
- "color": "black"
- });
- $("body").append($i);
- $i.animate({
- "top": y - 180,
- "opacity": 0
- },
- 3000,
- function() {
- $i.remove();
- });
- });
- });
- </script>
把里面的 \("Example"\)换成你想要的文字就可以啦, 下面的 \(color\)可以修改文字颜色.
<script type="text/javascript" src="https://api.lwl12.com/hitokoto/main/get?encode=js&charset=utf-8"></script><div id="lwlhitokoto"><script>lwlhitokoto()</script></div>
上面这个是引用的一言~
- <script src="https://blog-static.cnblogs.com/files/Yeasio-Nein/silence.min.js"></script>
- <script type="text/javascript">
- $.silence();
- </script>
少了上面这个代码你的侧边栏就没有啦~
- <script type="taxt/javascript">
- // 浏览器标题切换
- var OriginTitile = document.title; // 保存之前页面标题
- var titleTime;
- document.addEventListener('visibilitychange', function(){
- if (document.hidden){
- document.title = '"苏浅呀" 我等你回来呢';
- clearTimeout(titleTime);
- }else{
- document.title = '呐, 陪我去划船吧~';
- titleTime = setTimeout(function() {
- document.title = OriginTitile;
- }, 2000); // 2 秒后恢复原标题
- }
- });
- </script>
如题~~
其实我没有再搞网站的头像, 感觉不是很好看, 博客园的默认还是可以的啦...
页首
首先是右上角的 \(GitHub\)的小插件, 我给搞成了黑白色的, 大家也可以改成自己喜欢的颜色~
<a href="https://github.com/Yeasion" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:black; color:white; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.GitHub-corner:hover .octo-ARM{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.GitHub-corner:hover .octo-ARM{animation:none}.GitHub-corner .octo-ARM{animation:octocat-wave 560ms ease-in-out}}</style>
然后下面这个就是背景的动画, 会跟着你鼠标走的线条~
- <canvas id="c_n9" width="1920" height="990" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;">
- </canvas>
- <script src="https://files.cnblogs.com/files/jingmoxukong/canvas-nest.min.js">
- </script>
下面这个东西是加载的线条, 我不小心搞成了非常粗的黑线, 感觉还行, 就没再改...
- <script>
- {
- function getElementsByClass(key){
- var arr = new Array();
- var tags=document.getElementsByTagName("*");
- for(var i=0;i<tags.length;i++){
- if(tags[i].className.match(new RegExp('(\\s|^)'+key+'(\\s|$)'))){
- arr.push(tags[i]);
- }
- }
- return arr;
- }
- var timer = Windows.setInterval(function(){
- var el = getElementsByClass('pace');
- if(el.length>0){
- var a = document.createElement('div');
- a.setAttribute('class', 'spinner');
- var b = document.createElement('div');
- b.setAttribute('class', 'spinner-icon');
- el[0].appendChild(a);
- a.appendChild(b);
- Windows.clearInterval(timer);
- }
- }, 3);
- }
- </script>
- <style>
- .pace .spinner {
- position: fixed;
- top: 15px;
- right: 15px;
- z-index: 2000;
- display: block;
- }
- .pace .spinner-icon {
- width: 18px;
- height: 18px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- border: solid 2px transparent;
- border-top-color: black;
- border-left-color: black;
- border-radius: 50%;
- -webkit-animation: nprogress-spinner .4s linear infinite;
- animation: nprogress-spinner .4s linear infinite;
- }
- @-webkit-keyframes nprogress-spinner {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- }
- }
- @keyframes nprogress-spinner {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- }
- }
- @keyframes fadeOut {
- from {
- opacity: 1;
- }
- to {
- opacity: 0;
- }
- }
- .pace {
- -webkit-pointer-events: none;
- pointer-events: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- user-select: none;
- -webkit-transition: opacity 0.8s ease-in-out;
- -moz-transition: opacity 0.8s ease-in-out;
- -o-transition: opacity 0.8s ease-in-out;
- transition: opacity 0.8s ease-in-out;
- }
- .pace-inactive {
- opacity:0;
- filter: alpha(opacity=0);
- }
- .pace .pace-progress {
- background: black;
- position: fixed;
- z-index: 2000;
- top: 0;
- right: 100%;
- width: 100%;
- height: 10px;
- box-shadow: 0 0 3px #2299dd;
- }
- </style>
- <!-- óòé???èy??
页脚
页脚没弄什么东西, 本来是搞了一个小小的友链, 后来觉得不好看, 放在页脚也不大好, 就删掉了, 只保留了一个很可爱的 \(live2d\), 里面的女孩子很有意思的, 好像很多人都有这个玩意么...
<style type="text/css">@import url(//fonts.googleapis.com/CSS?family=Kelly+Slab|Raleway);</style>
<!DOCTYPE HTML> <HTML xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> Live2D </title> <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/kousak/waifu.css" /> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"> </script> <body> <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/kousak/waifu.css"> <div class="waifu" id="waifu"> <div class="waifu-tips" style="opacity: 1;"> </div> <canvas id="live2d" width="280" height="250" class="live2d"> </canvas> <div class="waifu-tool"> <span class="fui-home"> </span> <span class="fui-chat"> </span> <span class="fui-eye"> </span> <span class="fui-user"> </span> <span class="fui-photo"> </span> <span class="fui-info-circle"> </span> <span class="fui-cross"> </span> </div> </div> <script src="https://blog-static.cnblogs.com/files/Yeasio-Nein/live2d.js"> </script> <script src="https://blog-static.cnblogs.com/files/Yeasio-Nein/waifu-tips.js"> </script> <script type="text/javascript"> initModel() </script> </body> </HTML>
<link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/yjlblog/flat-ui.min.css"/>
直接粘上应该就能用了, 但是有时候可能加载不出来, 如果你那里的网速比较慢的话.
大概就是这些东西了, 我没有添加很冗杂的插件, 小仓鼠, 挂钟什么的, 感觉会比较乱... 总的来说以简洁为主吧, 希望能让有兴趣的人亮一亮眼睛.
\(SUE\)
来源: http://www.bubuko.com/infodetail-2894129.html