Создать отдельное приложение JS для отдельной публикации?

Question

Создать отдельное приложение JS для отдельной публикации?

Automattic строит React.js основанная тема называется Пикард. Весь код JS находится в picard.js, ссылку на который вы можете увидеть ниже. Хотя в WordPress нет "маршрутизатора" как такового (, как описано здесь), React.js делает и используется в этом приложении для изменения URL-адреса при отображении публикации.

Мой вопрос , если бы я хотел создать приложение JS для отображения сообщений (скажем, в файле с именем posts.js), как я могу использовать другое приложение JS (скажем, в файле с именем post.js) для отображения отдельного сообщения?

Другими словами, если я не хочу использовать маршрутизатор на стороне клиента, а просто создам небольшое приложение JS (и лениво загруженное) для отдельного сообщения, а затем, если пользователь нажмет назад, чтобы просмотреть списки сообщений, загрузите posts.js.

function picard_scripts() {
    wp_enqueue_style( 'picard-style', get_stylesheet_uri(), '20150405' );
    wp_register_script( 'picard-script', get_template_directory_uri() . 
        '/picard.js', array(), '20150506', true );
    wp_enqueue_script( 'picard-script' );
    wp_enqueue_style( 'genericons', get_template_directory_uri() . 
        '/genericons/genericons.css', array(), '3.4' );
}
add_action( 'wp_enqueue_scripts', 'picard_scripts' );

На случай, если вам интересно, я не хочу использовать маршрутизатор на стороне клиента, потому что нахожу их глючными, но я действительно хочу создавать пользовательский интерфейс на JavaScript, поэтому я бы предпочитаю просто полагаться на WordPress для обработки URL/маршрутизации (даже если у WordPress нет маршрутизатора).

2

javascript routing posts urls

Author: Community, 2015-10-01

Source

1 answers

score 1 · Accepted Answer

Я попытаюсь составить ответ, основанный на моем понимании предоставленной информации.

Я изложу пару предположений, прежде чем начну прорабатывать логику:

1) Как и Пикард, вы обойдете стандартную иерархию шаблонов WP в пользу index.php провалиться.

2) Конечные точки будут предоставлены плагином WP REST API.

3) Для того, чтобы тема была как можно более простой, мы разместим логику маршрутизации в functions.php .

Отсюда вам нужно решить, будет ли сайт построен как асинхронное приложение с одной страницей или как веб-сайт в стиле стандартного запроса/ответа.

Одностраничное приложение будет в большей степени зависеть от внешней маршрутизации. У вас также может быть и то, и другое posts.js и post.js предварительно загруженный в зависимости от вашей структуры/фреймворка JS. Ваши URL-адреса будут содержать хэши, а ваш JS будет сопоставлять маршруты с конечными точками API.

// basic example - your route patterns may vary
http://domain.com/#posts
http://domain.com/#post/my-post-slug

Веб-сайт в стандартном стиле позволит PHP обрабатывать маршрут. Ваши URL-адреса будут соответствовать стандартной структуре WP и functions.php поставит в очередь ваши библиотеки JS на основе запроса:

// very basic routing logic - add any conditions as needed
function enqueue_template_scripts() {
    // load posts.js for blog page
    if(is_home()) {
        wp_enqueue_script('post-list', 'posts.js');
    }
    // load post.js for single requests
    if(is_single()) {
        wp_enqueue_script('post-single', 'post.js');
    }
}
add_action('wp_enqueue_scripts', 'enqueue_template_scripts');

ПРИМЕЧАНИЕ: Другие крючки действий могут работать лучше для вас в зависимости от того, что вы решите сделать в своей логике маршрутизации. Я использовал "wp_enqueue_scripts" в этом примере, чтобы продемонстрировать включение скрипта.