CARDS主題 & 導航欄樣式修改
阿新 • • 發佈:2020-11-29
每個人對於主題樣式的感覺是不一樣的,譬如字型大小,間距,高寬,距離,顏色等,我們可以一定程度內很直觀地去修改主題的某些樣式。
首先,在瀏覽器中利用開發者工具進行除錯,找到我們所要改動的那部分結構,寫入css樣式,調試出我們所想得到的結果並記住所對應的樣式選擇器。
其次,我們需要在cards主題中找到擁有這些樣式選擇器的模組,修改程式碼,寫入我們剛剛除錯過的程式碼,最後執行清理、部署、執行即可。
---
### 主題`main_color`顏色配置,自定義喜歡的色調
```
style:
# 顏色配置
color:
main_color: '#3c4f65'
```
### 導航欄頂部固定以及子欄目間距調整
1. 在瀏覽器開發者工具模式預先調試出理想的樣式,找出對應的選擇器
![editCards1.png](https://i.loli.net/2020/11/28/RgywKeSAuc2B5oM.png)
![editCards2.png](https://i.loli.net/2020/11/28/5JDFsb6GTj9raKW.png)
![editCards3.png](https://i.loli.net/2020/11/28/OJUpW4AK7qcuQNx.png)
2. 在`themes\cards\source\css\style\_functions\header.styl`文件中,找到對應的選擇器,修改樣式
```css
.header /* 頂部固定 */
display flex
justify-content space-between
align-items center
height 54px
padding 0 calc(var(--space)/2)
top 0
z-index 10
position sticky
background-color var(--bg-content-color)
```
```css
.header__right /* 子欄目間距調整 */
.navbar__menus
padding 0 0 0 15px
.navbar-menu
font-size 16px
padding 16px 12px 16px 12px
border-radius 5px
#btn-search
#btn-toggle-dark
padding 21px 12px 16px 12px
```
### 寫在最後
在最起初建站時,對HEXO還是足夠陌生的!對於這樣的系統文件的結構總是摸不到頭腦。我其實一開始就想更改某些樣式,但是無從下手,鬱悶極了!
在這種程度的狀況下,我從配置文件說明開始研究,能搞懂多少是多少,在三番五次的折騰中,局勢就慢慢開朗了!當然折騰從未結束,更多的問題還要去