github - 如何使用 Jekyll 和 GitHub 添加适合移动设备的网站？

Question

我目前有我的网站的桌面版本。我不想改变它。但我考虑过添加一个适合移动设备的网站。对于这个网站，我会删除一些 HTML 元素以使其加载更快(例如标签云和一些图像)并更改样式以更好地使用屏幕空间。

我想为此使用一个子域，例如

  http://martin-thoma.com/check-point-inside-polygon/ # Desktop verson
http://m.martin-thoma.com/check-point-inside-polygon/ # Mobile version

如何同时使用两个子域 m.和我的 GitHub 页面的域？

另一个问题是关于 Jekyll 的更多问题。我不知道这应该如何在底层文件系统上。我认为它可能是这样的

./css/
./images/
./_drafts/
./_posts/
./_plugins/
./_site/
    |- ./css/
    |- ./images/
    |- ... (all posts, tags, titles)
    |- ./m/
         |- ./css/
         |- ./images/
         |- ... (all posts, tags, titles)

所以我基本上需要两次 jekyll 运行。第一个生成桌面站点，第二个生成移动站点。但是我怎样才能告诉 jekyll 对相同的帖子使用不同的布局呢？ (当然，我可以预处理我的帖子并将所有出现的 layout:desktop 替换为 layout:mobile ，但这感觉不对。)

所以我的问题是: Jekyll 如何处理不同的移动/桌面网站版本？ 是否有示例，不能仅通过 media="handheld" 解决？或 media="only screen and (max-device-width: 480px)" (媒体查询)？

我认为维基百科的做法非常好。当您模拟移动设备并查看 HTTP 请求时，您会注意到以下内容:

Request URL:https://de.wikipedia.org/wiki/Benutzer:MartinThoma
Request Method:GET
Status Code:302 Found

Request Headers
GET /wiki/Benutzer:MartinThoma HTTP/1.1
Host: de.wikipedia.org
Connection: keep-alive
Cache-Control: max-age=0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
User-Agent: Mozilla/5.0 (Linux; U; Android 2.3.6; en-us; Nexus S Build/GRK39F) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
Accept-Encoding: gzip,deflate,sdch
Accept-Language: de-DE,de;q=0.8,en;q=0.6,en-US;q=0.4
Cookie: uls-previous-languages=%5B%22de%22%5D; clicktracking-session=SOME_SESSION_VAR; wikimedia-SUL-final-CN-general=5; mediaWiki.user.sessionId=MY_USER_ID; dewiki_session=ANOTHER_SESSION_ID; dewikiUserID=ANOTHER_USER_ID; dewikiUserName=MartinThoma; dewikiSession=ANOTHER_SESSION_ID; centralauth_User=MartinThoma; centralauth_Token=BLA; centralauth_Session=BLA; forceHTTPS=1; centralnotice_bucket=0-4.2; wikiEditor-0-toolbar-section=advanced; vector-nav-p-lang=true
If-Modified-Since: Thu, 09 Jan 2014 05:14:25 GMT


Response Headers
HTTP/1.1 302 Found
Server: nginx/1.1.19
Date: Thu, 09 Jan 2014 05:14:53 GMT
Transfer-Encoding: chunked
Connection: keep-alive
Location: https://de.m.wikipedia.org/wiki/Benutzer:MartinThoma
Accept-Ranges: bytes
X-Varnish: 161481560
Age: 0
Via: 1.1 varnish
X-Cache: amssq57 frontend miss (0)
Cache-Control: private, s-maxage=0, max-age=0, must-revalidate

所以他们似乎使用 User-Agent以确定他们会给你哪个网站。我想我可以用 .htaccess 做同样的事情文件(见 Mobile Redirect using htaccess)。但我仍然必须拥有该网站的移动版本。

Answer 1

由于您将基本上为移动和桌面维护单独的模板，我建议您创建两个 GitHub 存储库:一个用于桌面，另一个用于移动。
这样你就可以让你的 GitHub 页面链接到相关的子域。

在移动子域上，在文档准备好时，如果(设备宽度 > X)将用户重定向到桌面。
在桌面子域上，在文档准备好时，如果(设备宽度为 <= X)，将用户重定向到移动设备，
其中 X 是移动断点。

这种方法的主要问题是必须维护相同代码的 2 个副本 .但是，如果您是 确定 如果您的模板在移动设备和桌面设备上完全不同，这个解决方案可能会奏效。

我假设您的网站有一个博客。您可以做的是创建一个持续运行的监视任务，以检测工作目录中的更改并自动在移动和桌面存储库之间同步公共(public)文件夹(如 _posts 和 _data)。当您在桌面/移动版本中进行更改时，这将节省您在复制粘贴文件夹/文件中的时间。 请记住推送两个存储库!