我希望写关于 css 的文章，并在文章中展示 css 的效果该如何实现

yuanzhixiang commented 1 year ago

是什么版本出现了此问题？

2.7.0

使用的什么数据库？

Mysql

使用的哪种方式部署？

Docker

在线站点地址

No response

发生了什么？

例如我在文章中直接写下面的代码，希望能够在页面上直接生效展示出效果，该如何实现

<div class="custom-text">这是一段要展示的文字。</div>

<style>
.custom-text {
    font-size: 20px;    /* 设置字体大小 */
    background-color: #ff0000;  /* 设置背景颜色 */
    color: #ffffff;  /* 设置字体颜色 */
    padding: 10px;  /* 添加一些内边距 */
}
</style>

附加信息

No response

AeroWang commented 1 year ago

我觉得这是主题侧需要适配的，并搭配主题侧展示css的约定

yuanzhixiang commented 1 year ago

我觉得这是主题侧需要适配的，并搭配主题侧展示css的约定

一般编辑器有对文章内容做转译，主题侧可能也有影响，具体原因我没看源代码，可以等开发同学说一下，另外我目前用的主题是 https://github.com/guqing/halo-theme-higan ，也是 halo 的同学开发的一款主题

AeroWang commented 1 year ago

我这边提供一个思路，下图这种代码还是放到代码块中（代码块语言标识须约定），由主题侧去识别这个语言标识，进行适配。

这样你所说的在编辑器里面转义情况，我认为不受影响

yuanzhixiang commented 1 year ago

我这边提供一个思路，下图这种代码还是放到代码块中（代码块语言标识须约定），由主题侧去识别这个语言标识，进行适配。

这样你所说的在编辑器里面转义情况，我认为不受影响

嗯这样确实可以，就是这样的话就需要修改主题代码了，我其实是希望找一种简单的方式适配，我之前理解现在的编辑器底层也是转成了 html，实际上已经不是 markdown 的语法了，所以感觉如果编辑器支持某部分 block 不做任何转换就能实现这个效果，这样的话需要研究编辑器的插件功能，但我最近非常忙，没时间研究怎样写插件，另外现在关于编写编辑器插件的文档也不太详细，上手成本还是比较高。

AeroWang commented 1 year ago

markdown有编辑器插件

ruibaby commented 1 year ago

为单个文章添加 script 和 style，我这里有两个方案：

Halo 原生在文章设置中支持添加 script 和 style，不建议直接写在编辑器中。
Halo 2.7 的内容拦截扩展点 + Annotations，实现在文章内容中追加 style 或者 script，参考：
- https://docs.halo.run/developer-guide/annotations-form
- https://github.com/halo-dev/halo/pull/4080

ruibaby commented 1 year ago

<div class="custom-text">这是一段要展示的文字。</div>

<style>
.custom-text {
    font-size: 20px;    /* 设置字体大小 */
    background-color: #ff0000;  /* 设置背景颜色 */
    color: #ffffff;  /* 设置字体颜色 */
    padding: 10px;  /* 添加一些内边距 */
}
</style>

看了下这个样式基本是在为文字设置大小或者颜色，这个在默认编辑器是有计划原生支持的。

AeroWang commented 1 year ago

我这边提供一个思路，下图这种代码还是放到代码块中（代码块语言标识须约定），由主题侧去识别这个语言标识，进行适配。

这样你所说的在编辑器里面转义情况，我认为不受影响

可惜了，本来想发出来看看，这位博主有那种效果，可惜网站挂了。他实现的就是我描述的效果，代码块中写元素和样式，好像还有js，最终主题侧进行转换渲染，使用的 shadow dom。

效果指的是文章中某一块独立，不受外部 css 影响，代码块什么效果，就展示啥效果🤣

yuanzhixiang commented 1 year ago

<div class="custom-text">这是一段要展示的文字。</div>

