首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在html模板中使用Jekyll toc?(来自*.md post文件)

Jekyll是一个基于Ruby的静态网站生成器,它可以帮助开发者快速构建简单、高效的静态网站。TOC(Table of Contents)是一个用于生成文档目录的工具。

在HTML模板中使用Jekyll TOC,可以通过以下步骤实现:

  1. 首先,在Jekyll项目的根目录下创建一个名为_plugins的文件夹(如果不存在)。
  2. _plugins文件夹中创建一个名为toc_generator.rb的Ruby脚本文件。
  3. toc_generator.rb文件中编写以下代码:
代码语言:txt
复制
module Jekyll
  module TOCGenerator
    def toc(content)
      # 此处编写生成TOC的逻辑代码
    end
  end
end

Liquid::Template.register_filter(Jekyll::TOCGenerator)
  1. 在需要生成TOC的HTML模板文件中,使用以下Liquid标签调用toc方法:
代码语言:txt
复制
{{ content | toc }}

这样,当Jekyll生成网站时,会自动将{{ content }}中的Markdown内容转换为HTML,并在指定位置生成TOC。

关于TOC的具体实现逻辑,可以根据需求选择不同的方式。一种常见的实现方式是使用正则表达式匹配Markdown中的标题(如<h1><h2>等),然后根据标题级别生成相应的目录结构。

对于腾讯云相关产品的推荐,可以考虑使用腾讯云的对象存储服务(COS)来存储和托管Jekyll生成的静态网站文件。腾讯云COS提供高可用性、高可靠性的存储服务,适用于各种规模的网站和应用。您可以通过以下链接了解更多关于腾讯云COS的信息:

腾讯云COS产品介绍:https://cloud.tencent.com/product/cos

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Jekyll 文章侧边索引导航

[TOC] Markdown 语法来自动生成目录。...Jekyll 生成目录的方案   参考资料 1 中所提到的,如果想要在 Jekyll 实现文章目录,有三种不同的方案可供选择: 第一种方案   利用完整的标签来生成静态目录,可以看到在本文的开头就是这样的一个实例...# gemfile gem "jekyll-toc" # 添加后需执行 bundle install 安装插件 # _config.yml # 在全局配置文件启用 jekyll-toc 插件 plugins...主要的步骤是: 将 toc.html 文件下载到 _includes 目录下; 在 _layouts 需要使用 toc 功能的页面模板的 content 前面加上 % include toc.html...具体在 post 模板使用 toc 模块的代码最后所示。 自适应   为了实现目标二,这里采用了最简单的 CSS 媒体查询,即在平常 PC 端宽屏时采用如下 common.sass 的样式。

1.5K30

简单搭建自己的博客

首先解压一个主题到我们的文件夹,我们不需要安装复杂的技术,目标就是很简单如何使用Jekyll的主题可以到任意的Github上用Jekyll博客的git上,去clone。...但是和我们平时写的博客不太一样,需要在开头写一些让我们的Jekyll可以把博客转换 最简单是加上 --- layout: post --- layout是指定,指定 _layouts 目录下的某个文件,...我们这里指定post文件post文件可以使用{{ content }}标签来调用内容,就是把博客内容放在post文件代换标签 layout还可使用include来包含 _includes 文件文件...文件夹主要放的是功能的东西,可以是播放器,或者评论还是flash 做完之后我们还需要写摘要和其他信息,我的模板使用的区分摘要是 <!...地址是 https://github.com/ghiculescu/jekyll-table-of-contents/raw/master/toc.js 下载放在自己的博客,根目录的 js 文件夹里,命名为

42520

如何为自己创建一个既时尚又好用的博客网站

第二步:设置dbyll 拿到disqus简称之后就可以在_config.yml文件文件添加disqus: disqus short name;添加完成之后发布你的网站,就可以看到disqus评论板块了...侧边栏(sidebar) 你可以在编辑/_includes/sidebar.html来自定义你的侧边栏。 其他问题 发表的文章在首页不显示?...默认情况发表的文章会在首页进行显示,如果发现首页父不显示发表的文章,可以编辑你的index.html文件: 将for post in site.posts 改为for post in paginator.posts...发表文章: dbyll支持Markdown语法,所以你只需要将.md文件放到_posts目录下,jekyll就会自动将.md文件渲染成一个html页面。一个.md文件代表一个HTML页面。...以下是发表文件的一些规范: 博客更新指南 —– clone 仓库到本地 在_posts目录下新建文章,2016-7-30-react-native-study-note,可以参考https://github.com

1.8K70

如何拥有一个免费空间来写博客(github)

