[闲聊] 正式启用了(折腾了半年的)博客

之前在翻译 hyprland-wiki 的尝试与问题提到过:

  • 需要一个有文档功能的主题,但是 Hextra 不符合个人审美
  • 需要短代码,但是短代码零经验

这次趁着 Perplex 作者终于给代码块加了个复制按钮,博客从 Hextra 迁到 Perplex,终于变成自己能(长期)接受的样子了,也尝试了一下短代码。

离翻译 Hyprland-wiki 又进了一步。

Perplex 是个相对复杂的主题。即使有 archetypes,超长的导言区再加上每篇都要配图、每个标签/系列/分类都要分别创建页面,发布还是比较麻烦的,比较适合有仪式感地一篇一篇发布,不适合“批发”

因此,暂时只迁移了一篇(现在有两篇了),但可以通过订阅 RSS 以获取后续更新。


以上。从 HB 到 Hextra 再到 Perplex,折腾了半年之后,博客在技术层面总算确定下来。欢迎论坛的朋友们来逛逛,也希望自己以后能稳定更新。


p.s. 我没想到编辑原贴也会导致贴子被顶到最上面,是我大意了

8 个赞

近几天折腾了一下博客主题,效果我自己觉得很满意,主要涉及右侧目录栏和边/脚注。

右侧目录栏的一些新特性: (注:部分页面无右侧目录栏)

  • 网页加载时会自动打开,除非屏幕较窄。
  • 去掉了点击其他任意位置时自动消失的机制。
  • 自动高亮当前所在标题。
  • 自动滚动到高亮的标题。
  • 根据屏幕宽度自动变更位置与尺寸,尽可能与其他元素和谐相处,尤其是边注与头图。
  • 一些简单的美化。

边/脚注的一些新特性:

  • 脚注会同时出现在边注的位置
  • 因其由 JS 实现,不会在导出 RSS 时出现,而原本的脚注区作为静态网页的一部分而得到保留,从而避免了 RSS 无法正常处理边注的问题。
  • 在屏幕足够宽时,边注会出现在屏幕左侧,以免与头图、右侧目录栏挤在同一区域。
    • 在屏幕窄到只有单栏时,边注会出现在标号下方某处,这是直接借用了 Perplex 主题本身的实现。

此博客当前有两个副本,更新时我有意保留其一,让它们暂时形成直观对比:


其中在实现边注时,为了将它稳定地显示在正文外侧且与标号几乎等高的位置,我尝试了各种方法,比如:

  • 利用 float 属性将边注元素直接放在左侧或右侧。
    • 如果边注元素在某个元素内部,则它会挤占这个元素的空间,而不是显示在正文外侧空间。
  • 一级级地找到元素最外部,再在其后放置边注元素。
    • 不再挤占空间,但水平高度可能差异较大。

最终效果较好的,能同时做到显示在正文外侧、水平高度相近的方案则部分参考自 @VagrantJoker博客,也即为边注元素的 margin-left 赋一个负值。虽然涉及的代码只有一行,其思路对我而言非常巧妙,在此表示感谢。

