PWA Blog Add-On  дозволяє вам користуватися блогом на PWA.

У цій статті ви дізнаєтеся, як встановити PWA Blog на PWA Studio.

Бажаєте, щоб ми встановили та налаштували для вас модуль PWA Blog Add-On?

Наші девелопери зроблять це замість ваc – перегляньте наш Інсталяційний сервіс.

Виконайте наведені нижче дії, щоб встановити PWA Blog Add-On Magento 2:

1. Переконайтеся, що ви встановили останню версію модуля Блогу Magefan (Базовий, Плюс або Екстра) і Magefan Blog GraphQL Extension.

2. Завантажте папку src/lib/magefan-blog-ui з архіву в кореневий каталог PWA Studio root directory/src/lib/. Таким чином, ви отримаєте папку src/lib/magefan-blog-ui на вашому екземлярі PWA Studio..

3. Перейдіть до кореневого каталогу PWA Studio.

4. Додайте маршрут до блогу (blog static route).

  •  Оновіть local-intercept.js. Замініть цей рядок:
function localIntercept() {}

на

function localIntercept(targets) {
    targets.of("@magento/venia-ui").routes.tap(routes => {
        routes.push({
            name: "Blog",
            pattern: "/blog",
            path: require.resolve("./src/lib/magefan-blog-ui/src/components/Routes")
        });
        return routes;
    });
}

Приклад файлу (samples/local-intercept.js).

5. Створіть component directories.

mkdir -p src/components
mkdir -p src/components/App
mkdir -p src/components/Main

6. Скопіюйте наступні компоненти – components.

cp node_modules/@magento/venia-ui/lib/components/App/app.js src/components/App
cp node_modules/@magento/venia-ui/lib/components/App/container.js src/components/App
cp node_modules/@magento/venia-ui/lib/components/Main/main.js src/components/Main

7. Додайте blog core styles.

  • Оновіть components/Main/main.js. 
import blogPageClasses from './../../lib/magefan-blog-ui/src/index.css';

і замініть цей рядок

<div className={pageClass}>{children}</div>

на

<div className={`${pageClass} ${blogPageClasses.blogPage}`}>{children}</div>

Приклад файлу (samples/components/Main/main.js).

8. Оновіть import statements.

  • Оновіть відносний імпорт (relative imports) у components/Main/main.js.
import { mergeClasses } from '@magento/venia-ui/lib/classify';
import Footer from '@magento/venia-ui/lib/components/Footer';
import Header from '@magento/venia-ui/lib/components/Header';
import defaultClasses from '@magento/venia-ui/lib/components/Main/main.module.css';

Приклад файлу (samples/components/Main/main.js).

9. Експортуйте компоненти.

  • Створіть файл src/components/Main/index.js з наступним вмістом:
export { default } from './main'

10. Перепишіть/розширте Main component.

    • У кореневому каталозі PWA Studio створіть overwrite плагіна webpack moduleOverrideWebpackPlugin.js з таким кодом:
const path = require('path');
const glob = require('glob');

module.exports = class NormalModuleOverridePlugin {
    constructor(moduleOverrideMap) {
        this.name = 'NormalModuleOverridePlugin';
        this.moduleOverrideMap = moduleOverrideMap;
    }

    requireResolveIfCan(id, options = undefined) {
        try {
            return require.resolve(id, options);
        } catch (e) {
            return undefined;
        }
    }
    resolveModulePath(context, request) {
        const filePathWithoutExtension = path.resolve(context, request);
        const files = glob.sync(`${filePathWithoutExtension}@(|.*)`);
        if (files.length === 0) {
            throw new Error(`There is no file '${filePathWithoutExtension}'`);
        }
        if (files.length > 1) {
            throw new Error(
                `There is more than one file '${filePathWithoutExtension}'`
            );
        }

        return require.resolve(files[0]);
    }

    resolveModuleOverrideMap(context, map) {
        return Object.keys(map).reduce(
            (result, x) => ({
                ...result,
                [require.resolve(x)]:
                this.requireResolveIfCan(map[x]) ||
                this.resolveModulePath(context, map[x]),
            }),
            {}
        );
    }

    apply(compiler) {
        if (Object.keys(this.moduleOverrideMap).length === 0) {
            return;
        }

        const moduleMap = this.resolveModuleOverrideMap(
            compiler.context,
            this.moduleOverrideMap
        );

        compiler.hooks.normalModuleFactory.tap(this.name, (nmf) => {
            nmf.hooks.beforeResolve.tap(this.name, (resolve) => {
                if (!resolve) {
                    return;
                }

                const moduleToReplace = this.requireResolveIfCan(resolve.request, {
                    paths: [resolve.context],
                });
                if (moduleToReplace && moduleMap[moduleToReplace]) {
                    resolve.request = moduleMap[moduleToReplace];
                }

                return resolve;
            });
        });
    }
};
    • У кореневому каталозі PWA Studio створіть файл overwrite mapping componentOverrideMapping.js з таким кодом:
module.exports = componentOverride = {
    [`@magento/venia-ui/lib/components/Main`]: 'src/components/Main',
};

11. Підіть у папку src/lib/magefan-blog-ui та виконайте наступну CLI команду:

yarn install

12. Перейдіть до кореневого каталогу PWA Studio, потім створіть production build та запустіть сервер.

yarn build
yarn start

Після встановлення блогу PWA ви можете перевірити документацію розширення Блогу, щоб почати налаштування свого блогу.