如何使用jekyll插件

    技术2022-07-11  128

    jekyll admin

    可以管理文档 官方文档:https://jekyll.github.io/jekyll-admin/ github文档:https://github.com/jekyll/jekyll-admin

    安装

    Genfile添加

    gem 'jekyll-admin', group: :jekyll_plugins

    运行

    bundle install

    测试

    bundle exec jekyll serve

    访问http://127.0.0.1:4000/admin

    配置隐藏专栏

    在_config.yml配置

    jekyll_admin: hidden_links: - posts - pages - staticfiles - datafiles - configuration

    重新执行:

    bundle exec jekyll serve

    访问http://127.0.0.1:4000/admin

    在线编写博客

    标题

    # 一级标题 ## 二级标题 ### 三级标题 #### 四级标题
    无序分行
    - 第一行 - 第二行
    有序分行
    1. 第一行 2. 第二行

    特殊字符显色

    `hello world`

    代码插入

    #!/bin/bash ......

    `

    代码高亮

    {% highlight ruby %} #!/bin/bash ......... {% endhighlight %}

    添加 New metadata field

    添加layout 分列布局 效果显示;否则,会以网页的形式直接显示文章内容。 添加时间轴,可以自定义发行日期。

    jekyll-paginate

    官网文档:https://jekyllcn.com/docs/pagination/ github:https://github.com/jekyll/jekyll-paginate

    Genfile添加

    gem 'jekyll-paginate'

    _config.yml添加

    plugins: - jekyll-paginate # Pagination paginate : 5 #在生成的站点中每页展示博客数目的最大值 paginate_path : '/page-:num/' #定分页页面的目标路径

    安装

    gem install jekyll-paginate

    注意: 分页功能只支持 HTML 文件 Jekyll 的分页功能不支持 Jekyll site 中的 Markdown 或 Textile 文件。分页功能从名为 index.html 的 HTML 文件中被调用时,才能工作。分页功能是可选的,可能通过 paginate_path 配置的值,驻留和生成在子目录中。

    创建index.html,并添加如下内容:

    --- layout: default title: My Blog --- <!-- 遍历分页后的文章 --> {% for post in paginator.posts %} <h1><a href="{{ post.url }}">{{ post.title }}</a></h1> <p class="author"> <span class="date">{{ post.date }}</span> </p> <div class="content"> {{ post.content }} </div> {% endfor %} <!-- 分页链接 --> <div class="pagination"> {% if paginator.previous_page %} <a href="/page{{ paginator.previous_page }}" class="previous">Previous</a> {% else %} <span class="previous">Previous</span> {% endif %} <span class="page_number ">Page: {{ paginator.page }} of {{ paginator.total_pages }}</span> {% if paginator.next_page %} <a href="/page{{ paginator.next_page }}" class="next">Next</a> {% else %} <span class="next ">Next</span> {% endif %} </div>

    界面暂时并没什么变化。

    Processed: 0.028, SQL: 10