Question

我正在使用WordPress和CSS Grid来构建文章。正文和标题应限制宽度，图像和其他视觉元素可能会增长到全宽。我通过指定网格列解决了这个问题。

E.g。 grid-column: 5/11的段落和grid-column: 1/15的图片。这很好用，但我现在处理一堆网格行，因为每个段落都成为一个新的网格行。这使得突出显示内容变得困难，并且在“主要文章”块旁边对齐内容。

这是由the_content（）生成的;来自WordPress。

<h2>Headline</h2>
<p>Parahraph</p>
<p>Parahraph</p>
<p>Parahraph</p>

<div id="attachment_0001" class="wp-caption alignnone">
  <img src="#">
  <p class="wp-caption">Caption text</p>
</div>

<p>Parahraph</p>

<form>
   <input>
   <button>
</form>

<p>Parahraph</p>

<img src="#">

<p>Parahraph</p>
<p>Parahraph</p>

但这就是我想要的。注意除了一些元素之外的所有东西都被包装，包括h2和p标签，而不是每个元素的一个div。但也不包括p标签字幕。

<div>
  <h2>Headline</h2>
  <p>Parahraph</p>
  <p>Parahraph</p>
  <p>Parahraph</p>
</div>

<div id="attachment_0001" class="wp-caption alignnone">
  <img src="#">
  <p class="wp-caption">Caption text</p>
</div>

<div>
  <p>Parahraph</p>
</div>

<form>
   <input>
   <button>
</form>

<div>
  <p>Parahraph</p>
</div>

<img src="#">

<div>
  <p>Parahraph</p>
  <p>Parahraph</p>
</div>

关于如何修改the_content（）的任何想法;输出所需的标记，或者我可以使用另一种解决方案 - 使用CSS Grid？

Answer 1

您需要弄清楚要在其中插入div的某种“规则” /逻辑，或者您应该寻找其他解决方案。

例如，您可以过滤In [7]: _, index = np.unique(f['time'], return_index=True) In [8]: index Out[8]: array([ 0, 1, 2, 3, 4, 5, 7, 8, 9, 10, 11]) In [9]: f.isel(time=index) Out[9]: <xarray.Dataset> Dimensions: (time: 11) Coordinates: * time (time) datetime64[ns] 2001-01-01 2001-01-01T01:00:00 ... Data variables: var (time) float64 dask.array<shape=(11,), chunksize=(6,)>，然后添加the_content：

在<div>和<h2>之前
除非<p>之前是<p>或</p>

添加一个</h2>：

在</div>之后，但后面紧跟</p>

然后，您需要仔细检查其是否有效，并且如果<p>和<div>的数目由于某些原因不匹配，可能会引发错误。如果它们不匹配，则您的逻辑和异常可能不足以容纳内容。

如何在the_content（）中包装元素？

1 个答案: