自动在 CHM 工程文件中登记用户手动添加到工作区下 Images~ 目录中的图像文件。

这是为了保证用户在自定义 CSS 样式表中引用的这些图像文件在打包成 CHM 文件后仍然有效。

CHM 编译器发现 Html 文件中引用了某图像文件时，会自动将该图像打包到 CHM 文件中。

但如果某个图像文件仅仅只是被 CSS 样式表引用——而没有被任何 Html 文档引用—— CHM 编译器不会自动将这个图像文件打包进去，所以 CSS 样式会出错。

自 LME v0.0.6.22 起，即使用户手工放在工作区/Images~ 目录下的图像文件也会被自动登记在 CHM 工程文件中——这样在 CSS 样式表中就可以放心引用了。

例如：

固定导航面板

上图中红圈中的导航面板被固定在页面右下角，且设置了图像背景——仅依靠 CSS 画三角是很难画成这样的。

这是怎么实现的呢？

1. 我准备了两个背景图片，宽度比导航面板略宽些。然后将这两个图像文件复制到工作区/Images~ 目录下：

导航面板背景图

准备两张图是因为要适配明、暗两套主题。

2. 改写明系主题自定义 CSS 样式表，添加下面的 CSS 片段：

#theme_switcher {
    bottom:38px;
    right:6px;
}

#lme_nav_panel {
    position:fixed;
    right:0;
    bottom:0px;
    height:32px;
    font-size:16px;
    margin-right:0px;
    padding-left:24px;
    padding-right:0px;
    background: url('./Images~/nav_panel_background_light.png') no-repeat 0 50%;
}

上面第一个片段是让主题切换按钮向上移动一点，腾出空间。第二个片段则重新定义了导航面板的位置、背景图像、内间距等。

3. 改写暗系主题自定义 CSS 样式表，添加下面的 CSS 片段：

#theme_switcher {
    bottom:38px;
    right:6px;
}

#lme_nav_panel {
    position:fixed;
    right:0;
    bottom:0px;
    height:32px;
    font-size:16px;
    background: #404040;
    margin-right:0px;
    padding-left:24px;
    padding-right:0px;
    background: url('./Images~/nav_panel_background_dark.png') no-repeat 0 50%;
}

4. 然后，创建、编译 CHM 工程文件就能看到效果了。

切换成暗系主题效果如下：

暗系主题效果

注意：

放在 工作区目录/Images~ 的 子目录 中的图像文件并不会被自动登记！！！
本例这个方案在高分屏下导航链接面板会出现错位，须另想办法。

不要修改 LME 自动添加到 工作区目录/Images~ 目录下的图像文件——这些图像文件在 LME 版本更新后可能会随之更新！！！

所以，用户本身对下面这几个图像文件的修改很可能 被 LME 的自动更新机制给覆盖掉 ！！！

comment_dark.png
comment_light.png
header_icon_dark.png
header_icon_light.png
menu_dark.png
menu_light.png
region_e_dark.png
region_e_light.png
region_i_dark.png
region_i_light.png
region_q_dark.png
region_q_light.png
region_w_dark.png
region_w_light.png
theme_switcher.png

LunarSF / Lunar Markdown Editor

内容风险标识

这是怎么实现的呢？

评论 (2)

LunarSF / Lunar Markdown Editor .gitee-modal { width: 500px !important; }

内容风险标识