带有GitHub Pages的传单-不呈现 [英] Leaflet with GitHub Pages - not rendering

问题描述

我有一个简单的网页，其中嵌入了基本的传单地图.当我尝试通过GitHub Pages网站发布此内容时，传单地图将无法呈现(其他都很好).

I have a simple webpage into which I have embedded a basic leaflet map. When I try to publish this via my GitHub Pages website, the leaflet map won't render (everything else is fine).

GitHub Pages规范说它支持JS，这不是问题，因为它是一个API.我尝试使用下载版的传单(将.css和.js文件上传到我的gh-pages存储库中)，但仍然没有使用.

GitHub Pages spec says it supports JS and this shouldn't be a problem as it's an API. I have tried to use a downloaded version of leaflet (.css and .js files uploaded to my gh-pages repository), but still nothing.

任何人都知道为什么这行不通吗? GitHub Pages说它将托管静态"网页(没有API，没有JS交互性)时，这是什么意思?

Anyone have any ideas why this isn't working? Is this what GitHub Pages means when it says that it will host "static" webpages (no APIs, no JS interactivity)?

推荐答案

编辑

现在发布传单官方推荐 unpkg不支持https的CDN:

Leaflet now officially recommends unpkg CDN which does support https:

<link rel="stylesheet" href="https://unpkg.com/leaflet@0.7.7/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@0.7.7/dist/leaflet.js"></script>

或

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"></script>

---

原始答案

您可能会遇到一个混合内容"问题(HTTP协议中的资源试图加载到通过安全HTTPS协议访问的页面上).

There is a chance you are just facing a "mixed content" issue (resources from HTTP protocol trying to be loaded on a page accessed through secure HTTPS protocol).

请注意，最近站点的GitHub页面现在执行HTTPS协议:

Please note that GitHub pages for recent sites now enforce HTTPS protocol:

2016年6月15日之后使用github.io域创建的GitHub Pages网站需要HTTPS强制实施.

HTTPS enforcement is required for GitHub Pages sites created after June 15, 2016 and using a github.io domain.

这意味着，即使您手动键入http://my-site.github.io，您也会被自动重定向到https://my-site.github.io.

This means that even if you manually type http://my-site.github.io, you will be automatically redirected to https://my-site.github.io.

不幸的是，到目前为止，正式的Leaflet CDN不支持HTTPS协议.

The official Leaflet CDN does not support HTTPS protocol as of today unfortunately.

但是，您可以使用其他支持HTTPS的CDN，例如 cdnjs :

However, you can use alternative CDN's that do support HTTPS, e.g. cdnjs:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-rc.1/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-rc.1/leaflet.js"></script>

但是很奇怪，当您尝试使用本地(下载的)脚本时，它仍然不起作用吗?

But it is strange it still does not work when you try to use local (downloaded) scripts?

注意:

GitHub页面仅提供静态"网页，这意味着它们无法在服务器端动态生成，例如通过PHP.但是，您可以自由使用客户端代码(JavaScript).例如，Leaflet官方网站实际上托管在GitHub上.

GitHub Pages serving only "static" webpages means that they cannot be dynamically generated server-side, e.g. through PHP. However you are free to use client-side code (JavaScript). E.g., Leaflet official website is actually hosted on GitHub.

这篇关于带有GitHub Pages的传单-不呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！