AnZhiYu主题自定义分类

AnZhiYu主题文档讲的很清楚

这里记录一下我创建分类页面的流程

  1. 去除categories目录下的index.md中的type: "categories"
  2. 修改该index.md,添加以下内容:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    ---
    title: 分类
    date: 2023-04-05 17:27:56
    aside: false
    top_img: false
    ---

    <style>
      #libCategories .card-wrap:hover .card-info:after {
        width: 300%;
      }
    </style>
    <link rel="stylesheet" type="text/css" href="https://npm.elemecdn.com/js-heo@1.0.11/3dCard/no3d.css">

    <div id='libCategories'>
    <div id="lib-cards" class="container">

    <a href='javascript:void(0);' onClick='pjax.loadUrl("/categories/JAVA/")'>
    <card data-image="https://img01.zzmr.buzz/img/fsafdasf02386-1.jpg">
    <h1 slot="header">Java</h1>
    <p slot="content">Java学习之路。</p>
    </card>
    </a>

    <a href='javascript:void(0);' onClick='pjax.loadUrl("/categories/前端/")'>
      <card data-image="https://img01.zzmr.buzz/img/23135884.png">
        <h1 slot="header">前端</h1>
        <p slot="content">学习前端的笔记</p>
      </card>
    </a>

    <a href='javascript:void(0);' onClick='pjax.loadUrl("/categories/生活/")'>
      <card data-image="https://img01.zzmr.buzz/img/DSC05231582.jpg">
        <h1 slot="header">生活</h1>
        <p slot="content">张三的生活</p>
      </card>
    </a>

    </div>
    </div>

    <script src='https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js' data-pjax></script>

    <script type="text/javascript" src="https://npm.elemecdn.com/anzhiyu-theme-static@1.0.7/no3d/no3d.js" data-pjax></script>

  3. 然后就是在categories中创建对应的目录了,比如上面的第一个分类:onClick='pjax.loadUrl("/categories/JAVA/")'这里的/categories/JAVA,就代表要在categories中创建一个JAVA的文件夹,然后在里面创建一个index.md
    20230605175859
  4. 在JAVA目录下的index.md中输入以下内容:
    1
    2
    3
    title: JAVA
    date: 2023-06-05 17:20:56
    type: "categories/JAVA"

这样之前分类为JAVA的文章,会自动列入到该分类下