如何在KeystoneJS项目中添加Logo或自定义文本？

针对你想在KeystoneJS里添加Logo（优先导航栏位置）的需求，我整理了几个经过验证的解决方法，帮你避开之前踩过的坑：

方案一：直接修改导航栏模板（推荐，符合你的导航栏需求） #

KeystoneJS的导航栏相关逻辑一般放在 templates/includes/nav.pug（不同版本路径可能略有差异，找不到的话可以全局搜索octicon-home，就是你之前想替换的那个首页图标）：

1. 先把你的Logo图片放到项目的 public/images 目录下（确保静态资源能被正常访问）
2. 打开导航栏模板文件，找到首页链接的代码块（就是包含<span class="octicon octicon-home"></span>的部分），把这个图标替换成你的Logo：

   //- 原来的代码可能类似这样
   a.nav-item(href='/')
     span.octicon.octicon-home
   
   //- 替换成Logo图片
   a.nav-item(href='/')
     img(src='/images/logo.png' width='160' alt='站点Logo')
   
   //- 如果用文本替代Logo，直接写
   a.nav-item(href='/') *我的专属站点*
   

3. 保存文件后重启Keystone服务，导航栏里就能看到你的Logo/文本了。

方案二：修复你尝试过的default.pug模板问题 #

你之前在templates/layouts/default.pug里加图片报错，主要是Pug语法和布局结构的小问题：

• 解决img标签报错：Pug里自闭合元素不需要额外嵌套内容，正确写法就是 img(src='/images/logo.png' width='160')，Pug会自动生成标准的<img>标签
• 解决.container提示：把页面主体内容包裹在.container类里即可，示例：

  body
    .container
      //- 原来的导航栏、页面内容等代码都放在这里面
      include ../includes/nav
      block content
  

  这样既消除了提示，也能保证布局的灵活性。

方案三：用CSS快速添加（无需修改模板） #

如果不想动模板文件，可以通过全局CSS实现：

1. 打开项目的全局CSS文件（比如public/css/site.css）
2. 针对导航栏的头部元素添加背景Logo：

   .nav-header {
     background: url('/images/logo.png') no-repeat left center;
     padding-left: 180px; /* 根据你的Logo宽度调整 */
     height: 60px; /* 根据你的Logo高度调整 */
     line-height: 60px;
   }
   

   如果用文本替代，直接通过伪元素添加：

   .nav-header::before {
     content: '我的站点名称';
     font-weight: bold;
     margin-right: 20px;
   }
   

3. 刷新页面就能看到效果，适合快速调整场景。

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