分享

JOOMLA 修改组件,模块样式的模板

2014-05-04  翼网情深   |  转藏
   

Joomla的高明之处,所有的组件、模块都支持在模板中DIY,不难发现,模板文件夹中都有个叫html的文件夹,这就是用来存放组件、模块的定制模板的地方,在K2 分类模板配置及分类参数设置详解及修改[一] 一文中,我们有提到K2的模板设置,joomla自带文章的DIY也是如此。

找到目录:\components\com_content\views\

可发现有5个文件夹,分别为archive(活动)、article(文章)、category(分类)、frontpage(首页)、section(单元),按照MCV开发模式,这里的所有文件夹就是管V的,我们就叫他模板吧,joomla的开发者做这些文件夹,就是考虑到我们要自定义!但不是让我们直接改这些文件夹中的核心文件,否则版本升级后,所做的修改也是失效的。

这时候,joomla让我们将这些文件转移到模板文件夹中的html进行DIY定制,我们以常用的article(文章)、category(分类)、frontpage(首页)、section(单元)为例。

将这些文件夹复制至\templates\jk_joomlask\html\com_content\中(jk_joomlask替换成你设计或使用的模板,如果模板html中没有com_content的文件夹,可以新建一个)

复制了这些文件之后,我们还需要将多余的配置文件删除

将\templates\jk_joomlask\html\com_content\article\tmpl\中的所有php文件剪贴到\templates\jk_joomlask\html\com_content\article\中,其它文件全部删除

将\templates\jk_joomlask\html\com_content\category\tmpl\中的所有php文件剪贴到\templates\jk_joomlask\html\com_content\category\中,其它文件全部删除

同样道理,frontpage和section文件夹下也执行同样的操作。操作到这里,我们就已经将com_content这个自带组件的模板文件创建成功了,也就是说这个时候,\components\com_content\views\中的模板文件的功能就被\templates\jk_joomlask\html\com_content\中的模板文件功能替换掉。

 

以上都是说明关于joomla的组件模板文件的创建方法(模块也是同样道理 )

那么我们现在就需要在具体文章内容中加入SNS分享按钮,现在第三方分享按钮做的比较火的应该是jiathis.com,这里我们就以jiathis.com为例,登陆jiathis.com,然后按照加网给的提示生成了一段JS代码,编者生成按钮式代码如下:

1. 

<!-- JiaThis Button BEGIN --> 

2. <a href="/share/" class="jiathis" target="_blank"><img src="/code/images/jiathis2.gif" border="0" /></a> 3. 

<script type="text/javascript" src="/code/jia.js" charset="utf-8"></script> 

4. 

<!-- JiaThis Button END --> 


然后需要找到文章内容页的模板文件,也就是我们上文中已创建好的\templates\jk_joomlask\html\com_content\article\default.php文件,比如我们现在想要把这个分享按钮加到"打印图标"的左边!

那么找到打印图标的代码,可以通过火狐的firebug插件查找相关的打印图标代码,即是

1.

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

2.

<td align="right" width="100%" class="buttonheading"> 3. <?php echo JHTML::_('icon.pdf',  $this->article, $this->params, $this->access); ?> 4. </td>

5.

<?php endif; ?>

添加分享后的代码为:

01.

<td align="right"> 02. 

  <!-- JiaThis Button BEGIN --> 

  03. <a  href="/share/" class="jiathis"  target="_blank"><img  src="/code/images/jiathis2.gif" border="0"  /></a> 04. 

  <script type="text/javascript" src="/code/jia.js" charset="utf-8"></script> 

  05. 

  <!-- JiaThis Button END --> 

  06. </td>

07.

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

08.

<td align="right" width="100%" class="buttonheading"> 09. <?php echo JHTML::_('icon.pdf',  $this->article, $this->params, $this->access); ?> 10. </td>

11.

<?php endif; ?>

保存该文件之后,尝试清空缓存、刷新前台!即能看到这串分享的按钮,不过要在后台开启"PDF、打印、EMAIL"的图标功能!

这种在文章内容指定位置安插SNS分享按钮稍微复杂了点,其实我们可以通过jiathis.com的侧栏式工具,添加在模板\templates\jk_joomlask\index.php文件中

例如我们获取到的侧栏式按钮代码

1. 

<!-- JiaThis Button BEGIN --> 

2. 

<script type="text/javascript" src="/code/jiathis_r.js?move=0" charset="utf-8"></script> 

3. 

<!-- JiaThis Button END --> 

将这段代码添加到index.php的

</body>

标签前面即可!

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 全屏 打印 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多