Shoka主题：新增博客新年灯笼

# 前言

# 实现

# 新增主题设置

在主题的 yml 文件中，找到 footer ，下面新增 latern 选项，如下：

footer:

  # Specify the date when the site was setup. If not defined, current year will be used.

  since: 2020

  # …………（省略）

  count: true

  powered: true

  # 新增 latern

  lantern:   

    enable: true  #是否开启

    word1: 春   #第一个字

    word2: 节   #第二个字

# 新增 div

在 themes\shoka\layout\_partials\footer.njk 中新增（可以在 {%- if theme.footer.powered %} 这句代码前增加以下内容)

{%- if theme.footer.lantern.enable %}

  <!-- 灯笼 1 -->

  <div class="deng-box">

    <div class="deng">

        <div class="xian"></div>

        <div class="deng-a">

            <div class="deng-b"><div class="deng-t">{{ theme.footer.lantern.word2 }}</div></div>

        </div>

        <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>

    </div>

  </div>

  <!-- 灯笼 2 -->

  <div class="deng-box1">

    <div class="deng">

        <div class="xian"></div>

        <div class="deng-a">

            <div class="deng-b"><div class="deng-t">{{ theme.footer.lantern.word1 }}</div></div>

        </div>

        <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>

    </div>

  </div>

{%- endif %}

# 添加样式表

1. 在根目录的 source\_data 新建文件命名为 custom.styl ；

2. 填入以下内容：

   	.deng-box {
   	position: fixed;
   	top: -40px;
   	right: -20px;
   	z-index: -1;
   	}
   	.deng-box1 {
   	position: fixed;
   	top: -30px;
   	right: 10px;
   	z-index: -1;
   	.deng {
   	position: relative;
   	width: 120px;
   	height: 90px;
   	margin: 50px;
   	background: #d8000f;
   	background: rgba(216, 0, 15, 0.8);
   	border-radius: 50% 50%;
   	-webkit-transform-origin: 50% -100px;
   	-webkit-animation: swing 5s infinite ease-in-out;
   	box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
   	}
   	}
   	.deng {
   	position: relative;
   	width: 120px;
   	height: 90px;
   	margin: 50px;
   	background: #d8000f;
   	background: rgba(216, 0, 15, 0.8);
   	border-radius: 50% 50%;
   	-webkit-transform-origin: 50% -100px;
   	-webkit-animation: swing 3s infinite ease-in-out;
   	box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
   	&:before {
   	position: absolute;
   	top: -7px;
   	left: 29px;
   	height: 12px;
   	width: 60px;
   	content: " ";
   	display: block;
   	z-index: 999;
   	border-radius: 5px 5px 0 0;
   	border: solid 1px #dc8f03;
   	background: #ffa500;
   	background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
   	}
   	&:after {
   	position: absolute;
   	bottom: -7px;
   	left: 10px;
   	height: 12px;
   	width: 60px;
   	content: " ";
   	display: block;
   	margin-left: 20px;
   	border-radius: 0 0 5px 5px;
   	border: solid 1px #dc8f03;
   	background: #ffa500;
   	background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
   	}
   	}
   	.deng-a {
   	width: 100px;
   	height: 90px;
   	background: #d8000f;
   	background: rgba(216, 0, 15, 0.1);
   	margin: 12px 8px 8px 10px;
   	border-radius: 50% 50%;
   	border: 2px solid #dc8f03;
   	}
   	.deng-b {
   	width: 45px;
   	height: 90px;
   	background: #d8000f;
   	background: rgba(216, 0, 15, 0.1);
   	margin: -4px 8px 8px 26px;
   	border-radius: 50% 50%;
   	border: 2px solid #dc8f03;
   	}
   	.xian {
   	position: absolute;
   	top: -20px;
   	left: 60px;
   	width: 2px;
   	height: 20px;
   	background: #dc8f03;
   	}
   	.shui-a {
   	position: relative;
   	width: 5px;
   	height: 20px;
   	margin: -5px 0 0 59px;
   	-webkit-animation: swing 4s infinite ease-in-out;
   	-webkit-transform-origin: 50% -45px;
   	background: #ffa500;
   	border-radius: 0 0 5px 5px;
   	}
   	.shui-b {
   	position: absolute;
   	top: 14px;
   	left: -2px;
   	width: 10px;
   	height: 10px;
   	background: #dc8f03;
   	border-radius: 50%;
   	}
   	.shui-c {
   	position: absolute;
   	top: 18px;
   	left: -2px;
   	width: 10px;
   	height: 35px;
   	background: #ffa500;
   	border-radius: 0 0 0 5px;
   	}
   	.deng-t {
   	font-size: 3.2rem;
   	color: #dc8f03;
   	font-weight: bold;
   	line-height: 85px;
   	text-align: center;
   	}
   	.night .deng-t,
   	.night .deng-box,
   	.night .deng-box1 {
   	background: transparent !important;
   	}
   	@-moz-keyframes swing {
   	0% {
   	-moz-transform: rotate(-10deg)
   	}
   	50% {
   	-moz-transform: rotate(10deg)
   	}
   	100% {
   	-moz-transform: rotate(-10deg)
   	}
   	}
   	@-webkit-keyframes swing {
   	0% {
   	-webkit-transform: rotate(-10deg)
   	}
   	50% {
   	-webkit-transform: rotate(10deg)
   	}
   	100% {
   	-webkit-transform: rotate(-10deg)
   	}
   	}

3. 重新生成，🆗