面包屑导航乱码怎么办

面包屑(Breadcrumbs)

一.如何打开?

  • 基于原Minimal Mistakes代码仓库已有设置,在_config.yml中寻找到如下图的面包屑导航开关。

    打开面包屑.png

  • _data文件夹中的ui-text.yml文件可修改链接文本和分隔符

breadcrumb_home_label : "Home"
breadcrumb_separator  : "/"

如果想实现如下样式
Home > SVG > 动画制作
则修改分隔符(separator)即可:

breadcrumb_home_label : "Home"
breadcrumb_separator  : ">"

二.如何解决面包屑层级文字乱码问题?

导航乱码.jpg
  • WHY:出现乱码问题,原因在于每篇独立文章都未设置好文章与分栏之间的链接关系,即缺少永久链接结构,如permalink: /:categories/:title/

  • HOW:检查面包屑导航乱码出现在哪篇文章并所属哪个分栏下,并从_pages处复制文章所属栏目的永久链接结构permalink: /分类/文章名称,粘贴到文章开头基本代码处。
    注:链接的层级名称在做到同类别下都同步的情况下,均可改动。

插入链接代码.png
  • We did it!


    didit.jpg

三.面包屑的好处

  • 启用面包屑导航链接,可以帮助访问者更好地浏览网站。一定程度上实现了无死胡同頁(NO DEAD-END PAGES),即网站中的网页至少有一个可以返回主页或上一级的链接,方便访问者在各层级之间穿梭。

参考学习链接

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 作者:Nick Babich 翻译:ITsCrystal 编辑:风口上的猪毛 面包屑是一个网站或者app中为用户...
    ITsCrystal阅读 7,614评论 2 33
  • 在我们的站点中都有很多的页面,利用面包屑路径能够极大的增强用户寻找路径的能力。从易用性上来讲,面包屑路径减少了用户...
    xRichard阅读 2,067评论 0 1
  • 面包屑导航:面包屑是作为辅助和补充的导航方式,网页上让用户感知当前页面所在的层级位置并能方便地回到原先的地点,或者...
    2c5994723157阅读 1,508评论 0 5
  • 最近的项目中,纠结了一下面包屑的使用。于是研究了一下这个“古老”的控件 什么是面包屑导航 网页上让用户感知,当前页...
    德川亮阅读 6,813评论 3 26
  • 齐东昏侯――萧宝卷(公元483年至公元501年)汉族,字智藏,齐明帝次子。年号永元,谥号炀。 公元...
    张旭锋阅读 208评论 0 0

友情链接更多精彩内容