博主头像
希记

ワクワク

头图

我的第一个开源项目!PureSuck Theme

学习这么长时间来自己做的第一个完整项目,现已开源!

引入

如你所见,本站基于 Typecho 博客框架,建站多年来,从 WordPress 到 Gridea,Hexo等又回到了 Typecho,原因很简单,他足够轻,足够用,一切都刚刚好,不会过于臃肿也不会太过繁琐。这也是我创作 PureSuck 的初衷————干净,纯洁,淡雅朴素
Pure 即纯洁、纯粹的含义,至于 Suck 则来自我挚爱的名字,这里就不多赘述啦~

总结

由于是第一次正经意义上的做一个项目,加上本人属于极度的小白,作为学习的帮手,学习过程依赖 ChatGPT 4o,不得不感慨 AI 的发展属实是真正降低了普通人的门槛。开发这个主题的想法已经在脑海里酝酿很久很久,趁着暑假让自己忙碌了起来,本次开发差不多用时10天,由于没有鼠标垫+电脑用的过多,手腕都有点接受不了,主题经过内部迭代多次(一天一次)之后才正式放出来,因此初始版本即1.1.0,后续如果遇到更多问题或者个人需要会再次更新

以下是主题的介绍:


外观

本站用的便是亲手开发的 PureSuck!你可以到处逛逛看看效果样式方面还在不断打磨优化,可能会出现变动以及风格的调整

特色

代码高亮
细微动效设计
界面简约干净
有一定自定义空间
阅读体验良好
TOC目录树
头图功能
流畅!
内置几个小组件
作者人比较好,愿意陪你瞎扯
更多细节欢迎自行体验~

安装与设置

Release 下载 zip 源码,解压后移动到 Typecho 主题目录。(文件夹名应该为PureSuck)
主题设置页面位置:Typecho 后台->控制台->外观->设置外观,里面有如何设置的描述
主题设置页面位置:Typecho 后台->控制台->外观->设置外观,里面有如何设置的描述
如果需要支持评论区发表情,需要在 Typecho 后台->设置->评论->允许使用的标签添加已经不需要了!换了一种实现方式

功能与组件

设置大图时需要在自定义字段中新建一个img,随后在内容输入图片的链接,效果正如本文那样啦~
初始有三种组件,引用条,彩色信息窗和友链卡片,使用格式如下

引用条

<div ALERT-TYPE="red">墨希墨希,123456,QWERTY</div>
<div ALERT-TYPE="yellow">墨希墨希,123456,QWERTY</div>
<div ALERT-TYPE="blue">墨希墨希,123456,QWERTY</div>
<div ALERT-TYPE="green">墨希墨希,123456,QWERTY</div>
<div ALERT-TYPE="pink">墨希墨希,123456,QWERTY</div>
墨希墨希,123456,QWERTY
墨希墨希,123456,QWERTY
墨希墨希,123456,QWERTY
墨希墨希,123456,QWERTY
墨希墨希,123456,QWERTY

五种颜色可选,在 ALERT-TYPE 中填写,效果图可以看上面合集,普通的灰色样式用自带的blockquote即可

彩色信息窗

<div WINDOW-TYPE="red" TITLE="测试测试">墨希墨希,123456,QWERTY,!@#¥%……这是一段比较长的文本,因为这是一个比较长的窗口,所以我要测试。墨希墨希,123456,QWERTY,!@#¥%……这是一段比较长的文本,因为这是一个比较长的窗口,所以我要测试。</div>
墨希墨希,123456,QWERTY,!@#¥%……这是一段比较长的文本,因为这是一个比较长的窗口,所以我要测试。墨希墨希,123456,QWERTY,!@#¥%……这是一段比较长的文本,因为这是一个比较长的窗口,所以我要测试。

同样五色可选,WINDOW1-TYPE 处填写五种颜色之一,在 TIILE 处填写标题,注意内部如果要换行请用<br>标签

友链卡片

<div FRIEND-NAME="MoXiify" ICO="https://note.moxiify.cn/usr/themes/PureSuck/images/MoXiiiiii.png" URL="https://note.moxiify.cn" >做一条,<br>逆流的鱼</div>
做一条,
逆流的鱼

不可选择颜色,默认跟着主题强调色走的(在主题设置里切换),描述信息如果要换行请用<br>标签

更多组件请移步至 GitHub

引用库

aos
medium-zoom
OWO.JS
HighLight.JS
排名没有先后,如有遗漏欢迎反馈我补充!

License

使用 MIT 协议开源,欢迎更多人参与/二次开发!
感谢,每一个使用本主题的朋友们!

