IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    探索 Stellar 时间线标签的 N 种用法

    xaoxuu (me@xaoxuu.com)发表于 2019-11-06 00:00:00
    love 0

    时间线标签是 Stellar 最强大的特性之一,它可以以侧边栏组件身份出现在左侧边栏,可以以标签插件形式出现在文章任意位置,以下是笔者能想到的几种常见用法。

    教程与步骤

    效果

    第一步:打开 GitHub

    打开 Stellar 的 GitHub 页面。

    第二步:点击 Star

    如果发现右上角的 Star 还没点亮,就点亮它!

    源码

    {% timeline %}
    <!-- node 第一步:打开 GitHub -->
    打开 [Stellar](https://github.com/xaoxuu/hexo-theme-stellar/) 的 GitHub 页面。
    <!-- node 第二步:点击 Star -->
    如果发现右上角的 Star 还没点亮,就点亮它!
    {% endtimeline %}

    近期动态(说说)

    设置 user:xxx 则会只显示某人发的 issue 数据,可以用来展示个人动态。

    效果
    源码
    {% timeline user:xaoxuu api:https://api.github.xaox.cc/repos/xaoxuu/blog-timeline/issues?per_page=2 %}
    {% endtimeline %}

    话题讨论

    如果不限制 user:xxx 则会显示所有人发的 issue 数据,可通过 labels 筛选用于展示某一话题。

    效果
    源码
    {% timeline api:https://api.github.xaox.cc/repos/xaoxuu/hexo-theme-stellar/issues?labels=1.x+版本&per_page=3 %}
    {% endtimeline %}

    扩展阅读

    可设置 hide:title,footer 隐藏标题和底部栏以进行紧凑型布局,例如 #探索号 系列文章:

    效果
    源码
    {% timeline hide:title,footer api:https://api.github.xaox.cc/repos/xaoxuu/hexo-theme-stellar/issues?state=all&labels=分享&per_page=3 %}
    {% endtimeline %}

    更新日志

    不只是 issues 数据,时间线也兼容 releases 数据,可直接用于展示项目更新日志:

    效果
    源码
    {% timeline api:https://api.github.xaox.cc/repos/xaoxuu/hexo-theme-stellar/releases?per_page=3 %}
    {% endtimeline %}

    友链文章订阅

    嗯,除了 issues 和 releases 数据,时间线还兼容「友链朋友圈」数据,可以展示小伙伴们最近发布的文章:

    效果

    源码

    {% timeline type:fcircle limit:3 api:https://raw.github.xaox.cc/xaoxuu/friends-rss-generator/output/data.json %}
    {% endtimeline %}

    因为篇幅有限,这里设置了最多只显示 3 条数据,实际可根据需要进行设置。

    热评文章

    如果使用基于 issues 的评论系统,可以通过按评论数排序展示热评文章:

    {% timeline hide:title,user user:utterances-bot,beaudar-bot api:https://api.github.xaox.cc/repos/xaoxuu/blog-comments/issues?sort=comments&per_page=3 %}
    {% endtimeline %}

    侧边栏时间线

    在 source/_data/widgets.yml 文件中创建时间线组件:

    timeline:
    layout: timeline
    title: 近期动态
    api: https://api.github.com/repos/xaoxuu/blog-timeline/issues?per_page=1
    user: xaoxuu

    timeline_stellar_more:
    layout: timeline
    title: Stellar 探索号
    api: https://api.github.com/repos/xaoxuu/hexo-theme-stellar/issues?state=all&labels=分享&per_page=5
    hide: title

    然后在需要显示的页面的 front-matter 中的 sidebar 部分写上它的名字,例如本文的配置:

    sidebar: [toc, timeline_stellar_more]

    大家有什么关于 Stellar 的文章想要分享吗?欢迎投稿,提完 issue 这里就可以看到了,不要乱投哦~

    https://xaoxuu.com/wiki/stellar/articles/
    https://xaoxuu.com/wiki/stellar/articles/


沪ICP备19023445号-2号
友情链接