Joomla 新手上路指南

安装服务

这里建议新手直接使用X10免费主机上手，X10的500M容量对于搭建博客足够，具体可参考：使用免费X10容器快速构建博客

以下是本地安装 Joomla 的教程

安装xampp

下载地址：点击访问，博客发布时最新版本是 8.0.30，点击 Download 下载安装文件按提示安装

安装好后，运行xampp，点击 start 把 apache 和 mysql 运行起来，遇到防火墙提示需要允许访问

安装joomla

下载地址：点击访问，博客发布时最新版本是 5.2.2，点击 Download 下载压缩包

在 C:/xampp/htdocs 目录下新建网站目录并将下载到的压缩包解压到该目录下，然后访问 http://localhost/网站目录 来安装网站，按照提示操作即可

修改语言

访问路径 /administrator登录后台，点击左侧菜单栏 System - Language

在搜索框输入 Chinese 查找中文语言包

找到 Chinese Simplified 然后点击 Install 进行安装

安装好后点击左上角 Manage Language 将 Chinese Simplified 设为默认语言，注意前台（展示页）和后台（管理页）的语言选项是分离的，通过下拉菜单切换设置，如果需要全中文的环境，需要同时设置前台和后台

右上角点击 logout 退出登录然后重新登陆即可，如果上一步设置了后台为简体中文，这里保持 Default 就行

安装样式

j51_jasmine 素材包下载：下载链接，在解压后的素材中找到 j51_开头的压缩包上传到域名目录 public_html/tmp 目录下并右键解压，可以修改下面链接中的 你的域名 直接访问这个目录：https://x11.x10hosting.com:2222/CMD_FILE_MANAGER?path=/domains/你的域名/public_html/tmp

点击左侧菜单栏 系统设置 - 拓展安装 - 站内目录安装，然后点击 检查并安装 进行安装

安装完成后，界面显示如下

点击左侧菜单栏 系统设置 - 前台风格

将 j51_jasmine 切换为默认，然后点击右上角博客名字，访问博客主页查看修改效果

回到设置页面，点击 j51_jasmine - General - Logo - 选择 来上传新的 Logo

上传成功后，点击图片选中然后点击 选择 完成 Logo 的替换

接下来，将 Logo Image 和 Moblie Logo Image 都完成替换后点击左上角 保存

然后点击右上角博客名称访问主页查看修改后的效果

点击 Body/Header Styling，请自行根据上传的logo的色调修改 Header Background（页眉底色），默认是#ffffff（纯白），这里修改为了#000000（纯黑），然后左上角 保存

右上角点击博客名称查看主页效果

点击 Typography Styling，修改 Primary Color（主题色），默认是 #688fad （空军蓝）这里修改为 #808080（浅灰色），然后左上角 保存并关闭

右上角点击博客名称查看主页效果

xxxxxxxxxx5 1api.duplicate_space(2    from_id=”username/my-cool-training-space”,3    secrets=[{“key”=”HF_TOKEN”, “value”=”hf_api_***”}, …],4    variables=[{“key”=”MODEL_REPO_ID”, “value”=”user/repo”}, …],5)bash

添加分类

点击左侧菜单栏 - 内容管理 - 分类管理，点击新建

输入分类名称后右上角 保存并关闭 下拉菜单中的 保存&新建 继续建立新的分类，添加完成后点击保存并关闭

添加页面

点击左侧菜单栏 内容管理 - 文章管理 - 新建

输入标题和正文内容，选择好分类，并可在图片和链接中设置摘要和正文图片，点击左上角 保存并关闭

这时文章还并没有被发布，需要勾选文章，在操作下拉菜单里选择 精选 或直接勾选文章标题前的精选开关，文章才会展示在主页

点击右上角博客图标访问主页查看效果

点击左侧菜单栏 菜单管理 - Main Menu，可以看到这里默认设置显示精选文章，点击 Home 进行修改

点击页面显示，将是否显示“内容标题” 改为 不显示就可以隐藏Home页面的标题了

点击右上角博客名称访问主页查看修改后的效果，可以看到 Home页面标题已经消失了，接下来，我们继续设置文章的格式

点击左侧菜单栏 系统设置 - 全局配置

点击文章管理，在这里可以设置显示文章页面的显示内容，关闭 显示文章名称、显示分类名称、显示内容作者、显示发布日期、显示文章导航、显示点击数，然后左上角点击 保存

右上角点击博客名称访问注意查看修改后的效果

添加信息

接下来新建一个模块作为页脚，点击左侧菜单栏 内容管理 - 前台模块 - 新建

下滑找到并点击 自定义 旁的加号新建一个模块，填写名称和内容，关闭模块名称显示，选择模块位置为 Bottom -2A，确保状态是已发布

切换标签到 菜单分配，设置为 在选择的页面显示，仅勾选 主页 ，然后点击 保存&新建

填写名称并插入图片，关闭模块名称显示，选择模块位置为 Bottom -2B，确保状态是已发布

切换标签到 菜单分配，设置为 在选择的页面显示，仅勾选 主页 ，然后点击 保存并关闭

接下来修改页脚部位的背景色调，点击左侧菜单栏 系统设置 - 前台风格 - j51_jasmin - General - Modules/Component Styling， 修改 Bottom-2 Background Color

切换到 Module Style Overrides，点击绿色的 + 号，Position 选择 Bottom -2B，然后下拉调节页脚区域的 Headings/Title Color（标题颜色）和 Text Color（文本颜色），修改好后点击左上角 保存并关闭

点击右上角博客名称访问主页下拉到底查看效果

添加菜单

点击左侧菜单栏 - 菜单管理 -Main Menu，点击新建添加新菜单

添加博客页

菜单项类型选择 文章管理 - Category Blog - Alternative

对于博客长度较长不好展示的，可以点击 插入 - 插入分隔符，实现折叠文章，通过点击按钮阅读原文

在博客布局 - Item Layout 修改图片文字布局关系

在前台风格 - General - Typography Styling 修改按钮配色

添加关于页

菜单项类型选择 菜单链接 - 菜单项分区标题

点击左上角 保存&新建

右上角点击博客标题访问主页查看

接着添加 关于页 的次级菜单

选择 文章管理 - 单篇文章

选择次级菜单对应的文章，上级菜单项选择 关于，左上角点击 保存&新建，同样重复操作添加其他次级菜单

菜单添加完毕后，点击左侧菜单栏 系统设置 - 前台风格 - j51_jasmine - General - Menu，根据需要修改 Menu Item Color （主菜单配色），默认是 #2e2e2e（纯黑），这里修改为 #ffffff（白色）,修改后点击左上角 保存并关闭

右上角点击博客名称访问主页查看修改效果

添加页脚

新建 自定义 模块，修改名称，插入 Logo 图片 并链接门户地址，关闭 模块名称 显示，模块位置选择 base-2a，菜单分配默认 在全部页面显示，保存并复制

接下来同样修改名称和内容，打开 模块名称 显示，模块位置选择 base-2b，确认状态 已发布，菜单分配默认 在全部页面显示，保存并复制

继续修改名称和内容，添加更多信息

接下来在页脚添加菜单，点击左侧菜单栏 菜单管理 - 菜单管理 - 新建

填入 名称 和 菜单类型（这里翻译有误，应该是菜单ID），然后点击 保存&新建 继续添加其他菜单

点击左侧菜单栏 菜单管理 - MainMenu，勾选 服务菜单 下的所有次级菜单，点击 操作 - 批处理

勾选 复制，然后在 选择 移动/复制 后所属的菜单或上级菜单项 中选择我们的服务 - 添加到此菜单，点击执行

接着通过模块将这个菜单添加到页脚，点击左侧菜单栏 内容管理 - 前台模块 - 新建，下滑找到并点击 菜单显示 旁的加号新建一个模块，填写名称，选择菜单为 我们的服务，选择模块位置为 base -2c，确保状态是已发布，点击保存

接下来重复操作添加 我们的作品 ，模块位置选择 bae-2d，完成后点击右上角博客名称访问主页下拉到对查看效果

