基于Casper开发Ghost主题：如何部署reveal.js静态演示页面？

嘿，我来帮你搞定这个问题！你遇到的404是因为Ghost对主题文件夹里的资源访问有严格限制，直接把reveal.js文件丢到主题根目录是不会被公开访问的。下面分几种场景给你具体解决方案：

一、如果只是需要在page-talks.hbs中引用reveal.js的核心资源（css/js） #

Ghost主题只有assets目录下的静态资源会被当作可访问的公开文件，所以你需要这么做：

• 把reveal.js包中的dist文件夹（包含reveal.css、reveal.js、theme、plugin这些核心文件）复制到你的主题目录下的assets/revealjs/路径（如果没有revealjs文件夹就新建一个）
• 在page-talks.hbs中引用这些资源时，必须使用Ghost的asset helper来生成正确的路径，示例代码：

  <!-- 引入reveal.js核心样式 -->
  <link rel="stylesheet" href="{{asset 'revealjs/dist/reveal.css'}}">
  <!-- 引入你需要的主题样式 -->
  <link rel="stylesheet" href="{{asset 'revealjs/dist/theme/black.css'}}">
  <!-- 引入reveal.js核心脚本 -->
  <script src="{{asset 'revealjs/dist/reveal.js'}}"></script>
  <!-- 引入需要的插件，比如Markdown支持 -->
  <script src="{{asset 'revealjs/plugin/markdown/markdown.js'}}"></script>
  

这样Ghost会自动处理资源路径，不会出现404。

二、如果你的演示文稿是独立的HTML文件（每个talk是单独的reveal页面） #

这种情况下，不能把HTML文件放在主题文件夹里，Ghost不会公开主题目录下的非模板/非assets文件。你有两个可选方案：

方案1：使用Ghost的静态资源目录 #

• 在Ghost的安装根目录下找到content文件夹，新建一个static子目录（如果已经存在就不用新建）
• 把你的演示文稿HTML文件和对应的reveal.js资源放到content/static/talks/路径下，比如content/static/talks/intro-to-casper.html
• 重启Ghost服务后，就可以通过myblog.com/talks/intro-to-casper.html访问这个页面了

方案2：用Ghost后台创建静态页面 #

• 登录Ghost后台，创建新页面，设置页面的URL为/talks/your-talk-slug
• 切换到页面编辑器的代码模式，把reveal.js演示文稿的完整HTML代码粘贴进去（包括引用reveal.js资源的部分，资源引用可以用上面第一种方法的asset helper路径）
• 发布页面后，就能通过设置的URL直接访问这个演示文稿了

三、优化/talks页面的演示文稿列表展示 #

如果你想在myblog.com/talks页面自动列出所有演示文稿，可以用Ghost的模板helper来实现：

• 给所有演示文稿对应的页面（或静态页面）添加一个统一的标签，比如talks
• 在page-talks.hbs中添加以下代码来获取并展示这些页面：

  <div class="talks-container">
    <h2>我的演示文稿</h2>
    {{#get 'pages' filter='tag:talks' limit='all' order='published_at desc'}}
      <ul class="talks-list">
        {{#foreach pages}}
          <li class="talk-item">
            <h3><a href="{{url}}">{{title}}</a></h3>
            <p>{{excerpt words=20}}</p>
            <span class="talk-date">发布于 {{published_at format='YYYY-MM-DD'}}</span>
          </li>
        {{/foreach}}
      </ul>
      {{#if pages.length '==' 0}}
        <p>暂无演示文稿</p>
      {{/if}}
    {{/get}}
  </div>
  

这样每次你添加带talks标签的页面，都会自动出现在/talks的列表里。

注意事项 #

• 不要把整个reveal.js仓库都丢到主题里，只需要dist和plugin里的必要文件，减少主题体积
• 使用content/static目录后，记得重启Ghost才能让新的静态资源生效
• 所有资源引用都要使用asset helper或者正确的静态资源路径，避免写死绝对路径导致部署时出错

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