博客園樣式自定義(待更新)
阿新 • • 發佈:2018-08-31
ava white tde 百度一下 padding element win timer rip
總感覺這件事情做的晚了哈哈。
以前寫博客總是一個人默默地寫,現在竟然出現了兩個吐槽我挖坑不填的哈哈。(非常感謝~)
大概是終於有個人能夠督促自己學習了,你們怎麽不早點來?!!!
廢話不多說,怎麽定義博客園的代碼呢。
步驟一,屏蔽掉博客園的皮膚樣式 => 百度一下,你就知道 => 其實就是編輯裏面 打個勾?
步驟二,如果你要修改JS => 在編輯的地方申請一下 => 一般都會馬上批準的。
步驟三, 開工了。
當前要改進的還有很多,比如我覺得 編輯這東西就該放在右上角。
1.編輯欄要放右上角
要拉到最下面才能編輯簡直反人類。
2.內容顏色要漸變。
3.要加個內容跳轉,有些人是為了解決問題的,時間緊迫。
這裏先放個我現在博客園的樣式地址(說實話,現在還挺爛的,不過我覺得下面的JS效果還行):
博客園CSS地址 - 可直接復制粘貼用 - 不完全覆蓋、有樣式bug
這裏是我現在博客園的JS特效,IE9以上用(用上requestAnimationFrame,好處是切換到其他頁面的時候不運行,節省資源,不像setInterval.)
PS:對於IE9以下有setTimeout => 但是沒有 clearTimeout
博客園JS地址 - 可直接復制粘貼用
CSS
body, p, ul, li, div { margin: 0; padding: 0; } ul, li { list-style: none; } a { text-decoration: none; } /* 移動端樣式 */ /* 覆蓋掉原來的樣式 */ @media only screen and (max-width: 767px) { #blogTitle h1 { padding-top: 25px !important; } #blogTitle h2 { margin: 0 .5rem; } #navigator { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; } #main { padding: 0 1rem; } #navigator ul { width: 100% !important; display: flex; } #navigator ul li:nth-child(3), #navigator ul li:nth-child(5) { display: none !important; } #navigator ul li { box-shadow: 0 0 10px; } #navigator ul li a { color: #936d29 !important; background-color: #191912 !important; } #mainContent .forFlow { width: -webkit-fill-available !important; } .day .postDesc { display: none; } #sidebar_search #sidebar_search_box { display: none; } } /* PC端樣式 */ /* Header => 標題欄、導航欄 */ #header { position: relative; } /* 標題欄 */ #blogTitle { width: 100%; min-height: 13rem; text-align: center; background-color: #191912; background-position: center top; background-repeat: no-repeat; background-attachment: fixed; } #blogTitle h1 { margin-top: 0; } #Header1_HeaderTitle { text-decoration: none; color: #000; text-shadow: 0 0 10px #ffb66f; font-size: 1.5rem; } #blogTitle h2 { margin-bottom: 2rem; display: inline-block; width: 60%; padding: 1rem; font-size: 1rem; text-align: left; text-indent: 2rem; color: #fff; font-weight: 100; text-shadow: 0 0 32px #ffc730; box-shadow: 0 0 10px #ffd26a; } /* 導航欄 */ #navigator { position: fixed; top: 2rem; right: 0; width: 6rem; } .blogStats { display: none; } #navList li { padding-left: 1rem; margin-top: .3rem; display: inline-block; width: 5rem; height: 1.5rem; line-height: 1.5rem; text-align: center; transition: all .5s ease; } #navList li:hover { width: 6rem; padding-left: 0; } #navList li:hover a { background: #089e8a; color: #fff; } #navList li a { display: inline-block; width: 100%; border-radius: 1rem 0 0 1rem; color: #e4d3c8; background: #121919; } /* 主要內容 */ #main { } #mainContent { text-align: center; } #mainContent .forFlow { display: inline-block; padding-top: 1rem; width: 80%; text-align: left; } #main .dayTitle { display: none; } #main .postCon { position: relative; margin-bottom: .8rem; } #main .forFlow .postCon .c_b_p_desc { width: 100%; height: 1.5rem; line-height: 1.5rem; white-space: nowrap; text-overflow: ellipsis; } #main .forFlow .postCon .c_b_p_desc a { display: none; /* position: absolute; width: 10%; top: 0; right: 0;; */ } /* #main .forFlow .day .clear { margin-bottom: 2rem; } */ #main .forFlow .postTitle { position: relative; margin-bottom: .5rem; padding-left: 1rem; } #main .forFlow .postTitle a { display: inline-block; width: 100%; background: #b4b19b; border-radius: 3px; text-indent: 2rem; } #main .forFlow .postTitle::after { content: ''; position: absolute; top: 0; left: 0; background: #089e8a; width: 5px; height: 100%; } #main .forFlow .postTitle a { height: 2rem; line-height: 2rem; font-size: 1rem; color: #191919; } #main .forFlow .postDesc { margin-bottom: 2rem; float: right; font-size: .9rem; } #main .forFlow .postDesc a { position: relative; display: inline-block; width: 50px; text-align: center; border-radius: 3px; color: #fff; background: #089e8a; } #main .forFlow .postDesc a:hover { background: #0066cc; color: #eee; box-shadow: 0 0 10px #000; } /*評論欄目*/ #comment_form_container { margin-top: 2rem; background: #1c7096; text-align: center; border-radius: .5rem; } #commentform_title { background-image: none; width: 200px; font-size: 2rem; text-indent: 2rem; color: #fff; text-align: left; } .commentbox_title_left { display: none; } #tbCommentBody { width: 88%; border-radius: 6px; background: #619dd9; border: none; resize: none; text-indent: 2em; color: #452216; font-size: 1.4rem; text-shadow: 0 0 10px #2e6ab1; } #tbCommentBody:focus, #tbCommentBody:hover { background-color: #fff8cd; } /*JS canvas 動畫*/ #bubbleCanvas { position: fixed; left: 10%; width: 80%; } /*搜索欄*/ #sideBar .newsItem { display: none; } #sideBar #blog-calendar { display: none !important; } #sidebar_search .catListTitle { display: none; } #sidebar_search #sidebar_search_box { position: absolute; top: 0; right: 1rem; } #sidebar_search #sidebar_search_box #q { border: none; background: #3e3e4a; color: #fff; transition: all .5s ease; } #sidebar_search #sidebar_search_box input#q:focus, #sidebar_search #sidebar_search_box input#q:hover { background-color: #089e8a; } #sidebar_search #sidebar_search_box input#q:hover { width: 15rem; text-indent: 2rem; height: 3rem; } #sidebar_search #sidebar_search_box #btnZzk { border: none; border-radius: 3px; background: #2196F3; vertical-align: top; } #sidebar_search #sidebar_search_box #btnZzk:hover { background: #089e8a; color: #fff; cursor: pointer; }
JS
<script> (function () { const $ = (id) => typeof id === "string" ? document.getElementById(id) : null; const Box = function () {}; const Particle = function () {}; Box.prototype = { pool: [], ctx: null, width: 300, height: 150, timer: 0, init: function (canvasId, wrapId) { this.wrapId = wrapId; let canvas = $(canvasId); const wrap = $(wrapId); if (!wrapId) { return; } if (!canvas) { const o = document.createElement("canvas"); o.setAttribute("id", "bubbleCanvas"); o.style="width: 100%;height:100%;position: absolute;top: 0;left: 0;"; o.innerHTML = "您的瀏覽器不支持 Canvas 動畫."; wrap.appendChild(o); canvas = o; } this.ctx = canvas.getContext('2d'); this.width = wrap.offsetWidth > 300 ? wrap.offsetWidth : 300; this.height = wrap.offsetHeight > 150 ? wrap.offsetHeight : 150; canvas.width = this.width; canvas.height = this.height; for (let x = 0; x < this.width * 0.1; x++) { var c = new Particle(); this.pool.push(c); } this.animate(); }, animate: function () { this.ctx.clearRect(0, 0, this.width, this.height); for (let i = 0; i < this.pool.length; i++) { this.pool[i].init(this.ctx, this.width, this.height); } /** * 使用 requestAnimationFrame的好處,一旦頁面不處於瀏覽器的當前標簽,就會自動停止刷新。這就節省了CPU、GPU和電力。 * 下面的其實是該功能的一個 polyfill. **/ window.requestAFrame = (function () { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { return window.setTimeout(callback, 1000 / 60); }; })(); this.timer = window.requestAFrame(this.animate.bind(this)); }, resize: function (id) { if (this.timer) { window.cancelAnimationFrame(this.timer); } } }; Particle.prototype = { haveInit: false, ctx: null, width: 300, height: 150, positionX: 0, positionY: 0, alpha: 0, scale: 0, velocity: 0, init: function (ctx, width, height) { // 初始效果 if (!this.haveInit) { this.haveInit = true; this.ctx = ctx; this.width = width; this.height = height; this.positionX = Math.random() * this.width; this.positionY = this.height + Math.random() * 100; this.alpha = 0.1 + Math.random() * 0.3; this.scale = 0.1 + Math.random() * 0.3; this.velocity = Math.random(); return; } // 變化 => 重置 if(this.alpha <= 0) { this.haveInit = false; this.init(ctx, width, height); } // 變化效果 this.positionY -= this.velocity; this.alpha -= 0.0005; ctx.beginPath(); ctx.arc(this.positionX, this.positionY, this.scale * 10, 0, 2 * Math.PI, false); ctx.fillStyle = 'rgba(255,255,255,' + this.alpha + ')'; ctx.fill(); } } let box = new Box(); box.init("bubbleCanvas", "blogTitle"); // 銷毀重建 => 光銷毀 box 是不行的,還要銷毀粒子效果的 粒子們。 window.onresize = function () { box.resize(); box.pool = []; box.init("bubbleCanvas", "blogTitle"); } }()); </script>
博客園樣式自定義(待更新)