Решение для декодирования HTML сущностей с помощью функции нормализатора в gatsby-config + gatsby-source-wordpress - PullRequest
Новая
       11

Решение для декодирования HTML сущностей с помощью функции нормализатора в gatsby-config + gatsby-source-wordpress

1 голос
/ 27 мая 2020

Это должно быть легко, но я изо всех сил пытаюсь заставить это работать ..

Я использую gatsby-source-wordpress для загрузки содержимого блога на мой сайт gatsby. Проблема в том, что HTML сущностей не декодируются, поэтому вместо символа '&' я вижу что-то вроде '& 8466;'.

Я хочу реализовать нормализованную функцию внутри моего gatsby-config.js файла.

Я нашел в сети эту функцию, которая должна исправить проблему HTML сущностей: 

const decodeHTML = ({input}) => {
    let txt = document.createElement('textarea');
    txt.innerHTML = input;
    return txt.value;
}

Я пробовал импортировать ее в свой gatsby-config.js из отдельного файла; Я также поместил функцию прямо в файл gatsby-config.js. В идеале я бы хотел импортировать эту функцию из отдельного файла проекта, но это не главная проблема.

Чтобы эта функция работала, я встроил ее прямо в свой файл конфигурации: 

{
  resolve: `gatsby-source-wordpress`,
  options: {
    baseUrl: `peakwebsites.ca`,
    protocol: `https`,
    useACF: false,
    verboseOutput: false,
    hostingWPCOM: false,
    normalizer: function decodeHTML({entities}) {
      let txt = document.createElement('textarea');
      txt.innerHTML = entities;
      return txt.value;
    }
  }
},

Но я столкнулся с этой ошибкой: 

success Downloading remote files - 7.158s - 205/205 28.64/s

 ERROR #11321  PLUGIN

"gatsby-source-wordpress" threw an error while running the sourceNodes lifecycle:

Cannot read property 'forEach' of undefined

  299 |       createNode,
  300 |       createContentDigest
> 301 |     }) => normalize.createNodesFromEntities({
      |                     ^
  302 |       entities,
  303 |       createNode,
  304 |       createContentDigest


 File: node_modules\gatsby-source-wordpress\gatsby-node.js:301:21

Я не очень хорошо знаком с внутренним устройством плагина исходного кода Wordpress, поэтому может быть какое-то свойство объекта, которое мне нужно проанализировать. Я действительно не уверен.

Есть ли у кого-нибудь решение для декодирования HTML сущностей с помощью нормализованной функции в gatsby-config?

Спасибо,

1 Ответ

1 голос
/ 28 мая 2020

Я не знаком с gatsby-source-wordpress, но чувствую, что у меня достаточно информации, чтобы направить вас на правильный путь:

  1. Вы не сможете получить доступ document из gatsby-config. js, он работает в среде Nodejs. Вместо этого используйте библиотеку узлов, быстрый поиск оказался he. 
const he = require('he')

const decode = input => he.decode(input)
Беглый просмотр документации gatsby-source-wordpress показывает, что entities - это массив. Я не знаю, как выглядит его форма, вам придется выйти из системы, чтобы увидеть, что это такое. Как только вы узнаете, как получить доступ к тексту HTML, вы можете использовать указанную выше функцию декодирования: 
{
  resolve: 'gatsby-source-wordpress',
  options: {
    // ...other options
    normalizer: ({ entities }) => entities.map(entity => {
      /* access your raw html somehow, this is just a guess */
      if (entity.__type === 'wordpress_post_or_something') {
        entity.content = decode(entity.content)
      }
      return entity
    })
  } 
}

В качестве альтернативы вы также можете добавить новое поле к узлам, созданным gatsby -source-wordpress через createNodeField в onCreateNode или createSchemaCustomization. Идея состоит в том, чтобы получить содержимое html из узла, декодировать его, а затем добавить обратно в этот узел в качестве нового поля.

Я буду счастлив удалить / обновить этот ответ, если кто-то еще может помочь знакомый с wordpress.

...