### Install Project Dependencies

Source: https://github.com/rbetree/menav/blob/main/README.md

This command installs the necessary Node.js packages that MeNav relies on for its build process, template rendering, and other functionalities. It assumes you have Node.js and npm (or yarn) installed. This step is crucial before running the generation commands.

```bash
npm install

```

--------------------------------

### Git Clone Command

Source: https://github.com/rbetree/menav/blob/main/README.md

This command is used to download the MeNav project from its GitHub repository to your local machine. It requires Git to be installed. After cloning, you can navigate into the project directory to install dependencies and start customization.

```bash
git clone https://github.com/rbetree/menav.git
cd menav

```

--------------------------------

### MeNav JavaScript API: Get Config, Update Elements, and Event Handling

Source: https://context7.com/rbetree/menav/llms.txt

This snippet demonstrates how to use the MeNav Browser API to retrieve site configuration, dynamically update various site elements (site, category, and navigation item), and subscribe to or emit events. It requires the global `window.MeNav` object to be available in the browser environment.

```javascript
// window.MeNav - Global API object exposed in generated site

// Get full configuration data
const config = window.MeNav.getConfig();
console.log(config.data.site.title);      // "My Navigation Hub"
console.log(config.data.navigation);      // Navigation array
console.log(config.version);              // "1.0.0"
console.log(config.timestamp);            // "2025-01-15T10:30:00.000Z"

// Update site elements dynamically
window.MeNav.updateElement('site', 'GitHub', {
    name: 'GitHub Updated',
    url: 'https://github.com/newuser',
    description: 'Updated description',
    icon: 'fab fa-github-alt'
});

window.MeNav.updateElement('category', 'Dev Tools', {
    name: 'Development Tools',
    icon: 'fas fa-code'
});

window.MeNav.updateElement('nav-item', 'home', {
    name: 'Home Page',
    icon: 'fas fa-home-alt'
});

// Event system
window.MeNav.events.on('elementUpdated', function(data) {
    console.log(`Updated ${data.type}: ${data.id}`);
});

window.MeNav.events.emit('customEvent', { foo: 'bar' });
```

--------------------------------

### Handlebars Template Usage (Handlebars)

Source: https://context7.com/rbetree/menav/llms.txt

Demonstrates how to use the custom Handlebars helpers within Handlebars templates for conditional rendering and text formatting. It shows examples of equality checks, logical OR operations, and capitalizing text.

```handlebars
{{!-- Usage in templates --}}
{{#if (eq currentPage "home")}}
    <div class="welcome-section">...</div>
{{/if}}

{{#if (or categories sites)}}
    <div class="content">...</div>
{{/if}}

<h2>{{capitalize pageId}}</h2>
```

--------------------------------

### 本地开发模式下的 Bash 命令 - MeNav

Source: https://github.com/rbetree/menav/blob/main/bookmarks/README.md

此命令用于在本地启动 MeNav 开发服务器。需要注意的是，在本地开发模式下，`npm run dev` 命令**不会**自动处理书签文件。必须先手动运行 `npm run import-bookmarks` 命令，然后再运行 `npm run dev` 才能看到书签导入的效果。

```bash
npm run dev
```

--------------------------------

### 导入书签的 Bash 命令 - MeNav

Source: https://github.com/rbetree/menav/blob/main/bookmarks/README.md

此命令用于启动 MeNav 的书签导入处理流程。它会解析 bookmarks 目录中的 HTML 文件，并生成网站配置。请注意，在本地开发模式下，此命令需要手动运行，`npm run dev` 不会自动处理书签。

```bash
npm run import-bookmarks
```

--------------------------------

### Build and Development Commands for MeNav

Source: https://context7.com/rbetree/menav/llms.txt

This section provides the command-line interface (CLI) commands for building and developing the MeNav personal navigation website. It includes instructions for a basic build that generates static files into the 'dist/' directory and a development mode that enables a live server for real-time updates.

```bash
# Basic build - generates static site in dist/ directory
npm run build

# Development mode with live server
npm run dev

```

--------------------------------

### 本地开发构建命令 (package.json)

Source: https://github.com/rbetree/menav/blob/main/README.md

演示了在本地开发环境中用于构建和运行MeNav网站的npm脚本命令。`npm run dev`用于启动开发服务器，`npm run import-bookmarks`用于处理书签文件。

```json
{
  "scripts": {
    "dev": "npm run dev",
    "import-bookmarks": "npm run import-bookmarks",
    "build": "npm run build"
  }
}
```

--------------------------------

### MeNav Project Structure Overview

Source: https://context7.com/rbetree/menav/llms.txt

This outlines the directory structure of the MeNav project. It details the location of default and user configuration files (YAML), Handlebars templates for layouts and pages, and the output directory ('dist/'). Understanding this structure is crucial for customizing and building the navigation website.

```bash
# Project structure
menav/
├── config/
│   ├── _default/           # Default configuration (don't modify)
│   │   ├── site.yml        # Site metadata, fonts, profile
│   │   ├── navigation.yml  # Navigation menu items
│   │   └── pages/          # Page content configs
│   │       ├── home.yml
│   │       ├── projects.yml
│   │       └── bookmarks.yml
│   └── user/               # Your custom configs (priority)
│       ├── site.yml
│       ├── navigation.yml
│       └── pages/
├── templates/
│   ├── layouts/default.hbs
│   ├── pages/*.hbs
│   └── components/*.hbs
└── dist/                   # Generated static files

```

