细节&学习记录

自定义Joomla模板

      Joomla自带的Protostar模板设计不够美观，使用的bootstrap版本较老且响应式效果较差。因为是以学习为主，老师不建议直接套用网上已有的T3、Gantry模板框架，但是要想真正和Joomla的系统契合，必须使用模板，所以我们决定自己开发一个模板。因此，我们先使用 Bootstrap 写了想要的 HTML5 页面，然后学习 Joomla! 模板教程和 PHP 教程，将 HTML页面修改为 MyDL 模板。Joomla模板是php写的，所以一些固定的静态页面内容（如页脚）就可以直接把html代码加进php文件中，而正文、登录、导航栏，文章目录等等模块是动态的，就需要查看Joomla的php接口然后写php代码来动态生成一些标签和内容。

      我们主要参考的教程是Joomla中文网的C计划http://www.joomlachina.cn/articles/1821-jiaocheng/joomla-plan-c/1512-plan-c?tmpl=component&zhuanti=1，写模板和覆写组件的时候有不懂的地方就去查Joomla的API手册。

      由于此 Java 项目本来就是英文项目，且 Joomla! 中英文管理有些不便（比如评论组件中英文不互通，需要分开管理），因此，我们网站的大部分内容都只使用了英文。

      对于我们的网站，首页和内容页布局逻辑和需要的功能有很大程度的不同，因此，我们将模板分为了 default.php 和 home.php 两个部分。

      拥有了自己的模板后，常常需要对 Joomla! 的模块、插件、组件做新的样式设计，使其在我们的模板里更美观。Joomla! 提供了模板覆写功能，如面包屑导航就到 mod_breadcrumbs 里覆写，搜索模块就到 mod_search 里覆写。但是许多样式并不容易找到覆写文件，比如文章列表，既需要修改 com_content 下的 categories，又需要覆写 layouts/joomla/ 下的 content，这方面网上的教程资源比较欠缺。另外，有些组件并不能在模板里覆写，而需要到组件官方文档里查找该组件所在的文件夹，直接修改组件的显示文件。

一些组件的实现和配置

验证码

Captcha系列的验证码因为服务器在国内，基本都访问不了，所以用户管理和前台提交文章用的验证码都是国产joomla插件ZMAX验证码实现的，但是ZMAX好像和JComment不太兼容，所以JComment提交评论时并没有开验证码功能。

 右侧自动定位的目录

基于Bootstrap和Scrollspy的bootstrap-toc，可以自动识别页面中的标题标签并且显示。

左侧的文章目录

使用扩展模块Smart Scroll Menu，将文章目录建立为一个joomla的菜单，然后再Scroll Menu模块选择这个菜单，再将该模块分配到左侧。

正文中的代码块文本高亮

在文章中，有些想要的效果并不能直接通过写入文章来实现。比如 Java 代码块，当使用 Joomla! 自带的嵌入代码时，看起来与正文并无区别，这个问题可以通过两个方法来解决，第一是借鉴 google-pretty 的效果，自己写一个 Java 代码块的 css 样式，第二是使用 Joomla! 插件PRISM Syntax Highlighter for Joomla!，编辑器中插入代码示例即可自动产生代码高亮样式，配色主题也可以切换。

iframe插入b站视频

在文章中嵌入视频时也遇到了问题，学堂云视频中介绍的 Allvideos 插件不支持 Bilibili 视频，而 Bilibili 自带的 inframe 标签导出功能直接应用过来效果不是很理想，视频面积太小且没有响应式，这个问题可以通过创建一个新 div，在 div 中嵌入视频，并修改 div 和视频的样式来解决。

举报表单

网站备案需要设立网站中违规信息的举报功能，通过Creative Contact Form扩展，网站底部设置举报链接跳转到一个表单

服务器配置相关

比较喜欢用Linux命令行捣鼓，自然踩坑也非常多

环境安装

Niginx手动安装时php配置坑比较多，所以这个网站我用的Apache2，安php7.2的时候发现不支持mcrypt了，还得手动安装，总的不使用宝塔面板的joomla安装教程可以参考这个。

Apache2文件存储结构

因为手动安装，所以后续域名配置和ssl证书安装也是得修改apache的配置文件，顺便管中窥豹了解了一下Apache2的文件结构。

对于www的顶级域名，我们网页的文件一般都放在/var/www/html下面，这个路径下的index.html,就是www.alexhaoge.xyz的首页,而/var/www/html/joomla中存的就是joomla框架的文件了,里面的index.php就是www.alexhaoge.xyz/joomla/的页面内容了。Apache2的配置文件在/etc/apache2/下面(我是root安装的)，apache.conf就是全局设置，而对不同网站的设置一般在sites-available文件夹下面写，写完之后重启apache就会更新配置，这时site-available的设置就会被导入sites-enabled,对于conf-available和mods-available也是类似的道理。

网站安全相关

  • SSL证书：直接腾讯云里申请，下载下来之后crt放服务器上apache2里改一下设置，然后强制http转https
  • 防DDos：并没有钱买高级服务，就腾讯云里设个流量上限就完了
  • JComment里长度、频率，防floodfill，权限这些设置好

网站布局与功能

顶部菜单栏

  • Home：网站主页。
  • Why MyDL?：向还不了解 MyDL 的开发者介绍本框架的优势，包括文字和视频介绍。
  • Install：提供下载方式，可从本站直接下载。
  • Tutorials：为 MyDL 的使用者提供教程，使其更好地理解使用 MyDL。
  • Javadoc：跳转到 Java 官方文档，以便查询。
  • About Us：网站作者和网站简介。
  • 搜索：方便用户查找相关教程。
  • 用户注册登录：方便用户管理，以形成良好的社群。

首页

  • 第一个 banner 的 learn more：跳转到 Why MyDL。
  • 后面的一个插图和三个卡片：简要介绍 MyDL 的几个优势。
  • Tutorials：同顶部 Tutorials。
  • Javadoc：同顶部 Javadoc。
  • Online IDE：可在线试用 MyDL 框架，吸引潜在用户，目前仍在开发中。

内容页

  • 左侧目录：一个位于侧边的主菜单栏。
  • 右侧自动定位目录：自动定位到当前浏览的文章内容。
  • 面包屑导航：自动定位当前位置，并滚动置顶，方便返回。
  • 页码：方便进行文章翻页。
  • 讨论区：通过讨论，使 MyDL 用户形成社群，为新手提供答疑解惑的途径。

Footer

主要功能与顶部菜单栏大同小异，About Us 里多了几项：

  • 网页简介：跳转到顶部 About Us。
  • 细节&学习记录：记录网站制作过程中的一些问题，和我们的解决方法。
  • 模板下载：用户可从此处下载我们网站应用的自制 Joomla! 模板。