有一个问题,在首页上这些标题都是白色的,看不清(

感谢反馈。 这个截图也让我很意外,因为:

  • 实际上这个主题只支持深色模式,不应该出现这种白色背景。
  • 这个白色的空间看起来似乎是单栏时才应该出现的、本应是“中注”的地方,但右上角的头图说明这是双栏。
  • 章节应当自动编号,这是由 CSS 实现的(甚至不是 JS)。

我在 Firefox 和 Chromium 上测试过,都未能复现,以 Chromium 为例:

上面出现了至少两个与 CSS 有关的(白色背景、章节编号)问题,说明 CSS 未被正常加载。

这种现象的原因很可能与浏览器有关,因为与右上角的头图相比 CSS 不算什么重型资源,我也并没有把 CSS 分离放在 CDN 上,不太可能因为网络问题而未得到加载。

所以,

  • 请问你使用的是什么浏览器?
  • 请问你是否开启了某种“阅读模式”之类的插件或内置功能?

这不是你的旧链接 https://blog.celestialy.top/ 显示效果吗?

(跑一下题,为啥使用 CSS 作为子域名)

上图是旧版的。由 CSS 实现的自动编号其实是我很早之前就实现了的,另外这个主题也一直只支持深色模式,所以不论是新版还是旧版其实 CSS 都没能正常加载。

另外既然你这样说了,还想请问一下,你是否也遇到了 CSS 未正常加载的问题?

图源链接 https://css.celestialy.top/authors/clsty/ (这个页面可以从顶栏的“人”里面找到,也可以直接点网页最下方“clsty 的网络空间站”下面的图)

简而言之,CSS 就是 Cyber Space Station 的缩写。

当然它同时也是 Cascading Style Sheets 的缩写,我不否认这种巧合在某种程度上是有意为之的(笑)。

https://css.celestialy.top 没有出现这个问题,但是在上面提到的旧链接中标题显示同样遇到了问题,与背景颜色几乎一致。

当然,上面的问题出现在我使用亮色模式,我将浏览器切换为暗色模式后两个链接都可以正常显示白色的标题。

原来如此。

1 个赞

手机上用 Safari 打开正常,用 Mac 版的 Safari 打开就是背景是白色的样子。大概是用的 CSS 没适配好。

有点奇怪,因为首页标题的 CSS 我最近只改了颜色,并没有改实现。在这方面新版、旧版的差异仅在于一个是 github 而另一个是 cloudflare。

附上相关 CSS:

div.title.title--news.padding-full > h1 { color: #ffffff; font-size: 300%; }
.md--h-sans.md--margin-news > h2 { color: #fff; font-size: 270%; }
.md--h-sans.md--margin-news > h3 { color: #fff; font-size: 260%; }
.md--h-sans.md--margin-news > h4 { color: #fff; font-size: 250%; }
.md--h-sans.md--margin-news > h5 { color: #fff; font-size: 242%; }
.md--h-sans.md--margin-news > h6 { color: #fff; font-size: 220%; }

感谢帮忙测试,我想有一种可能是 #fff 这种格式在部分浏览器上不受支持。 等下我把它改为 #ffffff 再部署到 css.celestialy.top 上。

(至于旧版,总有一天也会同步的,暂时先放着)

等下,没注意,是说背景色是白色?那问题就不太一样了,我需要进一步探究一下。

这个可能性不大,至少我用的 Safari 桌面版是支持的。

建议用 https://css-validator.org 自查下。

我用 Safari 的 inspector 看了下,问題出在旧版网页 CSS

/* https://blog.celestialy.top/css/screen.min.683cadcc32c7d29a58f666461665711994dc1be529dc59d27ce332a5971d0214.css */
body {
...
background-color: var(--c-page);
...
}

:root {
...
color-scheme: light dark;
--c-page: hsl(325, 50%, 99%);
--c-text-normal: #18272d;
...
}

这个 --c-page 变量不知为何是白色。应該是动态生成 CSS 有问题。

1 个赞

虽然不是很懂 CSS,不过标题上的 CSS 似乎覆盖的很严重…

1 个赞

确实如此,刚才我用 rg '\--c-page' 在我的 assets 目录里查了一下,发现我最近才修改过背景色,感谢解惑。


我目前的主题是基于 Perplex 修改的,我一直以为它仅支持深色主题,不过到现在我才发现它其实是支持浅色主题的,只是没有给出一般这种支持双颜色模式的网站都会给出的切换按钮,见它的示例网站

顺便说一下复现方法:在 Firefox 里打开 about:profiles 新建一个 test 档,用这个档打开一个全新的 Firefox(类似于 emacs -Q),在设置里将 Appearance 改为 Light,然后分别打开:

  • css.celestialy.top :背景深色,正常
  • blog.celestialy.top :背景白色,不正常
  • perplex.desider.at :背景白色,正常

这是因为原主题已经定义了很多 CSS,而我在此基础上新增的 CSS 覆盖了这些规则,并没有修改原 CSS。


总结起来,我因为最近觉得背景色太深了,顺手改了 --c-page 的值,没想到意外地规避了一个 bug,代价则是彻底放弃了浅色模式。不过我认为如果想两种颜色模式都支持,至少应该把切换按钮做出来,有待进一步探索。非常感谢 @include-yy @LdBeth @ksqsf 的帮助!


更新:简单修了一下 CSS,暂时把亮色模式救回来了;不过制作切换按钮工作量还是有点大的,不是只加一个按钮执行 JS 就足够了的。

3 个赞

html\css\js 写起来要做到符合个人审美还是很能折腾的. 楼主blog已经有两个版本加两个主题了, 也许能在出一个org版本,直接在一个org buffer就可访问全部文章, 用emacs自身主题,不用在写css js,还能与emacs的文本编辑功能完美结合

我实践下来确定这是可以做到的, 做不到的主要原因还是愿意这么做的人太少了, 如果愿意这么做的人有愿意去折腾css js的人的千分之一, 那我遇到的那些问题应该都早已有人研究明白了, 不用自己在重头摸索

目前我的文章是用 Org 写的,用 ox-hugo 导出为符合 Hugo 要求的 markdown 文件,再用 Hugo 生成静态站点。

很多文章都集中在少数几个 org buffer 里。如你所说,编辑确实很方便。

至于 HTML/CSS/JS 则是为了生成静态站点、公开发布而存在的,不仅仅是为了自己查看。

对于非emacs用户发布需要静态站点, emacs用户一般应该不会在意有没有css,js, org-mode形式的站点我尝试发布过, 感觉体验不佳的主要原因应该是加载速度以及emacs的多线程支持不好.

花7、8s打开一个或n个网站,可以解释为因为需要加载大量静态资源, 慢一点也可以接受, 如果打开一个在线org文件要4、5s就会觉得慢到这个地步我不如全部下载到本地在打开。 所以我做个org为前端的网站的计划目前调整为做成分布式内容网络

我不太明白你的意思,至少如果一个网站简陋到连 CSS 都没有,我还是会在意的。

这是指直接用 org 文件替代 html 文件,然后用 Emacs 打开网站链接?

是的,org为前端的网站页面截图 可见这里

1 个赞