将唯一 class 添加到部分 (PHP)

Question

我的网页设计已为我设置了 CMS，但我遇到了一些问题。

目前，所有部分都使用相同的 css 标签 .SectionOuterAlt 或 .SectionOuter（如果有多个则变为 'Alt'。同样适用于 .SectionInner。

我搜索了 'SectionOuter' 并发现了这行代码。在我看来，它添加了 'Alt'。

问题是我需要每个部分都是唯一的，这样我才能添加 css。如果我可以保留 'SectionOuter' 或 'SectionOuterAlt'，但为每个包含一个独特的 css class，这样我就可以对每个单独的部分进行独特的更改，那就太好了。

<section class="SectionOuter<?php echo $alt; ?>">
<section class="SectionInner<?php echo $alt; ?>">

有人可以帮忙吗？

谢谢

Answer 1

如果您想要每个类的唯一值，那么您可以这样做：

<?php

for ($k = 1; $k <= 2; $k++)
    echo '<section class="SectionOuter SectionOuterAlt SectionOuterAlt-' . $k . '">';

for ($k = 1; $k <= 2; $k++)
    echo '<section class="SectionInner SectionInnerAlt SectionInnerAlt-' . $k . '">';

输出将是这样的：

<section class="SectionOuter SectionOuterAlt SectionOuterAlt-1">
<section class="SectionOuter SectionOuterAlt SectionOuterAlt-2">
<section class="SectionInner SectionInnerAlt SectionInnerAlt-1">
<section class="SectionInner SectionInnerAlt SectionInnerAlt-2">

Answer 2

另一个答案不起作用的原因是因为它正在应用可能不合适的 classes，并且可能需要替换其他 classes。

您需要做的是保持现有的 class 不变，并添加一个 new class 以用于独特的样式。

在页面顶部，您可以添加一个全局变量，例如

<?php $SectionCount = 0; ?>

然后在你想添加唯一的地方class，你可以这样做：

<section class="SectionOuter<?php echo $alt; ?> UniqueClass-<?php echo $SectionCount++; ?>" >
<section class="SectionInner<?php echo $alt; ?> UniqueClass-<?php echo $SectionCount++; ?>" >

这将自动向每个部分添加一个新的、唯一的 class，称为 UniqueClass-n（其中 n 在页面中是唯一的），而不会影响现有的功能或样式。它也不限于每页只有 2 个数字或部分。

全球化

您可以通过多种方式将其设为全局，具体取决于您的页面设置方式，例如

在header代码中添加一个全局变量
在页面 body 上使用唯一的 class 来定位每个页面（例如 .homepage .UniqueClass-1 {} .contactpage .UniqueClass-1 {} 等）

但是，如果没有关于您当前站点设置方式的更多信息（例如，CMS，或者可能存在哪些模板文件可以将代码添加到其中），我们无法确切地告诉您您将如何实现这一点。

更新：

向所有页面的每个部分添加一个唯一的编号并不是真正可行的 - 这是可能的，但它会比手动添加它们花费更多（或更多）的努力（为了使其持久和一致，它会分配给每个部分）。

您可以：

为页面 body 和部分 class（如上所述）使用唯一 class/id 的组合或
根据页面的某些唯一标识符为每个部分生成一个新的 class

无论哪种情况，您都需要在每个页面上使用唯一标识符。这将取决于您的页面设置方式，但如果您使用的是 CMS，则每个 <body> 元素可能会添加一个唯一的 class。

1. classes

的组合

例如，您的主页可以有类似 <body class="homepage page-452"> 的内容，关于页面可能是：<body class="page-about page-818"> 等

在这种情况下，您可以使用这些 classes 的组合来定位每个特定页面上的部分，例如

// target ONLY UniqueClass-1 on the page with the specified body class
.page-452 .UniqueClass-1 { /* CSS HERE FOR HOMEPAGE ONLY */ } 
.page-818 .UniqueClass-1 { /* CSS HERE FOR ABOUT PAGE ONLY */ }

在不了解您的 CMS 或生成的 HTML 的情况下，很难给出准确的答案，但这就是您可以做到的。

（我在开始回答后发表的评论中看到，您的 CMS 没有唯一的 body class，因此您将需要使用下一个选项:)

2。生成唯一 Class

或者，要为每个页面生成一个唯一的 class，如果您的 CMS 生成了一个，您可以使用 slug，或者如果页面标题总是唯一的，您可以将它变成一个字符串通过将其添加到您声明 $SectionCount 的页面顶部，适合 class 名称，例如：

页面顶部：

<?php 
$SectionCount = 0;
$pageClass = preg_replace( '/[^A-Za-z0-9_-]/', '', $pageTitle);
?>

然后您可以创建您的独特 class，如下所示：

<section class="SectionOuter<?php echo $alt; ?> ClassPrefix-<?php echo $pageClass."-".($SectionCount++); ?>" >
<section class="SectionInner<?php echo $alt; ?> ClassPrefix-<?php echo $pageClass."-".($SectionCount++); ?>" >

现在您可以按如下方式分别定位每个页面的每个部分：

.ClassPrefix-generated-page-class-1 { /* CSS HERE */ }
.ClassPrefix-generated-page-class-2 { /* CSS HERE */ }
/* etc */

将唯一 class 添加到部分 (PHP)

Add unique class to section (PHP)

css

php

content-management-system