最近在逛知乎時，意外發現了一組CSS效果，其中一個太陽系運行的動畫吸引了我。於是我決定把這個效果加到個人博客的首頁頭部中來。
修改首頁
首頁對應的文件是index.hbs，找到其中的header內容，並修改爲：
<header class="site-header outer">
<div class='solar-syst'>
<div class='sun'></div>
<div class='mercury'></div>
<div class='venus'></div>
<div class='earth'></div>
<div class='mars'></div>
<div class='jupiter'></div>
<div class='saturn'></div>
<div class='uranus'></div>
<div class='neptune'></div>
<div class='pluto'></div>
<div class='asteroids-belt'></div>
</div>
<div class="inner">
{{> "site-nav"}}
</div>
</header>編寫CSS
css代碼在作者的codepen上有說明，注意選擇編譯後的css進行查看。我個人寫了一個solar.css保存其內容。
.solar-syst以上的css代碼都可以刪除，並且在該類中加入背景屬性：
.solar-syst {
background: radial-gradient(ellipse at bottom, #1C2837 0%, #050608 100%);
margin: 0 auto;
width: 100%;
height: 600px;
position: relative;
}
...添加CSS
部署css
編輯好的solar.css文件，放置在ghost/content/themes/casper/assets/css下面。
引入css
修改default.hbs，在header中加入css引用。
...
<head>
...
<link rel="stylesheet" type="text/css" href="{{asset "css/solar.css"}}" />
...
</head>
<body ...>
...
</body>以上工作完成後，重啓Ghost即可查看博客的新動畫效果。