--------------------------------

### 安装项目依赖 (npm)

Source: https://github.com/rbetree/menav/blob/main/README.md

使用npm包管理器安装MeNav项目所需的依赖。这通常是项目的第一步，确保所有必要的库和工具都已就绪。

```bash
npm install
```

--------------------------------

### 项目目录结构示例

Source: https://github.com/rbetree/menav/blob/main/README.md

展示了MeNav项目的典型配置文件结构，包括site.yml、navigation.yml以及pages目录下的各个页面配置文件。此结构有助于理解用户配置文件的组织方式。

```text
config/user/
├── site.yml         # 网站基本信息、字体、个人资料和社交媒体链接
├── navigation.yml   # 导航菜单配置
└── pages/
    ├── home.yml     # 首页配置
    ├── projects.yml # 项目页配置
    ├── articles.yml # 文章页配置
    ├── friends.yml  # 朋友页配置
    └── notes.yml    # 自定义笔记页配置
```

--------------------------------

### Build Static Navigation Site with MeNav

Source: https://context7.com/rbetree/menav/llms.txt

This script demonstrates the core build process for MeNav, including loading configuration, generating HTML from templates, and copying static assets. It uses Node.js modules to manage these tasks.

```javascript
// src/generator.js - Main build process
const { loadConfig, generateHTML, copyStaticFiles } = require('./generator.js');

// Load configuration with priority: user > default
const config = loadConfig();
// Returns merged config object with all defaults applied

// Generate complete HTML from templates and config
const html = generateHTML(config);
// Processes Handlebars templates, injects data, returns full HTML string

// Copy static assets (CSS, JS, favicon)
copyStaticFiles(config);
// Copies assets/style.css, src/script.js, and configured favicon to dist/

```

--------------------------------

### 构建网站配置的 Bash 命令 - MeNav

Source: https://github.com/rbetree/menav/blob/main/bookmarks/README.md

此命令用于构建 MeNav 网站应用，将最新的配置（包括导入的书签）应用到网站中。通常在书签导入后运行，以更新导航站点。

```bash
npm run build
```

--------------------------------

### Migrate MeNav Configuration to Modular Format (Bash)

Source: https://github.com/rbetree/menav/blob/main/README.md

This command-line tool automates the migration of old MeNav configuration files to the new modular configuration format. It detects and converts `config.yml`, `config.user.yml`, `bookmarks.yml`, and `bookmarks.user.yml` into files within the `config/user/` directory. This ensures all settings are preserved and immediately effective with the new modular structure.

```bash
npm run migrate-config
```

--------------------------------

### 本地开发方式导入书签

Source: https://github.com/rbetree/menav/blob/main/README.md

描述了在本地开发环境下如何导入书签文件到MeNav项目。包括创建`bookmarks`文件夹、复制HTML文件以及运行导入命令。

```text
1. 在项目根目录创建`bookmarks`文件夹
2. 复制HTML书签文件到此文件夹
3. 运行`npm run import-bookmarks`命令处理书签文件
4. 系统生成配置文件后即可使用`npm run dev`预览
```

--------------------------------

### Nginx服务器配置

Source: https://github.com/rbetree/menav/blob/main/README.md

为Nginx服务器配置提供MeNav静态网站的设置。该配置指定了监听端口、服务器名称、网站根目录以及处理URL请求的规则，确保所有请求都能正确映射到index.html。

```nginx
server {
    listen 80;
    server_name your-domain.com;
    root /path/to/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}
```

--------------------------------

### site.yml 配置文件示例

Source: https://github.com/rbetree/menav/blob/main/README.md

YAML格式的网站基本信息、字体、个人资料和社交媒体链接配置文件。此文件用于自定义网站的全局显示和信息。

```yaml
# 网站基本信息
title: "我的导航站"         # 网站标题，显示在浏览器标签和页面顶部
description: "个人网址导航"  # 网站描述，用于SEO和分享卡片
author: "张三"             # 作者姓名
favicon: "favicon.ico"     # 网站图标，支持ico、png等格式
logo_text: "导航站"         # 左上角显示的Logo文本

# 字体设置
fonts:
  title:  # 标题字体设置
    family: "Roboto"  # 字体名称
    weight: 700       # 字重值：400常规、500中等、700粗体
    source: "google"  # 字体来源：google或system
  subtitle:  # 副标题字体
    family: "Noto Sans SC"
    weight: 500
    source: "google"
  body:  # 正文字体
    family: "Noto Sans SC"
    weight: 400
    source: "google"
    
# 个人资料配置
profile:
  title: "欢迎来到我的导航站"       # 主标题/欢迎语
  subtitle: "收集实用网站和工具"    # 副标题
  description: "这里整理了我日常使用的网站和工具，方便快速访问。" # 详细描述

# 社交媒体链接
social:
  - name: "GitHub"
    url: "https://github.com/your-username"
    icon: "fab fa-github"
  - name: "Twitter"
    url: "https://twitter.com/your-username"
    icon: "fab fa-twitter"
  # 更多社交媒体...

```

--------------------------------

### Generate Static Website with MeNav