如果网页代码采用html格式,后缀名为html;如果采用markdown格式,后缀名为md。)...layout:default”,表示该文章的模板使用_layouts目录下的default.html文件;”title: 你好,世界”,表示该文章的标题是”你好,世界”,如果不设置这个值,默认使用嵌入文件名的标题...在yaml文件头后面,就是文章的正式内容,里面可以使用模板变量。...}”>{{ post.title }}     {% endfor %}    它的Yaml文件头表示,首页使用default模板,标题为”我的Blog”。...然后,首页使用了{% for post in site.posts %},表示对所有帖子进行一个遍历。这里要注意的是,Liquid模板语言规定,输出内容使用两层大括号,单纯的命令使用一层大括号。

5.8K20

搭建一个免费的,无限流量的Blog----github Pages和Jekyll入门

如果网页代码采用html格式,后缀名为html;如果采用markdown格式,后缀名为md。)...layout:default",表示该文章的模板使用_layouts目录下的default.html文件;"title: 你好,世界",表示该文章的标题是"你好,世界",如果不设置这个值,默认使用嵌入文件名的标题...在yaml文件头后面,就是文章的正式内容,里面可以使用模板变量。...}}">{{ post.title }}     {% endfor %}    它的Yaml文件头表示,首页使用default模板,标题为"我的Blog"。...然后,首页使用了{% for post in site.posts %},表示对所有帖子进行一个遍历。这里要注意的是,Liquid模板语言规定,输出内容使用两层大括号,单纯的命令使用一层大括号。

1.6K60

如何搭建免费博客

