Блог

Главная - Вопросы по программированию - Генерировать несколько HTML-файлов из переменных

Генерировать несколько HTML-файлов из переменных

#javascript #html #gulp

#javascript #HTML #глоток

Вопрос:

Я работаю над сайтом, который должен генерировать страницу для каждой страны (единственными различиями между этими страницами являются мета-теги, title img тег и an). Делать это вручную для меня не очень эффективно, потому что каждый раз, когда мне нужно что-то изменить в шаблоне, я должен делать то же самое с каждым .html файлом страницы каждой страны.

Я слышал, что я мог бы использовать gulp.js для этого, но я не совсем уверен, смогу ли я и как.

В принципе, я должен сгенерировать 12 .html таких документов:

 <head>
  <title>-country title-</title>
  <meta name="description" content="-country description-">
</head>
<body>
  <img src="-country-img-" />
</body>

Любые советы по этой проблеме или другое возможное решение?

Комментарии:

1. Это тривиально, используя один исполняемый языковой файл на стороне сервера и шаблон для вывода, зависящий от url. Должны ли они быть статическими .html файлами?

2. Не лучше ли было бы сделать это на стороне сервера?

3. @GonzaloDiazAilan Взгляните на такие пакеты, как WebPack. Выберите язык шаблонов, создавайте страницы на лету и т. Д. Вы можете сделать это с помощью JavaScript/Node.js . Нет необходимости менять свой сервер.

4. @adeneo Конечно, и если на странице ничего не изменится, вы будете тратить кучу ресурсов процессора, создавая одну и ту же страницу снова и снова. Иногда правильным решением является предварительная генерация. Если вы только создаете шаблоны для своего сайта, генерируя их заранее, вы можете использовать любой статический хостинг (например, nice CDNS) для размещения своего сайта. С такой превосходной поддержкой современного JavaScript в браузерах и тем фактом, что поисковые системы в наши дни используют JavaScript, возможность статического перехода привлекательна для все большего числа ситуаций.

5. @GonzaloDiazAilan Их много. Я использовал Hexo раньше, но мне это не понравилось из-за некоторой дополнительной ерунды, которую он добавляет. Metalsmith — популярный выбор, но, вероятно, требует дополнительной настройки. Вы могли бы просто написать базовый Node.js скрипт для запуска шаблонов усов и вывода HTML-кода для вас. Множество вариантов… поэкспериментируйте с парой и посмотрите, что работает лучше для вас.

Ответ №1:

Наконец, я использовал эту статью, которая решает проблему с помощью gulp.js handlebars.js .

Это мое gulpfile.js на случай, если вам интересно, как я это сделал:

 gulp.task('pages', function() {
for(var i=0; i<countries.length; i  ) {
    var country = countries[i],
        fileName = country.filename.replace(/  /g, '-').toLowerCase();

        console.log(country.filename);

    gulp.src('countries-template.handlebars')
        .pipe(handlebars(country))
        .pipe(rename(fileName   ".html"))
        .pipe(gulp.dest('build/countries'));
}
gulp.src('countries-template.handlebars')
    .pipe(handlebars(countries[0]))
    .pipe(rename("index.ejs"))
    .pipe(gulp.dest(''));
})

И это мое countries-config.json на случай, если вы хотите увидеть .json файл:

 [{
"name": "Argentina",
"filename": "argentina",
"slug": "arg"
},{
"name": "Mexico",
"filename": "mexico",
"slug": "mex"
},{
"name": "Chile",
"filename": "chile",
"slug": "chi"
},{
"name": "Bolivia",
"filename": "bolivia",
"slug": "bol"
}, [etc...]
]

Я не буду показывать свой countries-template.handlebars , потому что он довольно огромен, но я могу заверить, что этот метод сработал для меня безупречно

Спасибо всем вам за вашу помощь!