博主头像
希记

ワクワク

头图

我的第一个开源项目!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
已有 85 条评论
  1. 评论头像

    很不错的主题!

    叶开 2024年09月24日 19:00 回复
    1. 评论头像

      哪都能看见你bilibili2233-11

      MoXi 博主 2024年09月24日 19:04 回复
  2. 评论头像

    左边的描述不能增加打字机效果么,我试了下用typed.js增加效果,不过好像会卡住?放在其他位置是有正常效果的bilibili2233-12

    Bytes0x1 2024年09月24日 22:00 回复
    1. 评论头像

      没测试过欸?不过也没专门做什么特殊的操作来着,按道理不会的bilibili2233-9

      MoXi 博主 2024年09月24日 22:17 回复
  3. 评论头像

    非常棒的主题,已经在用了,幸苦博主了!
    有个问题想请教下,归档页面上面出现了个“头图”要怎么取消掉呢?以及年份“2024”和“归档”重复显示了⌇●﹏●⌇
    页面:https://www.youran.org/archives.html

    悠然 2024年09月26日 10:07 回复
    1. 评论头像

      回去排查一下故障,头图可能是img字段判定问题?抱歉影响使用了

      MoXi 博主 2024年09月26日 11:04 回复
  4. 评论头像

    首页文章 怎么把文章显示行数改成一行或者两行 我的显示五六行

    2024年09月26日 13:19 回复
  5. 评论头像

    好了作者 我会改了 只需要把200改了就行了doge

    2024年09月26日 13:26 回复
    1. 评论头像

      其实应该自己结合自己的文章,在文章内合适的地方插入标签 bilibili2233-6

      MoXi 博主 2024年09月26日 18:15 回复
  6. 评论头像

    太棒了

    ALLEN 2024年09月27日 16:40 回复
  7. 评论头像

    这个评论框下面的owo表情要怎么打开?👉👈

    zephyr 2024年09月28日 21:52 回复
    1. 评论头像

      怎么打开?点一下不就行了思考默认就在评论区这啊

      MoXi 博主 2024年09月28日 23:30 回复
      1. 评论头像

        我的意思是我主题安装好,左下角评论框没有OwO表情👉👈
        站点:bei.manmandong.top

        zephyr 2024年09月29日 11:55 回复
        1. 评论头像

          请确保主题名字是PureSuck而不是PureSuck-theme-main,尽量下载release的版本解压哦bilibili2233-13

          MoXi 博主 2024年09月29日 17:11 回复
  8. 评论头像

    好看哦,用上啦可爱

    小稚 2024年10月02日 10:08 回复
  9. 评论头像

    好像有些文章的评论无法关闭哦,我在后台编写的时候勾选了但是前台评论还是存在,希望能更新一下这个功能Wink

    小稚 2024年10月02日 10:26 回复
    1. 评论头像

      已更新,自行用 GitHub 上最新的 comments.php 替换本地内容即可|´・ω・)ノ

      MoXi 博主 2024年10月03日 13:46 回复
  10. 评论头像

    主题好好看呢,以后要是转到typecho就用它了

    Ksable 2024年10月03日 20:44 回复
  11. 评论头像

    主题正中我的心吧,有啥能帮上忙的我会尽力Wink

    喜樂君 2024年10月20日 10:09 回复
  12. 评论头像

    博主真的有实力,好久没在 typecho 里看到这么好的主题了。
    另外你的 typecho 里的字体是怎么换的啊?🤔我之前用 wordpress 更换字体很简单,到 typecho 就不行了,网上的相关教程也没看懂。

    枫落丰源 2024年10月22日 00:12 回复
    1. 评论头像

      换字体本质就是引用字体文件 --> CSS里面把body元素的font-family设置为你的字体名,你可以找找相关插件或者自己编辑一下。
      不过你可以尝试“中文网字计划”,或许能更简单的帮到你(ฅ´ω`ฅ)

      MoXi 博主 2024年10月22日 01:01 回复
      1. 评论头像

        我自己按照网上的这个教程修改了下 css,但是没有起作用,作者可以指导一下我吗?
        文件链接:https://www.ilanzou.com/s/WVFyskVX
        修改内容:/typecho/admin/css/style.css(修改的文件) 第7行,第945行(最末尾);
        /typecho/usr/themes/PureSuck/css/PureSuck_Style.css(修改的文件) 第2366行(最末尾)

        枫落丰源 2024年10月23日 23:09 回复
        1. 评论头像

          加QQ聊会方便一点

          MoXi 博主 2024年10月23日 23:12 回复
  13. 评论头像

    清新自然~点赞。

    土拨许 2024年10月23日 13:06 回复
  14. 评论头像

    好康OωO

    小城子 2024年10月26日 18:31 回复
    1. 评论头像

      谢谢~

      MoXi 博主 2024年10月27日 09:06 回复
  15. 评论头像

    github打不开怎么办大哭

    你好 2024年11月09日 21:18 回复
    1. 评论头像

      好问题···可以找个镜像站

      MoXi 博主 2024年11月09日 22:23 回复
  16. 评论头像

    你去看看你那个折叠代码 你多放几个 他下面也会重复 有bug

    鸡太美 2024年11月16日 17:33 回复
    1. 评论头像

      给个复现页面我看看嘛

      MoXi 博主 2024年11月16日 20:40 回复
  17. 评论头像

    文章有字数限制么,我这字多后直接整个文章界面不显示了bilibili2233-1
    http://yanami.voin.ink/index.php/archives/15/

    Bytes0x1 2024年11月17日 22:58 回复
    1. 评论头像

      应该不会呀?不确定是什么情况欸···

      MoXi 博主 2024年11月17日 23:37 回复
      1. 评论头像

        把Pjax 加载打开后能正常访问了,不过好像代码块变的怪怪的,外面黑里面白的bilibili2233-5

        Bytes0x1 2024年11月18日 09:59 回复
        1. 评论头像

          多半有js出问题了,控制台应该有报错

          MoXi 博主 2024年11月18日 10:04 回复
      2. 评论头像

        嗯嗯,代码块渲染正常了,不过好像有部分我自己加的Script标签失效了,比如KaTeX,功能是自动渲染公式快bilibili2233-13

        Bytes0x1 2024年11月18日 11:21 回复
        1. 评论头像

          可以参考: https://misaka-yu.com/archives/51/

          MoXi 博主 2024年11月18日 12:06 回复
        2. 评论头像

          如果方便的话加个qq帮你排查一下,我觉得应该是你加了什么东西╮(╯▽╰)╭

          MoXi 博主 2024年11月18日 18:51 回复
          1. 评论头像

            没事,我已经解决好了OωO

            Bytes0x1 2024年11月18日 20:26 回复
            1. 评论头像

              好的~ヾ(´・ ・`。)

              MoXi 博主 2024年11月18日 20:27 回复
  18. 评论头像

    大佬您好,请问如何让文章的文本不可复制?( ๑´•ω•)

    G 2024年11月22日 03:47 回复
    1. 评论头像

      道高一尺魔高一丈,可以自己研究一下:)

      MoXi 博主 2024年11月23日 10:54 回复
  19. 评论头像

    博主大大标签大多显示不全,加上打开文章会显示全部标签,我想实现每个文章的单独标签,文章底部或者侧面都行

    森纯博客 2024年11月27日 17:09 回复
    1. 评论头像

      当前文章的标签显示可以尝试自己加一下?页面侧面标签太多怎么显示还没有一个合适的设计

      MoXi 博主 2024年11月27日 18:45 回复
发表新评论