@hagongyi/oc-mainsite-utilities

哈公益 October CMS 常用样式，通用组件和脚本。

components 文件夹包含了 October CMS 通用组件，其中的样式部分基于 Bootstrap 4。

scss/components 文件夹包含了通用组件的样式，是组件的默认样式，自定义方式参见各组件文档。

scss 文件夹下还包含一些常用样式，具体参见文档。

docs/styles 文件夹包含了常用样式的文档。

docs/components 文件夹包含了通用组件的文档。

使用方式

不论是使用组件还是样式或脚本，你都需要 Webpack 作为你的依赖，在使用前，请确保你的项目安装了 Webpack。

使用 SCSS 样式

不论是常用样式还是组件样式，在 Webpack 配置文件中写好 SASS/SCSS 的配置并安装好相应的 Webpack Loader，然后在你需要引入样式的地方引入完整路径即可。

// 引入所有常用样式
@import '~@hagongyi/oc-mainsite-utilities/scss/index.scss';

// 引入组件样式
@import '~@hagongyi/oc-mainsite-utilities/scss/components/oc-page-banner.scss';

注意：组件样式只支持按需引入方式，没有一次性引入所有组件的方式，这么做的目的是为了尽可能减少样式冲突。

使用 October CMS 组件

由于 October CMS 本身不支持通过 node_modules 引入 htm 格式的组件，所以这里要借助 Webpack 和 File Loader 来实现。

Webpack 配置

请先确保安装了 File Loader：

yarn install -D file-loader

在 Webpack 配置里增加如下配置：

{
  test: /\.(htm)$/, // October CMS 只支持 htm 格式的组件文件，所有组件也都以 htm 作为扩展名
  use: {
    loader: 'file-loader',
    options: {
      name: '[name].[ext]', // 保留组件原来的文件名和扩展名，方便在 October CMS 里引入
      outputPath: (url, resourcePath) => {
        // NPM 包里的组件都在 components 文件夹下，并且都有统一的 oc- 前缀
        if (/components\/oc-\S+\.htm/.test(resourcePath)) {
          // 将路径设置为你主题的 partials 文件夹，并且一定要拼接 url 参数，它代表的是组件文件名
          return `path/to/partials/folder/${url}`;
        }
      }
    }
  }
}

引入组件的方式

在你的 Webpack entry 入口文件引入对应的组件即可，Webpack 会自动将文件拷贝过去：

import '@hagongyi/oc-mainsite-utilities/components/oc-page-banner.htm'

注意：不要忘记将拷贝到 partials 文件夹的组件添加到源代码管理系统（git, svn）中，October CMS 不会自动执行 Webpack 命令。