如何在开发和生产中配置 Ghost，以通过 url 提供 json 数据以加载 d3.json

Question

您好，我已经为我正在启动的博客构建了一个自定义 Ghost 主题，我想使用 d3 在静态页面上创建一个地图，但我无法加载地理 json 数据。D3.json 要求通过 URL 提供数据，但我无法弄清楚如何配置 Ghost 以实现这一目标。

我尝试的第一件事是将custom.geo.json文件放入

/content/themes/my-theme/assets/images/custom.geo.json

我意识到这是一个愚蠢的地方，但我已从该目录中加载了图像和图标，因此它似乎可以访问。我试着把它放进去

/content/themes/my-theme/

我的conifg.development.json看起来像这样：

{
  "url": "http://localhost:2368/",
  "server": {
    "port": 2368,
    "host": "127.0.0.1"
  },
  "database": {
    "client": "sqlite3",
    "connection": {
      "filename": "/Users/allisonmadigan/blog/dev/content/data/ghost-local.db"
    }
  },
  "mail": {
    "transport": "Direct"
  },
  "logging": {
    "transports": [
      "file",
      "stdout"
    ]
  },
  "process": "local",
  "paths": {
    "contentPath": "/Users/allisonmadigan/blog/dev/content"
  }
route.yaml: 
routes:
  /:
    controller: channel
    data: page.home
    template: 
      - home
collections:
  /blog/:
    permalink: /blog/{slug}/
    template: 
      - index
taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/

我的 Javascript 代码是

// get map data
d3.json(
  "/data/custom.geo.json", function(json) {
    //Bind data and create one path per GeoJSON feature
    countriesGroup = svg.append("g").attr("id", "map");
    // add a background rectangle
    countriesGroup
      .append("rect")
      .attr("x", 0)
      .attr("y", 0)
      .attr("width", w)
      .attr("height", h);

我得到的错误是：

d3.min.js:7 GET http://localhost:2368/data/custom.geo.json/ 404 (Not Found)

我什至尝试在开发中启动python SimpleHTTPServer，但后来javascript试图转到

http://localhost:2368/http://localhost:8000/blog/dev/content/themes/mytheme/data/custom.geojson

我不知所措...

Answer 1

我也发帖到Ghost社区，那里的一个非常好的人有解决方案。 他说，出于安全原因，Ghost不会从主题发送json文件。他建议使用"动态路由中的内容类型功能来"渲染"模板(实际上是一个json文件(。

所以现在我的 route.yaml 文件看起来像

routes:
  /:
    controller: channel
    data: page.home
    template: 
      - home
  /data/geo/:
    template: 
    - geo
    content-type: json
collections:
  /blog/:
    permalink: /blog/{slug}/
    template: 
      - index
taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/

我将custom.geo.json重命名为geo.hbs，并留在主题文件夹中。

我的JS代码是：

d3.json(
  "/data/geo/", function(json) {

Answer 2

如果你不想改变幽灵路由，并且你已经将nginx作为ghost前面的反向代理，你可以使用location指令为json提供服务。

请参阅配置草图。

server {
     ...
     ...
    location / {
        proxy_pass http://localhost:2368;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_buffering off;
    }
}
location /data/geo.json {
    alias path/to/geo.json;
}