<style>
.custom-text {
    font-size: 20px;    /* 设置字体大小 */
    background-color: #ff0000;  /* 设置背景颜色 */
    color: #ffffff;  /* 设置字体颜色 */
    padding: 10px;  /* 添加一些内边距 */
}
</style>

看了下这个样式基本是在为文字设置大小或者颜色，这个在默认编辑器是有计划原生支持的。

我实际上是想写一些学习 css 效果的文章，为了让 css 效果能实时展示并且能将代码保存在文档内，所以想到了直接在文章中写 html 代码，但是测试下来目前的编辑器和 markdown 编辑器写的 html 代码在放到页面上后都被转成了正常的字符。

上面所举的代码是一个例子，这里面的代码是我用来测试的代码，打算直接放到文章中。

yuanzhixiang commented 1 year ago

我这边提供一个思路，下图这种代码还是放到代码块中（代码块语言标识须约定），由主题侧去识别这个语言标识，进行适配。这样你所说的在编辑器里面转义情况，我认为不受影响

可惜了，本来想发出来看看，这位博主有那种效果，可惜网站挂了。他实现的就是我描述的效果，代码块中写元素和样式，好像还有js，最终主题侧进行转换渲染，使用的 shadow dom。

效果指的是文章中某一块独立，不受外部 css 影响，代码块什么效果，就展示啥效果🤣

可以的，这种就是我想要的效果，感谢你提供的思路，后续等我用的主题确定会长期使用后，我去研究下 shadow dom 给主题增加一个这样的沙箱。🙏

guqing commented 1 year ago

你需要的是实现类似 vue 文档中这样可交互式和可预览的区域的效果吗

ruibaby commented 1 year ago

明白你的意思了，这种场景我建议嵌入在线的 IDE，比如：

guqing commented 1 year ago

https://github.com/halo-dev/halo/assets/38999863/d499742a-2197-49ce-b05e-ceba67adab40

yuanzhixiang commented 1 year ago

明白你的意思了，这种场景我建议嵌入在线的 IDE，比如：

https://play.vuejs.org

https://codesandbox.io/

https://stackblitz.com/

是的，在线 IDE 蓝上去很棒，halo 中要怎样嵌入？

yuanzhixiang commented 1 year ago

你需要的是实现类似 vue 文档中这样可交互式和可预览的区域的效果吗

对，确实是想达到这种效果，这样学习过的 css 可以将代码保存在博客中，并且可以实时看到效果，便于后续使用时查找

yuanzhixiang commented 1 year ago

Kapture.2023-07-10.at.11.19.19.mp4

类似于这种效果现在可以在 halo 中实现么？如果能的话需要怎样做？

guqing commented 1 year ago

Kapture.2023-07-10.at.11.19.19.mp4

类似于这种效果现在可以在 halo 中实现么？如果能的话需要怎样做？

可以考虑扩展编辑器去做类似 https://github.com/halo-sigs/plugin-katex 一样，但是目前没有具体的插件实现，所以只能先使用 https://github.com/halo-dev/halo/issues/4192#issuecomment-1628000785 如果后续有时间的话会考虑做个插件，如果你感兴趣的话可以尝试一下😄

guqing commented 1 year ago

明白你的意思了，这种场景我建议嵌入在线的 IDE，比如：

play.vuejs.org

codesandbox.io

stackblitz.com

是的，在线 IDE 蓝上去很棒，halo 中要怎样嵌入？

一般这种都是分享的然后会生成一个链接，将链接作为 iframe 潜入到编辑器即可

示例代码 static-template 点击分享后复制链接
在 Halo 编辑器通过输入 / 触发指令选择嵌入网页在输入链接即可
在文章的效果为：

yuanzhixiang commented 1 year ago

明白你的意思了，这种场景我建议嵌入在线的 IDE，比如：

是的，在线 IDE 蓝上去很棒，halo 中要怎样嵌入？

一般这种都是分享的然后会生成一个链接，将链接作为 iframe 潜入到编辑器即可

示例代码 static-template 点击分享后复制链接

在 Halo 编辑器通过输入 / 触发指令选择嵌入网页在输入链接即可

