anzhiyu主题启用顶部视频背景

2025-03-06:修复文章页顶部图不显示的问题

适配双端显示不同视频

需要修改主题源码，建议做好备份


修改源码

覆盖 themes/anzhiyu/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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
if !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_home()
    - var top_img = theme.index_img !== false ? theme.index_img || theme.default_top_img : false
    - var home_index_img = theme.index_img !== false ? theme.index_img || theme.default_top_img : false
    - var home_video = theme.index_video
  else
    - var top_img = page.top_img || theme.default_top_img

  if top_img !== false
    - var imgSource = top_img && top_img.indexOf('/') !== -1 ? url_for(top_img) : top_img
    - var bg_img = top_img ? imgSource : ''
    - var home_index_img_bg = home_index_img ? home_index_img : ''
    - 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=home_index_img_bg)
  if is_home()
    if theme.index_video
      video.full-page-video.pc-video(autoplay loop muted playsinline style="display: none;")
        source(src=theme.index_video type="video/mp4")
    if theme.index_video_mobile
      video.full-page-video.mobile-video(autoplay loop muted playsinline style="display: none;")
        source(src=theme.index_video_mobile type="video/mp4")

  !=partial('includes/header/nav', {}, {cache: true})
  
  if top_img !== false
    if is_post()
      if page.bilibili_bg
        !=partial('includes/bili-banner/index')
      else
        include ./post-info.pug
        if theme.dynamicEffect && theme.dynamicEffect.postTopWave
          section.main-hero-waves-area.waves-area
            svg.waves-svg(xmlns='http://www.w3.org/2000/svg', xlink='http://www.w3.org/1999/xlink', viewBox='0 24 150 28', preserveAspectRatio='none', shape-rendering='auto')
              defs
                path#gentle-wave(d='M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z')
              g.parallax
                use(href='#gentle-wave', x='48', y='0')
                use(href='#gentle-wave', x='48', y='3')
                use(href='#gentle-wave', x='48', y='5')
                use(href='#gentle-wave', x='48', y='7')
        #post-top-cover
          img#post-top-bg(class='nolazyload' src=bg_img)

    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.anzhiyufont.anzhiyu-icon-angle-down.scroll-down-effects
    else
      #page-site-info
        h1#site-title=site_title

添加CSS

在 blogroot/source/css/custom.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
91
92
93
94
95
96
97
98
99
100
101
102
103
/* 首页视频背景样式 */
.full-page-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* 确保其他内容在视频上层 */
#page-header.full_page #site-info {
  position: relative;
  z-index: 1;
}

/* 修复下拉箭头位置 */
#page-header.full_page #scroll-down {
  position: absolute;
  z-index: 2;
  bottom: 0;
  width: 100%;
  cursor: pointer;
  text-align: center;
  font-size: 24px;
}

/* 向下滚动后的导航栏样式 */
#nav.show {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px) !important;
}

[data-theme="dark"] #nav.show {
  background: rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(10px) !important;
}

/* 确保导航栏在视频上层 */
#nav {
  z-index: 3;
}

/* aplayer主容器圆角（含默认状态和固定模式） */
.aplayer,
.aplayer-fixed .aplayer-body {
  border-radius: 16px !important;
}

/* 封面图片圆角（左侧匹配主容器） */
.aplayer .aplayer-pic {
  border-radius: 16px 0 0 16px !important;
}

/* 播放列表（配合主容器圆角） */
.aplayer-list {
  border-radius: 0 0 16px 16px !important;
}

/* PC端显示PC视频 */
@media screen and (min-width: 768px) {
  .pc-video {
    display: block !important;
  }

  .mobile-video {
    display: none !important;
  }
}

/* 移动端显示移动视频 */
@media screen and (max-width: 767px) {
  .mobile-video {
    display: block !important;
  }

  .pc-video {
    display: none !important;
  }
}

/* 确保视频层级 */
.full-page-video {
  z-index: 0 !important;
}

/* 确保封面图在视频上层 */
#post-top-cover {
  position: relative;
  z-index: 2;
}

/* 首页文字内容层级 */
#page-header.full_page #site-info {
  position: relative;
  z-index: 2;
}

/* 导航栏保持最上层 */
#nav {
  z-index: 3;
}

添加视频链接

在 _config.anzhiyu.yml 中的合适位置添加

1
2
3
#首页视频背景配置
index_video: xxxxx # PC端视频URL
index_video_mobile: xxxxx # 移动端视频URL

引用CSS

在 _config.anzhiyu.yml 中的 inject 位置引用创建的css文件

1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/css/custom.css?1">