Какой самый простой способ связать файлы .hbs с помощью руля? - PullRequest
Новая
       41

Какой самый простой способ связать файлы .hbs с помощью руля?

0 голосов
/ 01 июля 2019

Я - новичок в руле и пытаюсь изменить шаблон простого руля, взятый из примера на glitch.com

Я хотел бы иметь возможность связывать между .hbs файлами, как я бы связывал между .html файлами, но когда я все же пытаюсь, мне выдается сообщение cannot GET, за которым следует любой файл, который я ему даю.

Вот захват моей общей структуры для ссылки;

enter image description here

Вот файлы index.hbs, с которыми я работаю 

<!DOCTYPE html>
<html>
  {{> head }}
  <body>
    <a href="views/secondpage.hbs">Link to second page</a>
  </body>
</html>

Который я хотел бы связать (например) с этим secondpage.hbs файлом; 

<!DOCTYPE html>
<html>
  {{> head }}
  <body>
    <a href="views/index.hbs">Link back to index</a>
  </body>
</html>

Вот код в моем server.js файле 

// Generic node.js express init:
const express = require('express');
const app = express();
app.use(express.static('public'));

const hbs = require('hbs');

hbs.registerPartials(__dirname + '/views/partials/');

app.set('view engine', 'hbs');
app.set('views', __dirname + '/views');

app.get("/", (request, response) => {

  let dt = new Date();
  let data = {
    projectName: process.env.PROJECT_DOMAIN,
    luckyNumber: Math.floor(Math.random()*1000),
    serverTime: new Date(),
    ip: (request.headers["x-forwarded-for"]||"").split(",")[0]
  };

  data.json = JSON.stringify(data, null, 2);

  response.render('index', data);
});

let listener = app.listen(process.env.PORT, () => {
  console.log('Your app is listening on port ' + listener.address().port);
});

и код у меня watch.json

{
  "install": {
    "include": [
      "^package\\.json$",
      "^\\.env$"
    ]
  },
  "restart": {
    "exclude": [
      "^public/",
      "^dist/"
    ],
    "include": [
      "\\.js$",
      "\\.hbs$",
      "\\.json"
    ]
  },
  "throttle": 100
}

Если какая-либо информация о других файлах необходима для оказания помощи, дайте мне знать, и я могу предоставить.

Я ценю, что, возможно, я думаю об этом неправильно, я посмотрел на руль более подробно и экспериментировал с помощниками и т. Д., Но это кажется слишком сложным для того, чего я пытаюсь достичь, я думал, что вы могли бы написать базовый html в файле hbs? Я ищу самое простое, общее решение проблемы связи между видами в руле.

FWIW Я хочу использовать руль довольно простым способом, в основном просто хочу иметь эквивалент php includes, используя вместо этого partials, так что если есть лучший способ приблизиться к созданию приложения с учетом этого Буду признателен за совет.

1 Ответ

1 голос
/ 02 июля 2019

Ваш код выглядит хорошо. В чем именно проблема? Когда вы добавляете {{> head}} частичное к index.hbs, оно не отображается должным образом?

EDIT:

Хорошо, у вас в основном 2 проблемы с вашим кодом:

  • У вас нет определенного маршрута на express, связывающего вашу конечную точку /secondpage.
  • Вы пытаетесь создать ссылку на файл <a href="views/secondpage.hbs">Link</a> вместо ссылки на конечную точку URL <a href="/secondpage">Link</a>.

Чтобы исправить ваш код, вам нужно определить конечную точку, связывающуюся с файлом handlebars, поэтому вам нужно изменить файл server.js на что-то вроде этого. 

const express = require('express');
const hbs = require('hbs');

const app = express();

app.use(express.static('public'));
app.set('view engine', 'hbs');
app.set('views', __dirname + '/views');
hbs.registerPartials(__dirname + '/views/partials/');

// 1st Page Route (URL Endpoint)

app.get('/', (request, response) => {
    const data = {
        projectName: process.env.PROJECT_DOMAIN,
        luckyNumber: Math.floor(Math.random() * 1000),
        serverTime: new Date(),
        ip: (request.headers['x-forwarded-for'] || '').split(',')[0],
    };
    data.json = JSON.stringify(data, null, 2);

    response.render('index', data);
});

// 2nd Page Route (URL Endpoint)

app.get('/secondpage', (request, response) => {
    response.render('secondpage');
});

const listener = app.listen(process.env.PORT, () => {
    console.log('Your app is listening on port ' + listener.address().port);
});

И тогда вам нужно исправить свои HTML-ссылки на это на index.hbs: 

<!DOCTYPE html>
<html>
  {{> head }}
  <body>
    <a href="/secondpage">Link to second page</a>
  </body>
</html>

И это на secondpage.hbs: 

<!DOCTYPE html>
<html>
  {{> head }}
  <body>
    <a href="/">Link back to index</a>
  </body>
</html>

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

...