Shoka主题：实现页面背景大图全屏效果

# 前言

# 实现

# 修改 Stylus

1. 找到 themes\shoka\source\css\_common\outline\header\ 目录，以下修改都是在该目录下修改；

2. 找到 brand.styl , 在 #brand 中修改 height 值:

   	#brand {
   	position: fixed;
   	padding: 3rem 5rem 0;
   	text-align: center;
   	width: 100%;
   	height: 50vh; // 修改为 80vh
   	min-height: 10rem;

   修改为

   	#brand {
   	position: fixed;
   	padding: 3rem 5rem 0;
   	text-align: center;
   	width: 100%;
   	height: 80vh;
   	min-height: 10rem;

3. 找到 header.styl , 在 #header 中修改 height 值:

   	#header {
   	margin: 0 auto;
   	position: relative;
   	width: 100%;
   	height: 50vh; // 修改为 100vh
   	text-shadow: 0rem .2rem .3rem alpha(#000, .5);
   	color: var(--header-text-color);

   修改为

   	#header {
   	margin: 0 auto;
   	position: relative;
   	width: 100%;
   	height: 100vh;
   	text-shadow: 0rem .2rem .3rem alpha(#000, .5);
   	color: var(--header-text-color);

4. 找到 image.styl , 在 #imgs 中修改 height 值:

   	#imgs {
   	display: block;
   	position: fixed;
   	top: 0;
   	left: 0;
   	width: 100%;
   	height: 70vh; // 修改为 100vh
   	min-height: 25rem;
   	z-index: -9;
   	background-color: #363636;

   修改为

   	#imgs {
   	display: block;
   	position: fixed;
   	top: 0;
   	left: 0;
   	width: 100%;
   	height: 100vh;
   	min-height: 25rem;
   	z-index: -9;
   	background-color: #363636;

5. 找到 tool.styl , 在 #tool 中修改 top 值:

   	#tool {
   	position: fixed;
   	if (hexo-config('sidebar.position') == 'left') {
   	right: 1rem;
   	} else {
   	left: 1rem;
   	}
   	top: 50vh; // 修改为 90vh
   	z-index: $zindex-2;

   修改为

   	#tool {
   	position: fixed;
   	if (hexo-config('sidebar.position') == 'left') {
   	right: 1rem;
   	} else {
   	left: 1rem;
   	}
   	top: 90vh;
   	z-index: $zindex-2;

6. 找到 waves.styl , 在 #waves 中修改:

   	.waves {
   	width: 100%;
   	height: 15vh;
   	margin-bottom: -.6875rem; // 删除此处
   	min-height: 3.125rem;
   	max-height: 9.375rem;
   	position:relative; // 修改为 absolute
   	// 新增 z-index: 4;
   	+mobile() {
   	height: 10vh;
   	}
   	}

   修改为

   	.waves {
   	width: 100%;
   	height: 15vh;
   	bottom: 0;
   	min-height: 3.125rem;
   	max-height: 9.375rem;
   	position: absolute;
   	z-index: 4;
   	+mobile() {
   	height: 10vh;
   	}
   	}

# 修改 nunjucks (layout)

1. 找到 themes\shoka\layout\_partials\ 目录；

2. 修改 layout.njk , 修改 </header> 的位置，大概 60 行左右:

   	</header>
   	<div id="waves">
   	<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
   	<defs>
   	<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
   	</defs>
   	<g class="parallax">
   	<use xlink:href="#gentle-wave" x="48" y="0" />
   	<use xlink:href="#gentle-wave" x="48" y="3" />
   	<use xlink:href="#gentle-wave" x="48" y="5" />
   	<use xlink:href="#gentle-wave" x="48" y="7" />
   	</g>
   	</svg>
   	</div>
   	<main>

   将 header 标签移动到 id 为 waves 的 div 下方，即:

   	<div id="waves">
   	<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
   	<defs>
   	<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
   	</defs>
   	<g class="parallax">
   	<use xlink:href="#gentle-wave" x="48" y="0" />
   	<use xlink:href="#gentle-wave" x="48" y="3" />
   	<use xlink:href="#gentle-wave" x="48" y="5" />
   	<use xlink:href="#gentle-wave" x="48" y="7" />
   	</g>
   	</svg>
   	</div>
   	</header>
   	<main>

# 图片网格效果

2022.06.23 更新

• 修改 themes\shoka\source\css\_common\outline\header\header.styl ;

• 最上方的 header 修改如下：

  	#header {
  	&::before{
  	background: url(https://cdn.jsdelivr.net/gh/lavender816/CDN@1.8/img/dot.jpg);
  	content: '';
  	position: absolute;
  	top: 0;
  	bottom: 0;
  	left: 0;
  	right: 0;
  	z-index: -4;
  	background-attachment: fixed;
  	}
  	margin: 0 auto;
  	position: relative;
  	width: 100%;
  	height: 100vh;
  	text-shadow: 0rem .2rem .3rem alpha(#000, .5);
  	color: var(--header-text-color);
  	a:hover {
  	color: currentColor;
  	}
  	}

  其中： &::before 是新增的图片网格效果，目前是点状，可以自行下载其他的网格填充。