Ecx-UI-2-顶栏+头图
:::success
Ecx-UI第一期
:::
顶栏
:::danger
基于@安知鱼
的导航栏改造
:::
修改
/themes/butterfly/layout/includes/header/nav.pug
,将全部内容替换为: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- const { darkmode } = theme
nav#nav
#toggle-menu
a.site-page
i.fas.fa-list
span#blog_name
a#site-name(href=url_for('/'))
.title #[=config.title]
i.fa-solid.fa-house
div.mask-name-container
center(id="name-container")
a(id="page-name" href="javascript:rmf.scrollToTop()") my-blog
#menus
if (theme.algolia_search.enable || theme.local_search.enable)
div.nav-button#search-button
a.site-page.social-icon.search
i.fas.fa-search.fa-fw
span=' '+_p('search.title')
div.nav-button#nav-totop
a.totopbtn
i.fas.fa-arrow-up
span#percent(onclick="btf.scrollToDest(0,500)") 0
!=partial('includes/header/menu_item', {}, {cache: true})修改
/themes/butterfly/layout/includes/header/index.pug
,将全部内容替换为: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
50if !theme.disable_top_img && page.top_img !== false
if is_post()
- var top_img = page.top_img || page.cover || page.randomcover
else if is_page()
- var top_img = page.top_img || theme.default_top_img
else if is_tag()
- var top_img = theme.tag_per_img && theme.tag_per_img[page.tag]
- top_img = top_img ? top_img : (theme.tag_img !== false ? theme.tag_img || theme.default_top_img : false)
else if is_category()
- var top_img = theme.category_per_img && theme.category_per_img[page.category]
- top_img = top_img ? top_img : (theme.category_img !== false ? theme.category_img || theme.default_top_img : false)
else if is_home()
- var top_img = theme.index_img !== false ? theme.index_img || theme.default_top_img : false
else if is_archive()
- var top_img = theme.archive_img !== false ? theme.archive_img || theme.default_top_img : false
else
- var top_img = page.top_img || theme.default_top_img
if top_img !== false
- var imgSource = top_img && top_img.indexOf('/') !== -1 ? `background-image: url('${url_for(top_img)}')` : `background: ${top_img}`
- var bg_img = top_img ? imgSource : ''
- var site_title = page.title || page.tag || page.category || config.title
- var isHomeClass = is_home() ? 'full_page' : 'not-home-page'
- is_post() ? isHomeClass = 'post-bg' : isHomeClass
else
- var isHomeClass = 'not-top-img'
else
- var top_img = false
- var isHomeClass = 'not-top-img'
header#page-header(class=isHomeClass style=bg_img)
!=partial('includes/header/nav', {}, {cache: true})
if top_img !== false
if is_post()
include ./post-info.pug
else if is_home()
#site-info
h1#site-title=site_title
if theme.subtitle.enable
- var loadSubJs = true
#site-subtitle
span#subtitle
if(theme.social)
#site_social_icons
!=fragment_cache('social', function(){return partial('includes/header/social')})
#scroll-down
i.fas.fa-angle-down.scroll-down-effects
else
#page-site-info
h1#site-title=site_title在
/themes/butterfly/source/css
中添加nav_menu.css
,写入如下内容,并在_conflg.butterfly.yml
中引入。
1 | #nav a:hover { |
- 添加并引入bar.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#nav {
top: 20px ;
width: 96% ;
margin-left: 2% ;
border-radius: 1145px;
box-shadow: 0px 0px 10px 5px rgb(255, 166, 0) ;
background: rgba(255,255,255,0)
}
#page-header.nav-fixed #nav {
background-image: linear-gradient(25deg, #e2288593, #e2839093, #ebc3a593, #f2ffb893) ;
}
#page-header.nav-fixed #nav {
top: -45px ;
}
#nav #site-name {
text-shadow: 2px 2px 4px rgb(0 0 0 / 15%);
font-weight: bold;
border-radius: 30px;
cursor: pointer;
background: #0060ff;
margin-left: 10px;
color:rgb(255, 255, 255);
}
#page-header #nav .nav-button a {
margin: 4px;
background: #0060ff;
border-radius: 2000px;
padding: 5px;
color:rgb(255, 255, 255);
}
#page-header.nav-fixed #nav a, #page-header.nav-fixed #nav #site-name, #page-header.nav-fixed #nav #toggle-menu {
color: #ffffff ;
border-radius: 20px;
text-shadow: none;
}
顶栏悬浮&圆角&拟态风格
通过css的top等属性实现
1 | /* 顶栏悬浮 */ |
如果想要顶栏按钮填色,可以
1 | /* 按钮填色 */ |
去掉头图部分的黑色遮罩,可以
1 | /* 头图透明 */ |
头图不全屏
1 | /* 头图不全屏 */ |
深色标题适配浅色背景
1 | /* 适配浅色背景的深色标题 */ |
发表评论