👋 感谢您使用PFDS驱动您的文档!
GitHub GitHub

  • ......

这里演示的代码为本页的内容,目的是为了介绍如何使用PFDS中的PMD语法进行文档编写。
# lang[汉="引言" En="Introduction"]

(::
lang[汉="PFDS(Pure Frontend Document System)是一个基于纯前端技术构建的文档系统,无需后端服务即可快速搭建本地文档网站。本文档将全面深入地分析PFDS框架的实现细节、潜在问题和解决方案,帮助开发者更好地理解和使用该系统。" En="PFDS (Pure Frontend Document System) is a document system built entirely with frontend technologies, allowing users to quickly set up a local document website without any backend services. This document will provide a comprehensive and in-depth analysis of the implementation details, potential issues, and solutions of the PFDS framework, helping developers better understand and utilize the system."]
::)


## lang[汉="项目概述" En="Project Overview"]

lang[汉="PFDS的核心理念是简化文档编写流程,让开发者能够专注于内容创作,而无需关心复杂的部署和维护工作。通过提供热更新开发、全局搜索、一键部署等功能,PFDS大幅提升了文档编写和维护的效率。" En="The core concept of PFDS is to simplify the document creation process, allowing developers to focus on content creation without worrying about complex deployment and maintenance tasks. By providing features such as hot update development, global search, and one-click deployment, PFDS significantly improves the efficiency of document writing and maintenance."]





## lang[汉="核心特性" En="Core Features"]
* <span data-lang-汉="热更新开发:无需重新编译,快速迭代" data-lang-En="Hot-reload Development: Real-time preview of modifications to improve document writing efficiency"></span>
* <span data-lang-汉="主题自由切换: 提供默认白/深色主题,支持自定义 CSS 样式" data-lang-En="Theme Switching: Provides default light/dark themes and supports custom CSS styles"></span>
* <span data-lang-汉="一键部署: 生成静态 HTML 文件,轻松部署到 GitHub Pages/Vercel 等平台" data-lang-En="One-click Deployment: Generates static HTML files for easy deployment to platforms like GitHub Pages/Vercel"></span>
* <span data-lang-汉="自动化导航: 根据目录结构自动生成侧边栏和导航菜单" data-lang-En="Automated Navigation: Automatically generates sidebar and navigation menus based on directory structure"></span>
* <span data-lang-汉="全局搜索: 支持全局搜索,快速找到所需内容" data-lang-En="Global Search: Supports global search to quickly find required content"></span>
* <span data-lang-汉="语法支持: 支持 PMD(类markdown)、HTML 等多种格式" data-lang-En="Syntax Support: Supports multiple formats including PMD (markdown-like) and HTML"></span>
* <span data-lang-汉="低消耗: 不涉及后端,全部计算均在访客端,服务器仅需提供静态文件服务" data-lang-En="Low Resource Consumption: No backend involved, all computations happen on the visitor side, the server only needs to provide static file services"></span>
* <span data-lang-汉="按需加载: 支持 CSS 和 JavaScript 的按需加载,提高性能" data-lang-En="On-demand Loading: Supports on-demand loading of CSS and JavaScript to improve performance"></span>

## lang[汉="技术优势" En="Technical advantage"]
* <span data-lang-汉="纯前端实现:无需后端服务,降低部署复杂度" data-lang-En="Pure front-end implementation: No back-end service required, reducing deployment complexity"></span>
* <span data-lang-汉="模块化架构:功能模块独立,便于维护和扩展" data-lang-En="Modular architecture: Functional modules are independent, making maintenance and expansion easier."></span>
* <span data-lang-汉="高性能:按需加载和代码隔离机制,提升运行性能" data-lang-En="High Performance: On-demand loading and code isolation mechanisms enhance runtime performance."></span>
* <span data-lang-汉="易用性:简洁的命令行接口和配置系统" data-lang-En="Ease of use: Simple command-line interface and configuration system"></span>
* <span data-lang-汉="可扩展性:支持自定义语法、主题和模块" data-lang-En="Extensibility: Supports multiple document formats and themesScalability: Supports custom syntax, themes, and modules"></span>
## lang[汉="适用场景" En="Applicable Scenarios"]
* <span data-lang-汉="项目文档和说明" data-lang-En="Project documentation and instructions"></span>
* <span data-lang-汉="技术文档" data-lang-En="Technical documentation"></span>
* <span data-lang-汉="帮助文档" data-lang-En="Help documentation"></span>
* ......


