如何自定义文章头部图片

样式预览

  1. 首先，在 自定义的 MarkDown 中的添加 type = "xxx"。
  2. 其次，在 自定义的 MarkDown 中 添加如下代码。
1
2
3
4
5
6
7
8
9
10
11
<div id="page">
  <div class="author-content author-content-item xxxPage single">
  <div class="card-content">
  <div class="author-content-item-tips">标题1</div>
    <span class="author-content-item-title">标题2</span>
    <div class="content-bottom">
    <div class="tips">标题3</div>
    </div>
    </div>
  </div>
</div>
  1. 再者，在 Blog/themes/anzhiyu/source/css/_page 中新建 xxx.styl，并添加以下代码。
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
body[data-type="xxx"] #web_bg
  background: var(--anzhiyu-background);
body[data-type="xxx"] #page
  border: 0;
  box-shadow: none !important;
  padding: 0 !important;
  background: 0 0 !important;
  margin-bottom: 50px;
body[data-type="xxx"] #page .page-title
  display: none;

.author-content.author-content-item.xxxPage {
    height: 23rem;
    background: url(https://s3.qjqq.cn/37/6562ff6069f16.webp!color) no-repeat top; 替换为自己的图片
    background-size: cover;
    color: var(--anzhiyu-white);
    overflow: hidden;
    margin-top: 0;
    }  



@media screen and (max-width: 768px){
#body-wrap .layout #article-container #page {
    padding: 0px 0px !important;
}
}

注意

  • 上述步骤中的 type = "xxx" 与 body[data-type="xxx"] 保持一致
  • MarkDown中的 <div class="author-content author-content-item xxxPage single"> 中 xxxPage 与 xxx.styl中 .author-content.author-content-item.xxxPage 中 xxxPage 保持一致。

接下来，就可以去看看效果。