Source: https://github.com/rbetree/menav/blob/main/README.md

This JavaScript code snippet demonstrates the core functionality of MeNav's static website generator. It takes configuration files and templates to produce a static HTML website. This process typically involves reading configuration, processing templates, and outputting files to the 'dist' directory. It does not require a backend server.

```javascript
const fs = require('fs-extra');
const path = require('path');
const Handlebars = require('handlebars');

async function generateWebsite(configDir, templateDir, outputDir) {
  // Load configurations from configDir
  const siteConfig = loadConfig(path.join(configDir, '_default/site.yml'));
  const navigationConfig = loadConfig(path.join(configDir, '_default/navigation.yml'));
  // ... load other configs

  // Compile Handlebars templates
  const layoutTemplate = Handlebars.compile(fs.readFileSync(path.join(templateDir, 'layouts/default.hbs'), 'utf-8'));
  const homePageTemplate = Handlebars.compile(fs.readFileSync(path.join(templateDir, 'pages/home.hbs'), 'utf-8'));
  // ... compile other templates

  // Generate HTML for each page
  const homePageHtml = layoutTemplate({
    content: homePageTemplate({ site: siteConfig, navigation: navigationConfig, ... })
  });

  // Write generated HTML to output directory
  fs.ensureDirSync(outputDir);
  fs.writeFileSync(path.join(outputDir, 'index.html'), homePageHtml);
  // ... write other pages

  // Copy assets
  fs.copySync(path.join(__dirname, '../assets'), path.join(outputDir, 'assets'));
}

// Helper function to load configuration files (e.g., YAML)
function loadConfig(filePath) {
  // Implementation to read and parse config file
  return {};
}

// Example usage:
generateWebsite(
  path.join(__dirname, '../config'),
  path.join(__dirname, '../templates'),
  path.join(__dirname, '../dist')
).catch(err => console.error('Error generating website:', err));

```

--------------------------------

### GitHub Actions Workflow for Deployment (YAML)

Source: https://context7.com/rbetree/menav/llms.txt

A partial GitHub Actions workflow configuration used for processing bookmarks, building the site, and deploying it to GitHub Pages. This automates the deployment pipeline triggered by commits.

```yaml
# .github/workflows/deploy.yml (partial)
# - name: Process bookmarks
#   run: npm run import-bookmarks
# - name: Build site
#   run: npm run build
# - name: Deploy to GitHub Pages
#   uses: peaceiris/actions-gh-pages@v3
```

--------------------------------

### 书签处理器 JavaScript 核心逻辑 - MeNav

Source: https://github.com/rbetree/menav/blob/main/bookmarks/README.md

这是 MeNav 书签处理器 `src/bookmark-processor.js` 的核心功能概述。它负责解析 HTML 书签文件，提取书签层级、链接信息，分配图标，并生成符合 MeNav 配置格式的 YAML 文件。

```javascript
// src/bookmark-processor.js

// 1. 解析文件结构：读取 HTML，解析 DOM，提取文件夹和链接信息。
// 2. 分类提取：将书签文件夹转换为网站分类，提取链接URL、标题和添加日期。
// 3. 图标分配：根据 URL 匹配 Font Awesome 图标，为链接和分类分配图标。
// 4. 配置生成：创建 YAML 配置文件，按层级组织分类和链接，应用自动生成的元数据。
```

--------------------------------

### Import Bookmarks with MeNav CLI

Source: https://context7.com/rbetree/menav/llms.txt

This command initiates the bookmark import process using the MeNav command-line interface. It allows users to convert browser bookmark exports (typically in HTML format) into the YAML configuration files used by MeNav.

```bash
# Import bookmarks from HTML file
npm run import-bookmarks

```

--------------------------------

### MeNav Configuration - Site Metadata and Styling

Source: https://context7.com/rbetree/menav/llms.txt

This YAML file defines the site's metadata, including title, description, author, and favicon. It also configures typography settings for titles, subtitles, and body text, specifying font families, weights, and sources (e.g., Google Fonts or system fonts). Additionally, it sets up profile information and social media links.

```yaml
# config/user/site.yml - Site metadata and styling
title: "My Navigation Hub"
description: "Personal curated website collection"
author: "Your Name"
favicon: "favicon.ico"
logo_text: "Nav"

fonts:
  title:
    family: "Poppins"
    weight: 600
    source: "google"        # or "system"
  subtitle:
    family: "Quicksand"
    weight: 500
    source: "google"
  body:
    family: "Noto Sans SC"
    weight: 400
    source: "google"

profile:
  title: "Welcome!"
  subtitle: "Quick Access Navigation"
  description: "Your most-used websites in one place"

social:
  - name: "GitHub"
    url: "https://github.com/username"
    icon: "fab fa-github"
  - name: "Twitter"
    url: "https://twitter.com/username"
    icon: "fab fa-twitter"

```

--------------------------------

### YAML 首页配置示例 (home.yml)

Source: https://github.com/rbetree/menav/blob/main/config/README.md

配置 MeNav 首页的分类及其下的网站列表。包括网站名称、URL、描述和图标，用于组织和展示内容。

