在这一节中我们将实现目标网站的博客页面,也就是点击博客菜单之后,系统就会显示博客分类下的所有文章,每一个文章左边显示文章的图片,右边显示文章的标题和描述信息。如果文章很多,还需要自动显示分页。

1,本节目标


实现目标网站的博客页面

2,理论知识


在上一讲 和目标网站的对比 一文中我们提到 目标网站的博客页面是使用文章组件和分类组件共同实现的。现在我们已经具备了基本的文章管理和分类管理的基础,应该是可以完成这个目标的。

就目前来看要制作出这个页面,我们需要做如下的事情:

  1. 准备一个分类(博客分类)
  2. 在这个分类中添加文章
  3. 将这个分类中的所有文章以我们需要的样式显示出来

如果我们能够做到上面的三件事,那么实现博客页面就不是什么难事了。

3,具体的操作流程


3.1 清除系统自带的分类

登录后台 -> 在导航栏 内容下找到 类别管理 ,点击后,进入类别列表中

系统默认在安装的时候会自带一个Uncategoriesed(未分类)的分类,如果你在安装的时候选择安装示范数据,那么可能在类别列表下面会有很多其他的分类。如图:

joomla分类管理.png

上图中可以看出,系统给我创建了Uncategoriesed ,Blog,Help三个分类。

为了便于后续的管理操作,我们可以先将这些分类都删除掉。删除分类的方法很简单,主要分为两步:

  1. 勾选需要删除的分类前的选择框
  2. 点击工具栏上的回收站按钮

操作成功会给出一条提示信息,如图:

Joomla删除分类的操作.png

说明:就如同windows系统一样,放入回收站的内容是可以被找回的,Joomla也是如此,如果你需要彻底的删除这个分类,还需要进行更进一步的操作。彻底删除分类和彻底删除文章的操作一样,具体可以参考 文章组件 - 内容发布管理解决方案 在此不在细说了。

3.2 创建分类

点击工具栏的新建按钮。进入新建页面。如图:

新建文章类别.png

 我们在标题中输入 “博客”,在别名中输入 “blog”(系统对于别名的唯一要求就是确保他们是唯一不重复的。这个可以不输入(系统默认会使用当前的时间戳作为别名),不过我们建议输入一个有意义的别名),点击保存。这样我们就创建了好了“博客”这个分类了

创建分类的时候,唯一会出错的地方就是别名,如果你填写的别名和以前的分类重复了,那么系统会明确提示别名已经存在了,此时你只需要使用另外的别名就可以解决问题了。

3.3 创建子分类(这个不做也不会影响本节的内容)

我们通过观察目标网站,发现目标网站的博客栏目下还有3个子栏目,分别是“产品资讯”,“行业动态”,“国际资讯”。如图:

joomla博客下的子栏目.png

既然我们现在创建了博客分类,索性就一起再创建这3个子分类。如何创建子分类,请参考文章:分类组件 - 结构化的组织你的文章   最后的结果截图如下:

Joomla分类的层级结构.png

3.4 添加内容

在目标网站的博客栏目中,显示的内容其实是一系列的文章,每一个项目都是一篇文章。如图:

博客文章.png

现在的任务就很明确了,我们应该到内容管理中来创建这些文章了。具体的如何创建文章,我们在前面的 创建文章 一文中有详细的说明。在此不做重复。

我们以 《Oculus在伦敦组建VR团队》这篇文章来说明几个要点:首先看图:

Joomla文章各部分的说明.png

  1. 图标3所示。通过最右边的类别参数,我们将这篇文章的类别设置为“博客”。这样我们就实现了将文章放到分类中的目的了
  2. 在Joomla中简介和正文都是放到编辑器中的,并没有为简介单独预留填写的地方,这点和其他的CMS有很大的不同。文章的简介和正文是点击阅读更多按钮来分隔的(点击阅读更多后,你会在简介和正文之中看到一条红线)。
  3. 如果你需要向正文中插入图片,点击编辑器工具栏上的图片按钮即可。具体的操作细节请参考文章 丰富文章内容 - 编辑器 

在上面我们完成了文章的内容和简介的录入。通过点击选项卡中的“图片及连接”来进入到图片的设置界面。如图:

Joomla文章设置图片.png

对于Joomla文章,系统提供了两个设置图片的地方,一个是引用图片,一个是全文图片。

  • 引用图片一般比较小,用于文章列表页面。在上面的截图中,我就设置了引用图片。
  • 全文图片一般比较大,用于展示文章的详情页面。上面的截图中,我并没有设置全文图片。

 做完了这些,我们的第一篇博客文章就创建完成了。在文章列表中我们可以清楚的看到刚刚创建的内容,如图:

Joomla博客文章列表.png

然后我们依据同样的方法,再多创建几篇文章,完成后的效果如下:

Joomla博客文章列表2.png

 

 3.5 显示分类内容

这篇文章已经太长了。如何展示分类的内容,在下一节中继续。

 

用户评分: 0 / 5

不活动星星不活动星星不活动星星不活动星星不活动星星
 

评论

  • 未找到评论