2017-01-04 8 views
1

Предположим, что у моего приложения есть два вида: index.ejs, profile/index.ejs Я хочу набирать маршрут, используя экспресс-код, как показано ниже.Есть ли хороший способ маршрутизации с использованием таблицы EJS, избегая повторения с помощью Express-сервера?

/* GET home page. */ 
router.get('/', function (req, res, next) { 
    res.render('index'); 
}); 

/* GET profile page. */ 
router.get('/profile', function (req, res, next) { 
    res.render('profile/index'); 
}); 

Должен ли оба файла ejs иметь ссылку для загрузки?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 

Если ответ да, то всякий раз, когда я хочу сделать еще одну страницу, я должен перезагрузить стиль и JS файл из CDN?

Я имею в виду, есть ли хороший способ сохранить общее содержимое, когда я меняю свой шаблон EJS?

ответ

2

Есть несколько способов для достижения этой цели.

1). используйте частичные части и включите их на каждую страницу.

2). Если вам не нравится включать в себя партитуры на каждой странице, вы можете использовать express-ejs-layouts или ejs-locals

Для первого подхода у нас может быть каталог partials, который будет содержать все необходимые нам части.

partials directory

А вот наши обертоны

//partials/head.ejs 
<meta charset="UTF-8"> 
<title>EJS Template</title> 
<link ref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 

Это scipt.js может включать в себя все сценарии, которые вы хотите включить.

//partials/script.js 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">  </script> 

Допустим, мы хотим, чтобы включить эти партиалы в index.ejs то все, что нам нужно сделать, это просто использовать <% include partial %> и мы хорошо идти.

// index.ejs 
    <!DOCTYPE html> 
    <html lang="en"> 
     <head> 
     <% include partials/head %> 
     </head> 
     <body class="container"> 

     <header> 
      <% include partials/header %> 
     </header> 

     <main> 
      <div class="jumbotron"> 
      <h1>This is great</h1> 
      <p>Welcome to templating using EJS</p> 
      </div> 
     </main> 

     <footer> 
      <% include partials/footer %> 
     </footer> 
     <% include partials/script %> 
     </body> 
    </html> 

Надеюсь, это поможет!

+0

Спасибо за хороший ответ! – Ko01

0

№ Вы можете сделать это легко, добавив скрипты и css, которые используются для всего приложения в разные файлы EJS.

Например.

Создайте файл с именем header.ejs и добавьте в него все ссылки и скрипты.

Затем в шаблонах просто включить этот файл, с этим фрагментом кода

<head> 
    <% include header.ejs %> 
    //IN HERE you can add page specific scripts or links 
</head> 

Надеется, что это помогает

+0

загружает css-файлы снова и снова всякий раз, когда я перехожу со страницы на страницу? – Ko01

+0

Не следует. Браузеры проверяет, как скрипты или ссылки каким-то образом меняются, если они не будут использовать кешированную версию. Вы можете проверить это, используя консоль dev в chrome, например. Чтобы узнать, берет ли браузер версию кеша или попытается снова загрузить. –

+0

О, я вижу. Благодаря! – Ko01