Skip to content

README.md

Latest commit

 

History

History
296 lines (220 loc) · 8.54 KB

README.md

File metadata and controls

296 lines (220 loc) · 8.54 KB

笔记起始页（Homepage）

Created 2024-10-06 Updated 2025-04-09

功能介绍

主页视图是一个灵活的仪表板布局系统，支持多种挂件组合展示，可用于创建个性化的主页、项目概览或数据统计页面。视图采用响应式网格布局，能够自动适应不同屏幕尺寸。

使用示例

// 创建一个包含多个挂件的主页
dv.view('homepage', [
  {
    type: 'Header',
    text: '我的主页',
    width: 12
  },
  {
    type: 'Link',
    text: '重要笔记',
    link: 'Notes/Important.md',
    width: 3
  },
  {
    type: 'YearProgress',
    width: 3
  }
]);

配置说明

  • 第 2 个参数是一个数组，数组中的每一项对应一个挂件（组）
  • 每一个挂件配置对象中必需的是 type 属性，其他属性根据挂件类型不同而不同。挂件的类型名称都是首字母大写。
  • 如果此挂件会创建多个卡片，即拥有多个子项，一般的可以将子项的通用配置写在对象的顶层属性中，而此项中如果有特定的配置则会覆盖顶层配置。

通用属性

  • type：挂件类型，【必须】
  • icon：图标，推荐使用 Emoji，但也支持图片
  • width：宽度可选值为 1、2、3、4、6、12
  • link：链接地址，可以是网络地址也可以是笔记得路径
  • text：显示文本

注：并不是所有挂件都支持以上全部属性。

挂件说明

Header 标题挂件

标题挂件用于创建页面标题和分组标题，默认为三级标题，适合用作挂件的分组。

配置参数

  • level：可选，标题级别，默认为 3，可选值为 1、2、3

使用示例

大标题
{
  type: 'Header',
  text: 'Hello World!',
  level: 1
}
分组标题
{ type: 'Header', text: '物资记录' }

YearProgress 年度进度挂件

年度进度挂件用于显示当前年度的进度信息，鼠标悬停时显示更详细的百分比。点击进度条会复制可用于分享的文本。

配置参数

  • precision: 进度条精度，小数点后保留位数，默认为 2，只影响鼠标悬停和复制时的数值精度
  • barLength: 复制时文本进度条的长度，默认为 20

使用示例

{ type: 'YearProgress' }

推荐按照默认配置使用。

Payment 付费记录挂件

付费记录挂件用来显示一些项目的充值记录，并根据记录估算每日的消耗值以及当前的预估余额，并根据一些条件来显示进度条，以便粗略的了解项目的消耗情况。我用它来关注如电费、燃气费、网费、桶装水等等的余量。

数据源

首先你要有一个笔记来记录这些项目的缴费情况，记录的格式如下：

## 电费
- 2025-03-02 : 32+100
- 2025-01-03 : 200
  • 首先，在这个文件下可以记录多个项目只要使用相应的标题进行分隔，请使用同等级的标题以避免混乱
  • 每一条记录中的日期和金额之间用英文冒号（:）或者管道符（|）分隔
  • 日期格式为年月日，如 2025-03-02
  • 金额格式为数字，如果该条记录有充值，则格式为：余额+充值金额
  • 【重点】列表按照日期的降序进行排列，即越靠上的日期距离现在越近

简单解释一下：实际指读取项目标题下的前两条记录，第 1 条记录视作为最新记录，并基于前两条记录之间的差值来估算每日的消耗量。

配置参数

  • path: 数据文件路径，如未设置，则视为当前文件
  • separator: 数据分隔符，默认为 [':', '|', ',']
  • warningDays：告警天数，当天数低于多少你觉得应该引起你的注意，默认为60天
  • settings: 付款项目设置，这是一个对象

settings 对象的格式如下：

首先它的键值为项目标题，需要和数据源中的标题完全一致

  • title：用来显示的标题
  • perDay：每日消耗量，如果有多条记录会自动估算，所以此值一般不需要设置
  • warningDays：告警天数，当天数低于多少你觉得应该引起你的注意
  • warningBalcance：告警阈值，当数值低于多少你觉得应该引起你的注意
  • currency：货币单位，默认为元。比如我记录桶装水，那单位就是“桶”

