生活随笔
收集整理的這篇文章主要介紹了
关于Typecho的主题魔改记录
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
本站使用handsome主題魔改的折騰過程
- 本文記錄博主在使用該款主題時進行的一系列魔改，也就是你現在看到的一系列效果
- 本站[http://www.cyz4531.top]使用的是handsome主題，Typecho的一款88元付費主題，感覺本站好看的可以去購買來使用，先聲明，作者沒給我廣告費，我真心覺得這款主題功能強大而已，哈哈！
- 本文講述的大多是基于handsome主題的哦！
- 進行主題魔改之前，小伙伴們最好先去備份主題哦！
handsome主題
一款基于的功能齊全、前后臺美麗的、付費的博客主題，想搭建自己博客的小伙伴可以來試試哦！
請看handsome主題作者的文章介紹：https://www.ihewro.com/archives/489/
洛小依的前臺改造插件GorgeousSky
請看插件作者的文章介紹：https://www.lovexint.com/archives/145/
效果如圖：
頭圖和標題翻轉動畫
請看插件作者的文章介紹：https://keymoe.com/archives/55/
效果如圖：
圖片太大，必須得壓縮，不過還是可以看的，效果就是實現在文章第一次出現時，實現動態的出場，是不是感覺也很炫！
隨機圖片
在編輯文章時，如果大頭圖地址和小頭圖地址不填，而且文章時顯示頭圖的，那么將文章的第一張圖片作為頭圖。這是因為 handsome的默認博客頭圖的設置方式，默認是在不填大小頭圖地址下，顯示的是文章內的第一張圖片。
食用方法
- 步驟1：后臺 -> 外觀 -> 設置外觀 -> 主題增強功能 ->博客圖片來源設置 ， 選擇第一個選項(只顯示隨機圖片)
- 步驟2：設置外觀 -> 外觀設置，確保 文章頁面不顯示頭圖、首頁不顯示頭圖者倆項是沒有被勾選
如圖：
- 步驟3：把主題內置的默認圖片更換，更換成自己想要的圖片。主題內置的隨機圖片文件夾的路徑 -> 根目錄/user/themes/handsome/user/img/sj
圖片的大小最好別太大，推薦做法是先把圖片壓縮，再上傳
推薦個圖片壓縮網站：http://www.bejson.com/ui/compress_img/
文章內的打賞圖標跳動
效果如圖：
食用方法：將以下代碼復制粘貼到自定義CSS即可
.btn-pay {animation: star 0.5s ease-in-out infinite alternate
;
}@keyframes star {from {transform: scale(1
);}to {transform: scale(1.1
);}
}
文章標題居中
效果如圖：
食用方法：將以下的代碼復制到自定義CSS即可
.panel h2{text-align: center
;
}
.post-item-foot-icon{text-align: center
;
}
.secret_comment {top: 5px
;
}
.OwO.OwO-open .OwO-body {display:table
}
復制彈框
效果如圖：
食用方法：
步驟1：先將下面代碼復制到自定義輸出body 尾部的HTML代碼即可
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
步驟2：再將下面代碼復制到自定義 Javascript即可
<!--復制彈框
-->
document
.body
.oncopy = function(){Swal
.fire({allowOutsideClick
:false,type
:'success',title
: '復制成功,如轉載請注明出處！',showConfirmButton
: false,timer
: 2000});};
將QQ頭像設置為左邊導航欄圖片
效果如圖：
食用方法：將以下地址復制到初級設置 -> 圖片頭像地址即可
https
://q1
.qlogo
.cn
/g
?b
=qq
&nk
=QQ
&s
=640
將nk=QQ中的QQ換為自己的QQ賬號
文章內的圖片懸停放大并超出范圍
效果如圖：
食用方法：將以下代碼復制到自定義CSS即可
.entry-thumbnail {overflow: hidden
;}#post-content img {border-radius: 10px
;transition: 0.5s
;}#post-content img:hover {transform: scale(1.05
);}@keyframes star {from {transform: scale(1
);}to {transform: scale(1.1
);}}
頂部進度條
食用方法：將以下代碼復制到自定義 JavaScript即可
<!--頁面頂部進度條
-->
let pageHeight
= document
.body
.scrollHeight
|| document
.documentElement
.scrollHeight
;
let windowHeight
= document
.documentElement
.clientHeight
|| document
.body
.clientHeight
;
let scrollAvail
= pageHeight
- windowHeight
;
window
.onscroll = function () {let scrollTop
= document
.documentElement
.scrollTop
|| document
.body
.scrollTop
;document
.querySelector('.progress-top').style
.width
= (scrollTop
/ scrollAvail
) * 100 + '%';
}
博客介紹彩色跳動顯示
效果如圖：
食用方法：將以下代碼復制到初級設置 -> 博主的介紹即可
<span class="text-muted text-xs block"><div id="chakhsu"></div> <script> var chakhsu = function (r) {function t() {return b[Math.floor(Math.random() * b.length)]} function e() {return String.fromCharCode(94 * Math.random() + 33)} function n(r) {for (var n = document.createDocumentFragment(), i = 0; r > i; i++) { var l = document.createElement("span"); l.textContent = e(), l.style.color = t(), n.appendChild(l) } return n}function i() {var t = o[c.skillI]; c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d) } var l = "", o = ["我是白的不能再白的小白" ].map(function (r) {return r + ""}), a = 2, g = 1, s = 5, d = 75, b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"], c = {text: "", prefixP: -s, skillI: 0, skillP: 0, direction: "forward", delay: a, step: g}; i() }; chakhsu(document.getElementById('chakhsu')); </script> </span> </span>
把“以下內容自定義修改”后面的“我是白的不能再白的小白”修改為自己想要的介紹即可
文章圖片陰影
效果如圖：
食用方法：把以下代碼復制到自定義CSS即可
.wrapper-lg img{box-shadow: darkgrey 0px 0px 5px 5px
;
}
博客上方添加心知天氣
效果如圖：
食用方法:
步驟1：在心知天氣的官網[https://www.seniverse.com/]上注冊個賬號，并開通免費版服務。
步驟2：在themes/handsome/component/headnav.php中搜索，在搜索到的地方的前一行添加如下代碼，并把其中的公鑰和私鑰修改為你自己的即可。
<div id="tp-weather-widget" class="navbar-form navbar-form-sm navbar-left shift"></div>
<script>(function(T,h,i,n,k,P,a,g,e){g=function(){P=h.createElement(i);a=h.getElementsByTagName(i)[0];P.src=k;P.charset="utf-8";P.async=1;a.parentNode.insertBefore(P,a)};T["ThinkPageWeatherWidgetObject"]=n;T[n]||(T[n]=function(){(T[n].q=T[n].q||[]).push(arguments)});T[n].l=+new Date();if(T.attachEvent){T.attachEvent("onload",g)}else{T.addEventListener("load",g,false)}}(window,document,"script","tpwidget","//widget.seniverse.com/widget/chameleon.js"))</script>
<script>tpwidget("init", {"flavor": "slim","location": "WX4FBXXFKE4F","geolocation": "enabled","language": "auto","unit": "c","theme": "chameleon","container": "tp-weather-widget","bubble": "enabled","alarmType": "badge","color": "#C6C6C6","uid": "你的公鑰","hash": "你的私鑰"
});
tpwidget("show");</script>
公鑰和私鑰在心知天氣的 控制臺 的 基本信息 可以看到，然后把15和16行的公鑰和私鑰修改為你的即可
網頁失去焦點標題變化
效果如圖：
食用方法：把以下代碼復制到自定義JavaScript即可
var OriginTitile
= document
.title
,
titleTime
;
document
.addEventListener("visibilitychange",
function() {if (document
.hidden
) {document
.title
= "網頁已崩潰！";clearTimeout(titleTime
)} else {document
.title
= "(/≧▽≦/)你又回來了！ " ;titleTime
= setTimeout(function() {document
.title
= OriginTitile
},2000)}
});
以上就是我對handsome主題進行的魔改記錄，希望能夠幫助到你們！嘻嘻,下面倆篇文章也推薦閱讀哦！
[Typecho CommentToMail郵件插件模板美化]
[如何查看自己發表的文章是否被百度收錄呢？]
總結
以上是生活随笔為你收集整理的关于Typecho的主题魔改记录的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