接下来同样修改背景色，点击左侧菜单栏 系统设置 - 前台风格 - j51_jasmin - General - Modules/Component Styling， 修改 Base-2 Background Color

点击 Copyright，修改版权信息，然后切回 Modules/Component Styling 下拉到底，修改 Footer Background Color（页脚背景色）

点击右上角博客名称访问主页下拉到底查看修改效果

插件应用

作品集

SP Simple Portfolio 安装地址：点击访问 ，点击 Download 下载

点击左侧菜单栏 系统设置 - 拓展安装，将下载得到的压缩包拖到页面中央进行安装

点击左侧菜单栏 系统设置 - SP Simple Portfolio，在 Categories 添加 作品集 分类

在 Tags 添加需要的标签

在主目录下新建 作品集 菜单，菜单项类型选择 SP Simple Portfolio - Default

点击 SP Simple Portfolio Settings，选择方才建立的 作品集 分类，然后左上角点击保存

点击左上角博客名称访问主页查看修改效果，这时因为还没有添加作品标签下还是空的

点击左侧菜单栏 系统设置 - 前台风格 - j51_jasmine - General - Layout Options 根据排版需要修改 Template Width（容器宽度），默认是1180，这里改为1300，修改后左上角点击 保存并关闭

点击左侧菜单栏 - 组件设置 - SP Simple Portfolio - Items ，点击 新建 添加作品照片

输入名称，选择图片，然后选择 Tags（便签）和 Category（分类）并记得在下方填写 Description（简述）然后点击 保存并关闭

点击右上角博客名称访问主页查看修改效果，接下来，可以继续重复操作添加更多的作品

点击右上角的 选项

将 从网址(URLs)中移除内容ID 关闭，作品集内的作品的网址就不会带上ID，这里还可以根据需要修改和重置 Thumbnail（预览图）

点击左侧菜单栏 菜单管理 - Main Menu，找到添加的 作品集 菜单，也可以直接在搜索框搜索

点击 作品集 - SP Simple Portfolio Setting，Category 选作品集，另外请根据需要修改作品集显示方式，可以通过保存然后点击右上角博客名称来查看修改效果

• Show Filter 是否顶部标签

• Ordering 展示顺序

  • Order Ascending：ID升序

  • Order Descending：ID降序

  • Title Ascending：标题升序

  • Title Descending：标题降序

• Layout Settings 布局

  • Default 默认布局

  • Gallery style with space 带间距的画廊布局

  • Gallery style without space 紧凑型画廊布局

  • Gallery title with tag list 带标签的画廊布局

• Columns 展示列数

• Thumbnail Size 缩略图展示形状

  • Masonry 不规则网格

  • Square 方格

  • Rectangular 宽矩形

  • Tower 高矩形

• Popup Size 放大后展示形状

  • Default 原始大小

  • Square 方格

  • Rectangular 宽矩形

  • Tower 高矩形

• Items per page 每页展示数目

画廊

SP Easy Image Gallery 安装地址：点击访问 ，点击 Download 下载，安装步骤同上

点击左侧菜单栏 组件管理 - SP Easy Image Gallery - Categories -新建，添加画廊的分类

分类添加完毕后，点击 Albums - 新建，输入名称，选择分类，上传 Featured Image，然后左上角点击 保存

保存成功后，下方会出现 Upload Images 按钮，点击上传图片（支持多张同时上传）

上传完成后，可以编辑和删除，并支持拖动改变展示顺序，编辑好后左上角点击 保存并关闭，继续重复操作为所有的分类都添加上相册

接下来需要把添加的相册插入到作品集中去，这会用到 Joomla 核心功能 模块，点击左侧菜单栏 内容管理 - 前台模块，这里可以看到插件默认添加了模块

点击 SP Easy Image Gallery Module 进行编辑，修改 名称，选择对应的 Album（相册），然后在 模块位置 的输入框输入任意字符回车添加模块的位置ID，并将 状态 修改为 已发布，另外可根据需要修改 Single Album Options

• Limit 显示图片数

• Album Layout 布局

• Columns 主机端显示列数

• Columns（Table）平板端显示列数

