本文详细介绍了在Hexo博客中运行自定义HTML的四种方法：CSS隔离、保留主题样式、独立页面和iframe嵌入，帮助你根据不同需求选择最适合的方案。
我的独立页面
body {
background: #f0f8ff;
font-family: Arial, sans-serif;
padding: 40px;
}
.custom-box {
background: white;
border: 2px dashed #4a90e2;
padding: 30px;
max-width: 600px;
margin: 0 auto;
text-align: center;
}
h1 {
color: #4a90e2;
}
独立页面示例
这个页面完全不受主题样式影响
当前时间:
document.getElementById('time').textContent = new Date().toLocaleString();
保留主题样式运行html说明保留主题样式，在主题样式下运行html文件,不需要完整的html文件。1.只需要style标签和body标签和script标签即可。注意：去掉所有空行，外层标签需要顶格写2.样式问题要注意，有些样式比如原有固定样式button这种尽量就不要再去定义，因为主题一般包含，你要如果要定义样式的话就使用重新自定义类名的方法等等，保证不会影响到主题样式。3.尺寸宽度问题，需要限制宽度，不要让内容超出文本区域宽度，使用宽度限制,非要足够的宽度可以添加全屏功能.
input-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input, textarea {
width: 100%;
padding: 8px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}
textarea {
height: 120px;
}
button {
back ...
/* 隔离作用域 */
.isolated-container, .isolated-container * {
all: initial !important; /* 重置所有样式 */
display: revert !important; /* 恢复默认显示方式 */
}
/* 重新定义样式 */
.isolated-container {
display: block !important;
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
color: white !important;
padding: 40px;
border-radius: 20px;
font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', sans-serif !important;
margin: 30px 0;
box-shadow: 0 10px 30px ...
这是一个测试，你好吗？
我的独立页面
.minesweeper-container {
max-width: 100%;
margin: 0 auto;
padding: 20px;
background-color: #f0f0f0;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
overflow-x: auto;
}
.minesweeper-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.minesweeper-title {
font-size: 24px;
font-weight: bold;
color: #333;
margin: 0;
}
.minesweeper-controls {
display: flex;
...
Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.
Quick StartCreate a new post1$ hexo new "My New Post"
More info: Writing
Run server1$ hexo server
More info: Server
Generate static files1$ hexo generate
More info: Generating
Deploy to remote sites1$ hexo deploy
More info: Deployment
