233 lines
7.9 KiB
PHP
233 lines
7.9 KiB
PHP
<?php
|
||
// 包含配置文件
|
||
require_once 'config.php';
|
||
|
||
// 使用config.php中的数据库连接
|
||
if (!isset($conn) || !$conn instanceof mysqli) {
|
||
die('数据库连接失败，请检查配置文件。');
|
||
}
|
||
|
||
// 创建测试公告数据
|
||
$testAnnouncement = [
|
||
'title' => 'Markdown公告测试',
|
||
'content' => "# Markdown公告测试
|
||
|
||
这是一个**Markdown格式**的公告示例。
|
||
|
||
## 支持的Markdown特性
|
||
- **粗体文本**：使用双星号包裹
|
||
- *斜体文本*：使用星号包裹
|
||
- 列表：使用-或*开头
|
||
- 链接：[访问示例网站](https://example.com)
|
||
- 代码块：
|
||
|
||
```php
|
||
// PHP代码示例
|
||
function hello() {
|
||
echo 'Hello, Markdown!';
|
||
}
|
||
```
|
||
|
||
## 表格示例
|
||
| 功能 | 描述 |
|
||
|------|------|
|
||
| 粗体 | 文本更醒目 |
|
||
| 斜体 | 文本更柔和 |
|
||
| 列表 | 内容分点展示 |
|
||
| 代码 | 保留格式显示 |
|
||
|
||
## 引用
|
||
> 这是一段引用文本
|
||
> 可以有多行引用",
|
||
'created_at' => date('Y-m-d H:i:s')
|
||
];
|
||
|
||
// 模拟历史公告数据
|
||
$testHistoryAnnouncements = [
|
||
[
|
||
'title' => '测试公告一',
|
||
'content' => "# 测试公告一
|
||
|
||
**重要提示**：这是第一条测试公告。
|
||
|
||
- 支持Markdown格式
|
||
- 可以包含各种元素
|
||
|
||
```javascript
|
||
console.log('第一条测试公告');
|
||
```",
|
||
'created_at' => date('Y-m-d H:i:s', strtotime('-1 day'))
|
||
],
|
||
[
|
||
'title' => '测试公告二',
|
||
'content' => "# 测试公告二
|
||
|
||
*这是第二条测试公告*，使用了不同的Markdown格式。
|
||
|
||
- 列表项一
|
||
- 列表项二
|
||
- 列表项三",
|
||
'created_at' => date('Y-m-d H:i:s', strtotime('-2 days'))
|
||
]
|
||
];
|
||
?>
|
||
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>公告Markdown支持测试 - <?php echo APP_STORE_NAME; ?></title>
|
||
<!-- Bootstrap CSS -->
|
||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||
<!-- 自定义CSS -->
|
||
<link rel="stylesheet" href="styles.css">
|
||
<!-- Font Awesome -->
|
||
<link rel="stylesheet" href="/css/all.min.css">
|
||
<!-- SweetAlert2 -->
|
||
<link rel="stylesheet" href="/js/sweetalert.js/dist/sweetalert2.min.css">
|
||
<script src="/js/sweetalert.js/dist/sweetalert2.all.min.js"></script>
|
||
<!-- Marked.js 用于Markdown解析 -->
|
||
<script src="js/marked.js"></script>
|
||
<!-- Fluent Design 模糊效果 -->
|
||
<style>
|
||
.blur-bg {
|
||
backdrop-filter: blur(10px);
|
||
background-color: rgba(255, 255, 255, 0.5);
|
||
}
|
||
.page-transition {
|
||
animation: fadeIn 0.5s ease-in-out;
|
||
}
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; transform: translateY(20px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
.announcement-item {
|
||
margin-bottom: 2rem;
|
||
padding: 1rem;
|
||
border: 1px solid #e9ecef;
|
||
border-radius: 0.3rem;
|
||
}
|
||
.announcement-item h3 {
|
||
margin-bottom: 0.5rem;
|
||
color: #343a40;
|
||
}
|
||
.date {
|
||
color: #6c757d;
|
||
font-size: 0.9rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
.content {
|
||
color: #495057;
|
||
line-height: 1.6;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="page-transition">
|
||
<!-- 导航栏 -->
|
||
<nav class="navbar navbar-expand-lg navbar-light blur-bg">
|
||
<div class="container">
|
||
<a href="index.php"><img src="/favicon.jpeg" alt="Logo" style="height: 30px; margin-right: 10px; border-radius: var(--border-radius);"></a>
|
||
<a class="navbar-brand" href="index.php">返回首页</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="container mt-4">
|
||
<h1 class="text-center">公告Markdown支持测试</h1>
|
||
<p class="text-center">此页面用于测试首页公告和历史公告的Markdown支持功能。</p>
|
||
|
||
<div class="row mt-4">
|
||
<div class="col-md-12">
|
||
<button class="btn btn-primary mb-4" onclick="showMarkdownInfo()">
|
||
<i class="fas fa-info-circle"></i> 了解Markdown
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 首页公告预览 -->
|
||
<div class="row mt-6">
|
||
<div class="col-md-12">
|
||
<h2>首页公告预览</h2>
|
||
<div class="alert alert-info blur-bg">
|
||
<h4 class="alert-heading"><?php echo htmlspecialchars($testAnnouncement['title']); ?></h4>
|
||
<p class="text-muted small">发布时间: <?php echo date('Y-m-d H:i', strtotime($testAnnouncement['created_at'])); ?></p>
|
||
<div id="home-announcement-content"><?php echo htmlspecialchars($testAnnouncement['content']); ?></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 历史公告预览 -->
|
||
<div class="row mt-8">
|
||
<div class="col-md-12">
|
||
<h2>历史公告预览</h2>
|
||
<div class="announcements-list">
|
||
<?php foreach($testHistoryAnnouncements as $announcement): ?>
|
||
<div class="announcement-item">
|
||
<h3><?php echo htmlspecialchars($announcement['title']); ?></h3>
|
||
<p class="date"><?php echo htmlspecialchars($announcement['created_at']); ?></p>
|
||
<div class="content history-content"><?php echo htmlspecialchars($announcement['content']); ?></div>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 原始Markdown文本显示 -->
|
||
<div class="row mt-8">
|
||
<div class="col-md-12">
|
||
<h2>原始Markdown文本</h2>
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<pre class="bg-light p-3 rounded"><code><?php echo htmlspecialchars($testAnnouncement['content']); ?></code></pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 解析Markdown内容
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 解析首页公告
|
||
const homeAnnouncement = document.getElementById('home-announcement-content');
|
||
if (homeAnnouncement) {
|
||
homeAnnouncement.innerHTML = marked.parse(homeAnnouncement.textContent);
|
||
}
|
||
|
||
// 解析历史公告
|
||
const historyContents = document.querySelectorAll('.history-content');
|
||
historyContents.forEach(function(element) {
|
||
element.innerHTML = marked.parse(element.textContent);
|
||
});
|
||
});
|
||
|
||
// 显示Markdown信息弹窗
|
||
function showMarkdownInfo() {
|
||
Swal.fire({
|
||
title: '<strong>Markdown支持说明</strong>',
|
||
icon: 'info',
|
||
html: `
|
||
<p>公告内容现已支持Markdown语法。</p>
|
||
<h5 class="mt-3">支持的Markdown语法:</h5>
|
||
<ul style="text-align: left;">
|
||
<li><strong>粗体文本</strong>: 使用**双星号**包裹</li>
|
||
<li><em>斜体文本</em>: 使用*星号*包裹</li>
|
||
<li><h1>标题</h1>: 使用#号开头</li>
|
||
<li>列表: 使用-或*开头</li>
|
||
<li>代码块: 使用```包裹代码</li>
|
||
<li>链接: [链接文本](链接地址)</li>
|
||
<li>表格: 使用|分隔单元格</li>
|
||
<li>引用: 使用>开头</li>
|
||
</ul>
|
||
`,
|
||
showCloseButton: true,
|
||
focusConfirm: false,
|
||
confirmButtonText: '我明白了',
|
||
confirmButtonAriaLabel: '关闭对话框'
|
||
});
|
||
}
|
||
</script>
|
||
|
||
<!-- Bootstrap JS Bundle with Popper -->
|
||
<script src="js/bootstrap.bundle.js"></script>
|
||
</body>
|
||
</html>
|