加入了面包屑导航

changbin1997 · Apr 8, 2022 · 088b901 · 088b901
1 parent f7e41a8
commit 088b901
Show file tree

Hide file tree

Showing 11 changed files with 107 additions and 7 deletions.
diff --git a/archive.php b/archive.php
@@ -7,6 +7,16 @@
 <div class="container main">
     <div class="row mt-4">
         <div class="col-xl-8 col-lg-8 post-list">
+            <?php if ($this->options->breadcrumb == 'on'): ?>
+                <nav aria-label="路径" class="breadcrumb-nav bg">
+                    <ol class="breadcrumb m-0 pl-0 pr-0 pt-0 border-0">
+                        <li class="breadcrumb-item">
+                            <a href="<?php $this->options->siteUrl(); ?>">首页</a>
+                        </li>
+                        <li tabindex="0" class="breadcrumb-item active" aria-current="page"><?php $this->archiveTitle(' &raquo; ','',''); ?></li>
+                    </ol>
+                </nav>
+            <?php endif; ?>
             <header class="archive-title mb-5">
                 <h1 <?php if ($GLOBALS['dark']) echo 'class="text-light"'; ?>>
                     <?php $this->archiveTitle(array(

diff --git a/assets/css/style.css b/assets/css/style.css
diff --git a/assets/css/style.css.map b/assets/css/style.css.map
diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -116,6 +116,13 @@
   text-transform: none;
 }
 
+// 面包屑导航
+.breadcrumb-nav {
+  .breadcrumb {
+    background: none;
+  }
+}
+
 // 文章列表
 .post-list {
   .post {
@@ -676,6 +683,18 @@ $textColor: #F5F5F5;
     }
   }
 
+  // 面包屑导航配色
+  .breadcrumb-nav {
+    .breadcrumb {
+      a {
+        color: $linkColor;
+      }
+      li {
+        color: rgba(255, 255, 255, 0.75);
+      }
+    }
+  }
+
   // 通用头像背景颜色
   .avatar {
     background-color: #282828;

diff --git a/assets/js/options-panel.js b/assets/js/options-panel.js
@@ -1,5 +1,5 @@
 window.onload = function () {
-  var title = ['外观', '站点信息', '侧边栏', '文章相关', '评论', '友情链接', '开发者'];  // 组标题
+  var title = ['外观', '站点信息', '导航', '侧边栏', '文章相关', '评论', '友情链接', '开发者'];  // 组标题
   var ul = document.querySelectorAll('form ul');  // 列表
   var form = document.querySelector('.typecho-page-main form');
   var titleEl = [];
@@ -19,11 +19,12 @@ window.onload = function () {
   // 插入分组标题
   form.insertBefore(titleEl[0], ul[0]);  // 外观
   form.insertBefore(titleEl[1], ul[1]);  // 站点信息
-  form.insertBefore(titleEl[2], ul[4]);  // 侧边栏
-  form.insertBefore(titleEl[3], ul[6]);  // 文章相关
-  form.insertBefore(titleEl[4], ul[8]);  // 评论
-  form.insertBefore(titleEl[5], ul[12]);  // 友链
-  form.insertBefore(titleEl[6], ul[15]);  // 开发者
+  form.insertBefore(titleEl[2], ul[4]);  // 导航
+  form.insertBefore(titleEl[3], ul[5]);  // 侧边栏
+  form.insertBefore(titleEl[4], ul[7]);  // 文章相关
+  form.insertBefore(titleEl[5], ul[9]);  // 评论
+  form.insertBefore(titleEl[6], ul[13]);  // 友链
+  form.insertBefore(titleEl[7], ul[16]);  // 开发者
 
   // 导出配置按钮点击
   document.querySelector('#export-btn').addEventListener('click', function() {

diff --git a/functions.php b/functions.php
@@ -57,6 +57,13 @@ function themeConfig($form) {
     $icp = new Typecho_Widget_Helper_Form_Element_Text('icp', null, null, _t('ICP备案号'), _t('ICP 备案号会显示在网站的底部，支持 a 标签。'));
     $form->addInput($icp);
 
+    // 面包屑导航
+    $breadcrumb = new Typecho_Widget_Helper_Form_Element_Radio('breadcrumb', array(
+        'on' => '开启',
+        'off' => '关闭'
+    ), 'off', _t('面包屑导航'), _t('开启后会在导航栏下方显示路劲导航。'));
+    $form->addInput($breadcrumb);
+
     //  侧边栏组件顺序
     $sidebarComponent = new Typecho_Widget_Helper_Form_Element_Text('sidebarComponent', null, '主题配色,最新文章,最新回复,文章分类,标签云,文章归档,其它功能,友情链接', _t('侧边栏组件'), _t('您可以设置需要显示在侧边栏的组件，组件会根据这里的组件名称排序。组件名称之间用英文逗号分隔，逗号和名称之间不需要空格，结尾不需要逗号。例如 主题配色,最新文章,最新回复,文章分类,标签云,文章归档,其它功能,友情链接 。'));
     $form->addInput($sidebarComponent);

diff --git a/page-archive.php b/page-archive.php
@@ -13,6 +13,16 @@
 <div class="container main">
     <div class="row my-4">
         <div class="col-xl-8 col-lg-8 post-page mb-5 mb-sm-5 mb-md-5 mb-lg-0 mb-xl-0">
+            <?php if ($this->options->breadcrumb == 'on'): ?>
+                <nav aria-label="路径" class="breadcrumb-nav bg">
+                    <ol class="breadcrumb m-0 pl-0 pr-0 pt-0 border-0">
+                        <li class="breadcrumb-item">
+                            <a href="<?php $this->options->siteUrl(); ?>">首页</a>
+                        </li>
+                        <li tabindex="0" class="breadcrumb-item active" aria-current="page"><?php $this->title(); ?></li>
+                    </ol>
+                </nav>
+            <?php endif; ?>
             <main class="page archive-page">
                 <article class="mb-5">
                     <header>

diff --git a/page-data.php b/page-data.php
@@ -12,6 +12,16 @@
 <div class="container main">
     <div class="row my-4">
         <div class="col-xl-8 col-lg-8 post-page statistics-page mb-5 mb-sm-5 mb-md-5 mb-lg-0 mb-xl-0">
+            <?php if ($this->options->breadcrumb == 'on'): ?>
+                <nav aria-label="路径" class="breadcrumb-nav bg">
+                    <ol class="breadcrumb m-0 pl-0 pr-0 pt-0 border-0">
+                        <li class="breadcrumb-item">
+                            <a href="<?php $this->options->siteUrl(); ?>">首页</a>
+                        </li>
+                        <li tabindex="0" class="breadcrumb-item active" aria-current="page"><?php $this->title(); ?></li>
+                    </ol>
+                </nav>
+            <?php endif; ?>
             <main class="page">
                 <article class="mb-4 border-bottom">
                     <header>

diff --git a/page-links.php b/page-links.php
@@ -33,6 +33,16 @@
 <div class="container main">
     <div class="row my-4">
         <div class="col-xl-8 col-lg-8 post-page mb-5 mb-sm-5 mb-md-5 mb-lg-0 mb-xl-0">
+            <?php if ($this->options->breadcrumb == 'on'): ?>
+                <nav aria-label="路径" class="breadcrumb-nav bg">
+                    <ol class="breadcrumb m-0 pl-0 pr-0 pt-0 border-0">
+                        <li class="breadcrumb-item">
+                            <a href="<?php $this->options->siteUrl(); ?>">首页</a>
+                        </li>
+                        <li tabindex="0" class="breadcrumb-item active" aria-current="page"><?php $this->title(); ?></li>
+                    </ol>
+                </nav>
+            <?php endif; ?>
             <main class="page">
                 <article class="mb-4 border-bottom">
                     <header>

diff --git a/page.php b/page.php
@@ -7,6 +7,16 @@
     <div class="container main">
         <div class="row my-4">
             <div class="col-xl-8 col-lg-8 post-page mb-5 mb-sm-5 mb-md-5 mb-lg-0 mb-xl-0">
+                <?php if ($this->options->breadcrumb == 'on'): ?>
+                    <nav aria-label="路径" class="breadcrumb-nav bg">
+                        <ol class="breadcrumb m-0 pl-0 pr-0 pt-0 border-0">
+                            <li class="breadcrumb-item">
+                                <a href="<?php $this->options->siteUrl(); ?>">首页</a>
+                            </li>
+                            <li tabindex="0" class="breadcrumb-item active" aria-current="page"><?php $this->title(); ?></li>
+                        </ol>
+                    </nav>
+                <?php endif; ?>
                 <main class="page">
                     <article class="mb-4 border-bottom">
                         <header>

diff --git a/post.php b/post.php
@@ -17,6 +17,19 @@
 <div class="container main">
     <div class="row my-4">
         <div class="col-xl-8 col-lg-8 post-page mb-5 mb-sm-5 mb-md-5 mb-lg-0 mb-xl-0">
+            <?php if ($this->options->breadcrumb == 'on'): ?>
+                <nav aria-label="路径" class="breadcrumb-nav bg">
+                    <ol class="breadcrumb m-0 pl-0 pr-0 pt-0 border-0">
+                        <li class="breadcrumb-item">
+                            <a href="<?php $this->options->siteUrl(); ?>">首页</a>
+                        </li>
+                        <li class="breadcrumb-item">
+                            <?php $this->category(' '); ?>
+                        </li>
+                        <li tabindex="0" class="breadcrumb-item active" aria-current="page"><?php $this->title(); ?></li>
+                    </ol>
+                </nav>
+            <?php endif; ?>
             <main class="post">
                 <article>
                     <header>