layout 插件

我们实现一个简单的需求，给这个专栏的 demo 都添加页眉，页脚的广告链接。

初始化插件

初始化插件文件 plugin/index.ts，这是上一篇文章的内容，这里不多介绍，内容如下：

import { IApi } from "umi";

export default (api: IApi) => {
  api.onStart(() => {
    console.log("Juejin Plugin");
  });
};

挂载

• config/config.ts

import { defineConfig } from "umi";

export default defineConfig({
  plugins: [require.resolve("../plugin/index")],
});

编写 layout

• layouts/common.tsx

import { Outlet } from "umi";

function CommonPage() {
  return (
    <>
      <div>页眉</div>
      <Outlet></Outlet>
      <div>页脚</div>
    </>
  );
}

export default CommonPage;

编写插件

import { IApi } from "umi";
import { join } from "path";

export default (api: IApi) => {
  api.onStart(() => {
    console.log("Juejin Plugin");
  });

  api.addLayouts(() => {
    return [
      {
        id: "plugin1-layout",
        file: join(__dirname, "../src/layouts/common.tsx"),
      },
    ];
  });
};

这样就出现了页眉和页脚