vite-plugin-xq-include
TypeScript icon, indicating that this package has built-in type declarations

1.0.18 • Public • Published

vite-plugin-xq-include

A vite file include plugin and supports template variables. 一个Vite的包含文件插件,同时支持模板变量。

Install 安装

npm i -D vite-plugin-xq-include

Add plugin to your vite.config.ts:

// vite.config.ts
import { defineConfig } from 'vite';
import xqInclude from 'vite-plugin-xq-include';
export default defineConfig({
  plugins: [
    xqInclude()
  ],
}

模板文件 partial/header.html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?=$seo_title?></title>
    <link rel="stylesheet" href="/scss/main.scss">
  </head>
  <body>
    <header>
      <div class="container-fluid text-center fixed-top">
        <?=$pageTitle?>
      </div>
    </header>

模板变量格式语法

<?=$变量名?>

包含文件语法

<xq-include file="partial/header.html" seo_title="产品页" pageTitle="产品页"></xq-include>
利用html标签属性定义了两个模板变量seo_title和pageTitle
<xq-include file="partial/header.html" seo_title="产品页" pageTitle="产品页">
支持HTML内容
</xq-include>
HTML内容模板变量名为<?=$content?>

Package Sidebar

Install

npm i vite-plugin-xq-include

Homepage

xqkeji.cn/

Weekly Downloads

11

Version

1.0.18

License

SSPL-1.0

Unpacked Size

37.5 kB

Total Files

6

Last publish

Collaborators

  • xqkeji