@flun/html-template 4.0.10

package/templates/index.html

@@ -0,0 +1,140 @@
+[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]

package/templates/script.html

@@ -0,0 +1,209 @@
+[extends base.html]
+
+[!title]html样式编辑器[~title]
+[!style]
+<link rel="stylesheet" href="/static/script.css">
+<!-- CodeMirror 核心库与主题 -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/theme/dracula.min.css">
+<!-- 折叠、lint、自动补全样式 -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/fold/foldgutter.min.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/lint/lint.min.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/hint/show-hint.min.css">
+[~style]
+
+[!my] [~my]
+[!header][~header]
+[!content]
+<!-- CSS编辑器模态框 <label for="code">代码编辑区：</label> -->
+<div class="modal">
+	<div id="cssEditor">
+		<div class="header">
+			<h2>编辑CSS样式</h2>
+			<span class="close-btn">&times;</span>
+		</div>
+		<h3 class="editor-info">
+			⚡ 编辑器功能: 颜色选择 · 编辑 · 自动补全 · 代码折叠 · 预览 · 保存应用· 取消
+		</h3>
+		<textarea id="cssContent" placeholder="CSS内容将在这里显示..." spellcheck="false"></textarea>
+		<div class="actions">
+			<button id="previewBtn" type="button">预览</button>
+			<button id="cancelPreviewBtn" type="button">取消预览</button>
+			<button id="saveBtn" type="button">保存并应用</button>
+			<button id="cancelBtn" type="button">取消</button>
+		</div>
+	</div>
+</div>
+
+<!-- 预览容器 -->
+<div id="preview" class="preview-container">
+	<iframe id="previewFrame" title="预览页面"></iframe>
+</div>
+
+<!-- 加载指示器 -->
+<div id="loader" class="loader">
+	<p>加载中...</p>
+</div>
+[~content]
+
+[!variables] [~variables]
+[!footer]
+© {{year}} 我的网站 | 编辑器页 | 样式编辑器
+[~footer]
+
+[!script]
+<!-- CodeMirror JS 与 CSS 模式 -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/css/css.min.js"></script>
+
+<!-- 折叠功能 -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/fold/foldcode.min.js"></script>
+<script src="/static/utils/foldgutter.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/fold/brace-fold.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/fold/comment-fold.min.js"></script>
+
+<!-- 语法检查依赖：CodeMirror lint 核心 + CSSTree -->
+<script src="/static/utils/css-lint.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/lint/lint.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/css-tree@3.1.0/dist/csstree.min.js"></script>
+
+<!-- 自动补全 -->
+<script src="/static/utils/closebrackets.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/edit/matchbrackets.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/hint/show-hint.min.js"></script>
+<script src="/static/utils/custom-css-hint.js"></script>
+
+<!-- 高亮匹配选中词、活动行 -->
+<script src="/static/utils/match-highlighter.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/selection/active-line.min.js"></script>
+
+<!-- 库插件样式自定义 -->
+<style>
+	/* 增大折叠按钮 */
+	#cssEditor .CodeMirror .CodeMirror-foldgutter-open,
+	#cssEditor .CodeMirror .CodeMirror-foldgutter-folded,
+	#cssEditor .CodeMirror .CodeMirror-foldgutter-open::after,
+	#cssEditor .CodeMirror .CodeMirror-foldgutter-folded::after {
+		font-size: 25px;
+	}
+
+	/* 增加折叠 gutter 的宽度,避免按钮显示不全 */
+	#cssEditor .CodeMirror .CodeMirror-foldgutter {
+		width: 26px;
+	}
+
+	/* 强制 tooltip 显示的样式 */
+	.CodeMirror-lint-tooltip {
+		z-index: 10000;
+		background-color: #ffd;
+		border: 1px solid #000;
+		color: #000;
+		font-family: monospace;
+		font-size: 12px;
+		padding: 6px 10px;
+		max-width: 600px;
+		word-wrap: break-word;
+		white-space: pre-wrap;
+		line-height: 1.5;
+		transition: none;
+	}
+
+	/* 自动补全列表样式 */
+	.CodeMirror-hints {
+		background-color: #282a36;
+		border: 1px solid #6272a4;
+		border-radius: 4px;
+		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
+		font-family: 'Consolas', 'Monaco', monospace;
+		font-size: 13px;
+		max-height: 250px;
+		overflow-y: auto;
+		z-index: 10000;
+	}
+
+	.CodeMirror-hint {
+		color: #f8f8f2;
+		padding: 4px 8px;
+		cursor: pointer;
+		white-space: pre;
+		border-bottom: 1px solid #44475a;
+	}
+
+	.CodeMirror-hint-active {
+		background-color: #44475a;
+		color: #50fa7b;
+	}
+
+	.CodeMirror-hint:hover {
+		background-color: #6272a4;
+		color: #f8f8f2;
+	}
+
+	/* 匹配括号高亮 */
+	.CodeMirror-matchingbracket {
+		background-color: rgba(124, 136, 126, 1) !important;
+		font-weight: bold;
+		text-decoration: none !important;
+	}
+
+	/* 自定义高亮 */
+	.custom-highlight {
+		background-color: rgba(255, 255, 0, 0.3) !important;
+	}
+</style>
+
+<script>
+	// 等待 DOM 加载完成后初始化编辑器
+	(function () {
+		function initEditor() {
+			const textarea = document.getElementById('cssContent');
+			if (!textarea) return;
+
+			window.cssEditor = CodeMirror.fromTextArea(textarea, {
+				lineNumbers: true,
+				mode: 'css',
+				theme: 'dracula',
+				lineWrapping: true,
+				indentUnit: 4,
+				autoCloseBrackets: true,
+				matchBrackets: true,
+				foldGutter: true,
+				gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
+				lint: {
+					getAnnotations: window.customCssLint,
+					async: true
+				},
+				styleActiveLine: true,
+				hintOptions: {
+					completeSingle: false,   // 即使只有一个匹配也显示列表
+					closeOnUnfocus: false
+				}
+			});
+
+			window.cssEditor.setSize('100%', '100%');
+
+			// ----- 输入时自动弹出补全 -----
+			window.cssEditor.on("inputRead", (cm, change) => {
+				// 如果输入内容包含冒号，立即触发补全（优先响应）
+				if (change.text.join('').includes(':')) {
+					clearTimeout(cm.autocompletionTimeout);
+					cm.autocompletionTimeout = setTimeout(() => cm.showHint({ completeSingle: false }), 0);
+					return;
+				}
+				// 其他输入（字母、数字、删除等）延迟触发
+				clearTimeout(cm.autocompletionTimeout);
+				cm.autocompletionTimeout = setTimeout(() => cm.showHint({ completeSingle: false }), 150);
+			});
+
+			attachCustomHighlight(window.cssEditor); // 高亮匹配选中词(自定义)
+			setTimeout(() => window.cssEditor.performLint(), 100);
+		}
+
+		if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', initEditor);
+		else initEditor();
+	})();
+</script>
+
+<!-- 本地文件 -->
+<script src="/static/script.js"></script>
+[~script]

package/templates/test-include.html

@@ -0,0 +1,11 @@
+<div style="background: #a89148; padding: 15px; border-radius: 4px; border: 1px solid #ffeaa7; margin: 10px 0;">
+    <h4 style="margin-top: 0; color: #043885;">包含文件测试成功!</h4>
+    <p>这个内容来自 <strong>"test-include.html"</strong> 文件</p>
+    <p>当前年份: {{year}}</p>
+    <p>页面URL: {{currentUrl}}</p>
+    <p>生成时间戳: {{timestamp}}</p>
+
+    <div style="margin-top: 10px; padding: 8px; background: #0f7934; border-radius: 3px;">
+        <small>注意: 如果这个框显示为深绿色背景，说明包含功能正常工作!</small>
+    </div>
+</div>