リストに戻ります

目次

2025-06-02
3 分

フラットページの使用文書

フラットページは、マークダウン形式でコンテンツライティングをサポートし、ディレクトリを自動的に生成し、美的読み取りインターフェイスを提供するシンプルで強力な静的ページ管理システムです。

機能的特徴

  • マークダウン形式をサポートしてコンテンツを書き込みます
  • 記事カタログを自動的に生成します
  • コードハイライト
  • 進捗指示を読んでください
  • レスポンシブデザイン、モバイルのサポート
  • サポート記事ナビゲーション（前/次）
  • 記事の検索をサポートします
  • 国際的なサポート

使い方

1。構成Enable

構成ファイルでフラットページを有効にします。

[flatpages] 
    # 是否启用flatpages 
    enable = true 
    # 支持配置多个flatpage目录 
    [[flatpages.dirs]] 
        nav_name = "帮助文档" 
        nav_path = "docs" 
        file_path = "statics/flatpages/docs" 
        # 每页显示的条目数，可选，默认为10 
        page_size = 20 
 
    # 可以继续添加更多目录配置... 

2。記事を作成します

statics/flatpagesディレクトリに.mdファイルを作成し、次の形式で書き込みます。

# 文章标题 
 
> 文章描述（会显示在列表页） 
 
正文内容... 
 
## 二级标题 
 
### 三级标题 
 
正文内容... 

3。マークダウンフォーマットの説明

フラットページは、以下を含む標準のマークダウン構文をサポートします

  • タイトル（H1-H4）
  • リスト（注文および順序付けられていない）
  • コードブロック（構文の強調表示をサポート）
  • 参照ブロック
  • リンク
  • 写真
  • インラインコード

コードブロックの例：

def hello(): 
    print("Hello, World!") 

4。特別な機能

コードコピー

コピーボタンは、すべてのコードブロックの右上隅に自動的に追加され、ユーザーがコードをコピーできるようになります。

ディレクトリナビゲーション

システムは、記事のタイトル（H2-H4）に基づいてディレクトリを自動的に生成し、右側に表示します。ディレクトリサポート：

  • 現在の読み取り位置を自動的に強調表示します
  • クリックしてジャンプします
  • スクロール同期

進捗状況を読む

ページの上部に読書の進行状況バーが表示され、読み取り位置が視覚的に表示されます。

実装の原則

1。ファイルシステム

フラットページは、goのembed.FSを使用して静的ファイルを管理します。

//go:embed flatpages/* 
var Files embed.FS 

2。登録のルーティング

システムは、起動時のInitFlatpages関数を介して関連するルートを登録します。

  • /fp/ - 記事リストページ
  • /fp/:slug - 記事の詳細ページ

3。マークダウン分析

Markdown Parsingにgomarkdown/markdownパッケージを使用してください。

  • commonextensions
  • AutoHeadingids
  • hreftargetblank

4。記事管理

すべてのマークダウンファイルは起動時にロードされます。

  1. ファイル名をURLスラッグとして解決します
  2. 記事のタイトル（H1）を抽出する
  3. 記事の説明（最初の引用ブロック）を抽出する
  4. 読み取り時間を計算します
  5. 更新時間を記録します

5。実装を検索します

リストページの検索関数はJavaScriptに実装されており、タイトルと説明のリアルタイム検索をサポートしています。

6。国際的なサポート

システムはI18Nサポートを統合し、構成を介して多言語サポートを有効にすることができます。

[i18n] 
enable = true 

ベストプラクティス

  1. ファイルの命名
    • URLの一部として使用される意味のあるファイル名を使用します
    • 特殊文字やスペースを避けてください
    • 小文字とハイフンをお勧めします
  2. コンテンツ組織
    • 各ファイルにはH1タイトルが必要です
    • 引用ブロックを使用して、記事の説明を追加します
    • セカンダリおよびサードレベルのタイトルを合理的に使用して、コンテンツを整理します
    • 単一のファイルのサイズを制御すると、1000行を超えないことをお勧めします。
  3. 画像処理
    • 写真は、 statics/imgディレクトリに保存することをお勧めします
    • 相対パスを使用した参照画像
    • 画像を圧縮して、荷重速度を上げます
  4. コード表示
    • コードブロックの言語を指定して、正しい構文を強調表示する
    • 重要なコードにコメントを追加します
    • コードブロックが正しくインデントされていることを確認してください

トラブルシューティング

  1. ページが表示されません
    • flatpages.enable構成ファイルでTRUEであるかどうかを確認してください
    • マークダウンファイルが正しいディレクトリにあることを確認する
  2. 生成されていないディレクトリ
    • この記事に二次タイトルが含まれているのか三次タイトルが含まれているかを確認してください
    • タイトルが正しいことを確認する（##または###）
  3. スタイルの例外
    • Markdownの構文が正しいかどうかを確認してください
    • ファイルエンコーディングがUTF-8であることを確認してください
  4. 無効な検索
    • JavaScriptエラーについては、ブラウザコンソールを確認してください
    • ページJavaScriptが正しくロードされていることを確認します
リストに戻ります