我如何在开发和生产中配置 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 文件。他建议使用 "the content-type feature in Dynamic Routing to “render” a template (which is really a json file)."

所以现在我的 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

如果您不想更改 ghost 路由并且您已将 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;
}

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

How do I configure Ghost in in dev and production to make a json data available via url to load with d3.json?

javascript

config

d3.js

ghost-blog