开源一款基于 Typecho 开发的博客主题

2024-05-28

8827

10

写在前面

本主题是基于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 咖啡而得名,MySQLMariaDB的作者是同一人,命名分别是他两个女儿的名字(看样子作者也是个女儿奴),这样的例子还有很多,不过多列举了。

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

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

预览站点:https://ilaozhu.com

主题特点

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

主题安装

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

主题使用

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

1. 友情链接

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

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

2. 文章归档

主题中实现了一个文章归档页面模板,可在添加文章归档独立页面时,在自定义模板中选择文章归档页面模板,文本区不需要填写,空着即可。

3. 作品列表

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

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

需要特别注意的是:

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

4. 插件依赖

  • LZStat:主题中的点赞数、访问量统计,以及侧边栏中的热门文章是通过 LZStat 插件实现的,如果不需要这些功能,也可以不使用该插件。

5. 额外说明

5.1 侧边栏设置

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

5.2 文章封面

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

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

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

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

这里其实也缓解了前面 通过 Github + jsDelivr + PicGo 配置免费图床 时,由于 jsDelivr不稳定带来的用户体验差的问题,也就是当 jsDelivr 无法访问的时候,临时显示一张默认图片作为封面,而当jsDelivr 恢复之后又立即显示出原图。这么做只是让用户体验好一点而已,并没有从根本上解决问题,但好在不稳定只是少数情况,不能忍受的还是老老实实的用本地图片或付费产品吧,毕竟免费总归还是需要代价的!

最后

本站后续会一直使用这个主题,优化升级能看到最实时的效果,欢迎大家多提bug以及宝贵的优化建议!

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

最后,想要用好 Typecho,少不了 PHP 的相关知识,点击下方按钮可获取全套的 PHP 零基础视频教程
百度网盘
上述学习资源均来源于网络,搜集整理不易,仅供学习研究使用,如有需要,请保存至个人网盘备份,以防下架或丢失!

相关推荐

  1. 终于收到 Google Adsense 漂洋过海邮寄过来的 PIN 码了 2025-03-13
  2. 为博客网站增加一个简单的算术验证码,防止机器人垃圾评论轰炸 2025-03-12
  3. 如何基于 Typecho 实现中英双语网站(下) 2025-02-20
  4. 如何基于 Typecho 实现中英双语网站(上) 2025-02-09
  5. Typecho中添加外链跳转的过渡页 2024-12-18

本文作者: 老朱

原文链接: 开源一款基于 Typecho 开发的博客主题

版权声明: 本站所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!

免责声明: 文中如涉及第三方资源,均来自互联网,仅供学习研究,禁止商业使用,如有侵权,联系我们24小时内删除!

Typecho 博客主题

评论38

😊 😃 😄 😁 😆 😅 😂 🤣 🙂 🙃 😉 😇 😏 😌 😍 😘 😗 😙 😚 😋 😛 😜 😝 😒 😔 😖 😞 😟 😠 😡 😳 😨 😰 😥 😢 😭 😱 😲 😵 😷 🤒 🤕 🤢 😴 🤤 😪 😫 😬 😮 🤲 🤜 🤛 🤚 🤝 🙏 🤞 🤟 🤘 🤙 👌 👍 👎 👊 👏 🙌 👐 💪
  1. ApplePine

    向大佬反馈两个bug,
    1. 首页 文章块的大小(高度)问题,当使用 减少了摘要的内容比如让摘要为空,则会导致文章块的高度不对,建议锁定文章块的高度
    2. 后台外观设置的网站logo设置,当不需要logo并删除该输入框的内容保存设置后,进入该设置页面该输入框仍然显示了默认值,虽然网站logo并没有是默认值

    2024-07-30 20:32
    1. 老朱

      收到,感谢反馈,我优化一下👍

      2024-07-30 21:27
    2. ApplePine

      问题1中间是 当使用 --more 那个代码减少摘要内容

      2024-07-30 20:33
  2. memoo

    非常感谢老朱,这就是我寻找了很久的理想主题。从此,我心有所归,不在流浪。

    2024-07-23 10:34
    1. 老朱

      夸张了,夸张了😁

      2024-07-23 10:45
      1. memoo

        一点都不夸张,市面上有很多各类各样的主题,但是我都觉的差强人意,再次感谢老朱

        2024-07-25 10:30
  3. alex

    请问,为什么我的首页只显示文章标题和缩略图,没有摘要呀?

    2024-07-13 15:22
    1. 老朱

      我估计是你使用了LZStat插件,然后把显示正文给关了

      2024-07-13 20:19
  4. dd

    怎么把 分类放到上面,时间轴、作品墙这些地方

    2024-07-12 20:04
    1. Dili

      本着互相帮助的原则 ,我斗胆也分享一下我目前在用的吧,也是网上COPY的,把下面的代码放在原来header.php有pages对应的位置。



      2025-03-19 22:29
    2. 老朱

      这已经超出这个主题的能力范畴了,风格上不支持,需要自己改代码实现😁

      2024-07-12 21:48
  5. dd

    标签云有点问题呢。我老站是WordPress的,然后迁移到typecho以后,由于原来网站标签有几百个,用了你这个主题,标签云变成一团黑云了。https://img.picui.cn/free/2024/07/11/668fc2ae1fed8.png😇

    2024-07-11 19:36
    1. 老朱

      我擦,你这是标准的云😂,看来我应该在查询数量上做个限制

      2024-07-11 19:49
      1. dd

        推荐个好用的编辑器插件嘛

        2024-07-11 23:15
        1. 老朱

          我自己习惯直接写markdown,所以也不知道啥插件好用😁

          2024-07-11 23:50