更换了博客主题 Blog Theme Changed

23年年末,陆续对首页和博客主题进行了调整。首先是将用了很久的Dolt主题换成hugo-tufte,为了首页相统一,就又自己写了目前的这个主题,还没起名字,应该也不会发出去哈哈。

额外自定义了Hypothes.is和目录的显示按钮,以及一些小小的JS,用来实现切开过长的inline code、顶部阅读进度条、Guestbook页面的在线状态更新、首页的新文章拉取(借助Cloudflare Workers)和目录的自动高亮等。对旁注也做了样式 像这样。(桌面端有一条连线) ,页面大于等于三处旁注时,会调用jsPlumb,例如这篇博文(请通过桌面端访问)。感谢GPT-4让这一切成为可能,我的无痛JS老师。

首页从依赖于Dolt的index.html,换到第一版,使用Skelet.min.css框架。然后是第二版,加上了头像和动画。最后是目前的这一版,依靠display: grid布局。


I started adjusting my homepage and the blog theme bit by bit started from the end of 2023. First off, I swapped out the Dolt theme, which I’d been using for quite a long time, for hugo-tufte to provide better reading experience. To make everything look more uniform with my “hand-written” homepage, I ended up creating my own theme. It’s still nameless (exampleTheme, lol), and I’m not really planning to share it publicly.

I added some JavaScript extras here and there too, like buttons for Hypothes.is and for the table of contents, and functions like breaking up long inline code, showing a reading progress bar at the top, updating online status on the Guestbook page, pulling new articles for the homepage (using Cloudflare Workers), and highlighting titles in the TOC automatically. Also, I gave a new look to the side notes. Kinda like this (there’s a neat line on desktop). If a page has three or more side notes, it triggers jsPlumb – check it out on this blog post (still displayed on desktop). Thanks GPT-4 for making all these possible. My JavaScript mentor.

For the homepage, I moved from the Dolt-based index.html to the first version using the Skelet.min.css framework. Then came the second version with an avatar and some animations. And now the latest version simply uses display: grid to layout.

Webmention this post, or contact me directly.

You can use Hypothes.is to select texts and highlight.

You've copied this page url!

Search it in your Mastodon server, and reply that toot by @fanrongbin.com@fanrongbin.com.