如果需要在 ‘page’ 中添加自定义html代码(包括css、js),并且在不修改主题源代码的情况下实现,这篇文章会对你有所帮助。

话不多说,直接开整。

这里我以关于我页面进行实操演示。

实现这个功能,涉及下面的文件:

  • _config.yml(站点文件,主题文件配置均有修改)
  • about.md
  • 自定义html、对应的css、js文件(如有)

站点配置文件_config.yml中修改’skip_render:’,大约在32行。
说明:修改此处,是为了hexo在生成静态页面时跳过对我们自定义html渲染。这里使用的是相对位置。相对起始位置是 ‘source’ 。

skip_render:

- 'about/aboutindex.html'
- 'about/script.js'
- 'about/style.css'
- 'about/sitebox.html'

将自定义的html文件放入你需要的位置,这里我放到了source/about目录下。
这里我也放入我的关于页面源代码,源代码来自于CodePen - Title Text Animation,略有修改,本着开源思想,我未删掉出处。
aboutindex.html代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CodePen - Title Text Animation</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<section class="container">
<h1>
<span class="title">宅男</span>
<span class="title">很单纯</span>
<span class="title">爱研究</span>
<span class="title">9年玄学经验</span>
<span class="title">2年半Java练习生</span>
</h1>
<div class="button">restart</div>
</section>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.min.js'></script>
<script src="./script.js"></script>
</body>
</html>

style.css代码如下:

html {
height: 100%;
}

body {
font-family: "Fjalla One", sans-serif;
background: linear-gradient(to bottom, #eff2f6 0%, #c0d1d5 100%);
}

.container {
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
display: block;
position: absolute;
max-width: 250px;
}

.button {
float: left;
position: relative;
bottom: -65px;
left: 50%;
transform: translateX(-50%) rotate(-10deg);
color: #e55643;
text-transform: uppercase;
opacity: 0;
visibility: hidden;
cursor: pointer;
}
.button span {
transform: skew(-10deg);
display: block;
float: left;
text-shadow: #b5a0ac 1px 1px, #b5a0ac 2px 2px, #b5a0ac 3px 3px, #b5a0ac 4px 4px;
}

h1 {
color: #fff;
text-transform: uppercase;
font-size: 2.625rem; /* 相对单位(rem)的字体大小 */
margin: 0;
line-height: 1.1176; /* 计算方式:line-height = 47px / 42px = 1.1176 */
letter-spacing: 0.0476em; /* 计算方式:letter-spacing = 2px / 42px = 0.0476em */
}

/* 添加媒体查询以适应移动设备,根据需要进行调整 */
@media (max-width: 750px) {
h1 {
font-size: 2.4rem;
line-height: 1.2;
letter-spacing: 0.03em;
}
}

/* 添加更小的媒体查询以进一步适应小屏幕设备 */
@media (max-width: 480px) {
h1 {
font-size: 1.6rem;
line-height: 1.2;
letter-spacing: 0.16em;
}
}

.title {
transform: translateX(-50%) rotate(-10deg);
display: block;
float: left;
left: 40%;
position: relative;
}
.title span {
transform: skew(-10deg);
display: block;
float: left;
text-shadow: #b5a0ac 1px 1px, #b5a0ac 2px 2px, #b5a0ac 3px 3px, #b5a0ac 4px 4px, #b5a0ac 5px 5px, #b5a0ac 6px 6px;
min-width: 10px;
min-height: 10px;
position: relative;
}

.title:nth-child(1) {
color: #e55643;
}
.title:nth-child(2) {
color: #1b6d3e;
}
.title:nth-child(3) {
color: #a59018;
}
.title:nth-child(4) {
color: #3c9ed2;
}
.title:nth-child(5) {
color: #26a0a8;
white-space: nowrap; /* 添加此行,强制在一行中显示文本 */
}

script.js代码如下:

$(document).ready(function() {
$(".title").lettering();
$(".button").lettering();
});

$(document).ready(function() {
animation();
}, 1000);

$('.button').click(function() {
animation();
});

function animation() {
var title1 = new TimelineMax();
title1.to(".button", 0, {visibility: 'hidden', opacity: 0})
title1.staggerFromTo(".title span", 0.5,
{ease: Back.easeOut.config(1.7), opacity: 0, bottom: -80},
{ease: Back.easeOut.config(1.7), opacity: 1, bottom: 0}, 0.05);
title1.to(".button", 0.2, {visibility: 'visible' ,opacity: 1})
}

注意,这里按需配置。
如果你的js、css文件的hrad部分需要引入其他css、js的url,就应该在主题配置文件中进行相关修改;
比如我这里的html文件中第7行:<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
那么我就应该在主题配置文件中的inject中添加(需要你的主题支持插入代码):

inject:
head:
- <link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">

直接上代码:

{% raw %} 
//和末尾的endraw对应,为了不让hexo渲染处理。
<style>
.shadowed-iframe {
box-shadow: 7px 9px 11px 1px rgba(0, 0, 0, 0.3);
border-radius: 23px;
}
</style>
<iframe class="shadowed-iframe" src="aboutindex.html" frameborder="0" width="100%" height="500px"></iframe>//插入html的代码
<script>
//为了能够实现嵌入后动画正常运行
window.addEventListener('message', function(event) {
if (event.data === 'animationStarted') {
}
}, false);
</script>
{% endraw %}