说明：进度条的显示同时受到 warningDays 和 warningBalcance 的影响。

使用示例

{
  type: 'Payment',
  path: 'Data/payment.md',
  width: 3，
  settings: {
    电费: {
      title: '电费',
      perDay: 6.66,
      warningDays: 10,
      warningBalcance: 100,
      icon: '⚡️',
      currency: '元'
    }
  }
}

Link 链接挂件

链接挂件用于显示一个或者一组链接，可以链接到网址或者笔记。

配置参数

  • link：链接地址，可以是网址或者笔记路径
  • fallback: 可选，链接不存在时的备用链接，对于像日记这样可能不存在的笔记可以使用此设定指向创建笔记的命令
  • items: 可选，多个子项，用于显示多个链接。

使用示例

{
  type: "Link",
  width: 3,
  items: [
    {
      icon: "📓",
      text: "今日日记",
      link: `20_生活/21_日记/undefined.md`,
      fallback: "obsidian://advanced-uri?commandid=quickadd%253Achoice%253A9d051b65-3fa3-49fb-a91d-91cf0e433073",
    },
    {
      icon: "📓",
      text: "日记视图",
      link: "70_页面/日记.md",
    },
    {
      icon: "📓",
      text: "本周周记",
      link: `20_生活/21_日记/undefined/Weekundefined.md`,
    }
  ]
}

这里可以灵活使用 window.moment().format() 方法来获取格式化的日期，实现动态路径。

Inventory 库存挂件

库存挂件用于展示和管理物品库存信息，支持对库存数量和保质期的管理。

数据源

首先你要有一个笔记来记录这些库存项目，推荐使用 Kanban 插件，这样这个文件的可视化效果会稍微好一些。文件中的格式如下：

## 食品库存
- [ ] 名称 | 生产日期 | 保质期（天数） | 过期日期 | 数量 | 单位 | 备注
- [ ] 鸡蛋 | 2023-01-01 |    | 2023-01-11 | 10 | 个 | 无
- [ ] 鸭蛋 | 2023-01-01 | 10 |            | 10 | 个 | 无
  • 可以存在多个类别，使用标题进行区分，在看板中就是不同的列
  • 保质期的天数和过期日期填写一个就可以了，同时存在这两个属性是为了填写方便，因为不同产品给出的保质期有的是天数有的是日期，只要填写在对应的位置即可
  • 数量、单位和备注都是用在卡片的鼠标悬浮提示中

配置参数

  • path：数据文件路径
  • separator：数据文件中的分隔符
  • warningDays：告警天数阈值
  • settings：物品分类设置

settings 对象其实没有什么可设置的。主要是使用它的键值去决定要显示的库存类别。当然也可以在这里为每一个类别单独设置图标。或者报警天数等。

使用示例

{
  type: "Inventory",
  width: 3,
  settings: {
    食品库存: {
      icon: "🍎",
      warningDays: 10
    }
  }
}

CountDays 倒数日挂件

倒数日挂件用于显示距离特定日期的天数，可以是未来的日子，也可以是已经过去的纪念日。

配置参数

  • date: 【必须】目标日期，格式为 YYYY-MM-DD，如 2024-02-10。
  • totalDays： 可选，总天数，用于计算进度条，如果填写则会显示进度条。
  • items: 可选，多个子项，用于显示多个倒数日。

使用示例

{
  type: "CountDays",
  width: 3,
  items: [
    {
      icon: "💐",
      text: "清明节",
      date: "2025-04-04",
      totalDays: 100
    },
    {
      icon: "💪",
      text: "劳动节",
      date: "2025-05-01",
      totalDays: 100
    },
  ]
}

DataShower 数据展示挂件

数据展示挂件用于展示 JSON 数据中的特定字段，从远程 API 获取数据并展示。

配置参数

  • dataName：数据名称前缀，有多个类似数据史可以据此进行区分
  • dataSource：数据源 URL
  • dataPath：数据访问路径，使用数组形式

使用示例

这是某个api的余额查询。这样我就能在笔记的起始页直接查看账户余额了。

  {
    type: "DataShower",
    width: 12,
    icon: "🤖",
    dataName: "OpenAI-SB",
    dataSource: "https://api.openai-sb.com/sb-api/user/status?api_key=sb-1234567890",
    dataPath: ['data', 'credit']
  },