```yaml
# 首页分类配置
categories:
  - name: "常用工具"
    icon: "fas fa-tools"
    sites:
      - name: "Google"
        url: "https://www.google.com"
        description: "全球最大的搜索引擎"
        icon: "fab fa-google"
      - name: "GitHub"
        url: "https://github.com"
        description: "代码托管平台"
        icon: "fab fa-github"
  
  - name: "学习资源"
    icon: "fas fa-graduation-cap"
    sites:
      - name: "MDN Web Docs"
        url: "https://developer.mozilla.org"
        description: "Web开发技术文档"
        icon: "fab fa-firefox-browser"
```

--------------------------------

### navigation.yml 配置文件示例

Source: https://github.com/rbetree/menav/blob/main/README.md

YAML格式的网站导航菜单配置文件。此文件定义了左侧导航栏的菜单项，包括名称、图标、页面标识符和激活状态。

```yaml
# 导航菜单配置示例
- name: "首页"               # 菜单项名称
  icon: "fas fa-home"        # 菜单项图标
  id: "home"                 # 页面标识符（必须唯一）
  active: true               # 是否默认激活（只能有一个为true）
- name: "项目"
  icon: "fas fa-project-diagram"
  id: "projects"
  active: false
- name: "文章"
  icon: "fas fa-book"
  id: "articles"
  active: false

```

--------------------------------

### Handlebars 循环渲染示例

Source: https://github.com/rbetree/menav/blob/main/templates/README.md

展示了 Handlebars 的 `{{#each}}` 块，用于循环渲染一个分类列表及其包含的站点。每个站点都通过 `site-card` 组件渲染。

```handlebars
{{#each categories}}
    <section class="category" id="{{name}}">
        <h2><i class="{{icon}}"></i> {{name}}</h2>
        <div class="sites-grid">
            {{#each sites}}
                {{> site-card}}
            {{/each}}
        </div>
    </section>
{{/each}}
```

--------------------------------

### YAML 网站配置示例 (site.yml)

Source: https://github.com/rbetree/menav/blob/main/config/README.md

定义 MeNav 网站的基本信息、作者、主题、字体和社交媒体链接。此配置影响网站的全局显示和元数据。

```yaml
# 网站基本信息
title: "我的个人导航"
description: "个人收藏的网站导航页"
keywords: "导航,网址,书签,个人主页"

# 个人资料配置
profile:
  title: "个人导航站"
  subtitle: "我收藏的精选网站"
  description: "这是一个用于快速访问常用网站的个人导航页面。"

# 主题和样式设置
theme:
  default: "light"
  toggleIcon: true
  
# 字体配置
fonts:
  title: "Roboto, sans-serif"
  content: "Noto Sans SC, sans-serif"
  
# 社交媒体链接
social:
  - name: "GitHub"
    url: "https://github.com/username"
    icon: "fab fa-github"
  - name: "Twitter"
    url: "https://twitter.com/username"
    icon: "fab fa-twitter"
```

--------------------------------

### YAML 页面配置示例 (pages/home.yml)

Source: https://github.com/rbetree/menav/blob/main/README.md

此代码片段展示了一个典型的pages目录下的YAML配置文件，用于定义一个页面的标题、副标题、分类以及每个分类下的网站链接。适用于配置MeNav中的主页或其他自定义页面。

```yaml
# pages/home.yml示例
title: "我的主页"          # 页面标题
subtitle: "常用网站导航"   # 页面副标题

# 分类和网站配置
categories:
  - name: "常用工具"          # 分类名称
    icon: "fas fa-tools"      # 分类图标
    sites:                    # 该分类下的网站列表
      - name: "GitHub"
        url: "https://github.com"
        icon: "fab fa-github"      # 网站图标
        description: "全球最大的代码托管平台"  # 网站描述
      - name: "Google"
        url: "https://google.com"
        icon: "fab fa-google"
        description: "全球最大的搜索引擎"
      # 更多网站...
  # 更多分类...
```

--------------------------------

### Configuration Migration Command (Bash)

Source: https://context7.com/rbetree/menav/llms.txt

A bash command that initiates the configuration migration process using npm. This command is used to convert older, single-file configurations into the project's current modular format.

```bash
# Migrate old single-file configs to modular structure
npm run migrate-config

# Converts:
# config.yml → config/user/site.yml + navigation.yml + pages/
# bookmarks.yml → config/user/pages/bookmarks.yml
```

--------------------------------

### YAML 导航菜单配置 (navigation.yml)

Source: https://github.com/rbetree/menav/blob/main/README.md

此代码片段展示了navigation.yml文件的配置示例，用于定义导航菜单项。每个导航项包含名称、图标、唯一ID以及是否为默认激活项。ID必须与pages目录下的页面配置文件名一致。

```yaml
- name: "笔记"
  icon: "fas fa-sticky-note"
  id: "notes"
  active: false
```

--------------------------------

### MeNav Configuration - Page Content with Categories

Source: https://context7.com/rbetree/menav/llms.txt

This YAML configuration defines the content for a specific page, such as the 'Home' page. It includes a title, subtitle, and an optional template specification. The page is organized into categories, each containing a list of sites with their respective names, URLs, icons, and descriptions.

