hexo-next更改捐贈按鈕樣式

原因

原本的Reward的按鈕在字太長的時候會不好看
然後顏色我也不喜歡

第一方案(失敗)

原本想說可以使用next功能中
部落格/themes/next/source/css/_custom/custom.styl做自定義修改

可以使用瀏覽器的元件追蹤功能來看
(詳情hexo 自定義頁面樣式
.site-author.motion-element

但是…

Reward按鈕的部分並沒有設定class
沒有class 只有span

雖然他的父物件<button>有設定id
但是使用了css find element by id的語法,還是沒有效果

1
2
3
# id  {
style:
}

功力還不夠啊QQ

最終方案(直接改源碼)

直接改部落格/themes/next/layout/_macro/reward.swig

  1. id="rewardButton"的button元件增加(寬度自己調整)

我自己的設定,更改寬度

1
style="width:250px;"
  1. 在該button的子物件有個<span>,span要加style比較特殊,需要加display: inline-block;

我自己的設定,更改背景顏色,寬度

1
style="background-color: #d633ff; width: 250px; display: inline-block;"

Reference

hexo 自定義頁面樣式

本文地址: https://david6686.github.io/blog/silentink/61883/

加個打賞功能,說不定真的有好心人~