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>
|