Processwire 添加 css class 到页面

Question

我可以向页面添加类名吗？我不知道如何实现这样的功能，或者它是否已经存在。

我正在使用 Processwire 3.0.42。

Answer 1

在正文所在的模板中放置类似这样的内容：

<body class="<?php echo $page->template->name; ?>">

这将为您的页面正文标记提供一个 class 等于页面模板名称。

Answer 2

您可以用同样的方法添加页面标题。

<body class="<?php echo $page->name; ?>">

不要担心在每个页面上添加 class。这样做的开销可以忽略不计。

如果您想添加一个不同的 class，您需要向您的模板添加一个字段并将其附加到上面的代码。

Answer 3

在 ProcessWire 中，一切都在您的掌控之中。 @ivangretsky 完美答案的替代方案包括-

只需在您的模板文件中包含一个条件。（如果您需要使用相同的模板向其他页面添加其他 classes，则这种扩展效果不佳。）

<?php
  $bodyClass = '';
  if($page->id == 1021) $bodyClass = 'my-class';
?>

<body class="<?php echo $bodyClass; ?>">

注意使用 $page->id 优于 $page->name，例如，因为 ID 不会改变而名称可以。

您还可以向页面模板定义中添加一个字段。添加一个名为 'Body Class' 的字段。然后在模板文件中使用该字段的内容。

<body class="<?php echo $page->body-class; ?>">

这将比我的其他建议更好地扩展，并且如果您不希望用户弄乱它的值，ProcessWire 后端中有一些选项可以在正常使用期间隐藏或部分隐藏该字段。

CSS spec 中的一个 'gotcha' 需要注意的是 CSS 标识符，包括 class 名称和 ID 不能以数字开头，因此您不能只需使用$page->id.

Answer 4

有很多选择，这取决于您的需求和想象力:-)。

您可以使用页面名称、模板名称、页面 ID 或组合。

<body class="<?php echo $page->template->name; ?> page-id-<?php echo $page->id; ?>">

// Output
<body class="your-template-name page-id-1234">

通过这种方式，您可以定位模板、页面或两者。

或者，如@ivangretsky 所述，您可以将自定义字段添加到页面。同样，您可以将此方法与模板名称等结合起来。这取决于您的需求和您想要实现的目标。

通知：

Using $page->id is better than $page->name, as the ID doesn't change while the name could. @DaveP

Processwire Add css class to page