jekyll 模板 jekyll 是基于ruby来编写的一个博客模板生成工具,也就是说我们可以根据相关的规则来生成对应的html文件,当然这份工作github也能帮你去做。...在_layout下创建一个default.html,作为一个网站的模板,添加如下内容(此处代码的所有的{ {中间都有一个空格,为了不让jekyll去解析,拷贝的时候请注意):    <!...进入_posts创建一个markdown文件或者是html文件文件名格式必须是:年-月-日-xxxx.md  ---   layout: default   title: Hello...创建首页,首页是为了显示文章列表的网页,我们需要做的是遍历_post文件的所有文章,然后展现出来,添加简单的代码如下:  ---   layout: default   title:...到这里,我们使用jekyll根据我们写的模板生成了对应的静态页面,下面我们把数据传入到github的gh-pages下面。 git add .

1.1K40

github page+jekyll构建博客的解决方案

我们提交_config.yml、htmlmd这些文件,推送到远程的服务器仓库上,github内置的jekyll程序会帮我们,利用这些提交的文件,生成html的静态页面。...既然逻辑是这样的,那么我们就要根据jekyll的规则来写_config.yml和htmlmd这些文件。 7、说下模板文件夹里面的每个文件分别代表什么。...about.md的layout是page。 ③这个page的布局在_layouts文件夹里面,对应的是page.html文件还有post.html,default.html这两个布局。...post.html也是在default.html基础上改的。 ④_post文件夹放置的是自己的文章,也都是用markdown格式写的。 要写markdown,得有一个好用的编辑器。...⑥_includes文件夹放的是三个html文件,页面的一些布局,可以理解成是_layout文件html文件引用的头文件

91810

【技术向】高可定 低维护の博客搭建指南

通过Hexo,你可以高定制化的DIY自己的博客 搭建后,只需要将md文档源文件丢进指定目录,输一个命令,hexo就可以自动生成页面 生成静态文件后,可以无需服务器+域名,直接将静态文件丢在GithubPages...例如添加/Demo分页,可以在配置文件中新增一项tab配置,在source文件夹下添加/demo/index.md即可,可以在post.pug模板更改tab分页渲染index.md的方式。...post.pug模板代码: ? 实现效果: ? 其他的各种折腾,其实原理都类似,找到对应的pug模板代码进行增删改即可,包括样式、脚本、内容。...(注:pug,即前jade,前端的一种模板引擎,api参见https://pugjs.org/api/getting-started.html) 调试的过程也很方便,使用hexo server命令可以启动本地环境...搭建完成后,日常使用只需要将md文件放入source/_post文件夹下,再运行一个简单的命令,即可自动生成+部署到git hexo generate --deploy hexo g -d 一些其他的实用功能也很多

56620

Hugo + GitHub Pages 搭建自己的网站

测试文章 接着,增加一篇测试文章: $ hugo new posts/my-first-post.md 这会在 content/posts 目录下生成一个 my-first-post.md 文件,里面内容如下...: --- title: "My First Post" date: 2020-11-30T23:33:03+08:00 draft: true toc: false images: tags: -...比如虽然 https://polarisxu.studygolang.com/ 和这里的例子使用了同一个模板,但样子却有不少不同,你可以查看 https://github.com/polaris1119...它最常使用的是通过 Jekyll 这个站点生成器生成静态页面,有兴趣的自行查阅资料了解。我们应该使用 Hugo 生成静态页面,因此直接将静态页面部署到 GitHub Pages。...小细节:避免 Jekyll 起作用,可以在仓库根目录放一个空文件文件名:.nojekyll 部署我们的站点 这里有两种做法。

1.3K30

Jekyll 优化合集

实现 代码高亮   Jekyll 代码高亮可以使用 Pygments、Rouge、Prism、Highlight JS等工具实现,据说大部分的高亮博客基本上都是使用 Pygments。...Prism 工具的安装使用相较其他两种稍微复杂一点,需要下载插件 prism.rb 手动安装到 _plugins 文件,然后在文章模板页添加 prism.css 和 prism.js 的引入。...由于 H2O 主题本身很适合转换成一个页面模板,要实现这一功能比较方便。 移动默认首页   这里想要移动的子目录可以使用任何与已有文件夹不重名的文件夹名,建议使用 blog,这样语义理解上比较方便。...> 编写学术首页   修改 dev/sass/common.scss 文件和 index.md 文件。...注意,这里的样式文件需要经过编译才能生效。编译需要在 NodeJS 环境下使用 npm install & gulp 命令。为了加快网页访问,学术首页的图建议使用 webp 格式。

2K30

免费构建自己的博客-Jekyll进阶

插件 Jekyll 插件可以扩展 Jekyll 原生没有的功能。 例如:自动生成RSS、生成TOC、生成SEO标记、压缩HTML等等功能,都可以通过插件来实现。...查看本站点_config.yml文件,便可以查看到本站所使用的插件。 引入插件 插件以 Ruby 代码或模块的方式存在,使用时通常引入相应的代码或模块即可。...模板 模板是指将一个网页分割为多个部分,存放在不同的文件,以实现尽可能复用代码的目的。...若要使用 Jekyll 布局,就必须了解 HTML 基本标签的用户,读者可以通过右侧链接进行学习:http://www.w3school.com.cn/html/index.asp 。...代码高亮 本站点模板默认开启了代码高亮,编写博客时只需要使用 markdown 的代码块方法编写即可。

97900

第 10 篇:小细节 Markdown 文章自动生成目录,提升阅读体验

= md.convert(post.body) post.toc = md.toc return render(request, 'blog/detail.html', context...接着我们便使用该实例的 convert 方法将 post.body 的 Markdown 文本解析成 HTML 文本。...">文章目录 {{ post.toc|safe }} {% endblock toc %} 即使用模板变量标签 {{ post.toc }} 显示模板变量的值...,注意 post.toc 实际是一段 HTML 代码,我们知道 django 会对模板HTML 代码进行转义,所以要使用 safe 标签防止 django 对其转义。...标签的值提取出来(目的是只要包含目录内容的最核心部分,多余的 HTML 标签结构丢掉)赋值给 post.toc;否则,将 posttoc 置为空字符串,然后我们就可以在模板通过判断 post.toc

1.2K40

个人免费博客花式搭建指南

首要的局限性就是免费的模板和功能有限,而想要更多好看的模板或者功能就需要付费升级,奈何并不想花钱买模板。...在实际的使用过程,笔者根据自己的需求也在 H2O 主题上做出了一定的功能修改,并开源为 jekyll-them-H2O-ac。...: [_redirects] 撰写文章   Jekyll 的撰写文章非常简单,只要在 _posts 目录下创建符合“年份-月份-日期-文章名称.md”规则的文件即可,比如“2021-04-05-start-blog.md...当使用前述的主题时,文章开始的配置声明部分包含 layout (使用模板)、title (文章标题)、subtitle (文章副标题)、date (撰写日期)、tags (标签)、categories...# 号与文字之间空一格,# 号与代码同行时距离不宜过长,相邻几行都有注释对齐为佳;当代码注释内容超过一行时最好将注释放在代码的后一行,此时 # 号前不留空格; 在使用图片进行解释的时候,在对应段落附近加载图片

1.7K40

快速搭建个人博客

感谢Huxpro提供的博客模板 我的的博客 前言 从 Jekyll 到 GitHub Pages 中间踩了许多坑,终于把我的个人博客BY Blog搭建出来了。。。...| └── header.html ├── _layouts | ├── default.html | └── post.html ├── _posts | ├── 2007-10-29...image.png 格式 每一篇文章文件命名采用的是2017-02-04-Hello-2017.md时间+标题的形式,空格用-替换连接。 文件的格式是 .md 的 MarkDown 文件。...进阶 若你对博客模板进行修改,你就要看看 Jekyll 的开发文档,是中文文档哦,对英语一般的朋友简直是福利啊(比如说我)。 还要学习 Git 和 GitHub 的工作机制了及使用。...修改个人介绍 修改个人介绍需要修改根目录下的 about.html 文件 看不懂 HTML 标签?

1.9K21
领券