我将发布一个我设置的解决方案,它利用了 GitHub Pages 使用 Jekyll 已经使用自动页面生成器这一事实。
git checkout gh-pages
mkdir _layouts
mv index.html _layouts
git checkout master -- README.md
mv README.md index.md
- 将以下文本添加到
index.md
---
layout: index
---
您还需要打开index.html
文件并进行以下更改:
从文件中的降价中删除呈现的 HTML README.md
。这通常在<section>
标签之间<article>
。将此 HTML 替换为文本,{{ content }}
这将允许我们将此文件用作 jekyll。我们应用布局的文件将放置在内容标签所在的位置。
找到项目页面主题的 CSS。对我来说,这是如下一行:
<link rel='stylesheet' href='stylesheets/stylesheet.css' />
这需要更改为
<link rel='stylesheet' href='{{ site.path }}/stylesheets/stylesheet.css' />
- 将在此布局中使用的存储在您网站上的任何其他资产也需要以
{{ site.path }}
.
通过这样做,Jekyll 会将 markdown 文件渲染为目录中index.html
布局的内容_layouts
。为了使这个过程自动化,不仅是 README.md 文件,还有你的 master 分支中可能拥有的其他文档,我采取了以下步骤:
创建了名为post-commit
包含以下内容的文件:
#!/bin/bash
###
### The following block runs after commit to "master" branch
###
if [ `git rev-parse --abbrev-ref HEAD` == "master" ]; then
# Layout prefix is prepended to each markdown file synced
###################################################################
LAYOUT_PREFIX='---\r\nlayout: index\r\n---\r\n\r\n'
# Switch to gh-pages branch to sync it with master
###################################################################
git checkout gh-pages
# Sync the README.md in master to index.md adding jekyll header
###################################################################
git checkout master -- README.md
echo -e $LAYOUT_PREFIX > index.md
cat README.md >> index.md
rm README.md
git add index.md
git commit -a -m "Sync README.md in master branch to index.md in gh-pages"
# Sync the markdown files in the docs/* directory
###################################################################
git checkout master -- docs
FILES=docs/*
for file in $FILES
do
echo -e $LAYOUT_PREFIX | cat - "$file" > temp && mv temp "$file"
done
git add docs
git commit -a -m "Sync docs from master branch to docs gh-pages directory"
# Uncomment the following push if you want to auto push to
# the gh-pages branch whenever you commit to master locally.
# This is a little extreme. Use with care!
###################################################################
# git push origin gh-pages
# Finally, switch back to the master branch and exit block
git checkout master
fi
编辑:README.md
我为文件和降价更新了上述脚本,docs/*
以使用相同的布局文件。这是一个比我以前更好的设置。该脚本位于您的.git/hooks/
目录中。bash 必须在您的路径中。
_config.yml
使用以下内容创建文件
markdown: redcarpet
path: http://username.github.io/reponame
docs/*
上面的脚本还会同步分支目录中的markdown 文件master
,以便它们也可以在 GitHub Pages 站点上查看。如果您包含以下 jQuery 函数以便从分支.md
上的锚点中剥离扩展,则到这些文档的相对链接有效。gh-pages
您可以index.html
在_layouts
目录中添加以下脚本:
$(document).on('ready', function () {
$('a').each(function (i, e) {
var href = e.href;
if (href.search('.md') > 0)
$(this).attr('href', href.split('.md')[0]);
});
});
编辑:我在我的存储库中更改了上面的代码,这是一种快速而肮脏的方法,但如果你知道我的意思,它不会在所有情况下都正常工作。例如,company.mdata.md
不会处理降价文件正确。为了解决这个问题,我将其更新为以下脚本,该脚本更仔细地检查了 href 并删除了扩展(如果找到)。ext
我还使脚本更通用,允许通过更改变量来删除其他扩展。这是代码:
$(function () {
$('a').each(function () {
var ext = '.md';
var href = $(this).attr('href');
var position = href.length - ext.length;
if (href.substring(position) === ext)
$(this).attr('href', href.substring(0, position));
});
});
我在CoryG89/docsync设置了一个示例 repo ,这里有一个项目页面,如果你想看看这一切是如何一起工作的。