Jekyll网站创建站点地图

Jekyll网站默认没有站点地图，但我们可以创建一个。

首先在Gemfile中写入以下代码并运行bundle install

group :jekyll_plugins do
   gem 'jekyll-sitemap'
end

然后添加以下代码到_config.yml并Commit。

plugins: 
  - jekyll-sitemap

此时站点地图已创建，但在根目录是不可见的，查看站点地图可在浏览器输入yourwebsite.com/sitemap.xml

官方文档

另外，想要文章马上被谷歌索引，可使用Google抓取工具，主动请求编入索引，几分钟内就会抓取并编入索引。

Custom 404 pages for github pages

Step 1, create a file named 404.html or 404.md in the site directory.

Step 2, write the following code in the yaml header of the HTML document:

---
permalink: /404.html
---

Step 3, design and write 404 pages.

Demo

Document

插入svg的方法

需求：在超链接后面插入一个名为link.svg的小图标，Demo：anchor

方法一：作为图片引入svg

<a>anchor<img src="/img/link.svg"></a>

方法二：直接在HTML写入

<a>anchor<svg>...</svg></a>

方法三：使用CSS伪类引入图片

a:after {
  content: url("/img/link.svg");
}

解决锚定位被fixed遮挡

需求：锚定位元素跳转后会到达视口顶部时，不让fixed布局的导航栏遮挡

HTML

<header></header>
<a id="anchor"></a>

CSS

header{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  width:100%;
  height: 60px;
}

#anchor {
  display: block;
  position: relative;
  top: -60px;
  visibility: hidden;
}

获取URL中的锚

需求：跨页面跳转到锚点定位，并给锚点元素添加点击事件，用于跳转后自动展开手风琴。

实现：location.hash获取URL中锚部分，然后模拟一个点击事件。

var urlHash = window.location.hash;
if (urlHash.length > 0) {
  document.getElementById(urlHash).click();
}