[extends base.html] <!-- 继承基础模板 -->

[!keywords]"关键字测试"[~keywords]
[!description]"测试网站"[~description]
<!-- 这里故意不引入模板标签,是因为不引入代表默认继承 -->
<!-- 只要引入就会替换基础模板对应标签内容 -->
[!title]首页 - 模板功能测试[~title]

[!style]
<link rel="stylesheet" href="/static/styling.css">
<link rel="stylesheet" href="/static/index.css">
[~style]

[!header]<a href="about.html" class="home-link">跳转到关于我们</a>[~header]

[!content]
[!test]<h1>欢迎来到首页 - 模板功能测试</h1>[~test]
<div class="ind_content_main">
	<h2>主内容区</h2>
	<p><a href="about.html">了解更多 →</a></p>
</div>

<!-- 模板功能测试区域 -->
<div class="template-test">
	<h3>模板功能测试</h3>

	<div class="test-result">
		<h4>1. 模板继承与区块替换测试</h4>
		<p>状态: <span style="color: green;">✓ 成功</span></p>
		<p>此页面通过 <code>"[extends base.html]"</code> 正确继承了基础模板</p>
	</div>

	<div class="test-result">
		<h4>2. 变量替换测试</h4>
		<p>当前路径: {{currentUrl}}</p>
		<p>状态: <span style="color: green;">✓ 成功</span></p>
	</div>
</div>

<!-- 用户自定义功能测试区域 -->
<div class="user-function-test">
	<h3>用户自定义功能测试</h3>

	<div class="test-result">
		<h4>1. 实用函数测试</h4>
		<p>加法测试: 10 + 5 = {{user:functions.add(10, 5)}}</p>
		<p>乘法测试: 7 × 3 = {{user:functions.multiply(7, 3)}}</p>
		<p>格式化日期测试: {{user:functions.formatDate()}}</p>
		<p>状态: <span style="color: green;">✓ 成功</span></p>
	</div>

	<div class="test-result">
		<h4>2. 路由函数测试</h4>
		<p>简单问候: {{user:functions.greet('访客')}}</p>
		<p>带时间问候: {{user:functions.greetWithTime('用户')}}</p>
		<p>年份变量加10: {{user:functions.add({{year}}, 10)}}</p>
		<p>状态: <span style="color: green;">✓ 成功</span></p>
	</div>
</div>

<!-- 路由功能测试区域 -->
<div class="route-test">
	<h3>用户自定义路由测试</h3>

	<div class="test-result">
		<h4>1. GET路由测试</h4>
		<button class="test-button" type="button" onclick="testRoute('/api/greeting')">测试问候路由</button>
		<button class="test-button" type="button" onclick="testRoute('/api/hi/小明')">测试用户路由</button>
		<div id="get-result" class="api-result">点击按钮测试路由...</div>
	</div>

	<div class="test-result">
		<h4>2. POST路由测试</h4>
		<button class="test-button" type="button" onclick="testPostRoute()">测试联系表单路由</button>
		<div id="post-result" class="api-result">点击按钮测试POST路由...</div>
	</div>
</div>
[~content]

[!footer]
© {{year}} 我的网站 | 首页 | 模板测试
[~footer]

[!script]
<script src="/static/styling.js" defer></script>
<script>
	// 获取当前样式文件路径
	window.getCurrentStyleFile = () => {
		return '/static/index.css';
	}
	// 首页特定的模板测试脚本
	console.log('首页模板测试完成');

	// 用户功能测试脚本
	console.log('用户功能测试:');
	// 注意函数和变量标签结果非字符串的,在js中如果单独存在,需要使用反引号包裹,目的不被格式化并能高亮辨识
	console.log('加法结果:', `{{user:functions.add(10, 5)}}`);
	// 字符串型结果需引号包裹,并拼接引号,因为解析时会去掉外层引号,内部添加引号目的是保持高亮和不被解析为数学表达式
	console.log('格式化日期:', '"' + '{{user:functions.formatDate()}}' + '"');
	// 如果你习惯不高亮,可以直接这样写
	console.log('格式化日期:', '{{user:functions.formatDate()}}');

	// 路由测试函数
	async function testRoute(url) {
		try {
			document.getElementById('get-result').innerHTML = '请求中...';
			const response = await fetch(url), data = await response.json();
			document.getElementById('get-result').innerHTML = JSON.stringify(data, null, 2);
		} catch (error) {
			document.getElementById('get-result').innerHTML = `错误: ${error.message}`;
		}
	}

	async function testPostRoute() {
		try {
			document.getElementById('post-result').innerHTML = '请求中...';
			const response = await fetch('/api/contact', {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json'
				},
				body: JSON.stringify({
					name: '测试用户',
					email: 'test@index.com',
					message: '这是一个测试消息'
				})
			}), data = await response.json();
			document.getElementById('post-result').innerHTML = JSON.stringify(data, null, 2);
		} catch (error) {
			document.getElementById('post-result').innerHTML = `错误: ${error.message}`;
		}
	}

	// 页面加载时测试一个简单路由
	window.addEventListener('load', () => {
		testRoute('/api/greeting').catch(console.error);
	});

</script>
[~script]