当前位置: 首页 > 软件库 > Web应用开发 > >

jekyll-anchor-headings

授权协议 MIT License
开发语言 JavaScript
所属分类 Web应用开发
软件类型 开源软件
地区 不详
投 递 者 瞿文柏
操作系统 未知
开源组织
适用人群 未知
 软件概览

Jekyll Pure Liquid Heading Anchors

Unit Tests

GitHub Pages can't run custom Jekyll plug-ins so when generating anchors for your headings (i.e. h1 - h6), you're stuck with JavaScript solutions that will inject anchors. But what if your users don't have JavaScript enabled on their browsers? If you're building a static website, why not make your anchors static as well?

As a part of my "Pure Liquid" series of Jekyll snippets, here is a Liquid snippet that will modify your generated HTML to inject anchors. Want to see it in action? Here are some awesome websites that I know of using this solution ❤️ .

Want a Table of Contents in your Jekyll layouts without JavaScript or a plug-in?

Check out the sister project over at allejo/jekyll-toc.

Usage

Alright, so how do you use it?

  1. Download the anchor_headings.html file from the latest release or the master branch

  2. Toss that file in your _includes folder

  3. Where you typically would put {{ content }} in your layout, you would instead use this Liquid tag to output your page's content:

    {% include anchor_headings.html html=content anchorBody="#" %}

Link Accessibility

Accessibility is hard and there are many different ways someone may want to handle it. For that reason, this project does not force onto developers any method of handling accessibility. That being said, this project can be configured to be accessible as seen in examples in the wiki.

⚠️ Layout Inheritance

If this snippet is used in a layout that is inherited by a child layout, it will apply to the child layout as well. If the child layout uses this snippet in addition to the parent layout, then heading anchors will be duplicated. You should only use this snippet in one layout.

�� Customization

You may remove anchorBody and add an icon via CSS' content property instead. You may also use HTML in anchorBody and add screen reader friendly markup.

Take a look at the unit tests directory and the wiki page for more examples of how to use this script.

Parameters

This snippet is highly customizable. Here are the available parameters to change the behavior of the snippet.

Parameter Type Default Description
html string * the HTML of compiled markdown generated by kramdown in Jekyll
beforeHeading bool false Set to true if the anchor should be placed before the heading's content
headerAttrs string '' Any custom HTML attributes that will be added to the heading tag; you may NOT use id; the %heading% and %html_id% placeholders are available
anchorAttrs string '' Any custom HTML attributes that will be added to the <a> tag; you may NOT use href, class or title; the %heading% and %html_id% placeholders are available
anchorBody string '' The content that will be placed inside the anchor; the %heading% placeholder is available
anchorClass string '' The class(es) that will be used for each anchor. Separate multiple classes with a space
anchorTitle string '' The title attribute that will be used for anchors; the %heading% placeholder is available
h_min int 1 The minimum header level to build an anchor for; any header lower than this value will be ignored
h_max int 6 The maximum header level to build an anchor for; any header greater than this value will be ignored
bodyPrefix string '' Anything that should be inserted inside of the heading tag before its anchor and content
bodySuffix string '' Anything that should be inserted inside of the heading tag after its anchor and content
generateId bool false Set to true if a header without id should generate an id to use.

* This is a required parameter

Performance

The performance impact of this snippet on your site is pretty negligible. The stats below were gotten from Jekyll's --profile option.

Filename                                         | Count |    Bytes |  Time
-------------------------------------------------+-------+----------+------

# performance on docs.travis-ci.com from ~Aug 2018
_includes/anchor_headings.html                   |   193 | 1667.96K | 0.695

License

This snippet may be redistributed under the MIT license.

  • 研究了下flash.bin的生成的过程, 主要是会用到anchor, 整理了下, 备查. 下面是anchor的用法. D:>anchor -h anchor:         flash map generate tool Synopsis:         anchor [option] [source] [target] Usage: Generate flash bin from confi

  • 在正式开始markdown之前,加的一段设置 https://gohugo.io/content-management/front-matter/ YAML identified by opening and closing ---. 官方介绍: Front Matter | Jekyll • Simple, blog-aware, static sites https://jekyllrb.c

  • Control.Anchor 属性 :获取或设置控件绑定到的容器的边缘并确定控件如何随其父级一起调整大小。 AnchorStyles 值的按位组合。默认值是 Top 和 Left。 使用 Anchor 属性可以定义在调整控件的父控件大小时如何自动调整控件的大小。将控件锚定到其父控件后,可确保当调整父控件的大小时锚定的边缘与父控件的边缘的相对位置保持不变。 一个控件可以锚定到其容器的一个或多个边缘。

  • Anchor 对象表示 HTML 超链接。 Anchor 对象表示 HTML 超链接。 在 HTML 文档中 <a> 标签每出现一次,就会创建 Anchor 对象。 锚可用于创建指向另一个文档的链接(通过 href 属性),或者创建文档内的书签(通过 name 属性)。 您可以通过搜索 Document 对象中的 anchors[] 数组来访问锚,或者使用 document.getElementB

 相关资料
  • anchor 方法 anchor() 方法用于创建 HTML 锚。 语法: stringObject.anchor( anchor_name ); 参数说明: anchor_name - 必需。为锚定义名称。 示例: var Str = "KILLHAPPY", n = Str.anchor("anchor"); console.log( n ); 结果: >>>

  • 描述 (Description) 此方法创建一个用作超文本目标的HTML锚点。 语法 (Syntax) 其语法如下 - string.anchor( anchorname ) 属性细节 anchorname - 定义锚点的名称。 返回值 (Return Value) 返回具有锚标记的字符串。 例子 (Example) 请尝试以下示例。 <html> <head> <title>

  • Defines the floating pointer in the document. Whenever text is inserted or deleted before the cursor, the position of the cursor is updated. Constructors new Anchor(Document doc, Number row, Number co

  • 此布局为用户提供了权限,以指定每个元素相对于容器大小的大小。 语法 (Syntax) 以下是使用Anchor布局的简单语法。 layout: 'anchor' 例子 (Example) 以下是一个显示Anchor布局用法的简单示例。 <!DOCTYPE html> <html> <head> <link href = "https://cdnjs.cloudflare.com

  • 介绍 (Introduction) Anchor小部件,代表一个简单的“a”元素。 Class 声明 (Class Declaration) 以下是com.google.gwt.user.client.ui.Anchor类的声明 - public class Anchor extends FocusWidget implements HasHorizontalAlignment,

  • This plugin adds an anchor/bookmark button to the toolbar that inserts an anchor at the editor’s cursor insertion point. It also adds the menu item anchor under the Insert menu. When a user clicks on