在Drupal 7中能否自定义$page[content]的HTML与CSS？

我在页面模板中编写了如下代码：

<div id="wrapper">
    <div id="header-wrapper">
        <?php print render($page['header']) ?>
    </div>
    <div id="content-wrapper">
        <?php print render($page['content']) ?>
    </div>
    <div id="footer-wrapper">
        <?php print render($page['footer']) ?>
    </div>
</div>

请问是否存在修改$page['content']的HTML结构与CSS样式的方法？

当然有，分两种场景处理：

一、修改HTML结构 #

1. 自定义模板文件 #

Drupal里$page['content']的输出由对应内容/区块的模板控制，你可以：

• 找到目标模板（比如node.tpl.php、特定页面模板变体或区块模板），复制到当前主题目录。
• 直接修改模板里的HTML代码，比如给内容加额外嵌套标签、调整元素顺序，或者修改原有标签的属性。
• 如果只想给$page['content']整体加外层结构，直接在当前模板里改就行：

<div id="content-wrapper">
    <div class="custom-content-box">
        <?php print render($page['content']) ?>
    </div>
</div>

2. 用主题预处理函数 #

在主题的.theme文件里写预处理函数，修改$page['content']的渲染数组：

function yourtheme_preprocess_page(&$variables) {
    // 给content整体添加包裹标签
    $variables['page']['content']['#prefix'] = '<div class="custom-content-wrap">';
    $variables['page']['content']['#suffix'] = '</div>';
    // 给内部主内容区块加类名
    if (isset($variables['page']['content']['main'])) {
        $variables['page']['content']['main']['#attributes']['class'][] = 'custom-main-block';
    }
}

二、修改CSS样式 #

1. 主题CSS文件中编写规则 #

直接在主题的CSS/SCSS文件里，通过父容器或内容内部元素的类名写样式：

/* 调整整个内容容器的布局 */
#content-wrapper {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
}

/* 给内容里的文章模块加样式 */
#content-wrapper .node--type-article {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

2. 内联样式（仅临时测试用） #

如果只是临时调试，可以在预处理函数里加内联样式（不推荐用于正式项目）：

function yourtheme_preprocess_page(&$variables) {
    if (isset($variables['page']['content']['#attributes']['style'])) {
        $variables['page']['content']['#attributes']['style'] .= '; margin-top: 20px;';
    } else {
        $variables['page']['content']['#attributes']['style'] = 'margin-top: 20px;';
    }
}

内容的提问来源于stack exchange，提问作者QChí Nguyễn