```yaml
# config/user/pages/home.yml - Page content with categories
title: "Welcome"
subtitle: "My favorite websites"
template: "home"            # Optional: specify template

categories:
  - name: "Dev Tools"
    icon: "fas fa-tools"
    sites:
      - name: "GitHub"
        url: "https://github.com"
        icon: "fab fa-github"
        description: "Code hosting platform"
      - name: "Stack Overflow"
        url: "https://stackoverflow.com"
        icon: "fab fa-stack-overflow"
        description: "Developer Q&A"

  - name: "Learning"
    icon: "fas fa-graduation-cap"
    sites:
      - name: "MDN Web Docs"
        url: "https://developer.mozilla.org"
        icon: "fas fa-file-code"
        description: "Web development docs"

```

--------------------------------

### Handlebars: pick 助手函数

Source: https://github.com/rbetree/menav/blob/main/src/helpers/README.md

利用 `pick` 助手函数从一个对象中选取指定的多个属性，并返回一个新的只包含这些属性的对象，用于数据筛选。

```handlebars
{{json (pick user "name" "email")}}
```

--------------------------------

### Configuration Migration Script (JavaScript)

Source: https://context7.com/rbetree/menav/llms.txt

A JavaScript script designed to migrate legacy configuration files (like `config.yml`, `bookmarks.yml`) into a new modular structure. It converts single-file configurations into multiple files under `config/user/` and `config/user/pages/`.

```javascript
// src/migrate-config.js
// Detects: config.yml, config.user.yml, bookmarks.yml, bookmarks.user.yml
// Converts to: config/user/site.yml
//              config/user/navigation.yml
//              config/user/pages/*.yml

// Migration preserves all data, splits into modules
// Old files can be safely deleted after migration
```

--------------------------------

### Handlebars 添加新页面示例

Source: https://github.com/rbetree/menav/blob/main/templates/README.md

一个 Handlebars 模板文件示例，展示了如何创建一个新的“关于”页面 (`about.hbs`)。包含了基本文本、技能列表等，并使用了 Handlebars 的循环渲染。

```handlebars
<!-- templates/pages/about.hbs -->
<div class="about-page">
    <h2>关于我</h2>
    <p>{{about.description}}</p>
    
    {{#if about.skills}}
    <div class="skills">
        <h3>技能</h3>
        <ul>
            {{#each about.skills}}
            <li>{{this}}</li>
            {{/each}}
        </ul>
    </div>
    {{/if}}
</div>
```

--------------------------------

### Handlebars: ifEquals / ifNotEquals 助手函数

Source: https://github.com/rbetree/menav/blob/main/src/helpers/README.md

通过 `ifEquals` 和 `ifNotEquals` 块级助手函数来比较两个值是否相等或不相等，从而控制模板内容的渲染逻辑。

```handlebars
{{#ifEquals status "active"}}
    当前状态：活跃
{{else}}
    当前状态：非活跃
{{/ifEquals}}
```

--------------------------------

### YAML 页面模板指定示例

Source: https://github.com/rbetree/menav/blob/main/templates/README.md

在 MeNav 项目的 YAML 配置文件中，演示了如何显式指定页面模板。通过 `template` 字段可以指定一个不与页面ID同名的 Handlebars 模板。

```yaml
title: "我的项目"
subtitle: "这里展示我的所有项目"
template: "projects" # 使用 projects.hbs 模板而不是使用页面ID命名的模板
categories:
  - name: "网站项目"
    icon: "fas fa-globe"
    sites:
      - name: "个人博客"
        # ... 其他字段
```

--------------------------------

### Handlebars: isEmpty / isNotEmpty 助手函数

Source: https://github.com/rbetree/menav/blob/main/src/helpers/README.md

利用 `isEmpty` 和 `isNotEmpty` 块级助手函数检查数组、字符串或对象是否为空，并根据结果渲染不同的内容。

```handlebars
{{#isEmpty items}}
    <p>暂无数据</p>
{{else}}
    <ul>
        {{#each items}}
            <li>{{this}}</li>
        {{/each}}
    </ul>
{{/isEmpty}}
```

--------------------------------

### JavaScript: 添加新的格式化助手函数

Source: https://github.com/rbetree/menav/blob/main/src/helpers/README.md

演示了如何在 MeNav 项目的 `formatters.js` 文件中添加一个新的 JavaScript 助手函数，例如 `formatNumber`，并将其导出以供 Handlebars 使用。

```javascript
/**
 * 将数字格式化为带千位分隔符的字符串
 * @param {number} number 要格式化的数字
 * @returns {string} 格式化后的字符串
 * @example {{formatNumber 1000000}} -> 1,000,000
 */
function formatNumber(number) {
  if (typeof number !== 'number') return '';
  return number.toLocaleString();
}

// 在导出中添加新函数
module.exports = {
  formatDate,
  limit,
  toLowerCase,
  toUpperCase,
  json,
  formatNumber // 添加新函数
};
```

--------------------------------

### Handlebars Template Rendering Engine (JavaScript)

Source: https://context7.com/rbetree/menav/llms.txt

This JavaScript code sets up and utilizes a Handlebars templating engine for dynamic page generation. It includes functions to load Handlebars layouts and components from specified directories, compile templates, and render them with provided data. Custom helpers are registered to extend Handlebars' functionality. Dependencies include the 'handlebars' library and Node.js file system ('fs') and path modules.

