简介
koa-bem-render 是一款专门用来渲染 BEM 块的 NPM 包。它可以帮助你更加方便地在 koa 应用中使用 BEM 技术。
安装
你可以通过以下命令来安装 koa-bem-render：
npm install koa-bem-render --save
使用
初始化
首先，我们需要在 koa 应用中初始化 koa-bem-render 中间件：
const Koa = require('koa');
const BEMRender = require('koa-bem-render');
const app = new Koa();
app.use(BEMRender());配置
在初始化时，你可以传入一个配置对象：
-- -------------------- ---- ------- ----- --------- - -------------------------- ----- ------ - - -------- ---------- -- -------- -------- ------ -- ------------ --- --------- ----- -- ---- --- ------------ ---- ------------ ----- -- ---- ----------- --- --- - ----------- ---- ------------------- ------ -- ----- ----- --------- ------------- --- -- -- --- -- ------------- --- -- -------- -- ---------------------------
withData 参数
如果你要在渲染模板时使用 BEM 块的相关数据，你需要引入 koa-bem-helper 并使用 useData() 中间件:
-- -------------------- ---- -------
----- --------- - --------------------------
----- --------- - --------------------------
----- --- - --- ------
-- --- --- ------
--------
-----------
---------- ---------------
------------
--
-- --- -------------- ---
--------
-----------
-------- ----------
--------- -----
--
--
-----------------渲染块
使用 render() 方法可以帮助我们渲染 BEM 块：
app.use(async (ctx) => {
await ctx.render('blockName');
});渲染元素
使用 render() 方法加上元素的名字来渲染 BEM 块里的元素：
app.use(async (ctx) => {
await ctx.render('blockName__elementName');
});渲染修饰符
使用 render() 方法加上修饰符的名字来渲染 BEM 块里的修饰符：
app.use(async (ctx) => {
await ctx.render('blockName_blockModifierName');
});示例代码
-- -------------------- ---- -------
-- -- --- - -------------- -
----- --- - ---------------
----- --------- - --------------------------
-- --- --- --
----- --- - --- ------
-- --- -------------- ---
---------------------
-- ----
------------- ----- ----- -- -
-- --------- --- ---- -
----- --------------------
- ---- -- --------- --- --------- -
----- -------------------------- - ----- ------ --- ---
- ---- -
-------- - ---- --- -------
-
----- -------
---
-- ----
-----------------
---------------------- -- ---- -------结论
koa-bem-render 的用法非常简单，而且能够有效地帮助我们在 koa 应用中使用 BEM 技术。通过这篇文章，你应该已经了解了如何在 koa 应用中使用 koa-bem-render。祝好运！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672673660cf7123b36579