html - 如何使用 BEM 构建一个完全静态的多页网站？

Question

到目前为止，我看到的所有教程都描述了如何创建单页网站或几个包。这是一个简单的网站导航示例:

• example.com/home
• example.com/about
• example.com/services
  • example.com/services/marketing
  • example.com/services/development
• example.com/contact

是否可以使用 bem-tools、bemjson、bemhtml 构建这样一个站点，但没有任何服务器端技术(如 node.js 或 php)？

构建应仅包含一个包含最终 .html、.css、.js 文件和每页图像的目录，并且应托管在静态文件托管(如 Amazon S3)上。它也应该是一个老派的静态网站，而不是单页 ajax 网站。

这个用例是否有任何易于使用的解决方案，或者是否应该创建自己的构建过程来从包目录中收集文件？

Answer 1

好问题，答案是 - 是的，你可以:)

首先，您需要克隆project-stub repo 并安装依赖项:

git clone git@github.com:bem/project-stub.git
cd project-stub
npm i
./node_modules/.bin/bem make libs

现在您已配置元素 stub 以使用 bem-tools 开发站点。

包含页面 index。

让我们创建页面about:

./node_modules/.bin/bem create -b about -l desktop.bundles/

此命令创建文件 desktop.bundles/about/about.bemjson，它以 BEM 术语表示您的页面。

运行时可以看到这个页面

./node_modules/.bin/bem server

并在浏览器中打开 http://localhost:8080/desktop.bundles/about/about.html。

阅读更多:http://bem.info/libs/bem-core/1.0.0/bemhtml/reference/ , “输入数据:BEMJSON”一章。

要获得具有正确图像路径的最终 CSS，您需要安装 cssrb 包:

sudo npm i cssrb -g

要获得最终的构建目录，您需要输入 bem-static-build.sh在你的元素的根目录下运行它:

 wget https://raw.github.com/alexbaumgertner/bem-static-build/master/bem-static-build.sh
 sh  bem-static-build.sh

builder进程结束后，可以在desktop.bundles/merged/build文件夹中找到静态站点:

注意:如果您的页面上有内容图片，您必须将它们放入 desktop.bundles/merged/img 文件夹并为所有页面文件夹创建符号链接(symbolic link):

ln -s $(pwd)/desktop.bundles/merged/img $(pwd)/desktop.bundles/index/img
ln -s $(pwd)/desktop.bundles/merged/img $(pwd)/desktop.bundles/about/img

等所有页面。此操作是必需的，因为 bem server 显示一个与其文件夹相关的页面，并且使用符号链接(symbolic link)，您可以在 about.bemjson 和所有页面中写入图像 src，如下所示:

    {
        block: 'user',
        content: [
            {
                elem: 'avatar',
                tag: 'img',
                attrs: {
                    src: 'img/dypsilon.png' // relative way
                }
            }
        ]
    }

它应该可以工作!

欢迎提问!