feat: add breadcumb

Signed-off-by: Frost Ming <[email protected]>
PyConChina · Nov 27, 2023 · 6a845fb · 6a845fb
1 parent 851b0de
commit 6a845fb
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 10 deletions.
diff --git a/assets/static/custom.css b/assets/static/custom.css
@@ -48,3 +48,21 @@ body {
   0%{opacity: 0;}
   100%{opacity: 1;}
 }
+
+.breadcumb > *::before {
+  content: "/";
+  padding: 0 0.5rem;
+}
+
+.breadcumb > a {
+  transition: all 0.3s;
+  color: white;
+}
+
+.breadcumb > a:hover {
+  color: #aaa;
+}
+
+.breadcumb > span {
+  color: #aaa;
+}
diff --git a/content/chongqing/python-for-non-programmer/contents.lr b/content/chongqing/python-for-non-programmer/contents.lr
@@ -7,10 +7,10 @@ bio: 开源作者
 body:
 
 面向非程序员的上班族，介绍 Python 的应用场景和学习路线：
-1.Python 自动化办公可以干什么？网上火爆的课程，主要在教什么？这部分有场景展示。
-2.非程序员学习 Python，学习路线是什么？哪些知识不需要学习？案例演示。
-3.火爆的 AI 值得学习吗？如何结合 AI 提高工作效率？
-4.答疑环节。
+1. Python 自动化办公可以干什么？网上火爆的课程，主要在教什么？这部分有场景展示。
+2. 非程序员学习 Python，学习路线是什么？哪些知识不需要学习？案例演示。
+3. 火爆的 AI 值得学习吗？如何结合 AI 提高工作效率？
+4. 答疑环节。
 ---
 introduction:
 

diff --git a/templates/city.html b/templates/city.html
@@ -2,18 +2,19 @@
 <div class="text-center">
   <h1 class="font-bold text-4xl my-6 text-center text-shadow">PyCon China 2023: {{this.title}}</h1>
   <p class="text-xl mb-4 text-white">开始时间: {% if this.start_date %}{{this.start_date.strftime('%Y-%m-%d %H:%M:%S')}}{% else %}待定{% endif %}</p>
-  <p class="mb-4 text-white">地点: {{this.venue|default('待定')}}</p>
+  <p class="text-xl mb-4 text-white">地点: {{this.venue|default('待定')}}</p>
   <div>
     {% if this.activity_url %}
-    <a href="{{this.activity_url}}" target="_blank" class="py-2 px-2 font-medium text-white hover:bg-primary transition duration-300"
+    <a href="{{this.activity_url}}" target="_blank" class="py-2 px-2 border border-primary font-medium text-white hover:bg-primary transition duration-300"
       >线下参会</a
     >
     {% endif %} {% if this.live_url %}
-    <a href="{{this.live_url}}" target="_blank" class="py-2 px-2 font-medium text-white hover:bg-primary transition duration-300">线上直播</a>
+    <a href="{{this.live_url}}" target="_blank" class="py-2 px-2 border border-primary font-medium text-white hover:bg-primary transition duration-300">线上直播</a>
     {% endif %}
   </div>
 </div>
 <section>
+  <p class="breadcumb flex border-b border-primary py-2"><a href="{{ this.parent.path|url }}">{{ this.parent.title }}</a><span>{{ this.title }}</span></p>
   <h1 class="text-4xl my-6 flex items-center space-x-2 font-thin text-white"><img src="{{'snake.png'|asseturl}}" /><span>演讲嘉宾</span></h1>
   {% for talk in this.children %}
   <a href="{{talk._path|url}}">

diff --git a/templates/layout.html b/templates/layout.html
@@ -13,7 +13,7 @@
   <body>
     <div class="flex flex-col min-h-screen">
       {% include "components/nav.html" %}
-      <main class="mx-auto w-full lg:w-3/4 py-2 px-8 grow">{% block body %}{% endblock %}</main>
+      <main class="mx-auto w-full lg:w-3/4 py-2 px-8 grow flex flex-col gap-2">{% block body %}{% endblock %}</main>
       {% include "components/footer.html" %}
     </div>
     {% block scripts %}{% endblock %}

diff --git a/templates/page.html b/templates/page.html
@@ -1,4 +1,5 @@
 {% extends "layout.html" %} {% block title %}{{ this.title }}{% endblock %} {% block body %}
 <h1 class="font-bold text-4xl my-6 flex items-center space-x-2"><img class="w-16" src="{{'arrow.png'|asseturl}}" /><span class="text-shadow">{{this.title}}</span></h1>
-<article class="prose lg:prose-lg prose-invert shadow-xl border border-primary p-4 max-w-none">{{ this.body }}</article>
+<p class="breadcumb flex"><a href="{{ this.parent.path|url }}">{{ this.parent.title }}</a><span>{{ this.title }}</span></p>
+<article class="prose lg:prose-lg prose-invert shadow-xl border border-primary p-4 max-w-none grow">{{ this.body }}</article>
 {% endblock %}
diff --git a/templates/talk.html b/templates/talk.html
@@ -12,8 +12,9 @@ <h2 class="text-xl mb-4 flex items-center">
   {% if this.start_date %}{{this.start_date.strftime('%Y-%m-%d %H:%M')}}{% else %}时间待定{% endif
   %}
 </h2>
+<p class="breadcumb flex"><a href="{{ this.parent.parent.path|url }}">{{ this.parent.parent.title }}</a><a href="{{ this.parent.path|url }}">{{ this.parent.title }}</a><span>{{ this.title }}</span></p>
 <article
-  class="prose prose-invert lg:prose-lg border border-primary p-4 max-w-none"
+  class="prose prose-invert lg:prose-lg border border-primary p-4 max-w-none grow"
 >
   <div class="lg:flex items-center border-b border-gray-200">
     <img class="w-40 h-40 rounded-full mr-6" src="{{ this.avatar|url }}" alt="{{this.speaker}}" />