Home Comments Thread

Convert Definition Lists (`<dl>`) to Frames (`<fieldset>`) | /en/2023/11/dl-fieldset/

giscus giscus 2y ago

Convert Definition Lists (<dl>) to Frames (<fieldset>)

When I suggested a department chair in 2019 that they may consider opening a blog so that all students and faculty in the department can write together (which sounded exciting to me), he expressed a …

https://yihui.org/en/2023/11/dl-fieldset/

👍👍

4 Replies

chuxinyuan chuxinyuan 1y ago

谢谢,刚给我的博客加上这项新功能。不过我的背景色用的 "#E5EAEF",整体上颜色更接近莫兰迪色系。

chuxinyuan chuxinyuan 1y ago
dl, fieldset {
  background-color: lightyellow;
  font-size: .9em;
  border-width: 1px;
}

这里我设置背景色为 "#E5EAEF" 后在火狐浏览器里边框不显示,我显式地加入了 border: 1px solid #ddd;后显示效果和谷歌浏览器一样了。难道是火狐浏览器采用的是覆盖,而谷歌浏览器则是合并?

yihui yihui 1y ago

这问题你自行研究吧,我不知道。

chuxinyuan chuxinyuan 1y ago

不过色差比较大的时候还是能明显地看到边框的,比如你设置的 “lightyellow”。我也和自己和解了,不在纠结这方面的问题了,确实没太多意义,把更多的精力放在内容上。

chuxinyuan chuxinyuan 1y ago
Title

:   Content

是否要修改为:

Title

:   Content
;

就是加一个分号作为结束的标记,否则 Content 里面如果有代码块,这个代码块和整个模块的父子关系不能体现出来,而是表现为兄弟关系。

yihui yihui 1y ago

没听懂。Markdown 里的元素从属关系从来都是根据缩进的层次定义的,我想不出为啥需要这种特殊的分号。

Title

:   Content

    ``` r
    1 + 1
    ```
chuxinyuan chuxinyuan 1y ago

😄 要的就是这效果,我把缩进这茬给忘记了。学到了,多谢!

chuxinyuan chuxinyuan 1y ago

最近我在重新修订博客里一篇文章正好用到了,效果非常棒!

chuxinyuan chuxinyuan 1y ago

上面提到的那篇文章的代码块里的复制按钮图标可以正常显示,但是点击后没有任何反应。

yihui yihui 1y ago

把你网页上的 dl-fieldset.min.js 提到 copy-button.min.js 之前加载。

需要这样做的原因是我偷懒用了简单粗暴的 outerHTML 操作:https://github.com/yihui/misc.js/blob/cb5404e49db1655104fc15cae9d66ec6f62cd5b4/js/dl-fieldset.js#L8-L10 直接操纵 outerHTML 或 innerHTML 内容会丢失元素的事件。所以复制事件被销毁了。如果把两个脚本顺序换一下,则可以保证复制事件可以添加到按钮上。

理论上的正确写法是用 document.createElement() 创建元素,再进行移动、删除操作,而不是直接操纵 HTML 内容。我懒得多写那几行代码了。

chuxinyuan chuxinyuan 1y ago

哈哈哈,搞定了!

LoganQiu LoganQiu 11mo ago

Consider using Github Alerts? Like this:

> [!note]
> This is good.

Sign in to join the discussion

Sign in with GitHub