HMPL 项目使用教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00154/article/details/147241071

HMPL 项目使用教程

hmpl 🐜 Server-oriented customizable templating for JavaScript. Apply SSR without robots on any site! 项目地址: https://gitcode.com/gh_mirrors/hm/hmpl

1. 项目的目录结构及介绍

HMPL（High-performance Markup Language）项目是一个服务器导向的可定制模板语言，用于在 JavaScript 中显示 UI。以下是项目的目录结构及其介绍：

hmpl-language/
├── .github/             # GitHub 工作流和配置文件
├── dist/                # 打包后的文件，包含编译后的 JavaScript 代码
├── src/                 # 源代码目录，包含 HMPL 的核心功能
├── test/                # 测试文件和目录
├── www/                 # 示例文件和网站静态资源
├── .babelrc             # Babel 配置文件
├── .editorconfig         # 编辑器配置文件
├── .eslintrc.json       # ESLint 配置文件
├── .gitignore           # Git 忽略文件
├── .mocharc.json        # Mocha 配置文件
├── .prettierrc.json     # Prettier 配置文件
├── CHANGELOG.md         # 更新日志
├── CODE_OF_CONDUCT.md   # 行为准则
├── CONTRIBUTING.md      # 贡献指南
├── LICENSE              # 许可证文件
├── README.md            # 项目说明文件
├── SECURITY.md          # 安全策略
├── package-lock.json    # npm 依赖锁文件
├── package.json         # npm 配置文件
└── tsconfig.json        # TypeScript 配置文件

2. 项目的启动文件介绍

项目的启动文件主要是 www/ 目录下的示例 HTML 文件，这些文件展示了如何使用 HMPL 模板语言。以下是一个简单的启动文件示例：

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HMPL Example</title>
</head>
<body>
    <div id="app"></div>
    <!-- 引入 HMPL 库 -->
    <script src="path/to/hmpl.min.js"></script>
    <script>
        // 使用 HMPL 编译模板
        const templateFn = hmpl.compile('<div>...</div>');
        // 将编译后的模板添加到页面中
        document.querySelector('#app').append(templateFn());
    </script>
</body>
</html>

在这个示例中，hmpl.min.js 是 HMPL 库的压缩版本，需要根据实际情况替换为正确的路径。