• Columns（Mobile）手机端显示列数

• Gutter Width 主机端显示间距

• Gutter Width（Table）平板端显示间距

• Gutter Width（Mobile）手机端显示间距

最后点击 保存并关闭

点击左侧菜单栏 组件设置 - SP Simple Portfolio，点击希望插入相册的作品

点击 插入 - 插入模块，选择方才编辑过的模块，将其添加到 Description 中点击左上角 保存并关闭

点击右上角博客名称访问主页，点击作品集中添加相册的作品查看效果

点击左侧菜单栏 系统设置 - 前台风格 - j51_jasmin - Custom CSS，复制粘贴以下代码然后点击 保存并关闭

.sp-simpleportfolio .sp-simpleportfolio-description {
    width: 100% !important;
}

.sp-simpleportfolio .sp-simpleportfolio-meta {
    padding-left: 0px !important;
}

.sp-simpleportfolio .sp-simpleportfolio-meta {
    display: none;
}

点击右上角博客名称访问主页的作品集中的添加相册的作品查看修改效果

找到方才添加的模块，点击 保存&复制，复相同操作给所有的作品都添加画廊，另外还可以将相册添加到作品集的次级菜方便查看，相册菜单的菜单项类型选择如下

评论

Comment extension for Joomla 安装地址：点击访问 ，点击 Download 下载，注意需要先注册验证邮箱登录，因为该插件大小超过了 X10 2M 的限制，需要同风格模板一样通过站内目录安装

安装好后点击 Continue with installation，等待安装完成点击 Next，插件默认全选点击 Install Addons - Next - Launch Backend

安装好后显示如下，默认每篇博文底部都会显示评论插件，接下来讲解如何选择性打开它

左侧菜单栏点击 Back，点击文章管理，选择一篇文章比如主页，点击 插入 - Komento Disable 就可在该页面去掉评论

表单

Convert Forms 安装地址：点击访问 ，选择 Convert Forms Free 点击 Download 下载，注意需要先注册验证邮箱登录，安装步骤同上

安装完成后点击左侧 组件设置 - Convert Forms - Dashboad，点击 New Form 添加新表单

这里我们自己添加即可，点击选择 Blank Form

点击 Add Field - Heading 添加一个表头，修改 Field （名称）和 Help Text（提示），新添加的表默认在最底部，点击 AllFields 标签拖动其到顶部

点击 Full Name ，修改 Field Name 为 firstname， Field Label 为 姓，接着下滑找到并点击 Show Layouts，选择第一个的左半边

然后上滑切换到 AllFields 点击 姓 右侧首个图标 Duplicate field 复制，修改 Field Name 为 lastname，Field Label 为 名

接着上滑点击 Add Field - Textarea，修改 Field Label 和 Help Text，并取消 Required Field 的选择，因为这不是必填项

然后点击 All Field 标签，同样操作修改 Email address 和 Submit，然后切回 All Field 标签，调整各表到合适位置

接着点击左侧菜单栏的齿轮 - Email Notification 打开注册通知，然后点击顶部导航栏中间修改表单名称后，点击保存后关闭表单

接着点击左侧菜单栏 菜单管理 - Main Menu，添加 联系我们 菜单，菜单项类型选择 Convert Forms - Form

切换到 Options 标签选择方才添加的表单，然后左上角点击保存并关闭

右上角点击博客名称访问主页点击 联系我们 菜单查看效果，表单位置默认是居左的，下面通过模块来解决这个布局问题

然后点击左侧菜单栏 内容管理 - 前台模块 - 新建

下滑找到并点击 自定义 旁的加号新建一个模块，填入名称并点击 插入 - 插入图片，将上传的图片通过拉拽调节大小，关闭模块名称显示，选择模块位置为 Sidecol-1A

切换到 菜单分配 标签，选择 在选择的页面显示，仅勾选 联系我们，然后左上角点击 保存并关闭

右上角点击博客名称访问主页点击 联系我们 菜单查看修改后的效果

轮播

在素材包找到 mod_j51layerslideshow 模块直接拖动上传

点击左侧菜单栏 - 前台模块 - J51_LayerSlideshow

