如何访问与修改Keystone.js登录页面？新手寻找登录.hbs文件方法

作为刚上手Keystone.js的新手，找不到登录页面的.hbs模板太正常啦！其实默认的登录界面并不是放在你项目本地的文件里，而是Keystone核心包自带的，所以你直接在项目目录里搜肯定找不到。下面我给你一步步讲清楚怎么找到它、怎么修改：

为什么找不到默认的登录.hbs？ #

Keystone.js默认的登录页面（官方叫signin页面，不是login）是内置在node_modules/keystone包里的，并不在你的项目根目录下，所以你在自己的项目文件里搜login.hbs自然搜不到。

两种方法访问并修改登录页面 #

方法1：复制核心模板到本地修改（推荐） #

直接修改node_modules里的文件不是好习惯，因为下次更新Keystone包时，你的修改会被覆盖。正确的做法是把核心模板复制到项目本地，让Keystone优先加载本地版本：

• 打开你的项目目录，找到node_modules/keystone/templates/views文件夹，里面有个signin.hbs文件，这就是默认的登录页面模板
• 把这个signin.hbs复制到你项目的templates/views目录下（如果没有templates/views文件夹，自己新建一个）
• 现在你就可以修改项目本地的signin.hbs了，Keystone启动时会自动优先加载这个本地模板，而不是核心包里的版本

方法2：自定义登录路由与模板 #

如果你想完全自定义登录逻辑和页面样式，可以自己写路由和模板：

• 先在项目的templates/views下新建一个login.hbs，按照你想要的样式编写登录表单（记得包含用户名、密码输入框和提交按钮）
• 打开项目的keystone.js配置文件，添加自定义路由代码：

keystone.set('routes', function (app) {
  // 自定义登录页面GET请求
  app.get('/custom-login', function (req, res) {
    res.render('login', {
      title: '自定义登录页面',
      errors: req.flash('error') // 用来显示登录错误信息
    });
  });

  // 处理登录POST请求
  app.post('/custom-login', keystone.middleware.signin, function (req, res) {
    // 登录成功后跳转到后台首页
    res.redirect('/keystone');
  });
});

• 之后你访问/custom-login就能看到自己的登录页面了，还可以根据需求修改路由路径和模板内容

小提示 #

如果你用的是Keystone 5及以上版本，注意哦——这些版本已经改用React组件来构建后台界面了，不再用.hbs模板，修改登录页面的方法会不一样，需要自定义React登录组件并配置路由。不过你问的是.hbs，应该是用的Keystone 4版本，上面的方法完全适用~

内容的提问来源于stack exchange，提问作者ApplePie