阅读时间5分钟 (939字)

博客分类（第二部分）带微布局和语言覆盖

四月

乔治·普卢马基斯

周二，2017年3月14日

8636次点击

0条评论

总是给博客分类视图一个独特且吸引人的外观是一个挑战。

除了我们在上一期（二月）尝试控制的简介文本外，博客条目还包括各种其他元素，如图像、作者姓名、分类名称、日期等。

通过更改它们，我们可以达到一种新的外观，因为尽管它们的个体尺寸不同，但它们在很大程度上影响了博客页面的外观。

所以在这里，我们将展示如何使用（所谓的）微布局覆盖来覆盖这些元素中的某些元素，结合语言覆盖，以进行这些精细的调整。

此外，我们将改进(*)我上一期的教程两步。

我们将如何做到这一点？

我们将使用Joomla标准模板“Protostar”为作者姓名、分类名称、发布日期和更多内容创建微布局和语言常量覆盖。

然后，我们将对我们的第一个教程进行两个更改，以确保100%可覆盖。

（博客改进（步骤C）是可选的。博客本身运行得很好，但正如“更好的是好的敌人”一样，你可以进行这些更改以在更新后保留参数输入。）

我们将遵循以下步骤

微布局和语言常量覆盖
CSS更改
通过自动创建的简介文本改进博客（可选）

A. 微布局和语言常量覆盖

1. 作者姓名

我们将使用布局覆盖添加一个图标，并使用语言覆盖删除“撰写者”文本。

a. 复制文件

../layouts/joomla/content/info_block/author.php

到

..templates/protostar/html/layouts/joomla/content/info_block/author.php

打开文件，在行#13关闭标签之后，在行尾添加

b. 在后端，扩展 > 语言 > 覆盖，我们将选择“新建”，在“语言常量 *”字段中输入常量“COM_CONTENT_WRITTEN_BY”。下面在“文本”字段中输入“%s”。

2. 分类名称

如上所述，我们将使用布局覆盖添加一个图标，并使用语言覆盖删除“分类”文本。

a. 复制文件 ../layouts/joomla/content/info_block/category.php

到

..templates/protostar/html//layouts/joomla/content/info_block/category.php

打开文件，在行号#13关闭标签之后添加

b. 如前所述，将语言常量“COM_CONTENT_CATEGORY”重写为“%s”

3. 发布日期

在此，我们将仅重写语言常量，然后将日期放置在图像的左上角（仅为了乐趣）。

a. 如前所述，将语言常量“COM_CONTENT_PUBLISHED_DATE_ON”重写为“%s”

b. 请参阅下文“CSS更改”步骤中的代码。

4. 阅读更多

我们将通过布局覆盖将按钮图标从左到右改变

a. 复制文件 ../layouts/joomla/content/readmore.php

到

..templates/protostar/html//layouts/joomla/content/readmore.php

b. 打开文件，剪切行号#18

并将其粘贴到行号#32左右（在关闭标签</a>之前）

B. CSS更改

将以下代码输入到我们在教程第1部分创建的文件 ../templates/protostar/css/user.css 中。

/*将发布日期移动到图像的左上角*/
.blog.myAutoBlog .published {
position: absolute;
top: 10px;
background: #ff0000;
color: #fff;
padding: 5px;
left: -15px;

}
/*美化元素*/
.blog.myAutoBlog .btn {
background-color: #fff;
border: 1px solid #0088CC;
background-image: none;
box-shadow: none;
border-radius: 0px;
text-shadow: none;
color: #0088CC;
}

.blog.myAutoBlog .icons .btn {
background-color: transparent;
border: 0px;
}
.blog.myAutoBlog .icons .caret {
border-top: 4px solid #0088CC;
}
.blog.myAutoBlog .article-info.muted a{
color:#999;
}
.blog.myAutoBlog .article-info.muted {
border-bottom: 1px solid #fff;
padding: 0 0 10px;
margin-bottom: 10px;
}