```javascript
// src/generator.js - Template rendering
const Handlebars = require('handlebars');
const { registerAllHelpers } = require('./helpers');

// Create Handlebars instance with custom helpers
const handlebars = Handlebars.create();
registerAllHelpers(handlebars);

// Load and register templates
function loadHandlebarsTemplates() {
    // Register layouts from templates/layouts/
    const layoutsDir = path.join(process.cwd(), 'templates', 'layouts');
    fs.readdirSync(layoutsDir).forEach(file => {
        if (file.endsWith('.hbs')) {
            const name = path.basename(file, '.hbs');
            const content = fs.readFileSync(path.join(layoutsDir, file), 'utf8');
            handlebars.registerPartial(name, content);
        }
    });

    // Register components from templates/components/
    const componentsDir = path.join(process.cwd(), 'templates', 'components');
    fs.readdirSync(componentsDir).forEach(file => {
        if (file.endsWith('.hbs')) {
            const name = path.basename(file, '.hbs');
            const content = fs.readFileSync(path.join(componentsDir, file), 'utf8');
            handlebars.registerPartial(name, content);
        }
    });
}

// Render template with data
function renderTemplate(templateName, data, useLayout = true) {
    const templatePath = path.join(process.cwd(), 'templates', 'pages', `${templateName}.hbs`);
    const templateContent = fs.readFileSync(templatePath, 'utf8');
    const template = handlebars.compile(templateContent);

    const pageContent = template(data);

    if (useLayout) {
        const layoutTemplate = handlebars.compile(layoutContent);
        return layoutTemplate({ ...data, body: pageContent });
    }

    return pageContent;
}

```

--------------------------------

### Handlebars: and / or / not 助手函数

Source: https://github.com/rbetree/menav/blob/main/src/helpers/README.md

通过 `and`, `or`, `not` 块级助手函数执行逻辑运算，用于组合多个条件判断，控制模板的显示逻辑。

```handlebars
{{#and isPremium isActive}}
    高级活跃用户
{{/and}}

{{#or isPremium isAdmin}}
    有访问权限
{{/or}}

{{#not isDisabled}}
    此功能可用
{{/not}}
```

--------------------------------

### 手动导入书签 - Edge导出

Source: https://github.com/rbetree/menav/blob/main/README.md

指导用户如何在Edge浏览器中导出书签为HTML文件。这是手动导入书签到MeNav的第一步，适用于Edge用户。

```text
1. 打开菜单 (右上角三点图标)
2. 选择"收藏夹"
3. 点击"更多选项" > "导出收藏夹"
4. 保存为HTML文件
```

--------------------------------

### MeNav Configuration - Navigation Menu Structure

Source: https://context7.com/rbetree/menav/llms.txt

This YAML file defines the main navigation menu items for the MeNav website. Each item includes a name, an icon, an identifier, and an active status. This structure dictates how users navigate between different sections of the site.

```yaml
# config/user/navigation.yml - Menu structure
- name: "Home"
  icon: "fas fa-home"
  id: "home"
  active: true              # Default active page
- name: "Projects"
  icon: "fas fa-project-diagram"
  id: "projects"
- name: "Bookmarks"
  icon: "fas fa-bookmark"
  id: "bookmarks"

```

--------------------------------

### Handlebars: ifCond 助手函数

Source: https://github.com/rbetree/menav/blob/main/src/helpers/README.md

使用 `ifCond` 块级助手函数进行通用的条件比较，支持多种比较运算符（如 `>`, `<`, `===`, `&&`, `||`），实现复杂的条件渲染。

```handlebars
{{#ifCond count ">" 0}}
    有 {{count}} 个项目
{{else}}
    没有项目
{{/ifCond}}
```

--------------------------------

### Handlebars: keys 助手函数

Source: https://github.com/rbetree/menav/blob/main/src/helpers/README.md

使用 `keys` 助手函数将一个对象的属性键名提取出来，并转换为一个数组，便于遍历和展示对象的键。

```handlebars
{{#each (keys object)}}
    <li>{{this}}</li>
{{/each}}
```

--------------------------------

### JavaScript: 注册新的助手函数分类

Source: https://github.com/rbetree/menav/blob/main/src/helpers/README.md

展示了如何在 `index.js` 文件中导入并注册一个新的 Handlebars 助手函数分类，以扩展 MeNav 的助手函数集。

```javascript
const newHelpers = require('./new-helpers');

function registerAllHelpers(handlebars) {
  // 现有注册代码...
  
  // 注册新的助手函数
  Object.entries(newHelpers).forEach(([name, helper]) => {
    handlebars.registerHelper(name, helper);
  });
}
```

--------------------------------

### Handlebars: limit 助手函数

Source: https://github.com/rbetree/menav/blob/main/src/helpers/README.md

使用 `limit` 助手函数截断过长的文本字符串，并在末尾添加省略号，用于在有限空间内显示摘要信息。

```handlebars
{{limit "这是一段很长的文本内容" 5}}  {{!-- 这是一段... --}}
```

--------------------------------

### 手动导入书签 - Chrome导出

Source: https://github.com/rbetree/menav/blob/main/README.md

指导用户如何在Chrome浏览器中导出书签为HTML文件。这是手动导入书签到MeNav的第一步，适用于Chrome用户。