这种嵌入连接的方式之前考虑过，但是这种会有一个问题，就是实际的代码不是存储在文章中，而是存放在三方的平台中，这样的话总会感觉有丢失的风险。自己写博客其实比较希望数据能完全受自己掌控，代码之类的都存储在自己的库中。

yuanzhixiang commented 1 year ago

Kapture.2023-07-10.at.11.19.19.mp4

类似于这种效果现在可以在 halo 中实现么？如果能的话需要怎样做？

可以考虑扩展编辑器去做类似 https://github.com/halo-sigs/plugin-katex 一样，但是目前没有具体的插件实现，所以只能先使用 #4192 (comment) 如果后续有时间的话会考虑做个插件，如果你感兴趣的话可以尝试一下😄

halo 1.x 的版本的时候我做过尝试，当时是做在主题渲染的时候进行这个效果，但是后面换主题那个就废了。

好的，如果我有时间会试下，我这段时间非常忙，估计十月份之前可能都没时间开发插件。

关于 halo 的编辑器不知道你们有什么规划，我目前感觉飞书的编辑器是用起来最顺手的编辑器，可惜飞书文档只适合作为项目记录的文档，博客场景并不适用，我感觉 halo 的编辑器功能可以考虑借鉴飞书的编辑器，做得好的话应该会很好用。

我之前尝试使用了一下 wordpress，被 wordpress 的编辑器劝退了，那个后台实在是太难用了，如果 halo 的编辑器做得好，可能会吸引更多的用户使用 halo。

ruibaby commented 1 year ago

关于 halo 的编辑器不知道你们有什么规划，我目前感觉飞书的编辑器是用起来最顺手的编辑器，可惜飞书文档只适合作为项目记录的文档，博客场景并不适用，我感觉 halo 的编辑器功能可以考虑借鉴飞书的编辑器，做得好的话应该会很好用。

一些规划：

预计在 2.8 会进行一些基础体验优化，如果有建议可以提交新的 issue。

yuanzhixiang commented 1 year ago

明白你的意思了，这种场景我建议嵌入在线的 IDE，比如：

play.vuejs.org

codesandbox.io

stackblitz.com

是的，在线 IDE 蓝上去很棒，halo 中要怎样嵌入？

一般这种都是分享的然后会生成一个链接，将链接作为 iframe 潜入到编辑器即可

示例代码 static-template 点击分享后复制链接

在 Halo 编辑器通过输入 / 触发指令选择嵌入网页在输入链接即可

这种网站我感觉 codepen 是做的不错的，但是我看到 codepen 的内嵌链接是下面这种，我应该怎么贴到 halo 中？

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="vYQdLKa" data-user="yuanzhixiang" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/yuanzhixiang/pen/vYQdLKa">
  Untitled</a> by yuanzhixiang (<a href="https://codepen.io/yuanzhixiang">@yuanzhixiang</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

ruibaby commented 1 year ago

这种网站我感觉 codepen 是做的不错的，但是我看到 codepen 的内嵌链接是下面这种，我应该怎么贴到 halo 中？

手动复制这个 src，然后在编辑器使用嵌入网页的 block。

其实编辑器是支持识别整个 iframe 代码并转换为嵌入网页的 block，但 codepen 这个格式好像在编辑器中没有兼容。我测试过哔哩哔哩和 YouTube 这种视频平台是可以的。

yuanzhixiang commented 1 year ago

这种网站我感觉 codepen 是做的不错的，但是我看到 codepen 的内嵌链接是下面这种，我应该怎么贴到 halo 中？

手动复制这个 src，然后在编辑器使用嵌入网页的 block。

其实编辑器是支持识别整个 iframe 代码并转换为嵌入网页的 block，但 codepen 这个格式好像在编辑器中没有兼容。我测试过哔哩哔哩和 YouTube 这种视频平台是可以的。

好的，感谢，这个方案目前已经能解决我的问题了，期待 halo 越做越好，超越 wordpress

halo-dev / halo