# WaterDrop

**Repository Path**: lfzxcxp/WaterDrop

## Basic Information

- **Project Name**: WaterDrop
- **Description**: 老朱开发的waterdrop 水滴 typecho主题
- **Primary Language**: Unknown
- **License**: GPL-3.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2024-08-19
- **Last Updated**: 2025-03-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# WaterDrop

## 写在前面

本主题是基于`typecho 1.3.0`版本，并采用`php 8`的语法开发的，如果您的`typecho`版本低于`1.3.0`，请先升级到该版本，否则可能存在兼容性问题（如浏览，点赞失效）。

由于`typecho 1.3.0`目前还是`alpha`版，保险起见，你可以直接通过如下地址下载：

<https://pan.baidu.com/s/1kuCOQ2KrRCjT79LTLGFfcQ?pwd=yyds>

该代码是从作者官方镜像`joyqi/typecho:nightly-php8.2-fpm`中复制出来的，未作任何修改。我的网站正在运行的也是这个版本，已经经过了我和朋友们的检验，目前运行良好，可以放心使用。

## 主题介绍

**WaterDrop** 是 **水滴** 的意思，其实并没有什么特殊含义，只是因为每一次项目取名都绞尽脑汁，太麻烦了，于是就想着效法一些大佬，干脆取名随性一点。例如，`Java` 语言因作者经常在办公室喝 `Java` 咖啡而得名，`MySQL`和`MariaDB`的作者是同一人，命名分别是他两个女儿的名字（看样子作者也是个女儿奴），这样的例子还有很多，不过多列举了。

而我在开发该项目的时候，恰好在看《三体 Ⅱ：黑暗森林》，被其磅礴的想象力所震撼，更被其中探讨的人性、文明、历史、哲学等问题所折服，本来想取名叫“黑暗森林”或“森林”之类的，但担心被误认为是**黑色科技风格**或**绿色丛林风格**的主题，使用后才发现上当受骗就不好了。后来一想还是就叫**水滴**吧，外表朴素，实则内藏乾坤，貌似也挺不错的！

该主题就是一个简约且普通的写作主题，主要是我自己记录各种图文并茂的技术文章、经验心得以及产品文档用的，因此目前没有，未来也不会加入各种除了酷炫，没有多少实际用途的花哨组件，如果你也是技术人员，目的就是为了作为产品文档或者记录经验心得，它应该也会适合你！

另外，如果你也喜欢这款主题，请点个`Star`支持一下吧，谢谢！

## 主题特点

- 响应式设计，适配手机、平板、电脑等设备；
- 支持公告、轮播图、热门文章、最新评论、分类、标签云等可选组件；
- 标签云实现`3D`旋转动画效果；
- 支持 `PJAX` 无刷新加载；
- 实现友情链接、文章归档以及作品列表模板页；
- 适配`LZStat`插件，支持点赞数、访问量统计，并支持按时间、点赞数、访问量、权重(约定为 100\*点赞数+访问量)自定义排序方式；
- 支持自定义根据创建时间、点赞数、访问量等排序的侧边栏最新文章、热门文章列表；
- 文章内容实现类似`github`的渲染效果；
- 文章支持手动指定封面；
- 集成**Google AdSense**，内置风格一致的广告位；
- 评论支持`emoji`表情等...

## 预览

预览站点：<https://ilaozhu.com>

### 1. 列表页

### 1.1 宽屏效果