```text
1. 打开Chrome菜单 (右上角三点图标)
2. 选择"书签" > "书签管理器"
3. 点击右上角三点图标，选择"导出书签"
4. 保存HTML文件到本地
```

--------------------------------

### Handlebars 条件渲染示例

Source: https://github.com/rbetree/menav/blob/main/templates/README.md

演示了 Handlebars 的条件渲染语法 `{{#if}}...{{else}}...{{/if}}`，根据 `profile.title` 的存在与否来显示不同的标题。

```handlebars
{{#if profile.title}}
    <h2>{{profile.title}}</h2>
{{else}}
    <h2>欢迎使用</h2>
{{/if}}
```

--------------------------------

### Create Handlebars Component Template

Source: https://github.com/rbetree/menav/blob/main/templates/README.md

This snippet shows how to create a new Handlebars component template file. It defines the structure and placeholders for dynamic data like 'name' and 'level'. No specific dependencies are required beyond the Handlebars templating engine.

```handlebars
<!-- templates/components/skill-card.hbs -->
<div class="skill-card">
    <h4>{{name}}</h4>
    <div class="skill-level" data-level="{{level}}">
        <div class="skill-bar" style="width: {{level}}%"></div>
    </div>
</div>
```

--------------------------------

### Process Bookmarks for MeNav

Source: https://github.com/rbetree/menav/blob/main/README.md

This JavaScript snippet illustrates the bookmark processing functionality within MeNav. It is responsible for parsing bookmark files (typically HTML exports from browsers) and converting them into a format usable by MeNav, potentially generating configuration files or directly integrating the data into the site generation process. It includes logic for matching icons.

```javascript
const fs = require('fs-extra');
const path = require('path');
const cheerio = require('cheerio'); // For parsing HTML

async function processBookmarks(bookmarkFilePath, outputConfigPath) {
  const htmlContent = await fs.readFile(bookmarkFilePath, 'utf-8');
  const $ = cheerio.load(htmlContent);
  const bookmarks = [];

  $('h3').each((i, el) => {
    const categoryName = $(el).text();
    const categoryLinks = [];
    $(el).next('dl').find('a').each((j, linkEl) => {
      const link = $(linkEl).attr('href');
      const title = $(linkEl).text();
      const icon = getIconForUrl(link); // Function to determine icon
      categoryLinks.push({
        title: title,
        url: link,
        icon: icon
      });
    });
    if (categoryLinks.length > 0) {
      bookmarks.push({
        name: categoryName,
        sites: categoryLinks
      });
    }
  });

  // Save processed bookmarks, possibly as a config file
  await fs.writeJson(outputConfigPath, { bookmarks }, { spaces: 2 });
  console.log(`Processed bookmarks saved to ${outputConfigPath}`);
}

function getIconForUrl(url) {
  // Logic to map URLs to Font Awesome icons or other icons
  // Example: return 'fab fa-chrome'; or 'fas fa-link';
  return 'fas fa-link';
}

// Example usage:
// processBookmarks(
//   path.join(__dirname, '../bookmarks/my_bookmarks.html'),
//   path.join(__dirname, '../config/user/pages/bookmarks.yml')
// ).catch(err => console.error('Error processing bookmarks:', err));

```

--------------------------------

### Handlebars 助手函数使用示例

Source: https://github.com/rbetree/menav/blob/main/src/helpers/README.md

展示了在 Handlebars 模板中如何使用内联表达式、块级表达式以及组合使用助手函数来增强模板功能。

```handlebars
{{formatDate created "YYYY-MM-DD"}}
{{limit description 100}}
{{json data}}
```

```handlebars
{{#ifEquals type "article"}}
    <span class="badge">文章</span>
{{else}}
    <span class="badge">页面</span>
{{/ifEquals}}

{{#each (range 1 5)}}
    <span>{{this}}</span>
{{/each}}
```

```handlebars
{{#each (slice items 0 5)}}
    <li>{{toUpperCase name}}</li>
{{/each}}
```

--------------------------------

### Handlebars: toLowerCase / toUpperCase 助手函数

Source: https://github.com/rbetree/menav/blob/main/src/helpers/README.md

利用 `toLowerCase` 和 `toUpperCase` 助手函数将文本字符串转换为全小写或全大写，用于统一文本格式。

```handlebars
{{toLowerCase "Hello"}}  {{!-- hello --}}
{{toUpperCase "world"}}  {{!-- WORLD --}}
```

--------------------------------

### MeNav Configuration - Accessing Loaded Data

Source: https://context7.com/rbetree/menav/llms.txt

This JavaScript snippet shows how to load and access configuration data within the MeNav generator. It highlights the priority system where user configurations override default settings and demonstrates how to retrieve specific values like site title, navigation items, categories, profile details, and social links.

```javascript
// Configuration loading with priority system
const config = loadConfig();
// Loads in order: config/user/ (highest) > config/_default/ (fallback)

// Access configuration values
console.log(config.site.title);           // "My Navigation Hub"
console.log(config.navigation[0].name);   // "Home"
console.log(config.categories[0].sites);  // Array of site objects
console.log(config.profile.title);        // "Welcome!"
console.log(config.social);               // Array of social links

```

--------------------------------

### Process Bookmarks to YAML Configuration (JavaScript)

Source: https://context7.com/rbetree/menav/llms.txt

