文档说明：
无论是纯静态404页面，还是整合Typecho内容模块设置的404页面，前面小刘都已经分享过了。今天，索性将本站正在使用的404页面分享给大家。
友情提示：限Typecho，仅适配Jasmine主题。
效果预览：
>>前往预览
涉及文件：
usr/themes/jasmine/404.php
使用说明：
1.在usr/themes/jasmine目录下新建一个404.php文件（若无）
2.编辑404.php文件内容如下：
<?php if (!defined("__TYPECHO_ROOT_DIR__")) {
exit();
} ?>
<!DOCTYPE html>
<html lang="zh">
<?php $this->need("header.php"); ?>
<body class="jasmine-body" data-prismjs-copy="点击复制" data-prismjs-copy-error="按Ctrl+C复制" data-prismjs-copy-success="内容已复制！">
<div class="jasmine-container grid grid-cols-12">
<?php $this->need("component/sidebar-left.php"); ?>
<div class="flex col-span-12 lg:col-span-8 flex-col lg:border-x-2 border-stone-100 dark:border-neutral-600 lg:pt-0 lg:px-6 pb-10 px-3">
<?php $this->need("component/menu.php"); ?>
<?php if(isMobile()): ?>
<?php else: ?>
<div class="warning-box" style="background: #fff3f8;margin-top: 10px;">
🤔 盲生，你发现了华点</div>
<?php endif;?>
<div class="not-found-container">
<h1 class="title">404 - Not Found</h1>
<p class="description">您访问的页面可能已被移除、重命名或暂时不可用</p>
<a href="/" class="home-link">返回首页 →</a>
</div>
<?php if(isMobile()): ?>
<?php else: ?>
<?php if (isPluginAvailable("Links")) {
Links_Plugin::output('<a href="{url}" rel="nofollow" target="_blank" title="{title}">
<div class=" flex gap-x-2 p-4 border border-stone-100 hover:border-stone-300 dark:border-neutral-600 rounded shadow" style="margin-top:14px;">
<section class="w-14 h-14 min-w-fit min-h-fit">
<img src="{image}"class="w-14 h-14 min-w-fit min-h-fit rounded-full" loading="lazy"/>
</section>
<section class="flex flex-col justify-center gap-y-2">
<h4 class="text-sm ">{name}</h4>
<p class="line-clamp-1 text-sm dark:text-gray-350">{title}</p>
</section>
</div>
</a>');
} else {
echo '<span class="col-span-3"> <a class="text-orange-400" href="
GitHub
target="_blank">Links 插件</a> 未启用，若要使用友情链接功能，请先安装并启用。</span>';
} ?>
<div class="border-b-2 border-stone-100 dark:border-neutral-600"></div>
<div class="border-b-2 border-stone-100 dark:border-neutral-600" style="margin-top: 20px;"></div>
<div>
<?php $this->need('component/newest-posts.php'); ?>
</div>
<?php endif;?>
<style>
.not-found-container {
margin-top: 12px;
padding: 40px;
text-align: center;
background: #fff3f8;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.title {
color: #2d3436;
font-size: 2.2em;
margin: 15px 0;
font-weight: 600;
}
.description {
color: #636e72;
font-size: 1.1em;
line-height: 1.6;
margin: 20px 0;
}
.home-link {
display: inline-block;
padding: 12px 30px;
background: #ff6b81;
color: white;
text-decoration: none;
border-radius: 25px;
transition: all 0.3s ease;
margin-top: 20px;
font-weight: 500;
}
.home-link:hover {
background: #ff4757;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(255, 107, 129, 0.3);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
.not-found-container {
padding: 25px;
}
.title {
font-size: 1.8em;
}
}
</style>
</div>
<div class="hidden lg:col-span-3 lg:block" id="sidebar-right">
<?php $this->need("component/sidebar.php"); ?>
</div>
</div>
<?php $this->need("footer.php"); ?>
</body>
</html>
