Цель: У меня есть веб-сайт для небольшого журнала. Я пытаюсь дать каждой статье свою собственную веб-страницу. Чтобы увеличить поисковую оптимизацию, Я хочу вставить текст и заголовок статьи как html, а не javascript
Мое решение до сих пор
Я думаю, что могу сделать это с помощью шаблона '.e js', используя html-webpack-plugin. Например
let articlePlugs = articles.map(function(arr) {
let [article, articleTitle] = arr
return new HtmlWebpackPlugin({
template: './html/article.ejs',
inject: true,
chunks: [iss],
filename: './articles/' + article + '/index.html',
templateParameters: {
article: article,
articleTitle: articleTitle
}
})
})
, который вставит уникальный текст статьи и заголовок статьи в разделы, помеченные <%= article %> и <%= articleTitle %> в моем шаблоне .ejs. После сборки у меня будут свои уникальные html файлы.
Макет веб-сайта
В настоящее время я использую тот же контур верхнего колонтитула, нижнего колонтитула и фон для каждой веб-страницы с уникальным содержимым, вложенным внутрь. Это выглядит примерно так, как этот код ниже
var Page = () => {
return(
<React.Fragment>
<Header />
<div id='bGndImg'>
<div id='gradient'>
{This is where the unique code goes}
</div>
</div>
<Footer />
</React.Fragment>
)
}
const root = document.getElementById('content');
ReactDOM.render (
<Content />,
root
)
На проблемы, на которые мне нужны ответы,
В идеале я бы вставил текст статьи, куда отправляется уникальный контент, но Я чувствую, что это будет невозможно.
Другой метод, который я подумал, может состоять в том, чтобы иметь отдельные исполнения ReactDOM.render для заголовка, нижнего колонтитула и любых других элементов, и установить html тело выглядит примерно так:
<body>
<div id='header'>
<div id='bGndImg'>
<div id='gradient'>
<div><%= ArticleText %></div>
<div id="SomeAdsOrSomething"></div>
</div>
</div>
<div id='footer'>
</body>
Я не знаю, возможно ли это с помощью веб-пакета. Насколько я понимаю, каждый файл html с веб-пакетом может иметь только одну точку входа, указанную в config.entry в пределах webpack.config.js
const config = {
mode: 'development',
entry: {
index: './src/index.js',
contact:'./src/contact.js'
},
...
}
module.exports = config;
Заключительные мысли
Возможен ли этот метод использования .ejs файлов с React и Webpack?
Кроме того, я действительно не в курсе, поэтому, если есть более простой способ сделать это, пожалуйста, дайте мне знать.