This JavaScript code processes browser-exported bookmark HTML files. It automatically detects the latest HTML file, parses its structure, matches URLs to Font Awesome icons using a predefined mapping, and generates a YAML configuration file. The original HTML file is deleted after processing. Dependencies include local file system operations and potentially a bookmark parsing library.

```javascript
// src/bookmark-processor.js
const { parseBookmarks, generateBookmarksYaml } = require('./bookmark-processor.js');

// Place browser-exported HTML file in bookmarks/ directory
// System automatically:
// 1. Detects latest .html file in bookmarks/
// 2. Parses folder structure and links
// 3. Matches URLs to appropriate Font Awesome icons
// 4. Generates YAML configuration
// 5. Adds "Bookmarks" navigation item if needed
// 6. Deletes original HTML after processing

// Icon matching example
const iconMapping = {
  'github.com': 'fab fa-github',
  'stackoverflow.com': 'fab fa-stack-overflow',
  'youtube.com': 'fab fa-youtube',
  'google.com': 'fab fa-google',
  'twitter.com': 'fab fa-twitter'
  // ... 50+ predefined mappings
};

// Generated output structure in config/user/pages/bookmarks.yml:
// title: "My Bookmarks"
// subtitle: "Imported from browser"
// categories:
//   - name: "Folder Name"
//     icon: "fas fa-folder"
//     sites:
//       - name: "Site Title"
//         url: "https://example.com"
//         icon: "fab fa-example"  // Auto-matched
//         description: ""

```

--------------------------------

### 手动导入书签 - Firefox导出

Source: https://github.com/rbetree/menav/blob/main/README.md

指导用户如何在Firefox浏览器中导出书签为HTML文件。这是手动导入书签到MeNav的第一步，适用于Firefox用户。

```text
1. 点击书签菜单按钮
2. 选择"管理书签"
3. 在菜单栏选择"导入和备份" > "导出书签到HTML"
4. 保存文件到本地
```

--------------------------------

### Handlebars Site Card Component Template

Source: https://context7.com/rbetree/menav/llms.txt

This Handlebars partial defines a reusable component for rendering individual website cards. Each card displays a site's icon, name, and description, and links to the site's URL. It includes attributes for type, name, URL, and searchable text, making it suitable for dynamic display and interaction within a web application. The card is designed to open in a new tab when clicked.

```handlebars
{{!-- templates/components/site-card.hbs - Website card --}}
<a href="{{url}}" class="site-card"
   title="{{name}} - {{description}}"
   data-type="site"
   data-name="{{name}}"
   data-url="{{url}}"
   data-searchable="{{name}} {{description}}"
   target="_blank">
    <i class="{{icon}}"></i>
    <h3>{{name}}</h3>
    <p>{{description}}</p>
</a>

```

--------------------------------

### Handlebars 组件引用示例

Source: https://github.com/rbetree/menav/blob/main/templates/README.md

展示了如何在 Handlebars 模板中引用其他组件。可以直接通过 `{{> component-name}}` 或传递数据来引用。

```handlebars
{{> navigation navigationData}}
{{> site-card}}
```

--------------------------------

### Handlebars: size 助手函数

Source: https://github.com/rbetree/menav/blob/main/src/helpers/README.md

使用 `size` 助手函数获取数组、字符串或对象的长度/大小，通常用于显示项目总数或集合的大小。

```handlebars
总共 {{size items}} 个项目
```

--------------------------------

### Handlebars: safeHtml 助手函数

Source: https://github.com/rbetree/menav/blob/main/src/helpers/README.md

使用 `safeHtml` 助手函数直接输出 HTML 内容而不进行转义，适用于已确认安全的 HTML 片段，如富文本编辑器内容。

```handlebars
{{safeHtml htmlContent}}
```

--------------------------------

### Handlebars: json 助手函数

Source: https://github.com/rbetree/menav/blob/main/src/helpers/README.md

使用 `json` 助手函数将 JavaScript 对象序列化为格式化的 JSON 字符串，主要用于在模板中进行数据调试。

```handlebars
{{json this}}
```

--------------------------------

### Handlebars: range 助手函数

Source: https://github.com/rbetree/menav/blob/main/src/helpers/README.md

使用 `range` 助手函数生成一个包含连续整数的数组，常用于创建数字序列或循环指定次数。

```handlebars
{{#each (range 1 5)}}
    <span>{{this}}</span>
{{/each}}
```

--------------------------------

### Handlebars: slice 助手函数

Source: https://github.com/rbetree/menav/blob/main/src/helpers/README.md

使用 `slice` 助手函数从数组或字符串中提取一部分元素或子字符串，常用于分页显示列表或部分文本。

```handlebars
{{#each (slice array 0 3)}}
    <li>{{this}}</li>
{{/each}}
```

--------------------------------

### Handlebars 页面模板示例

Source: https://github.com/rbetree/menav/blob/main/templates/README.md

一个 Handlebars 页面模板的示例，用于展示首页内容，包括欢迎信息和分类列表。可以根据需要包含其他组件。

```handlebars
<div class="welcome-section">
    <h2>{{profile.title}}</h2>
    <h3>{{profile.subtitle}}</h3>
    <p class="subtitle">{{profile.description}}</p>
</div>
{{#each categories}}
    {{> category}}
{{/each}}
```