Blog本站日志界面

xiaoze2025-01-122025-03-17

本站日志界面

本站日志的目的是记录我在学习和开发过程中所做的每一项尝试与成就。这不仅是对自己努力的见证，也是希望能为其他开发者提供灵感和参考。通过这份日志，我希望能与大家共同探讨、学习与进步。本文以本站使用的主题 anzhiyu 主题为例，介绍如何为主题添加本站日志。

实现方式

在 _config.anzhiyu.yml 下的 menu: 添加 本站日志: /update/ || xxx。

关于:
  关于本人: /about/ || anzhiyu-icon-paper-plane
  闲言碎语: /essay/ || anzhiyu-icon-lightbulb
  本站日志: /update/ || xxx

在 themes/anzhiyu/layout/page.pug 中添加以下内容，注意缩进。

1 2	when 'update' include includes/page/update.pug

在 themes/anzhiyu/layout/includes/page下新建update.pug文件

#update
  if site.data.update
    each i in site.data.update
      .author-content.author-content-item.UpdatePage.single(style = `background: url(${i.top_background}) left 37% / cover no-repeat !important;`)
        .card-content
          .author-content-item-tips=i.class_name
          span.author-content-item-title=i.description
          .content-bottom
            .tips=i.tip
          .banner-button-group
            a.banner-button(href=i.buttonLink)
              i.anzhiyufont.anzhiyu-icon-arrow-circle-right(style='font-size: 1.3rem')
              span.banner-button-text=i.buttonText

  #article-container
    != page.content

注意，Pug 文件的缩进十分严格，在 Pug 中，缩进用于表示层级结构。

在 source/_data 下新建 update.yml 文件

- top_background: "https://xxxxxx.png"
  class_name: "Update Class 1"
  description: "Description of the first update"
  tip: "Tip for the first update"
  buttonLink: "http://link_to_update1.com"
  buttonText: "More"