![](https://cdn.jsdelivr.net/gh/ZShijun/image-repo/20240528/58cfcdba38b5316c668e52590d87bc73.png)

### 1.2 窄屏效果

![](https://cdn.jsdelivr.net/gh/ZShijun/image-repo/20240528/689b4c9357c89be91fef7c56ef1e0d2f.png)

### 2. 文章页

![](https://cdn.jsdelivr.net/gh/ZShijun/image-repo/20240528/40646529681f2cb8305bad4c12e91d77.png)
![](https://cdn.jsdelivr.net/gh/ZShijun/image-repo/20240528/10f5d168c2790374158bb92d6fa6e7c8.png)

## 主题安装

1. 下载主题压缩包，解压后放到`/usr/themes/`目录下，将文件夹命名为 `WaterDrop`，确保`index.php`文件直接在`WaterDrop`文件夹下；
2. 登录博客后台，进入`控制台`->`外观`，选择`WaterDrop`主题；
3. `启用`主题即可。

## 主题使用

主题的使用方式很简单，直接到`设置外观`中按需设置即可，基本就是所见即所得，下面简单介绍一些需要单独说明的地方。

### 1. 友情链接

主题中实现了一个**友情链接页面模板**，可在添加友情链接`独立页面`时，在`自定义模板`中选择`友情链接页面模板`。
然后通过如下 `markdown` 语法来添加友情链接：

```
- ![站点名称1](站点图标1) [站点名称1](跳转链接1)
- ![站点名称2](站点图标2) [站点名称2](跳转链接2)
```

![](https://cdn.jsdelivr.net/gh/ZShijun/image-repo/20240505/f603994c51e2d64bf4f20a74174c8252.png)

页面效果如下：

![](https://cdn.jsdelivr.net/gh/ZShijun/image-repo/20240528/9459ff1b421f42f5106d40d46181658c.png)

### 2. 文章归档

主题中实现了一个**文章归档页面模板**，可在添加文章归档`独立页面`时，在`自定义模板`中选择`文章归档页面模板`，文本区不需要填写，空着即可。
![](https://cdn.jsdelivr.net/gh/ZShijun/image-repo/20240528/9ecc0cb07e3ab85aed80e8edd2b1836c.png)

页面效果如下：

![](https://cdn.jsdelivr.net/gh/ZShijun/image-repo/20240528/2e3b770a18352a44a6d0d9e175c2216e.png)

### 3. 作品列表

主题中实现了一个**作品列表页面模板**，可在添加友情链接`独立页面`时，在`自定义模板`中选择`作品列表页面模板`。
然后通过如下 `markdown` 语法来添加作品展示列表：

```
- 作品标题1
- 作品链接地址1
- 作品封面图片地址1
- 作品描述1
- 作品标题2
- 作品链接地址2
- 作品封面图片地址2
- 作品描述2
```

![](https://cdn.jsdelivr.net/gh/ZShijun/image-repo/20240604/2045d63bc1c965933c76f255e6650dc3.png)

> 需要特别注意的是：
>
> 1. 上述`markdown`中，顺序必须是标题、链接地址、图片地址、描述，不可错乱；
> 2. 如果描述有多段文字，换行后开头需要有 4 个空格，这是`markdown`的标准语法。另外，描述中能够识别`html`标签，因此，如有必要，也可以从语法上做一些增强，如高亮、加粗、斜体等。

### 4. 插件依赖

- [LZStat](https://github.com/ZShijun/LZStat)：主题中的点赞数、访问量统计，以及侧边栏中的热门文章是通过 `LZStat` 插件实现的，如果不需要这些功能，也可以不使用该插件。

### 5. 额外说明

#### 5.1 侧边栏设置

1. 如果`显示最新评论`，则可以到`设置`->`评论`中设置`评论列表数目`；
2. 如果`显示文章榜单`，则可以到`设置`->`阅读`中设置`文章列表数目`。

#### 5.2 关于文章封面

文章封面主要是文章列表页面显示的图片，可以在编写文章时通过`封面`字段手动指定，如果没有指定，则默认使用文章第一张图片作为封面。

如果既没有指定封面，文章中也没有图片，则随机使用一张主题外观中设置的`文章默认封面`作为封面。

如果`文章默认封面`也没有设置，则默认显示主题内置的`post-default-cover.png`图片作为封面，该图片你可以替换为符合自己网站风格的占位图。

也就是说，文章列表必然会显示一张封面，当然，任何一种形式的封面如果获取不到，都会显示`post-default-cover.png`默认封面。

## 发布协议

本主题采用 `GPL` 协议开源，您可以自由的修改、使用和传播，但请保留底部版权信息，以表示对作者的支持与尊重，谢谢！

## 关于作者

- 博客：<https://ilaozhu.com>
- 公众号：老朱独立开发

  ![老朱独立开发](https://cdn.jsdelivr.net/gh/ZShijun/WaterDrop/static/images/gzh.jpg)