时间戳

首页 > 解决方案 > nodeJS如何使用路由器将图标标签添加到pug文件中？

node.js - nodeJS如何使用路由器将图标标签添加到pug文件中？

问题描述

您好，我认为显示部分代码行更容易。
我想要做的是当我输入邮政编码时，会显示正确的图标。我正在使用https://erikflowers.github.io/weather-icons/这个 git。
例如：如果纽约天气状况表明weather.pug 中的天气状况应该是晴朗的，是否可以在i.wi.wi-night-sleet topic.js 的图标标签中添加类名？
或者我可以在哈巴狗苍蝇中使用相等的语句吗？ - if text=='clear' i.wi.wi-night-sleet

主题.js

    router.post('/weather', function(req,res){
  let url = `http://api.openweathermap.org/data/2.5/weather?zip=${req.body.zipcode}&units=imperial&appid=${apiKey}`
  request(url, function (err, response, body) {
     if(err){
       res.status(500).send('Internal Server Error');
       console.log('error: ' ,err);

     } else {
       if(req.body.zipcode.length != 5) {
         res.render('topic/weather', {text: "Zipcode does not exist"})
       } else {
         let weather = JSON.parse(body)
         let temp = weather.main.temp
         let location = weather.name;
         let day_weather = weather.weather[0].main;
         let message = `It's ${weather.main.temp} degrees in ${weather.name}!`;



//below this I want to call icon tag that has a class name
              res.render('topic/weather', {text: location + " : " + day_weather, weatherCondition: `i.wi.wi-night-sleet`});

       }
     }

   });

})

天气.pug

extends ./homepage
block navigate
  div.container-fluid
    div.row.row-centered
      p= text
        //- space 넣을떄
        = "  "
        if text
          = date


      div.col-lg-6.col-centered
        form.form-group(action='/weather', method='post')
          p    
            input(type='text', class="form-control", id="zipcode",name='zipcode', placeholder='zipcode')
          p
            button(type='submit', class="btn btn-primary btn-lg" style='margin-right: 10px;') Login

标签： node.jspugweather-api

解决方案

在您的路线中，只需传递您需要的图标的识别部分：

res.render('topic/weather', {text: location + " : " + day_weather, weatherCondition: "night-sleet"});

然后这是您的哈巴狗模板需要的样子：

i.wi(class= 'wi-' + weatherCondition)

或者

i(class= 'wi wi-' + weatherCondition)

这些 pug 行中的任何一行都会产生相同的 html：

<i class="wi wi-night-sleet"></i>

推荐阅读