技術共有

nunjuck はテンプレートのパスを動的に更新します

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

各リクエストでファイルを動的に読み取ると、特に同時実行性が高い状況では、パフォーマンスに一定の影響があります。この問題を解決するには、アプリケーションの起動時にテンプレート構成を読み取り、テンプレートが変更されたときに構成を更新します。これにより、毎回ファイルを読み取るのではなく、アプリケーションの起動時とテンプレートが変更されたときにのみファイルを読み取る必要があります。リクエスト。

グローバル変数を使用して現在のテンプレート パスをキャッシュし、テンプレートが変更された場合にのみ変数とファイルを更新することができます。

改善されたサンプルコードは次のとおりです。

ディレクトリ構造の例

project
│
├── views/
│   ├── template1/
│   │   └── index.njk
│   ├── template2/
│   │   └── index.njk
│
├── config/
│   └── templateConfig.json
│
├── app.js
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

templateConfig.json サンプルコンテンツ

{
    "currentTemplate": "template1"
}
  • 1
  • 2
  • 3

app.js サンプルコード

const express = require('express');
const nunjucks = require('nunjucks');
const path = require('path');
const fs = require('fs');

const app = express();

// 设置静态文件目录
app.use(express.static(path.join(__dirname, 'public')));

// 全局变量,缓存当前模板路径
let currentTemplatePath;

// 读取配置文件中的当前模板路径
function loadTemplateConfig() {
    const config = JSON.parse(fs.readFileSync(path.join(__dirname, 'config/templateConfig.json'), 'utf8'));
    currentTemplatePath = config.currentTemplate;
}

// 配置Nunjucks环境
function configureNunjucks() {
    nunjucks.configure(path.join(__dirname, `views/${currentTemplatePath}`), {
        autoescape: false,
        noCache: true,
        express: app
    });
}

// 初始化时加载配置
loadTemplateConfig();
configureNunjucks();

// 路由
app.get('/', (req, res) => {
    res.render('index.njk', { title: 'Hello Nunjucks!' });
});

// 路由:更改模板路径
app.get('/change-template', (req, res) => {
    const newTemplate = req.query.template;
    if (newTemplate) {
        currentTemplatePath = newTemplate;
        const config = { currentTemplate: newTemplate };
        fs.writeFileSync(path.join(__dirname, 'config/templateConfig.json'), JSON.stringify(config), 'utf8');
        configureNunjucks(); // 更新Nunjucks配置
        res.send(`Template changed to ${newTemplate}`);
    } else {
        res.send('No template specified');
    }
});

// 启动服务器
const port = 3000;
app.listen(port, () => {
    console.log(`服务器已启动,访问地址:http://localhost:${port}`);
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56

説明する

  1. グローバル変数 currentTemplatePath: 現在のテンプレートのパスをキャッシュします。
  2. loadTemplateConfig 関数: アプリケーションの起動時にテンプレート構成ファイルを読み取り、パスをグローバル変数に保存します。
  3. configureNunjucks 関数: キャッシュされたテンプレート パスに基づいて Nunjucks 環境を構成します。
  4. 初期化中に設定をロードする: アプリケーションの起動時に呼び出されます loadTemplateConfig そしてconfigureNunjucks 関数。
  5. ルートをテンプレート パスに変更します: ユーザーがテンプレートのパスを変更したときに、グローバル変数、ファイルを更新し、Nunjuck を再構成します。

このようにして、ファイルと構成 Nunjuck は、アプリケーションの起動時とユーザーがテンプレート パスを変更したときにのみ読み取られるため、リクエストのたびにファイルを読み取るというパフォーマンスの問題が回避されます。