8分钟阅读时间 (1565 字)

带有自动创建的简介文本和新外观的博客分类视图

二月

乔治·普洛马基斯

2017年2月1日星期三

25724 点击

0 条评论

简介文本对于博客来说非常重要，因为它们给我们提供了对文章的第一印象。在大多数情况下，简介文本由主要文章的前一段或两段组成。

问题是，当我们有大量的文章要发布时，总是很痛苦地寻找并插入“阅读更多”功能，同时我们试图使前端看起来很好，具有相当多的相同行数的简介文本。

因此，我们提出了一个解决方案，将通过限制主要文本到特定的字符数来自动创建简介文本，并提供一些使我们的博客看起来更好的想法。

我们将如何做到这一点？

我们将使用 Joomla 标准模板 “Protostar” 创建一个新的博客布局，该布局将创建自动简介文本。完成此操作的步骤如下

创建一个具有“菜单项类型”支持的覆盖自定义博客布局
更改覆盖文件中的代码
创建一个字段，通过模板参数来控制字符数。
创建一个链接到我们新自定义博客布局的菜单项。
创建一个新的 CSS 文件，以在我们的博客中应用修改以使其更美观

A. 创建自定义博客布局覆盖

1. 让我们复制 Joomla 目录中的分类博客文件，../components/com_content/views/category/tmpl/

复制这些文件

blog.php
blog.xml
blog_item.php
blog_links.php
blog_children.php

2. 将上述文件粘贴到以下文件夹中（如果不存在则创建）
../templates/protostar/html/com_content/category/

并将它们重命名为

autoblog.php
autoblog.xml
autoblog_item.php
autoblog_links.php
autoblog_children.php

B. 更改覆盖文件中的代码。

我们将更改文件 autoblog_item.php 和 autoblog.xml 中的某些代码。

autoblog_item.php 中的更改

1. 在第12行添加以下代码以在模板参数中获取访问权限

// 获取模板参数
$app = JFactory::getApplication('site');
$template = $app->getTemplate(true);

2. 在第54行找到以下代码

<?php echo $this->item->introtext; ?>

并将其替换为以下代码

<div class="myIntrotext">
<?php echo JHtml::_('string.truncate', strip_tags($this->item->introtext), $template->params->get('charactersNumber', 200));?>
</div>

以上代码将通过以下方式提供我们想要的简介文本

从任何标签中清理文本
根据下一步（C）中创建的模板参数限制正文中的字符数，或者如果没有设置，则将其限制为默认值“200”。
在单词边界处结束简介文本
在最后一个单词后添加省略号"..."。

3. 在第65行找到以下代码

<?php if ($params->get('show_readmore') && $this->item->readmore)

并将其替换为以下代码

<?php if ($params->get('show_readmore'))

这将强制博客条目显示“阅读更多”，并将链接到文章页面。

4. 为了美观，让我们将第44行显示在文章标题之前的图像行移动到第25行

<?php echo JLayoutHelper::render('joomla.content.intro_image', $this->item); ?>

并将其移动到第25行


<?php echo JLayoutHelper::render('joomla.content.intro_image', $this->item); ?>
<!-- // 图像移动到此位置 →

保存autoblog_item.php并继续……

autoblog.xml中的更改

修改第3行至第8行的代码

当前代码

<layout title="COM_CONTENT_CATEGORY_VIEW_BLOG_TITLE" option="COM_CONTENT_CATEGORY_VIEW_BLOG_OPTION">
<help key = "JHELP_MENUS_MENU_ITEM_ARTICLE_CATEGORY_BLOG" />
<message>
<![CDATA[COM_CONTENT_CATEGORY_VIEW_BLOG_DESC]]>
</message>
</layout>

修改为

<layout title="Category Auto Introtext Blog" option="COM_CONTENT_CATEGORY_VIEW_BLOG_OPTION">
<help key = "JHELP_MENUS_MENU_ITEM_ARTICLE_CATEGORY_BLOG" />
<message>
<![CDATA[显示通过限制正文、以单列或多列布局自动创建的简介文本的文章。]]>
</message>
</layout>

这样我们就创建了一个新的“菜单项目类型”，稍后创建链接到我们新博客布局的菜单项时可以选择。

保存autoblog.xml并继续……

C. 创建一个字段来通过模板参数控制字符数。

让我们创建一个新的字段来控制字符数，这样我们就可以通过后端模板参数轻松更改它。

我们将打开../templates/protostar/templateDetails.xml，并在fieldset的末尾添加一个新字段

