nuxt2 SEO优化-文章详情

参考了其他类似网址后，优化思路为：
1.将官网文章详情页拆分为一个html模板服务
2.官网与模板服务互通,渲染地址为${模板域名地址}/article/${文章id};
3.添加与官网一致的Header,Footer组件实现无缝切换

使用node搭建了一个模板服务测试,没有添加很多样式

代码

views/article.hbs
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>{{article.title}}</title>
    <meta name="description" content="{{article.title}}" />
    <meta name="keywords" content="{{article.keywords}}" />
    <style>
      .wrap{display:flex;} .article_wrap{width:80%;} .article_list{width:20%;}
      .article_list li{margin-bottom:10px;color:#ccc;}
    </style>
  </head>
  <body>
    <h1>{{article.title}}</h1>
    <div class="wrap">
      <div class="article_wrap">{{{article.content}}}</div>
      <div class="article_list">
        <ul>
          {{#each article.recommendedList}}
            <li><a href="/article/{{this.id}}">{{this.title}}</a></li>
          {{/each}}
        </ul>
      </div>
    </div>
    <a href="/">返回列表</a>
  </body>
</html>

app.js
const express = require("express");
const expressHandlebars = require("express-handlebars");

const app = express();

// 配置 Handlebars view engine
app.engine(
  "hbs",
  expressHandlebars.engine({
    extname: ".hbs",
    defaultLayout: false,
  })
);

app.set("view engine", "handlebars"); // 确保这一行在定义路由之前

// 假设文章数据存储在一个数组中
let articles = [
  // 更多文章...
];

app.get("/article/:id", (req, res) => {
  const id = parseInt(req.params.id);
  console.log(id)
  const article = articles.find((article) => article.id === id);
  console.log(article)
  if (article) {
    res.render("article.hbs", { article });
  } else {
    res.status(404).send("文章未找到");
  }
});

// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});


package.json
{
  "dependencies": {
    "express": "^4.19.2",
    "express-handlebars": "^7.1.3",
    "handlebars": "^4.7.8"
  }
}
posted @ 2024-06-25 18:34  hello蔚蓝  阅读(66)  评论(0)    收藏  举报