阅读时间：6分钟 (1290字)

如何在Joomla!日期中注入更多爱...

五月

2011年5月1日星期日

97643次点击

0条评论

在浏览网站时，我经常会被创意使用日期所吸引。并不是每次都需要或适合用创意来设计日期样式，在大多数情况下，这可能只适用于博客，也许对于由创意人士撰写的博客来说也是如此。但无论如何，当我看到设计师在日期元素的设计中加入了优雅或夸张的触感时，我还是会非常喜欢。

在Joomla!中，本质上有两种主要方式来针对日期标记，这两种方式都涉及到为日期元素（如日、月和年）的每一部分添加额外的标记；这样你就可以用特定的CSS单独针对它们。默认情况下，正常Joomla!内容中围绕日期输出的标记非常简单，包括一个包含整个日期元素的类。

默认标记

在Joomla 1.6中，内容项视图上创建日期的标记如下所示

{codecitation}

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

<?php echo JText::sprintf('COM_CONTENT_CREATED_DATE_ON', JHtml::_('date',$this->item->created, JText::_('DATE_FORMAT_LC2'))); ?>

</dd>

<?php endif; ?>

{/codecitation}

而在Joomla 1.5中的标记如下所示

{codecitation}

<?php if ($this->params->get('show_create_date')) : ?>

<tr>

<?php echo JHTML::_('date', $this->article->created, JText::_('DATE_FORMAT_LC2')) ?>

</td>

</tr>

<?php endif; ?>

{/codecitation}

这些代码片段可以在以下位置找到您的Joomla安装目录中的default.php文件

components/com_content/views/article/tmpl/default.php

如您所见，这里能做的事情并不多，除了用单个类（如.class="createdate"或.dd.create）来针对整个日期元素之外；如果我们想对其中任何一个元素进行创意设计，任何对字体大小、颜色、位置等的更改都将影响所有显示的日期元素。

在语言文件中添加标记。

在Joomla 1.5中，创建更多围绕日期显示的标记的一种最简单的方法是编辑您网站上的语言文件。

如果您在上面的代码片段中注意到用于显示日期的代码实际上是一个简单的字符串：DATE_FORMAT_LC2。这个字符串可以在Joomla 1.5的主语言文件中找到。您可以通过访问language/[你的语言]/[你的语言].ini来找到该文件。

例如，英文语言文件将位于这里：languages/en-GB/en-GB.ini。

在Joomla 1.5中，日期字符串可以在同一文件的顶部附近找到，看起来像这样

{codecitation}

DATE_FORMAT_LC2=%A, %d %B %Y %H:%M

{/codecitation}

为每个日期元素添加标记相当直接。我们可以在任何HTML元素中添加任何类型，然后通过CSS对其进行样式化。一个修改后的日期字符串示例可能如下所示

{codecitation}

DATE_FORMAT_LC2=<div class="dateWrap"><span class="day">%d</span><span class="month">%B</span><span class="year">%Y</span></div>

{/codecitation}

您会注意到我们将每个单独的元素包装在span标签中，然后将整个日期元素包装在div中，以便我们更好地控制位置和应应用于所有元素的特性。一旦做出这种更改，新的标记将在设置DATE_FORMAT_LC2字符串以打印的任何位置输出。

* 注意，我们正在查看DATE_FORMAT_LC2，因为这个字符串与上面代码中引用的特定视图中的字符串相同。还值得注意的是，这些更改将影响页面上输出的任何其他字符串实例。

Joomla 1.6语言文件中的更改意味着我们无法像在Joomla 1.5中那样直接将标记添加到语言文件（尽管我很乐意在这方面被证明是错误的）。可以添加简单的粗体、斜体、下划线等样式，因此这可能是您想要实施的设计类型所需的所有内容。

在模板覆盖中添加标记。

在Joomla 1.5和Joomla 1.6中编辑日期格式的第二种方法是编辑特定视图的覆盖文件。为了本文的目的，我将假设您的模板已经为内容视图设置了模板覆盖。如果没有，那么这是一篇非常有帮助的文章，了解如何在Joomla!中创建模板覆盖：

http://docs.joomla.org/How_to_override_the_output_from_the_Joomla!_core

要编辑文章视图中的日期显示，您需要编辑位于templates/[你的模板}/html/com_content/article/default.php的模板覆盖文件。打开文件，进行快速搜索 "$this->article->created"，这将直接带您到覆盖中创建日期代码的位置。

现有的代码在Joomla! 1.5中看起来可能像这样

{codecitation}

<?php echo JHTML::_('date', $this->article->created, JText::_('DATE_FORMAT_LC2')) ?>

{/codecitation}

以及Joomla! 1.6中可能像这样

{codecitation}

<?php echo JText::sprintf('COM_CONTENT_CREATED_DATE_ON', JHTML::_('date',$this->item->created, JText::_('DATE_FORMAT_LC2'))); ?>

{/codecitation}

要实现上面示例中使用的相同标记，新的标记在Joomla! 1.5中将看起来像这样

{codecitation}

<?php echo JHTML::_('date', $this->article->created, JText('<div class="dateWrap"><span class="day">%d</span><span class="month">%b</span> <span class="year">%Y</span></div>')); ?>

{/codecitation}

以及在Joomla 1.6中可能像这样

{codecitation}

<?php echo JText::sprintf('COM_CONTENT_CREATED_DATE_ON', JHTML::_('date',$this->item->created, JText('<div class="dateWrap"><span class="day">%d</span><span class="month">%b</span> <span class="year">%Y</span></div>'))); ?>

{/codecitation}

一旦您向此文件添加了标记，您还需要将标记添加到您想要针对的所有其他视图中。例如：部分、类别、主页视图。

可以在这些覆盖中添加任何日期语法的组合。有关PHP中可用各种日期格式和语法的完整列表，请查阅PHP手册中的全面指南：PHP手册。

检查新标记是否存在。

在我们可以开始通过添加CSS来美化日期之前，我们首先需要确保新标记实际上被输出到页面上。如果更改已生效，则页面的源代码应包含类似以下内容：

{codecitation}

{/codecitation}

创建自己的样式。

一旦确认了标记的更改，我们就可以着手开始美化日期。

在模板的主要CSS文件中——或者甚至是专门用于定制的文件——添加以下选择器

.dateWrap {}
.day {}
.month {}
.year {}

现在的问题是将自己的设计添加到这四个元素中。下面三个样式控制单个日期元素——天、月、年，而第一条规则可以帮助你定位包含所有这些元素的div。

例如，如果你想要日期显示非常大且独特，你可以使用如下CSS样式

{codecitation}

.dateWrap {background: #282F36;height: 250px;width: 200px;float: left;color: #fff;margin: 0 20px 20px 0}

.day {font-size: 12em;display: block;text-align: center;padding-top:45px;margin-bottom: 22px;background: #fafafa;color: #282F36;padding-bottom: 30px;font-family: georgia;}

.month {display: block;text-align: center;font-size: 3em;margin-bottom: 30px;font-family: helvetica, arial, san-serif;}

.year {display: block;text-align: center;font-size: 3em;font-family: helvetica, arial, san-serif;}

{/codecitation}

结合教程中的标记，这将给出如下日期显示

dateexample