Linux BookStack Wiki，CSS自定义HTML页面库！

1、通过创建themes/custom目录并添加base.css文件，结合设置CUSTOM_THEME=custom环境变量实现样式自定义；2、直接修改public/dist下的app.css等编译文件可深度控制UI，但升级后需重新应用；3、利用Nginx的sub_filter指令在HTML响应中注入外部CSS链接，无需改动源码且灵活高效。

如果您在使用 Linux 系统部署 BookStack Wiki 时希望自定义 HTML 页面样式，可以通过修改其 CSS 文件来实现个性化外观。以下是几种有效的方法来集成和定制 CSS 样式：

一、通过自定义主题目录添加 CSS

BookStack 支持通过创建自定义主题目录的方式加载额外的 CSS 文件，从而避免升级时被覆盖。该方法确保您的样式独立于主程序文件。

1、在 BookStack 项目根目录下创建 themes/custom 文件夹路径。

2、在该路径下新建一个名为 base.css 的文件，用于存放您要注入的自定义样式规则。

立即学习“前端免费学习笔记（深入）”；

3、编辑 .env 配置文件，添加或修改变量 CUSTOM_THEME=custom 以启用自定义主题。

4、重启 BookStack 服务使更改生效，访问页面查看样式是否已应用。

二、使用系统级静态资源替换

此方法直接替换 BookStack 编译后的前端资源文件，适用于需要深度控制 UI 表现的场景。

1、定位到 BookStack 安装目录下的 public/dist 路径，找到主样式文件如 app.css 或类似命名的文件。

Remusic

Remusic - 免费的AI音乐、歌曲生成工具

514

查看详情

2、备份原始文件后，将您预先编写好的 CSS 内容合并入该文件中。

3、清除浏览器缓存并刷新 Wiki 页面，确认新样式正确渲染。

4、注意每次 BookStack 升级后需重新执行此操作，建议记录修改内容以便快速恢复。

三、通过反向代理注入 CSS

利用 Nginx 或 Apache 等 Web 服务器在响应中动态插入 CSS，无需改动 BookStack 源码。

1、配置 Nginx 的 sub_filter 指令，在返回的 HTML 中查找 </head> 并插入自定义 <style> 标签或外部链接。

2、在 Nginx 配置块中添加如下片段：
    sub_filter '</head>' '<link rel="stylesheet" href="/custom/style.css">$0';
    sub_filter_once on;
    proxy_set_header Accept-Encoding "";

3、将您的 CSS 文件放置于可通过 HTTP 访问的路径下，例如 /var/www/html/custom/style.css。

4、重载 Nginx 配置：systemctl reload nginx，检查页面是否成功加载外部样式表。

以上就是Linux BookStack Wiki，CSS自定义HTML页面库！的详细内容，更多请关注php中文网其它相关文章！