利用 homepage 打造好看的浏览器看板

https://appstore.lazycat.cloud/#/shop/detail/cloud.lazycat.app.homepage

话不多说，先看最终的效果图：
![image-20250804201458274.png](https://dl.playground.lazycat.cloud/guidelines/188/d20268b0-3b7e-4e87-80d8-1f38060eddd9.png "image-20250804201458274.png")


## HomePage 配置

我们先来安装 HomePage。然后，通过开启**懒猫网盘**的 AppData，方便我们轻松地修改 HomePage 的配置。
![image-20250804201947265.png](https://dl.playground.lazycat.cloud/guidelines/188/5b4a82b3-811c-4b99-8432-28726b63efca.png "image-20250804201947265.png")

点击左边栏 AppData，点进 homepage/config 目录，至此我们就来到了 HomePage 的配置根目录。其中以 yaml 后缀结尾的文件都是配置，它们负责管理不同的展示模块，后面我会演示 settings.yaml、services.yaml、bookmarks.yaml、widgets.yaml——但不是全部。如果你想了解这个应用的全貌，可以查看[官方文档](https://gethomepage.dev/configs/)。
![image-20250804202339261.png](https://dl.playground.lazycat.cloud/guidelines/188/b7c9248e-e15f-4959-9210-623b9aaf6d14.png "image-20250804202339261.png")

## settings.yaml

settings 属于应用级配置，可设置例如：浏览器的 tab title、tab icon、打开 homepage 时的背景图等。例如我的配置是：

```yaml
title: Mine
description: 懒猫微服HomePage
background: 
  image: [图片连接]
  opacity: 50
  blur: sm
  
favicon: [图片连接]
```

所呈现的效果：
![image-20250804203327176.png](https://dl.playground.lazycat.cloud/guidelines/188/165fde57-bfa5-477f-ad01-944ef453869c.png "image-20250804203327176.png")

![image-20250804203420228.png](https://dl.playground.lazycat.cloud/guidelines/188/84bfaded-4685-45ed-9dac-e5155baeb37d.png "image-20250804203420228.png")

## services.yaml

services 配置很强大，通常用来配置自建服务（在我们这里就是懒猫应用），可以展示服务的 icon、主页链接、服务状态（`ping:xxx`）……最后可以像官网的示例一般，变得非常酷炫：
![image-20250804205047753.png](https://dl.playground.lazycat.cloud/guidelines/188/fe4f57a9-c9cd-49b6-ab24-c7fa95aa8c81.png "image-20250804205047753.png")
- 见：https://gethomepage.dev/configs/services/#docker-integration

但我觉得够用就好，所以没有配置得很复杂，只是把自己常用的站点分成四类：

- **常用应用**，如：bookstack、memos、gitea……都是懒猫应用；
- **小工具**，如：HomePage官网、opengist、lychee、freeicon……有的属于懒猫应用，有的是公网站点；
- **知识**（这个就不做过多介绍啦，就是常逛的站点）。

其配置如下（省略了部分配置，这里只做配置演示，大家按照自己的想法布局就好）：

```yaml
- 常用应用:
    - bookstack:
        href: 
        description: 记录系统笔记
    - memos:
        href: 
        description: 记录灵感

- 小工具:
    - HomepageConfig:
        href: 
        description: Homepage本地配置
    - Homepage官网:
        href: 

- 知识:
    - 知识星球:
        href: 
    - 最近: # 二级嵌套
        - Flutter核心技术与实战:
            href: 
```

## bookmarks.yaml

bookmarks 顾名思义，其配置结构也很简单，支持缩写和站点的 icon。我的呈现效果如下：
![image-20250804210530776.png](https://dl.playground.lazycat.cloud/guidelines/188/5f813ce6-a2b3-4911-8f4e-d5e71c740367.png "image-20250804210530776.png")

对应配置：

```yaml
- Developer:
    - Github:
        - abbr: GH
          href: https://github.com/
    - Lazycat开发文档:
        - abbr: LZC
          href: https://developer.lazycat.cloud/
          
- AI:
    - ChatGPT:
        - abbr: GPT
          href: https://chatgpt.com/
    - Gemini:
        - abbr: GMN
          href: https://gemini.google.com/app?hl=zh

- Social:
    - Reddit:
        - abbr: RE
          href: https://reddit.com/

- Entertainment:
    - YouTube:
        - abbr: YT
          href: https://youtube.com/
```

## widgets.yaml

widget 支持对接许多第三方应用，对应文档：https://gethomepage.dev/widgets/。这里挑个我以为最重要的来介绍——Search。默认 HomePage 里的搜索框使用 duckduckgo，但我想要 google，所以配置如下：

```yaml
- search:
    provider: google 
    focus: true 
    showSearchSuggestions: true 
    target: _blank
```

效果：
![image-20250804211504243.png](https://dl.playground.lazycat.cloud/guidelines/188/3906c812-eeb2-4f36-9189-f0ce984ebeb3.png "image-20250804211504243.png")

## Custom New Tab

最后，我希望每次在 google 浏览器中 new tab 就能默认打开 homepage 看板。这里推荐一个插件：[Custom New Tab](https://chromewebstore.google.com/detail/custom-new-tab/lfjnnkckddkopjfgmbcpdiolnmfobflj)。

在下图框中配置： https://homepage.${微服名}.heiyu.space/ 。
![image-20250804212120601.png](https://dl.playground.lazycat.cloud/guidelines/188/039e323d-8eb2-4af8-8a35-1ac0e80e0337.png "image-20250804212120601.png")