Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-16 14:40:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Improve export preview mode CSS variable value filling (#15110)

Browse source 
* 改进 CSS 变量替换为实际值

* Chrome、Edge、SiYuan 桌面端不需要替换 CSS 变量

* 外观模式或主题改变之后，重新加载所有将 CSS 变量替换为实际值的导出预览

* 代码块之间没有间距

* 去掉一个空格

* 使用 ua.Mobile() 判断移动设备

* 重构
This commit is contained in:
Jeffrey Chen 2025-07-29 21:33:40 +08:00 • committed by GitHub
parent 449b537104
commit 2994969286
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 235 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

28
app/src/assets/scss/component/_typography.scss
View file

@ -529,6 +529,34 @@
.protyle-icons {
display: none;
}
&[data-copy-to="mp-wechat"] {
input[type="checkbox"] {
display: none;
}
li {
&.protyle-task:not(.protyle-task--done) {
list-style-type: "▢";
}
&.protyle-task--done {
list-style-type: "☑︎";
}
}
pre {
margin: 16px 0;
}
}
}
// 暗黑模式
section.b3-typography {
&[data-copy-to="mp-wechat"] {
background-color: var(--b3-theme-background);
padding: 10px;
}
}
.protyle {

22
app/src/config/appearance.ts
View file

@ -11,6 +11,9 @@ import {loadAssets} from "../util/assets";
import {resetFloatDockSize} from "../layout/dock/util";
import {confirmDialog} from "../dialog/confirmDialog";
import {useShell} from "../util/pathName";
/// #if !MOBILE
import {getAllEditor} from "../layout/getAll";
/// #endif
export const appearance = {
element: undefined as Element,
@ -263,6 +266,25 @@ export const appearance = {
});
return;
}
// #if !MOBILE
// 外观模式或主题改变之后，重新加载所有将 CSS 变量替换为实际值的导出预览
if (data.mode !== window.siyuan.config.appearance.mode ||
(data.mode === window.siyuan.config.appearance.mode && (
(data.mode === 0 && window.siyuan.config.appearance.themeLight !== data.themeLight) ||
(data.mode === 1 && window.siyuan.config.appearance.themeDark !== data.themeDark))
)
) {
getAllEditor().forEach(editor => {
if (editor.protyle.preview && !editor.protyle.preview.element.classList.contains("fn__none") &&
editor.protyle.preview.previewElement.dataset.fillCssVar === "true"
) {
editor.protyle.preview.render(editor.protyle);
}
});
}
/// #endif
window.siyuan.config.appearance = data;
if (appearance.element) {
const modeElement = appearance.element.querySelector("#mode") as HTMLSelectElement;

60
app/src/protyle/preview/index.ts
View file

@ -188,6 +188,11 @@ export class Preview {
}, response => {
const oldScrollTop = protyle.preview.previewElement.scrollTop;
protyle.preview.previewElement.innerHTML = response.data.html;
if (response.data.fillCSSVar) {
protyle.preview.previewElement.dataset.fillCssVar = "true";
} else {
protyle.preview.previewElement.dataset.fillCssVar = "";
}
processRender(protyle.preview.previewElement);
highlightRender(protyle.preview.previewElement);
avRender(protyle.preview.previewElement, protyle);
@ -218,6 +223,7 @@ export class Preview {
private async copyToX(copyElement: HTMLElement, protyle: IProtyle, type?: string) {
// fix math render
if (type === "mp-wechat") {
copyElement.dataset.copyTo = "mp-wechat";
this.link2online(copyElement);
copyElement.querySelectorAll(".katex-html .base").forEach((item: HTMLElement) => {
item.style.display = "initial";
@ -234,18 +240,41 @@ export class Preview {
}
});
});
// 处理任务列表（微信公众号不能显示input[type="checkbox"]）
copyElement.querySelectorAll("li.protyle-task").forEach((taskItem: HTMLElement) => {
const checkbox = taskItem.querySelector('input[type="checkbox"]') as HTMLInputElement;
if (checkbox) {
checkbox.style.opacity = "0";
if (checkbox.checked) {
taskItem.style.setProperty("list-style-type", "'✅'", "important");
} else {
taskItem.style.setProperty("list-style-type", "'▢'", "important");
if (copyElement.dataset.fillCssVar === "true") {
// 需要内联样式
// 微信公众号不能显示 input[type="checkbox"]
copyElement.querySelectorAll("li.protyle-task").forEach((taskItem: HTMLElement) => {
const checkbox = taskItem.querySelector('input[type="checkbox"]') as HTMLInputElement;
if (checkbox) {
checkbox.style.display = "none";
if (checkbox.checked) {
taskItem.style.setProperty("list-style-type", "'☑︎'");
} else {
taskItem.style.setProperty("list-style-type", "'▢'");
}
}
});
// 代码块没有外间距
copyElement.querySelectorAll("pre").forEach((item: HTMLElement) => {
item.style.margin = "16px 0";
});
} else {
if (window.siyuan.config.appearance.mode === 0) {
// 明亮模式防止背景色被粘贴到公众号中
copyElement.style.backgroundColor = "#fff";
} else {
// 暗黑模式插入一层 section 设置背景色
const sectionElement = document.createElement("section");
sectionElement.innerHTML = copyElement.innerHTML;
copyElement.innerHTML = "";
copyElement.removeAttribute("style");
copyElement.appendChild(sectionElement);
// b3-typography 类名移动，否则选择器不匹配
sectionElement.classList.add("b3-typography");
copyElement.classList.remove("b3-typography");
sectionElement.dataset.copyTo = copyElement.dataset.copyTo;
}
});
}
if (typeof window.MathJax === "undefined") {
window.MathJax = {
svg: {
@ -287,15 +316,10 @@ export class Preview {
});
return;
}
// 防止背景色被粘贴到公众号中
copyElement.style.backgroundColor = "#fff";
// 代码背景
copyElement.querySelectorAll("code").forEach((item) => {
item.style.backgroundImage = "none";
});
this.element.append(copyElement);
// 最后一个块是公式块时无法复制下来
copyElement.insertAdjacentHTML("beforeend", "<p>&zwj;</p>");
// 最后一个块是公式块时无法复制下来；section 元素后面还需要一个其他元素才能被复制
copyElement.insertAdjacentHTML("beforeend", "<p style='background-color: transparent;'>&zwj;</p>");
let cloneRange;
if (getSelection().rangeCount > 0) {
cloneRange = getSelection().getRangeAt(0).cloneRange();

18
kernel/api/export.go
View file

@ -29,6 +29,7 @@ import (
"github.com/88250/gulu"
"github.com/88250/lute/parse"
"github.com/gin-gonic/gin"
"github.com/mssola/useragent"
"github.com/siyuan-note/logging"
"github.com/siyuan-note/siyuan/kernel/model"
"github.com/siyuan-note/siyuan/kernel/util"
@ -627,9 +628,22 @@ func exportPreview(c *gin.Context) {
}
id := arg["id"].(string)
stdHTML := model.Preview(id)
userAgentStr := c.GetHeader("User-Agent")
fillCSSVar := true
if userAgentStr != "" {
ua := useragent.New(userAgentStr)
name, _ := ua.Browser()
// Chrome、Edge、SiYuan 桌面端不需要替换 CSS 变量
if !ua.Mobile() && (name == "Chrome" || name == "Edge" || strings.Contains(userAgentStr, "Electron") || strings.Contains(userAgentStr, "SiYuan/")) {
fillCSSVar = false
}
}
stdHTML := model.Preview(id, fillCSSVar)
ret.Data = map[string]interface{}{
"html": stdHTML,
"html": stdHTML,
"fillCSSVar": fillCSSVar,
}
}

6
kernel/model/export.go
View file

@ -571,7 +571,7 @@ func ExportResources(resourcePaths []string, mainName string) (exportFilePath st
return
}
func Preview(id string) (retStdHTML string) {
func Preview(id string, fillCSSVar bool) (retStdHTML string) {
blockRefMode := Conf.Export.BlockRefMode
bt := treenode.GetBlockTree(id)
if nil == bt {
@ -606,7 +606,9 @@ func Preview(id string) (retStdHTML string) {
md := treenode.FormatNode(tree.Root, luteEngine)
tree = parse.Parse("", []byte(md), luteEngine.ParseOptions)
// 使用实际主题样式值替换样式变量 Use real theme style value replace var in preview mode https://github.com/siyuan-note/siyuan/issues/11458
fillThemeStyleVar(tree)
if fillCSSVar {
fillThemeStyleVar(tree)
}
luteEngine.RenderOptions.ProtyleMarkNetImg = false
retStdHTML = luteEngine.ProtylePreview(tree, luteEngine.RenderOptions)

144
kernel/model/theme.go
View file

@ -31,8 +31,18 @@ import (
"github.com/vanng822/css"
)
// 将文档中的 CSS 变量替换为具体的主题样式值
func fillThemeStyleVar(tree *parse.Tree) {
themeStyles := getThemeStyleVar(Conf.Appearance.ThemeLight)
if nil == tree || nil == tree.Root {
return
}
var themeStyles map[string]string
if 1 == Conf.Appearance.Mode {
themeStyles = getThemeStyleVar(Conf.Appearance.ThemeDark, true)
} else {
themeStyles = getThemeStyleVar(Conf.Appearance.ThemeLight, false)
}
if 1 > len(themeStyles) {
return
}
@ -42,6 +52,7 @@ func fillThemeStyleVar(tree *parse.Tree) {
return ast.WalkContinue
}
// 遍历节点的 Kramdown IAL (Inline Attribute List) 属性
for _, ial := range n.KramdownIAL {
if "style" != ial[0] {
continue
@ -54,13 +65,12 @@ func fillThemeStyleVar(tree *parse.Tree) {
for style, name := range styles {
buf.WriteString(style)
buf.WriteString(": ")
value := themeStyles[name]
if strings.Contains(value, "var(") {
name = gulu.Str.SubStringBetween(value, "(", ")")
value = themeStyles[name]
}
// 解析嵌套的 CSS 变量
value := resolveNestedCSSVar(themeStyles, name)
if "" == value {
// 回退为变量
// 回退为原始 var() 形式
buf.WriteString("var(")
buf.WriteString(name)
buf.WriteString(")")
@ -78,12 +88,48 @@ func fillThemeStyleVar(tree *parse.Tree) {
})
}
// 递归解析嵌套的 CSS 变量
func resolveNestedCSSVar(themeStyles map[string]string, varName string) string {
visited := make(map[string]bool) // 循环引用检测
maxDepth := 10 // 防止无限嵌套
currentName := varName
for depth := 0; depth < maxDepth; depth++ {
if visited[currentName] {
return ""
}
visited[currentName] = true
value, exists := themeStyles[currentName]
if !exists {
return ""
}
// 如果不包含嵌套变量，直接返回最终值
if !strings.Contains(value, "var(") {
return value
}
// 提取嵌套变量名：var(--variable-name) -> --variable-name
nestedVarName := gulu.Str.SubStringBetween(value, "(", ")")
if "" == nestedVarName {
return value
}
currentName = nestedVarName
}
return ""
}
// 从 CSS 选择器值中解析出样式属性和对应的 CSS 变量名
func getStyleVarName(value *css.CSSValue) (ret map[string]string) {
ret = map[string]string{}
var start, end int
var style, name string
for i, t := range value.Tokens {
// 获取样式属性名
if scanner.TokenIdent == t.Type && 0 == start {
style = strings.TrimSpace(t.Value)
continue
@ -96,6 +142,7 @@ func getStyleVarName(value *css.CSSValue) (ret map[string]string) {
if scanner.TokenChar == t.Type && ")" == t.Value {
end = i
// 提取 var() 中的变量名
if 0 < start && 0 < end {
for _, tt := range value.Tokens[start+1 : end] {
name += tt.Value
@ -110,23 +157,78 @@ func getStyleVarName(value *css.CSSValue) (ret map[string]string) {
return
}
func getThemeStyleVar(theme string) (ret map[string]string) {
// 获取主题的样式变量映射表
func getThemeStyleVar(theme string, isDarkMode bool) (ret map[string]string) {
ret = map[string]string{}
data, err := os.ReadFile(filepath.Join(util.ThemesPath, theme, "theme.css"))
if err != nil {
logging.LogErrorf("read theme [%s] css file failed: %s", theme, err)
return
}
var cssContent string
styleSheet := css.Parse(string(data))
for _, rule := range styleSheet.GetCSSRuleList() {
for _, style := range rule.Style.Styles {
ret[style.Property] = strings.TrimSpace(style.Value.Text())
// 如果两个短横线开头 CSS 解析器有问题，--b3-theme-primary: #3575f0; 会被解析为 -b3-theme-primary:- #3575f0
// 这里两种解析都放到结果中
ret["-"+style.Property] = strings.TrimSpace(strings.TrimPrefix(style.Value.Text(), "-"))
// 第三方主题可能缺少基础变量，先加载默认主题作为基础
defaultTheme := map[bool]string{false: "daylight", true: "midnight"}[isDarkMode]
if theme != defaultTheme {
defaultData, err := os.ReadFile(filepath.Join(util.ThemesPath, defaultTheme, "theme.css"))
if err != nil {
logging.LogErrorf("read default theme [%s] css file failed: %s", defaultTheme, err)
} else {
cssContent = string(defaultData) + "\n"
}
}
return
// 拼接主题 CSS，后面的规则覆盖前面的规则
userData, err := os.ReadFile(filepath.Join(util.ThemesPath, theme, "theme.css"))
if err != nil {
logging.LogErrorf("read theme [%s] css file failed: %s", theme, err)
return ret
}
cssContent += string(userData)
// 解析拼接后的完整 CSS 内容
styleSheet := css.Parse(cssContent)
stylePriorities := map[string]int{}
currentMode := map[bool]string{false: "light", true: "dark"}[isDarkMode]
for _, rule := range styleSheet.GetCSSRuleList() {
priority := getSelectorPriority(rule.Style.Selector.Text(), currentMode)
for _, style := range rule.Style.Styles {
propName := style.Property
propValue := strings.TrimSpace(style.Value.Text())
if existingPriority, exists := stylePriorities[propName]; !exists || priority >= existingPriority {
ret[propName] = propValue
stylePriorities[propName] = priority
}
// 如果两个短横线开头 CSS 解析器有问题，--b3-theme-primary: #3575f0; 会被解析为 -b3-theme-primary:- #3575f0
// 这里两种解析都放到结果中
bugFixPropName := "-" + propName
bugFixPropValue := strings.TrimSpace(strings.TrimPrefix(propValue, "-"))
if existingPriority, exists := stylePriorities[bugFixPropName]; !exists || priority >= existingPriority {
ret[bugFixPropName] = bugFixPropValue
stylePriorities[bugFixPropName] = priority
}
}
}
return ret
}
// 粗略计算 CSS 选择器的优先级
func getSelectorPriority(selector, currentMode string) int {
selector = strings.TrimSpace(strings.ToLower(selector))
modeSelectors := []string{
"[data-theme-mode=\"" + currentMode + "\"]",
"[data-theme-mode='" + currentMode + "']",
"[data-theme-mode=" + currentMode + "]",
}
for _, modeSelector := range modeSelectors {
if strings.Contains(selector, modeSelector) {
if strings.Contains(selector, ":root") || strings.Contains(selector, "html") {
return 2
} else {
return 1
}
}
}
return 0
}