jekyll进行tag/category排序

2022/10/09 22:00:00 web 共 4300 字,约 13 分钟

自觉心是进步之母,自贱心是堕落之源,故自觉心不可无,自贱心不可有。—— 邹韬奋

突然心血来潮,觉得需要美化下页面的tag和category.

目前分类和标签主要有两种呈现方式:

  • 根据数量,进行字体放大,行程点阵云效果;
  • 在名称后面添加文章数量

两个都想做一下, 就有了下面代码,

Category Sort












  
  

  
  
  
  
  
  
  <a href="/categories/#web" style="font-size: 18pt; color: #000;">web(7)</a>
  <br/>

  
  

  
  
  
  
  
  
  <a href="/categories/#android" style="font-size: 18pt; color: #000;">android(7)</a>
  <br/>

  
  

  
  
  
  
  
  
  <a href="/categories/#java" style="font-size: 16.5pt; color: #111;">java(6)</a>
  <br/>

  
  

  
  
  
  
  
  
  <a href="/categories/#multimedia" style="font-size: 13.5pt; color: #444;">multimedia(4)</a>
  <br/>

  
  

  
  
  
  
  
  
  <a href="/categories/#dev" style="font-size: 13.5pt; color: #444;">dev(4)</a>
  <br/>

  
  

  
  
  
  
  
  
  <a href="/categories/#tools" style="font-size: 12pt; color: #666;">tools(3)</a>
  <br/>

  
  

  
  
  
  
  
  
  <a href="/categories/#open-hardware" style="font-size: 12pt; color: #666;">open-hardware(3)</a>
  <br/>

  
  

  
  
  
  
  
  
  <a href="/categories/#cv" style="font-size: 10.5pt; color: #777;">cv(2)</a>
  <br/>

  
  

  
  
  
  
  
  
  <a href="/categories/#plan" style="font-size: 9pt; color: #999;">plan(1)</a>
  <br/>

  
  

  
  
  
  
  
  
  <a href="/categories/#blog" style="font-size: 9pt; color: #999;">blog(1)</a>
  <br/>

Tag Sort




  
  

  
  
  
  
  
  
  <a href="/categories/#thread" style="font-size: 16.5pt; color: #111;">thread(6)</a>

  
  

  
  
  
  
  
  
  <a href="/categories/#java" style="font-size: 16.5pt; color: #111;">java(6)</a>

  
  

  
  
  
  
  
  
  <a href="/categories/#jekyll" style="font-size: 15pt; color: #333;">jekyll(5)</a>

  
  

  
  
  
  
  
  
  <a href="/categories/#audio" style="font-size: 13.5pt; color: #444;">audio(4)</a>

  
  

  
  
  
  
  
  
  <a href="/categories/#android" style="font-size: 12pt; color: #666;">android(3)</a>

  
  

  
  
  
  
  
  
  <a href="/categories/#video" style="font-size: 10.5pt; color: #777;">video(2)</a>

  
  

  
  
  
  
  
  
  <a href="/categories/#systemservice" style="font-size: 10.5pt; color: #777;">systemservice(2)</a>

  
  

  
  
  
  
  
  
  <a href="/categories/#opencv" style="font-size: 10.5pt; color: #777;">opencv(2)</a>

  
  

  
  
  
  
  
  
  <a href="/categories/#linux" style="font-size: 10.5pt; color: #777;">linux(2)</a>

  
  

  
  
  
  
  
  
  <a href="/categories/#flask" style="font-size: 10.5pt; color: #777;">flask(2)</a>

  
  

  
  
  
  
  
  
  <a href="/categories/#cmake" style="font-size: 10.5pt; color: #777;">cmake(2)</a>

  
  

  
  
  
  
  
  
  <a href="/categories/#blog" style="font-size: 10.5pt; color: #777;">blog(2)</a>

  
  

  
  
  
  
  
  
  <a href="/categories/#binder" style="font-size: 10.5pt; color: #777;">binder(2)</a>

  
  

  
  
  
  
  
  
  <a href="/categories/#随说" style="font-size: 9pt; color: #999;">随说(1)</a>

  
  

  
  
  
  
  
  
  <a href="/categories/#wsl" style="font-size: 9pt; color: #999;">wsl(1)</a>

  
  

  
  
  
  
  
  
  <a href="/categories/#windows" style="font-size: 9pt; color: #999;">windows(1)</a>

  
  

  
  
  
  
  
  
  <a href="/categories/#wave" style="font-size: 9pt; color: #999;">wave(1)</a>

  
  

  
  
  
  
  
  
  <a href="/categories/#vscode" style="font-size: 9pt; color: #999;">vscode(1)</a>

  
  

  
  
  
  
  
  
  <a href="/categories/#video_stitching" style="font-size: 9pt; color: #999;">video_stitching(1)</a>

  
  

  
  
  
  
  
  
  <a href="/categories/#ubuntu" style="font-size: 9pt; color: #999;">ubuntu(1)</a>

  
  

  
  
  
  
  
  
  <a href="/categories/#sshfs" style="font-size: 9pt; color: #999;">sshfs(1)</a>

  
  

  
  
  
  
  
  
  <a href="/categories/#sample" style="font-size: 9pt; color: #999;">sample(1)</a>

  
  

  
  
  
  
  
  
  <a href="/categories/#proxy" style="font-size: 9pt; color: #999;">proxy(1)</a>

  
  

  
  
  
  
  
  
  <a href="/categories/#ndk" style="font-size: 9pt; color: #999;">ndk(1)</a>

  
  

  
  
  
  
  
  
  <a href="/categories/#microbit" style="font-size: 9pt; color: #999;">microbit(1)</a>

  
  

  
  
  
  
  
  
  <a href="/categories/#mediacodec" style="font-size: 9pt; color: #999;">mediacodec(1)</a>

  
  

  
  
  
  
  
  
  <a href="/categories/#linker" style="font-size: 9pt; color: #999;">linker(1)</a>

  
  

  
  
  
  
  
  
  <a href="/categories/#kotlin" style="font-size: 9pt; color: #999;">kotlin(1)</a>

  
  

  
  
  
  
  
  
  <a href="/categories/#digispark" style="font-size: 9pt; color: #999;">digispark(1)</a>

  
  

  
  
  
  
  
  
  <a href="/categories/#cuda" style="font-size: 9pt; color: #999;">cuda(1)</a>

  
  

  
  
  
  
  
  
  <a href="/categories/#css" style="font-size: 9pt; color: #999;">css(1)</a>

  
  

  
  
  
  
  
  
  <a href="/categories/#attiny85" style="font-size: 9pt; color: #999;">attiny85(1)</a>

  
  

  
  
  
  
  
  
  <a href="/categories/#arduino" style="font-size: 9pt; color: #999;">arduino(1)</a>

  
  

  
  
  
  
  
  
  <a href="/categories/#android studio" style="font-size: 9pt; color: #999;">android studio(1)</a>

  
  

  
  
  
  
  
  
  <a href="/categories/#Performance" style="font-size: 9pt; color: #999;">Performance(1)</a>

  
  

  
  
  
  
  
  
  <a href="/categories/#2022_plan" style="font-size: 9pt; color: #999;">2022_plan(1)</a>

文档信息

打赏一下呗

对你有帮助,那就打赏一下吧

扫码支持
扫码打赏,金额随意

文章搜索

    Post Tags Cloud

    Table of Contents