在主题配置文件打开页面美化
1 2 3 4 5 6
| beautify: enable: true field: site title-prefix-icon: '\f863' title-prefix-icon-color: "#F47466"
|
1、配置css
在主文件夹下的source/css/文件夹下新建color@1.0.0.css和custom@1.0.0.css两个文件夹
color@1.0.0.css
1 2 3 4 5 6 7 8 9 10
| [data-theme=light] { --card-bg: rgba(255,255,255,.9) !important; }
[data-theme=dark] { --card-bg: rgba(26, 27, 29, .9) !important; --btn-bg: #012c48 !important; }
|
custom@1.0.0.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90
| h1::before, h2::before, h3::before, h4::before, h5::before, h6::before { -webkit-animation: ccc 3s linear infinite ; animation: ccc 3s linear infinite ; }
@-webkit-keyframes ccc { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } to { -webkit-transform: rotate(-1turn); transform: rotate(-1turn) } } @keyframes ccc { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } to { -webkit-transform: rotate(-1turn); transform: rotate(-1turn) } }
#content-inner.layout h1::before { color: #ff6699; margin-left: -1.25rem; font-size: 1.7rem; margin-top: -0.08rem; }
#content-inner.layout h2::before { color: #ffd700; margin-left: -1.15rem; font-size: 1.6rem; margin-top: -0.08rem; }
#content-inner.layout h3::before { color: #66cc99; margin-left: -1.05rem; font-size: 1.5rem; margin-top: -0.28rem; }
#content-inner.layout h4::before { color: #99cc00; margin-left: -0.95rem; font-size: 1.4rem; margin-top: -0.28rem; }
#content-inner.layout h5::before { color: #3399cc; margin-left: -0.85rem; font-size: 1.3rem; margin-top: -0.08rem; }
#content-inner.layout h6::before { color: #ff6666; margin-left: -0.75rem; font-size: 1.2rem; margin-top: -0.08rem; }
#content-inner.layout h1:hover, #content-inner.layout h2:hover, #content-inner.layout h3:hover, #content-inner.layout h4:hover, #content-inner.layout h5:hover, #content-inner.layout h6:hover { color: #49b1f5 ; } #content-inner.layout h1:hover::before, #content-inner.layout h2:hover::before, #content-inner.layout h3:hover::before, #content-inner.layout h4:hover::before, #content-inner.layout h5:hover::before, #content-inner.layout h6:hover::before { color: #49b1f5 ; -webkit-animation: ccc 3.2s linear infinite ; animation: ccc 3.2s linear infinite ; }
#rightside_config i.fas.fa-cog.fa-spin { animation: fa-spin 5s linear infinite ; }
|
2、引入css
在主题配置文件引入两个文件
1 2 3 4 5
| inject: head: - <link rel="stylesheet" href="/css/custom@1.0.0.css"> - <link rel="stylesheet" href="/css/color@1.0.0.css">
|
3、hexo三连部署
打开终端,清缓存重部署测试就好了
1
| hexo clean && hexo g && hexo s
|