CARDS主題 & 導航欄樣式修改

Serenpity發表於2020-11-29

每個人對於主題樣式的感覺是不一樣的，譬如字型大小，間距，高寬，距離，顏色等，我們可以一定程度內很直觀地去修改主題的某些樣式。

首先，在瀏覽器中利用開發者工具進行除錯，找到我們所要改動的那部分結構，寫入css樣式，除錯出我們所想得到的結果並記住所對應的樣式選擇器。

其次，我們需要在cards主題中找到擁有這些樣式選擇器的模組，修改程式碼，寫入我們剛剛除錯過的程式碼，最後執行清理、部署、執行即可。

主題main_color顏色配置，自定義喜歡的色調

style: 
  # 顏色配置
  color: 
    main_color: '#3c4f65'

導航欄頂部固定以及子欄目間距調整

  1. 在瀏覽器開發者工具模式預先除錯出理想的樣式，找出對應的選擇器

editCards1.png

editCards2.png

editCards3.png

  1. 在themes\cards\source\css\style\_functions\header.styl文件中，找到對應的選擇器，修改樣式
.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)

 .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還是足夠陌生的！對於這樣的系統文件的結構總是摸不到頭腦。我其實一開始就想更改某些樣式，但是無從下手，鬱悶極了！

在這種程度的狀況下，我從配置文件說明開始研究，能搞懂多少是多少，在三番五次的折騰中，局勢就慢慢開朗了！當然折騰從未結束，更多的問題還要去琢磨。

相關文章