如何在Liferay DXP中为页面内所有Fragment设置全局CSS？

一、为页面所有Fragment配置全局CSS的可行方案 #

以下是几种实用的实现方式：

1. 页面级自定义CSS（单页面生效） #

• 打开目标页面，点击右上角的页面设置图标
• 切换到高级标签页，找到自定义CSS区域
• 编写全局CSS规则，示例：

/* 统一所有Fragment的内边距与边框样式 */
.fragment-content {
  padding: 1rem;
  border: 1px solid #eee;
  border-radius: 4px;
}

• 保存设置后，当前页面内所有Fragment会自动应用该样式

2. 主题级全局CSS（全站点生效） #

如果需要给整个站点的所有页面Fragment统一设置样式，可修改当前主题的CSS文件：

• 找到主题项目中的src/css/main.css文件
• 添加全局Fragment样式规则，示例：

/* 站点所有Fragment的基础样式 */
.portlet-container .fragment-content {
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

• 重新部署主题后，全站点的Fragment都会生效

3. Style Book全局样式（推荐，可管控多页面） #

Style Book本身支持定义全局样式规则，可统一管控站点内多个页面的Fragment样式，具体自定义方法见下文。

二、Style Book自定义步骤 #

1. 创建自定义Style Book条目 #

• 进入控制面板 → 站点 → Style Book
• 点击添加按钮，输入Style Book名称（如「全局自定义样式」），选择一个默认Style Book作为模板
• 进入编辑页面后，点击添加样式片段，选择需要自定义的样式类型（如「Fragment样式」「页面布局样式」）

2. 定义全局Fragment样式规则 #

• 在Style Book编辑器中，找到Fragment相关的样式选项并点击编辑：
  • 可直接设置Fragment的通用属性（内边距、外边距、背景色等）
  • 如需更灵活的自定义，点击自定义CSS按钮，编写全局规则，示例：

/* Style Book全局Fragment交互样式 */
.fragment {
  transition: all 0.3s ease;
}
.fragment:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

3. 应用自定义Style Book到页面 #

• 编辑目标页面，进入页面设置 → Style Book
• 选择刚才创建的自定义Style Book，保存后页面内所有Fragment会自动应用该全局样式

内容的提问来源于stack exchange，提问作者happy_story