pmd
最后更新时间: 2025-09-29 14:17:11

print("Hello, World!")
if True:
    print("This is a test")python
def hello_world():
    print("Hello, World!")
    return True

result = hello_world()
print(f"Result: {result}")python
- [x] **任务一**
- [ ] ~~任务二~~
- [ ] _任务三_pmd
这是内联代码示例:console.log("Hello")console.log("Hello")。 测试完成。
最后更新时间: 2025-09-20 02:21:16

  • Node.js >= 14.0.0
  • npm

🔗 Node

npx pfds-init@latest
bash

cd my-pfds-project
pfds dev
bash
最后更新时间: 2025-09-29 14:13:18

最后更新时间: 2025-09-29 14:29:06

最后更新时间: 2025-09-29 14:36:00

# Level 1 Heading
## Level 2 Heading
### Level 3 Heading
pmd

  • lang[汉="Chinese content" En="English content"]

最后更新时间: 2025-09-29 15:55:00

[Link text](https://example.com)
pmd

[Link text](#pageID)
pmd

![Image alt text](https://example.com/image.png)
pmd

Link text 内部链接 Image alt text
最后更新时间: 2025-09-29 15:17:28

  • 列表项1
  • 列表项2
    • 子列表项
      • 子子列表项
  1. First item
  2. Second item
    1. Sub-item
      1. Sub-sub-item
  3. Third item
最后更新时间: 2025-09-29 15:36:57

  • Unfinished task
  • Completed task
  • Sub-task
最后更新时间: 2025-09-29 15:28:34

``` console.log('Hello PFDS!'); ```

```javascript console.log('Hello PFDS!'); ```

```javascript= console.log('可复制的代码'); ```

console.log('Hello PFDS!');
console.log('Hello PFDS!');
javascript
console.log('可复制的代码');
javascript
最后更新时间: 2025-09-29 15:31:18

| :--- | :---: | ---: | | A | B | C | | D | E | F |

A B C
D E F
最后更新时间: 2025-09-29 15:34:49

--- === ···

---中心文字内容的单分割线--- ===中心文字内容的双分割线=== ···中心文字内容的虚线分割线···




中心文字内容的单分割线
中心文字内容的双分割线
中心文字内容的虚线分割线
最后更新时间: 2025-09-29 15:40:30

This is regular notification box content
This is a bordered notification box
This is a colored notification box
This is a rounded notification box
This is a rounded notification box
This is a colored notification box
最后更新时间: 2025-09-29 15:47:58

Collapse Block Title
最后更新时间: 2025-09-29 15:58:22

<script> // 这个脚本将被隔离执行,修改目标元素文本 console.log("这是JS隔离测试的私有脚本"); document.getElementById('jsTest').textContent = "JS隔离测试成功"; </script>

<script public> // 这个脚本将被合并到公共脚本文件中 console.log("这是公共脚本"); document.getElementById('publicScriptResult').textContent = "公共脚本执行成功"; </script>
最后更新时间: 2025-09-29 16:09:57

<style> .isolated-style { color: #ff6b6b; font-weight: bold; font-size: 1.2em; background-color: #f0f0f0; padding: 10px; border-radius: 5px; border: 2px solid #41b38a; } </style>
最后更新时间: 2025-09-29 16:13:00

{ "routes": [ { "id": "页面ID", "title": "页面标题", "file": "页面文件路径" }, { "group": "Group Name", "items": [ { "id": "pageID", "title": "Page Title", "file": "page file path" } ] } ] }

最后更新时间: 2025-09-29 16:19:48

pfds.json

{
  "pre-declaration": {
    "enable": true,
    "content": "👋 感谢您使用PFDS驱动您的文档!"
  },
  "header": {
    "title": "PFDS--文档",
    "favicon": "icon:copy",
    "logo": "icon:copy",
    "logoLink": "https://www.npmjs.com/package/my-pfds",
    "logoTitle": "PFDS--文档",
    "themeToggle": true,
    "search": true
  },
  "multilingual": {
    "enable": true,
    "languages": [
      {
        "name": "简体中文",
        "code": "汉"
      },
      {
        "name": "English",
        "code": "En"
      }
    ]
  },
  "theme": "default",
  "initCssAutoLoad": true,
  "initJsAutoLoad": true
}
json

router.json

{
  "routes": [
    {
      "id": "页面ID",
      "title": "页面标题",
      "file": "页面文件路径"
    },
    {
      "group": "Group Name",
      "items": [
        {
          "id": "pageID",
          "title": "Page Title",
          "file": "page file path"
        }
      ]
    }
  ]
}
json

head.json

{
  "head": [
    {
      "title": "快捷操作",
      "children": [
        {
          "title": "返回上级",
          "url": "../"
        },
        {
          "title": "演示选项",
          "url": "../"
        }
      ]
    },
    {
      "title": "GitHub",
      "url": "https://github.com/nanxiangxi/pfds"
    },
    {
      "title": "GitHub",
      "icon": "icon:github",
      "url": "https://github.com/nanxiangxi/pfds"
    }
  ]
}
json

icons.json

{
  "icons": [
    {
      "name": "github",
      "url": "data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzUzMTE0NzI1MTg4IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwNDkgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjMyMTEiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cGF0aCBkPSJNNTI0Ljk3OTMzMiAwQzIzNC42NzYxOTEgMCAwIDIzNC42NzYxOTEgMCA1MjQuOTc5MzMyYzAgMjMyLjA2ODY3OCAxNTAuMzY2NTk3IDQyOC41MDEzNDIgMzU4Ljk2NzY1NiA0OTguMDM1MDI4IDI2LjA3NTEzMiA1LjIxNTAyNiAzNS42MzYwMTQtMTEuMjk5MjI0IDM1LjYzNjAxNC0yNS4yMDU5NjEgMC0xMi4xNjgzOTUtMC44NjkxNzEtNTMuODg4NjA3LTAuODY5MTcxLTk3LjM0NzE2MS0xNDYuMDIwNzQxIDMxLjI5MDE1OS0xNzYuNDQxNzI5LTYyLjU4MDMxOC0xNzYuNDQxNzI5LTYyLjU4MDMxOC0yMy40Njc2MTktNjAuODQxOTc2LTU4LjIzNDQ2Mi03Ni40ODcwNTUtNTguMjM0NDYzLTc2LjQ4NzA1NS00Ny44MDQ0MDktMzIuMTU5MzMgMy40NzY2ODQtMzIuMTU5MzMgMy40NzY2ODUtMzIuMTU5MzMgNTMuMDE5NDM2IDMuNDc2Njg0IDgwLjgzMjkxIDUzLjg4ODYwNyA4MC44MzI5MSA1My44ODg2MDcgNDYuOTM1MjM4IDc5Ljk2MzczOSAxMjIuNTUzMTIyIDU3LjM2NTI5MSAxNTIuOTc0MTEgNDMuNDU4NTU0IDQuMzQ1ODU1LTMzLjg5NzY3MiAxOC4yNTI1OTMtNTcuMzY1MjkxIDMzLjAyODUwMS03MC40MDI4NTctMTE2LjQ2ODkyNS0xMi4xNjgzOTUtMjM5LjAyMjA0Ny01Ny4zNjUyOTEtMjM5LjAyMjA0Ny0yNTkuMDEyOTgyIDAtNTcuMzY1MjkxIDIwLjg2MDEwNi0xMDQuMzAwNTI5IDUzLjg4ODYwNy0xNDAuODA1NzE1LTUuMjE1MDI2LTEzLjAzNzU2Ni0yMy40Njc2MTktNjYuOTI2MTczIDUuMjE1MDI3LTEzOS4wNjczNzIgMCAwIDQ0LjMyNzcyNS0xMy45MDY3MzcgMTQ0LjI4MjM5OSA1My44ODg2MDcgNDEuNzIwMjEyLTExLjI5OTIyNCA4Ni45MTcxMDgtMTcuMzgzNDIyIDEzMS4yNDQ4MzMtMTcuMzgzNDIyczg5LjUyNDYyMSA2LjA4NDE5OCAxMzEuMjQ0ODMzIDE3LjM4MzQyMkM3NTYuMTc4ODM5IDIwMy4zODYwMzIgODAwLjUwNjU2NCAyMTcuMjkyNzcgODAwLjUwNjU2NCAyMTcuMjkyNzdjMjguNjgyNjQ2IDcyLjE0MTIgMTAuNDMwMDUzIDEyNi4wMjk4MDYgNS4yMTUwMjYgMTM5LjA2NzM3MiAzMy44OTc2NzIgMzYuNTA1MTg1IDUzLjg4ODYwNyA4My40NDA0MjQgNTMuODg4NjA3IDE0MC44MDU3MTUgMCAyMDEuNjQ3NjktMTIyLjU1MzEyMiAyNDUuOTc1NDE1LTIzOS44OTEyMTggMjU5LjAxMjk4MiAxOS4xMjE3NjQgMTYuNTE0MjUxIDM1LjYzNjAxNCA0Ny44MDQ0MDkgMzUuNjM2MDE1IDk3LjM0NzE2MSAwIDcwLjQwMjg1Ny0wLjg2OTE3MSAxMjYuODk4OTc4LTAuODY5MTcyIDE0NC4yODIzOTkgMCAxMy45MDY3MzcgOS41NjA4ODIgMzAuNDIwOTg4IDM1LjYzNjAxNSAyNS4yMDU5NjEgMjA4LjYwMTA1OS02OS41MzM2ODYgMzU4Ljk2NzY1Ni0yNjUuOTY2MzUgMzU4Ljk2NzY1NS00OTguMDM1MDI4QzEwNDkuOTU4NjYzIDIzNC42NzYxOTEgODE0LjQxMzMwMSAwIDUyNC45NzkzMzIgMHoiIGZpbGw9IiM4YThhOGEiIHAtaWQ9IjMyMTIiPjwvcGF0aD48cGF0aCBkPSJNMTk5LjA0MDE3NyA3NTMuNTcxMzI2Yy0wLjg2OTE3MSAyLjYwNzUxMy01LjIxNTAyNiAzLjQ3NjY4NC04LjY5MTcxMSAxLjczODM0MnMtNi4wODQxOTgtNS4yMTUwMjYtNC4zNDU4NTUtNy44MjI1NGMwLjg2OTE3MS0yLjYwNzUxMyA1LjIxNTAyNi0zLjQ3NjY4NCA4LjY5MTcxMS0xLjczODM0MnM1LjIxNTAyNiA1LjIxNTAyNiA0LjM0NTg1NSA3LjgyMjU0eiBtLTYuOTUzMzY5LTQuMzQ1ODU2TTIxOS45MDAyODMgNzc3LjAzODk0NWMtMi42MDc1MTMgMi42MDc1MTMtNy44MjI1NCAwLjg2OTE3MS0xMC40MzAwNTMtMi42MDc1MTQtMy40NzY2ODQtMy40NzY2ODQtNC4zNDU4NTUtOC42OTE3MTEtMS43MzgzNDItMTEuMjk5MjI0IDIuNjA3NTEzLTIuNjA3NTEzIDYuOTUzMzY5LTAuODY5MTcxIDEwLjQzMDA1MyAyLjYwNzUxNCAzLjQ3NjY4NCA0LjM0NTg1NSA0LjM0NTg1NSA5LjU2MDg4MiAxLjczODM0MiAxMS4yOTkyMjR6IG0tNS4yMTUwMjYtNS4yMTUwMjdNMjQwLjc2MDM4OSA4MDcuNDU5OTMyYy0zLjQ3NjY4NCAyLjYwNzUxMy04LjY5MTcxMSAwLTExLjI5OTIyNC00LjM0NTg1NS0zLjQ3NjY4NC00LjM0NTg1NS0zLjQ3NjY4NC0xMC40MzAwNTMgMC0xMi4xNjgzOTUgMy40NzY2ODQtMi42MDc1MTMgOC42OTE3MTEgMCAxMS4yOTkyMjQgNC4zNDU4NTUgMy40NzY2ODQgNC4zNDU4NTUgMy40NzY2ODQgOS41NjA4ODIgMCAxMi4xNjgzOTV6IG0wIDBNMjY5LjQ0MzAzNCA4MzcuMDExNzQ5Yy0yLjYwNzUxMyAzLjQ3NjY4NC04LjY5MTcxMSAyLjYwNzUxMy0xMy45MDY3MzctMS43MzgzNDItNC4zNDU4NTUtNC4zNDU4NTUtNi4wODQxOTgtMTAuNDMwMDUzLTIuNjA3NTEzLTEzLjAzNzU2NiAyLjYwNzUxMy0zLjQ3NjY4NCA4LjY5MTcxMS0yLjYwNzUxMyAxMy45MDY3MzcgMS43MzgzNDIgNC4zNDU4NTUgMy40NzY2ODQgNS4yMTUwMjYgOS41NjA4ODIgMi42MDc1MTMgMTMuMDM3NTY2eiBtMCAwTTMwOC41NTU3MzMgODUzLjUyNmMtMC44NjkxNzEgNC4zNDU4NTUtNi45NTMzNjkgNi4wODQxOTgtMTMuMDM3NTY2IDQuMzQ1ODU1LTYuMDg0MTk4LTEuNzM4MzQyLTkuNTYwODgyLTYuOTUzMzY5LTguNjkxNzExLTEwLjQzMDA1MyAwLjg2OTE3MS00LjM0NTg1NSA2Ljk1MzM2OS02LjA4NDE5OCAxMy4wMzc1NjYtNC4zNDU4NTUgNi4wODQxOTggMS43MzgzNDIgOS41NjA4ODIgNi4wODQxOTggOC42OTE3MTEgMTAuNDMwMDUzeiBtMCAwTTM1MS4xNDUxMTYgODU3LjAwMjY4NGMwIDQuMzQ1ODU1LTUuMjE1MDI2IDcuODIyNTQtMTEuMjk5MjI0IDcuODIyNTQtNi4wODQxOTggMC0xMS4yOTkyMjQtMy40NzY2ODQtMTEuMjk5MjI0LTcuODIyNTRzNS4yMTUwMjYtNy44MjI1NCAxMS4yOTkyMjQtNy44MjI1NGM2LjA4NDE5OCAwIDExLjI5OTIyNCAzLjQ3NjY4NCAxMS4yOTkyMjQgNy44MjI1NHogbTAgME0zOTEuMTI2OTg2IDg1MC4wNDkzMTVjMC44NjkxNzEgNC4zNDU4NTUtMy40NzY2ODQgOC42OTE3MTEtOS41NjA4ODIgOS41NjA4ODItNi4wODQxOTggMC44NjkxNzEtMTEuMjk5MjI0LTEuNzM4MzQyLTEyLjE2ODM5NS02LjA4NDE5Ny0wLjg2OTE3MS00LjM0NTg1NSAzLjQ3NjY4NC04LjY5MTcxMSA5LjU2MDg4MS05LjU2MDg4MiA2LjA4NDE5OC0wLjg2OTE3MSAxMS4yOTkyMjQgMS43MzgzNDIgMTIuMTY4Mzk2IDYuMDg0MTk3eiBtMCAwIiBmaWxsPSIjOGE4YThhIiBwLWlkPSIzMjEzIj48L3BhdGg+PC9zdmc+",
      "width": 20,
      "height": 20
    }
  ]
}
json
最后更新时间: 2025-09-29 16:27:43

┌─────────────────────────────────────┐ │ 用户界面层 │ │ (浏览器中运行的静态 HTML/CSS/JS) │ └─────────────────────────────────────┘ │ ┌─────────────────────────────────────┐ │ 构建时处理层 │ │ (Node.js 环境中的构建工具) │ └─────────────────────────────────────┘ │ ┌─────────────────────────────────────┐ │ 源文件层 │ │ (dev/ 目录中的源文件) │ └─────────────────────────────────────┘
最后更新时间: 2025-09-29 16:33:28

  • HTML5/CSS3/JavaScript (ES6+)

最后更新时间: 2025-09-29 16:38:43

  1. ......
最后更新时间: 2025-09-29 16:47:16

    编译时间:2025-09-29 16:49:27