<config>
<fields name="params">
<fieldset name="advanced">
…
…
…

<field name="charactersNumber"
label="Blog Introtext characters number"
description="Enter the max characters number that will be used from main text to introtext"
type="number"
default="200" />
</fieldset>
</fields>
</config>

如果我们保存并转到后端模板样式并选择Protostar，我们将在“高级”选项卡中看到我们创建的新参数：“Blog Introtext characters number”。

因此，我们可以输入用于创建简介文本的文本字符数。

注意：我们无法覆盖刚刚更改的“templateDetails.xml”文件，在下次更新时更改将丢失。因此，只需在更新后重新上传此文件即可。

我们在代码中包含了一个默认值“200”（步骤B.2），这还充当安全网，因此如果您再次不重新上传文件，则200个文本字符将创建简介文本，当然您也可以通过autoblog_item.php文件更改此数字。

D. 创建一个菜单项，链接到我们的新自定义博客布局。

在本教程中，我创建了一个名为“我的自动简介博客”的新类别，包含5-6篇文章。请记住，为了在添加文章时有一个流畅的工作流程，使用“图片和链接”选项卡在文章中插入图像对于简介和主图像都是必不可少的。

当然不需要为简介文本输入“阅读更多”，因为这个教程的目的就是：自动创建。

让我们去创建菜单项

转到“菜单”，选择你的菜单并点击“新建”按钮。
菜单标题：添加一个标题，“博客”以我的示例为例。
菜单项类型：当点击“选择”时，在弹出窗口“选择项类型”中点击“文章”，你将看到类型
“自动简介博客分类”通过限制正文内容，以单列或多列布局显示自动创建的简介文本。
这是我们步骤B中在override autoblog.xml内输入的新标题和描述。
所以选择它！
选择一个分类：选择“我的自动简介博客”以我的示例为例。
点击“页面显示选项卡”，在“页面类”文本框中输入：“myAutoBlog”（注意在“myAutoBlog”之前留一个空格）
为什么这么做？为了在以后对CSS进行特定更改，仅影响新的覆盖页面。这意味着如果你选择另一个具有博客视图的“菜单项类型”，我们将不会受到我们所做的任何更改的影响。
就是这样，点击“保存”

现在去前端，从菜单中选择这个菜单项（博客）并查看结果。是的，你有一个带有所有帖子简介的博客页面！

现在让我们调整外观。

E. 创建一个新的CSS文件，以便输入我们的调整以更改外观。

在../templates/protostar/css/内，我们将创建一个名为user.css的新文件。Protostar模板默认情况下看起来和渲染，如果存在-这个特定文件。见下面的文件，其中所有选择器都有注释，以便了解我试图实现什么，这样你可以使用它们并在以后轻松地进行更改

/* .myautoblog用于特定性，因此仅在博客页面上 */
/* 使用这个页面类，你将看到下面的更改 */

/* 图片的边距 */
.blog.myAutoBlog .pull-left.item-image {
margin: 0 0 10px 0;
}

/* 从文章详情上方删除“详情”一词 - 我只是不喜欢它在那里！ */
.blog.myAutoBlog .article-info-term {
display: none;
}

/* 使用flexbox使项目具有相同的高度 */
.blog.myAutoBlog .items-row {
display:flex;
}

/* 给项目和其他一些东西上色 */
.blog.myAutoBlog .items-row [class*="span"] {
background:#eee;
margin-bottom: 15px;
padding:0 0px 50px 0px;
position:relative;
}

/* 为前导项目和其他一些东西使用不同的颜色 */
.blog.myAutoBlog .items-leading [class*="leading-"] {
background:#ddd;
margin-bottom: 15px;
padding:0px 0px 50px 0px;
position:relative;
}

/* 强制项目“阅读更多”按钮始终位于右下角 */
.blog.myAutoBlog .readmore {
position: absolute;
right: 10px;
bottom: 0px;
}

/* 一些微小的更改，你可以很容易地在以后进行更改 */
.blog.myAutoBlog h2, .blog.myAutoBlog .page-header {
margin: 0 0 5px 0;
padding: 0 5px 3px;
}

.blog.myAutoBlog .page-header {
border-bottom: 0px solid #fff;
background: #0088CC;
}
.blog.myAutoBlog .page-header a{
color:#fff;
font-weight: normal;
}
.blog.myAutoBlog .icons {
padding: 0 10px;
}
.blog.myAutoBlog .myIntrotext {
padding: 0 10px;
}