我的第一个开源项目!PureSuck Theme
https://note.moxiify.cn/post/LoveWithPureSuck
本文作者 MoXi
发布时间 2024-08-05
许可协议 CC BY-NC-SA 4.0
已有 25 条评论
  1. 评论头像

    太厉害了!!!跟我妹妹差不多的年纪,都已经能开发前端了,她现在还成天只知道玩儿。

    秉蕳 2024年08月05日 19:45 回复
    1. 评论头像

      嘿嘿,倒也没有啦୧(๑•̀⌄•́๑)૭慢慢积累起来的知识

      MoXi 博主 2024年08月05日 19:48 回复
  2. 评论头像

    非常不错OωO

    寻梦xunm 2024年08月07日 15:45 回复
    1. 评论头像

      谢谢你φ( ̄∇ ̄o)

      MoXi 博主 2024年08月07日 17:31 回复
  3. 评论头像

    good

    u.mike 2024年08月08日 10:59 回复
  4. 评论头像

    好看 已经使用上了

    Jan 2024年08月15日 10:32 回复
    1. 评论头像

      MoXi 博主 2024年08月15日 21:00 回复
  5. 评论头像

    看到评论,特地前来观摩
    ヾ(≧∇≦*)ゝ

    非常不错,这开发只用了十天也真的是太快了……

    网站速度很快,无障碍、SEO方面也没有问题。很少看到如此清新的主题了(Typecho?)

    但是凡事也不是完美的,我自己审查到的问题如下:

    1. 在我 16:10 的屏幕、开启垂直标签页的情况下下,即使全屏也无法显示网站的所有内容,这可能是 CSS 的问题。有关响应式的标准可见 https://www.tailwindcss.cn/ ;
    2. 审查中发现大量有关于 Baidu 的 cookie,鉴于 chrome 将取消对第三方 cookie 的支持,建议修改 ;
    3. 站内路由跳转时,发现样式闪烁。比如按钮与导航栏的闪烁、背景的闪烁;

    由于我并没有开发过 Typecho 主题(看到一堆 php 文件还有点震惊),所以做不到直接修改(其实改改 CSS 是可以的但是没有时间)。感觉作者可以学学前端框架。虽然我个人无法评判一个网站是否现代,但是整个项目结构确实是我所不能理解的(太乱了)。就我个人而言,这种把网站全部托管给服务器也许不是一个好的选择。使用完全私有的静态博客或者使用前端 + 无头 CMS 的结合可能是一个更好的解决方案。

    EveSunMaple 2024年08月16日 23:27 回复
    1. 评论头像

      百度的cookie是因为百度统计啦,暂时没想好改一个,主题本身不带这些。
      关于垂直标签页那确实还没办法正常显示,我CSS的判定有些蠢,属于是偷懒了,XD。
      我的代码能力挺烂的,只是想做一个自己喜欢的样式出来,制作Typecho主题主要是因为用习惯了
      关于闪烁问题,我这边一直没出现过,我再排查看看,谢谢你!

      MoXi 博主 2024年08月17日 04:25 回复
  6. 评论头像

    这个评论系统也太奇怪了,我的有序列表怎么都丢了,都糊成一行了……

    EveSunMaple 2024年08月16日 23:29 回复
    1. 评论头像

      不清楚耶,评论区部分我基本没有怎么对Typecho自带的地方修改,后期我测试优化一下

      MoXi 博主 2024年08月17日 04:25 回复
  7. 评论头像

    博主厉害啊,后生可畏

    Marticlex 2024年08月19日 20:14 回复
    1. 评论头像

      谢谢(☆ω☆)

      MoXi 博主 2024年08月23日 02:37 回复
  8. 评论头像

    可以提个小意见嘛,如果可以吧owo表情包的按钮放到评论框内部右下角的话,移动端会更协调一点

    Deirun 2024年08月21日 07:01 回复
    1. 评论头像

      评论区打算重新设计一下,现在有点四不像实现方法也不太优雅,不过要过段时间,先提上开发计划

      MoXi 博主 2024年08月23日 02:35 回复
  9. 评论头像

    大佬,主题很好看⭐️

    Zhang 2024年08月31日 17:49 回复
  10. 评论头像

    好厉害!我前端大部分都是百度拼凑( doge

    晚夜 2024年09月06日 23:48 回复
  11. 评论头像

    1.1.7发布之后,样式基本统一了,可以慢慢摸鱼休息了bilibili2233-9

    MoXi 博主 2024年09月12日 00:28 回复
  12. 评论头像

    这个主题的封面怎么设置的?我在控制台、主题编辑和文章编辑都没看见疑问

    335 2024年09月12日 17:46 回复
    1. 评论头像

      文章加一个img字段 后面写图片地址

      MoXi 博主 2024年09月12日 17:56 回复
      1. 评论头像

        麻烦能详细说一下吗,小白不是很懂,怎么加上那个img?

        335 2024年09月12日 18:48 回复
        1. 评论头像

          在发布文章的最下面有一个自定义字段 添加一个叫img的字段 然后字段内容填图片地址就行

          MoXi 博主 2024年09月12日 18:50 回复
          1. 评论头像

            好的,成功了,感谢Wink

            335 2024年09月12日 18:59 回复
  13. 评论头像

    博主,请问归档页面如何设置,看了不是很懂,能详细说一下吗

    645 2024年09月15日 03:03 回复
    1. 评论头像

      新建一个页面,内容为空就可以了。然后右边自定义页面选择归档

      MoXi 博主 2024年09月15日 05:56 回复
发表新评论