模块位置选择 Showcase 1a，关闭模块名称显示，状态改为 已发布

切换标签到 菜单分配，设置为 在选择的页面显示，仅勾选 主页

切换标签到 General Settings，根据需要调节 Max Height（图片显示最大高度），默认值600，这里修改为1000。同时打开 Autoplay Transitions（自动轮播）

切换标签到 image(s)，点击选择上传图片，这里建议先新建目录，然后进入目录上传图片，方便图片的管理。上传完毕后，点击选中后点击加号继续逐张添加，完成后点击 保存并关闭

点击右上角博客名称访问主页查看效果

进度

在素材包找到 mod_j51progress 模块直接拖动上传

点击左侧菜单栏 - 前台模块 - J51_Progress

关闭显示 模块名称，模块位置选择 ContentBottom-A，状态改为 已发布

切换标签到 菜单分配，设置为 在选择的页面显示，仅勾选 主页

切换标签到 General Settings，修改 Number of Columns（每列显示数）和 Stroke （进度条粗细度），另外还可修改 Title Color（标题）、Value Color（数值颜色）和 Bar Color（进度条颜色）来调节配色

切换标签到 Progress Bars(s)，输入 Item Title （项目）和 Item Value（进度），然后点击加号添加更多，完成后点击 保存并关闭

点击右上角博客名称访问主页查看效果

近况

在素材包找到 mod_j51news 模块直接拖动上传

点击左侧菜单栏 - 前台模块 - J51_News

关闭显示 模块名称，模块位置选择 Bottom-1A，状态改为 已发布

切换标签到 菜单分配，设置为 在选择的页面显示，仅勾选 主页

切换到 General Settings 标签，选择要展示近况的分类，下拉可设置展示的范围，这里关闭 Display Date（显示发布日期）、Display Category（显示分类）

切换到 Layout Settings 标签，修改 Columns（每行显示列数）和 Layout Type（布局样式），打开 Autoplay Transition，Autoplay Delay 默认3000，这里改为5000。

设置完成后点击 保存并关闭，点击右上角博客名称访问主页查看效果

接下来新建一个模块作为近况的标题，点击左侧菜单栏 内容管理 - 前台模块 - 新建

下滑找到并点击 自定义 旁的加号新建一个模块，填写名称，并在下方设置好标题，关闭模块名称显示，选择模块位置为 Bottom -1A

切换标签到 菜单分配，设置为 在选择的页面显示，仅勾选 主页 ，然后点击 保存并关闭

点击右上角博客名称访问主页查看效果

接下来调整标题和近况的位置，选择 按升序排列，然后点击选择框后的三点拖动 了解更多，使其置于 j51_News 之上

再次点击右上角博客名称访问主页查看

接下来，调节近况区域的背景色，点击左侧菜单栏 系统设置 - 前台风格 - j51_jasmine - General - Modules/Component Styling，下滑找到 Bottom-2 Background Color 稍微调深其色调，使其与主体区域区分开来然后点击保存

点击右上角博客名称访问主页查看修改后的效果，修改合适后点击关闭

函数

在素材包找到 mod_j51caltoaction 模块，直接拖动上传

点击左侧菜单栏 - 前台模块 - J51_CallToAction

关闭显示 模块名称，模块位置选择 Base-1A，状态改为 已发布

切换标签到 菜单分配，设置为 在全部页面显示

切换标签到 Text 标签，输入文字提示内容，注意输入框右下角可以拖动，拖动后可以显示全部菜单

切换到 Buttons 标签，修改 Button Text（按钮文本），Link Type 选 Menu Item 并选择 之前创建好的 联系我们 菜单

接下来，调节背景色，点击左侧菜单栏 系统设置 - 前台风格 - j51_jasmine - General - Modules/Component Styling，下滑找到 Base-1 Background Color 然后点击保存

点击右上角博客名称访问主页下拉到底查看效果

参考链接

• [**✅ How to Make a Website Using Joomla 4 or Joomla 5 - Beginners Tutorial

  Localhost**](https://youtu.be/WcApXG5zSjA)

，