| 已完成（2024.8.1-12.1） |
待完成（2024.12.1-2025.1.1） |
| 1. 自定义字体，优化阅读体验 |
1. 字体渲染-CDN加速 |
| 2. 优化布局为居中，精简页面 |
2. 导航栏下拉二级菜单 |
| 3. 引入Gicus评论功能 |
3. 图片格式升级为AVIF |
| 4. 图片接入腾讯云Cos对象存储 |
|
<!DOCTYPE html>
<html>
<head>
<meta charset="<?php $this->options->charset(); ?>"> <!-- 设置字符编码为网站设置的编码 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 兼容 IE 浏览器的最新渲染模式 -->
<meta name="renderer" content="webkit"> <!-- 强制使用 WebKit 渲染引擎 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <!-- 设置视口宽度为设备宽度，并禁用缩放 -->
<title><?php $this->archiveTitle(array('author' => _t('%s 发布的文章')), '', ' - '); ?><?php $this->options->title(); ?></title> <!-- 设置网页标题 -->
<link rel="icon" type="image/svg+xml" href="https://wowood.cn/good1.svg"> <!-- 设置网页图标 -->
<link rel="stylesheet" href="<?php $this->options->themeUrl('prism.css'); ?>"> <!-- 引入 Prism.js 代码高亮样式 -->
<link rel="stylesheet" href="<?php $this->options->themeUrl('prism-line-numbers.css'); ?>"> <!-- 引入 Prism.js 行号样式 -->
<script defer src="<?php $this->options->themeUrl('prism.js'); ?>"></script> <!-- 引入 Prism.js 代码高亮脚本 -->
<script defer src="<?php $this->options->themeUrl('prism-line-numbers.js'); ?>"></script> <!-- 引入 Prism.js 行号脚本 -->
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script> <!-- 引入 jQuery 库 -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400&display=swap" rel="stylesheet"> <!-- 引入 Noto Serif SC 字体 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" rel="stylesheet"> <!-- 引入 lightbox2 的 CSS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script> <!-- 引入 lightbox2 的 JS -->
<style>
@font-face {
font-family: 'SourceHanSerifCN';
src: url('/notoserif/SourceHanSerifCN-Regular.ttf') format('truetype'); /* 指定本地字体文件路径 */
font-weight: normal; /* 字体粗细 */
font-style: normal; /* 字体样式 */
}
* {
font-family: 'SourceHanSerifCN', 'Noto Serif SC', Arial, sans-serif; /* 使用本地字体和 Google Fonts 字体 */
}
body {
word-break: break-all; /* 允许单词断行 */
word-wrap: break-word; /* 允许单词换行 */
text-align: justify; /* 文本对齐方式为两端对齐 */
font-size: 16px; /* 设置默认字体大小 */
margin: 0; /* 去掉外边距 */
padding: 0; /* 去掉内边距 */
background-color: #EDF2FA; /* 设置背景色 */
color: #000000; /* 设置字体颜色 */
padding-bottom: 0px; /* 为底部留出空间以避免被固定元素遮挡 */
box-sizing: border-box; /* 计算元素的宽度和高度时包括边框和内边距 */
overflow-y: scroll; /* 始终显示纵向滚动条 */
}
h1, h2, h3, h4, h5, h6 {
line-height: 1.6; /* 设置行高 */
margin: 5px 0; /* 设置上下外边距 */
}
h1 { font-size: 22px !important; }
h2 { font-size: 20px !important; }
h3 { font-size: 17px !important; margin: 0; }
h4 { font-size: 16px !important; }
h5 { font-size: 14px !important; }
h6 { font-size: 12px !important; }
img {
max-width: 100%; /* 图片最大宽度为容器宽度 */
transition: box-shadow 0.3s ease; /* 添加过渡效果 */
}
img:hover {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0); /* 悬浮时的阴影效果 */
}
pre {
background: #f7f7f7; /* 代码块背景色 */
margin: 1.25rem 0; /* 代码块的上下外边距 */
padding: .9375rem; /* 代码块的内边距 */
overflow: auto; /* 超出部分显示滚动条 */
color: #000; /* 代码文字颜色 */
line-height: 1.6; /* 行高 */
}
blockquote {
padding: 0 15px; /* 引用块的左右内边距 */
color: #000; /* 引用块文字颜色 */
border-left: 4px solid #bbd; /* 引用块左边边框 */
}
table {
width: 100%; /* 表格宽度为容器宽度 */
border-spacing: 2px; /* 表格单元格间距 */
margin: 0; /* 表格的上下外边距 */
}
td, th {
padding: 5px; /* 单元格内边距 */
text-align: center; /* 单元格文字水平居中 */
}
th {
background: #DDD; /* 表头背景色 */
}
td {
background: #fff; /* 单元格背景色 */
text-align: left; /* 单元格文字左对齐 */
font-size: 14px; /* 单元格字体大小 */
}
tr:hover td {
background: #Ffffcc; /* 鼠标悬停时单元格背景色 */
}
#top {
position: fixed; /* 固定位置 */
bottom: 80px; /* 距离底部 80px */
right: 30px; /* 距离右侧 30px */
opacity: 1; /* 不透明度 */
cursor: pointer; /* 鼠标样式为手型 */
}
.container {
max-width: 800px; /* 最大宽度 800px */
margin: 0 auto; /* 水平居中 */
padding: 50px 0 0px; /* 上、右、下内边距 */
box-sizing: border-box; /* 计算宽度和高度时包括内边距和边框 */
}
.container p {
margin: 0; /* 去掉段落外边距 */
padding: 0; /* 去掉段落内边距 */
line-height: 1.6; /* 行高 */
color: #000; /* 段落文字颜色 */
font-size: 16px; /* 段落字体大小 */
}
.postBody {
display: none; /* 隐藏 postBody 元素 */
}
.post-date {
color: #ccc; /* 段落文字颜色 */
font-size: 16px; /* 段落字体大小 */
}
.post-link {
color: #000000; /* 未点击时的颜色 */
text-decoration: none; /* 去掉下划线 */
}
.post-link:visited {
color: #000000; /* 点击后的颜色 */
}
.post-link:active {
color: #ff0000; /* 点击时的颜色（红色） */
}
@media (max-width: 768px) {
.container {
max-width: 100%; /* 容器最大宽度为 100% */
padding: 10px 8px; /* 小屏幕下的内边距 */
}
.header-top, .search-container, .post-date {
display: none; /* 隐藏搜索框和日期 */
}
body {
font-size: 12px; /* 设置字体大小 */
}
table {
font-size: 12px; /* 表格字体大小 */
}
}
/* 滚动条样式 */
body::-webkit-scrollbar {
width: 0px; /* 隐藏滚动条 */
}
body::-webkit-scrollbar-thumb {
background-color: rgba(136, 136, 136, 0.3); /* 滚动条滑块颜色 */
}
body::-webkit-scrollbar-track {
background-color: rgba(246, 246, 243, 0.3); /* 滚动条轨道颜色 */
}
article {
border: 1px dashed #fff; /* 边框颜色和样式 */
padding: 3px; /* 内边距 */
background-color: #fff; /* 设置背景色 */
box-shadow: 0 0px 0px rgba(0, 0, 0, 0); /* 悬浮时的阴影效果 */
}
.post-content a {
color: #551a8b; /* 所有超链接的颜色 */
text-decoration: none; /* 去掉下划线 */
}
/* 可选：设置已访问链接的颜色 */
.post-content a:visited {
color: #551a8b; /* 已访问链接的颜色 */
text-decoration: underline; /* 去掉下划线 */
}
/* 可选：设置鼠标悬停时的颜色 */
.post-content a:hover {
color: #551a8b; /* 悬停时的颜色 */
text-decoration: underline; /* 去掉下划线 */
}
/* 可选：设置点击时的颜色 */
.post-content a:active {
color: #ff0000; /* 点击时的颜色 */
text-decoration: underline; /* 去掉下划线 */
}
/* 导航栏样式 */
.header-top {
position: absolute; /* 改为绝对定位 */
top: 5px; /* 留出 20px 的空间 */
width: 100%;
max-width: 800px; /* 最大宽度 */
background-color: #516C95;
box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1); /* 悬浮时的阴影效果 */
z-index: 1000;
padding: 10px 0;
box-sizing: border-box;
border: 2px solid #000; /* 添加边框 */
left: 50%; /* 使其居中 */
transform: translateX(-50%); /* 使其居中 */
font-size: 17px !important; /* 设置 h3 的字体大小 */
}
.nav-links {
display: flex; /* 使用 flex 布局 */
justify-content: space-around; /* 平均分布 */
align-items: center; /* 垂直居中对齐 */
height: 15px; /* 可以根据需要调整高度 */
width: 100%; /* 使其占满整个宽度 */
}
.nav-links a {
text-decoration: none; /* 去掉链接下划线 */
color: #fff; /* 链接颜色 */
padding: 10px 0; /* 链接内边距 */
transition: color 0.3s; /* 添加过渡效果 */
flex: 1; /* 使每个链接占据相同的空间 */
text-align: center; /* 中心对齐文本 */
}
.nav-links a:hover {
color: #dfdf62; /* 悬停时的颜色 */
}
.nav-divider {
color: #fff; /* 竖线颜色 */
}
/* 为首页表格添加特定样式 */
.home-table {
width: 100%; /* 表格宽度为容器宽度 */
border-collapse: collapse; /* 合并边框 */
margin: 0; /* 表格的上下外边距 */
}
.home-table a {
text-decoration: none; /* 去掉下划线 */
}
.home-table a:hover {
text-decoration: underline; /* 悬停时添加下划线 */
}
.home-table td, .home-table th {
padding: 4px; /* 单元格内边距 */
text-align: left; /* 单元格文字水平居中 */
border: 0; /* 删除单元格边框 */
}
.home-table th {
background: #f0f0f0; /* 表头背景色 */
text-align: justify; /* 标题列文字两端对齐 */
color: #000; /* 单元格字体颜色 */
}
.home-table td {
background: #fff; /* 单元格背景色 */
font-size: 16px; /* 字体大小 */
color: #444444; /* 表头字体颜色 */
}
/* 设置第一列和第二列的宽度 */
.home-table td:first-child, .home-table th:first-child {
width: 70%; /* 第一列宽度 */
text-align: left; /* 单元格文字水平居中 */
}
.home-table td:nth-child(2), .home-table th:nth-child(2) {
width: 22.5%; /* 第二列宽度 */
text-align: right; /* 单元格文字水平居中 */
}
/* 鼠标悬停时单元格背景色 */
.home-table tr:hover td {
background: #FAFAD2; /* 鼠标悬停时单元格背景色 */
}
/* 为每一行添加底部边框 */
.home-table tr {
border-bottom: 1px solid #c1c1c1; /* 添加底部边框 */
}
/* 去掉最后一行的底部边框 */
.home-table tr:last-child {
border-bottom: none; /* 最后一行不添加边框 */
}
.scroll-container {
height: calc(100vh - 80px); /* 设定高度，减去导航栏的高度 */
border: 2px solid #000; /* 外边框样式 */
overflow: hidden; /* 隐藏滚动条 */
background-color: #fff; /* 设置背景色 */
position: relative; /* 相对定位以便内部绝对定位元素 */
box-shadow: inset 0 0 0px rgba(0, 0, 0, 0); /* 内阴影效果 */
}
.scroll-content {
height: 100%; /* 使内容区域高度为100% */
overflow-y: scroll; /* 允许纵向滚动 */
padding: 10px; /* 内边距 */
box-sizing: border-box; /* 包含内边距在内的宽高计算 */
}
/* 隐藏滚动条 */
.scroll-content::-webkit-scrollbar {
display: none; /* 对于 WebKit 浏览器（Chrome, Safari） */
}
.scroll-content {
-ms-overflow-style: none; /* 对于 Internet Explorer 和 Edge */
scrollbar-width: none; /* 对于 Firefox */
}
@media print {
.footer {
display: none; /* 隐藏底部备案号 */
}
.header-top {
display: none; /* 隐藏顶部导航 */
}
#searchBox.search-form-input {
display: none; /* 隐藏搜索框 */
}
.scroll-content {
height: auto; /* 使内容高度自适应 */
overflow: visible; /* 允许内容溢出 */
}
article {
page-break-inside: avoid; /* 避免在文章内部分页 */
}
}
/* 新增：确保所有表格中的链接都没有下划线 */
table a {
text-decoration: none; /* 去掉下划线 */
}
table a:hover {
text-decoration: underline; /* 悬停时添加下划线 */
}
</style>
<?php $this->header(); ?> <!-- 插入网站头部内容 -->
</head>
<body>
<div class="header-top">
<div class="nav-links">
<a href="<?php echo $this->options->siteUrl; ?>">首页</a>
<span class="nav-divider">|</span>
<a href="#" class="search-form-input">搜索</a>
<span class="nav-divider">|</span>
<a href="https://wowood.cn/index.php/254.html">关于</a>
<span class="nav-divider">|</span>
<a href="https://wowood.cn/index.php/391.html">评论</a>
</div>
</div>
<div class="container">
<div class="scroll-container">
<div class="scroll-content">
<?php
if ($this->is('index')) { /* 如果是首页 */
echo '<table class="home-table">'; // 使用特定类名
echo '<tbody>'; // 表格主体
$this->widget('Widget_Contents_Post_Recent', 'pageSize=10000')->parse('<tr class="post-row"><td><a href="{permalink}" class="post-link">{title}</a></td><td class="post-date">{year}/{month}/{day}</td></tr>'); /* 显示最新文章列表 */
echo '</tbody></table>'; // 结束表格
} else {
if ($this->is('category')) { /* 如果是分类页面 */
$this->widget('Widget_Archive@index', 'pageSize=10000&type=category', 'mid='.getCategeId($this->getArchiveSlug()))->parse('{year}/{month}/{day} <a href="{permalink}" class="post-link">{title}</a><br>'); /* 显示分类下的文章列表 */
} elseif ($this->is('post') || $this->is('page')) { /* 如果是文章或页面 */
?>
<article>
<h3 style="text-align: center;"><?php $this->title() ?></h3> <!-- 文章标题 -->
<hr> <!-- 分隔线 -->
<div class="post-content">
<?php $this->content(); ?> <!-- 文章内容 -->
</div>
</article>
<?php if ($this->is('page') && $this->getArchiveSlug() == '391') { ?> <!-- 检查是否为关于我页面 -->
<script src="https://giscus.app/client.js"
data-repo="baicai12138/wowood"
data-repo-id="R_kgDOMjReLQ"
data-category="Announcements"
data-category-id="DIC_kwDOMjReLc4ChnRm"
data-mapping="title"
data-strict="0"
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="top"
data-theme="preferred_color_scheme"
data-lang="zh-CN"
data-loading="lazy"
crossorigin="anonymous"
async>
</script>
<?php } ?>
<?php
}
}
?>
</div>
</div>
</div>
<script>
// 使正文文章中的链接在新窗口中打开
document.querySelectorAll('.post-content a').forEach(function(link) {
link.setAttribute('target', '_blank'); /* 设置所有文章内容中的链接在新窗口中打开 */
});
// 初始化lightbox效果
jQuery(function($){
$("img[src$=jpg],img[src$=gif],img[src$=png],img[src$=jpeg],img[src$=bmp]").each(function(){
$(this).attr("data-lightbox", "gallery"); /* 设置lightbox的data属性 */
});
});
// 在打印前展开所有内容
window.onbeforeprint = function() {
const scrollContainer = document.querySelector('.scroll-container');
const scrollContent = document.querySelector('.scroll-content');
// 设置 scroll-container 的高度为内容的高度
scrollContainer.style.height = 'auto'; // 使高度自适应
scrollContainer.style.overflow = 'visible'; // 允许内容溢出
// 确保 scroll-content 显示
scrollContent.style.display = 'block';
};
// 打印后恢复原状
window.onafterprint = function() {
const scrollContainer = document.querySelector('.scroll-container');
const scrollContent = document.querySelector('.scroll-content');
// 恢复 scroll-container 的显示状态
scrollContainer.style.height = '';
scrollContainer.style.overflow = '';
// 恢复 scroll-content 的显示状态
scrollContent.style.display = '';
};
</script>
<?php $this->footer(); ?> <!-- 插入网站底部内容 -->
<!-- 添加ICP备案信息 -->
<div class="footer-info" style="text-align: center; margin-bottom: 0px;">
<span style="display: inline-block; margin-right: 10px; color: #444444;">
版权所有 © [2024] by <a href="https://wowood.cn/lance/" style="text-decoration: none; color: inherit;">Lance</a>
</span>
<span style="color: #444444;">豫ICP备2023024837号-2</span>
</div>
</body>
</html>