LeleXTheme - Typecho主题

主题详细介绍 ?

LeleXTheme 是一款现代化、功能丰富的 Typecho 主题，由独立开发者乐乐精心设计和开发。该主题完美还原了 RankLab 页面的设计风格，提供了丰富的自定义选项和模块化的布局，让您能够轻松打造专业级网站。

主题架构 ?️

LeleXTheme 采用了模块化的架构设计，主要包含以下核心组件：

LeleXTheme/
├── assets/                # 静态资源文件夹
│   ├── css/               # CSS 样式文件
│   │   ├── bootstrap.min.css   # Bootstrap 框架
│   │   ├── animate.css         # 动画效果
│   │   ├── owl.carousel.min.css # 轮播组件
│   │   ├── style.css           # 主题主样式
│   │   └── ...                 # 其他样式文件
│   ├── js/                # JavaScript 功能文件
│   │   ├── theme.js            # 主题核心脚本
│   │   ├── wechat-share.js     # 微信分享功能
│   │   ├── scroll-up.js        # 返回顶部功能
│   │   └── ...                 # 其他脚本文件
│   ├── images/            # 图片资源
│   │   ├── home-1/            # 首页样式一图片
│   │   ├── home-2/            # 首页样式二图片
│   │   └── home-3/            # 首页样式三图片
│   └── templates/         # 模板组件
│       └── wechat-share-modal.php  # 微信分享弹窗
├── index.php              # 首页模板
├── header.php             # 头部模板
├── footer.php             # 底部模板
├── functions.php          # 主题功能函数
├── post.php               # 文章页模板
├── archive.php            # 归档页模板
└── ...                    # 其他模板文件

主题优势 ?

1. 专业的设计风格 ?

  • 完美还原 RankLab 页面的现代化设计
  • 精心调整的配色方案和排版
  • 流畅的动画效果和交互体验

2. 高度可定制 ⚙️

  • 超过 50 项可自定义的设置选项
  • 可视化的后台设置面板
  • 每个模块都可独立控制显示与隐藏

3. 性能优化 ⚡

  • 优化的代码结构，确保快速加载
  • 延迟加载图片资源
  • 精简的 CSS 和 JavaScript 文件

4. 响应式设计 ?

  • 完美适配手机、平板和桌面设备
  • 针对不同屏幕尺寸优化的布局
  • 移动端触摸友好的操作体验

5. SEO 友好 ?

  • 语义化 HTML 结构
  • 优化的页面加载速度
  • 规范的 Meta 标签生成

核心功能模块 ?️

1. Hero 区域

Hero 区域是访问者第一眼看到的部分，包含以下元素：

  • 主标题和副标题（可自定义）
  • 引人注目的图片展示区
  • 行动号召按钮（可自定义文字和链接）
  • 动画效果的装饰元素

2. 品牌展示区 ?

品牌区域可以展示您的合作伙伴或客户的品牌标志，最多支持 5 个品牌展示，自动轮播效果。

3. 服务展示区 ?️

服务区可以展示您提供的服务或产品：

  • 主标题和副标题可自定义
  • 支持 3 个服务项目展示
  • 每个服务项目包含图标、标题和描述
  • 鼠标悬停效果增强用户体验

4. 视频展示功能 ?

支持两种类型的视频展示：

  • 本地 MP4 视频：直接上传视频文件并设置链接
  • YouTube 视频：只需设置 YouTube 视频链接即可自动嵌入

视频通过漂亮的模态框弹窗播放，增强用户体验。

5. About 区域 ?

About 区域用于展示您的团队或公司信息：

  • 主标题和副标题可自定义
  • 详细介绍文本
  • 两张宣传图片
  • 优势列表（支持 HTML 格式）
  • 数字统计展示（支持两组数据）

6. 跑马灯效果 ?

跑马灯区域可以持续展示您的品牌信息：

  • 支持多组图标和文字内容
  • 自动持续滚动效果
  • 统一的视觉风格

7. 工作流程展示 ?

工作流程区域用于展示您的服务流程或工作方法：

  • 主标题和副标题可自定义
  • 支持多个流程步骤
  • 每个步骤包含图标、标题和描述
  • 直观的流程指引设计

8. 推荐文章展示 ?

可以在首页突出展示您的重点文章：

  • 通过文章 ID 指定要展示的文章
  • 主标题和副标题可自定义
  • 美观的卡片式布局展示

9. 客户评价展示 ?

客户评价区域可以展示您的客户反馈：

  • 主标题和副标题可自定义
  • 支持多条客户评价
  • 每条评价包含头像、姓名、职位和内容
  • 自动轮播效果

10. 博客文章展示 ?

博客区域可以展示您的最新文章：

  • 主标题和副标题可自定义
  • 自动展示最新发布的文章
  • "查看更多"按钮可自定义链接
  • 缩略图、标题、发布日期显示

11. 微信分享功能 ?

独特的微信分享功能，让访问者可以轻松将您的内容分享到微信：

  • 点击分享按钮自动生成二维码
  • 美观的弹窗设计
  • 适配移动设备

12. 返回顶部按钮 ⬆️

  • 带有阅读进度指示的返回顶部按钮
  • 平滑滚动效果
  • 响应式设计，适配各种设备

模板页面 ?

1. 首页模板 (index.php)

完整的企业官网风格首页，包含上述所有功能模块。

2. 博客网格页面 (page-bloggrid.php)

专为博客展示设计的页面模板：

  • 网格式布局展示博客文章
  • 自动分页功能，每页显示 9 篇文章
  • 显示文章发布日期、作者和评论数
  • 响应式设计，适配各种设备尺寸

使用方法：

  1. 在 Typecho 后台创建一个新页面
  2. 在右侧"自定义模板"下拉菜单中选择"博客网格"
  3. 发布页面后即可通过该页面查看网格式博客列表

3. 文章页模板 (post.php)

专业的文章阅读页面：

  • 清晰的文章标题和元信息展示
  • 优化的阅读排版
  • 分享功能（包括微信分享）
  • 相关文章推荐
  • 评论区设计

4. 归档页模板 (archive.php)

归档页面用于展示分类、标签下的文章列表：

  • 清晰的分类/标签标题
  • 列表式文章展示
  • 分页功能
  • 面包屑导航

主题设置教程 ?

基础设置

在 Typecho 后台 → 外观 → 设置外观 中进行配置：

1. 站点信息设置

  • 站点 LOGO：上传您的网站 LOGO
  • 站点 Favicon：上传网站图标
  • 顶部导航按钮：设置导航栏上的行动按钮文字

2. 首页 Hero 区设置

  • 主标题：设置首页大标题
  • 副标题：设置首页副标题
  • Hero 区介绍文字：设置两行介绍文字
  • 按钮文字和链接：设置行动按钮

3. 品牌区设置

  • 品牌图片：最多设置 5 张合作品牌图片

功能模块设置

1. 服务区设置

  • 主标题和副标题：设置服务区的标题
  • 按钮文字和链接：设置服务区按钮
  • 服务内容：设置三个服务项（图标、标题、描述）

示例格式：

assets/images/home-1/service-icon1.png,SEO 优化,提供专业的搜索引擎优化服务，提升您网站的排名
assets/images/home-1/service-icon2.png,内容营销,高质量的内容创作和营销策略，吸引目标受众
assets/images/home-1/service-icon3.png,数据分析,深入的数据分析，为您的业务决策提供支持

2. 视频区设置

  • 缩略图：设置视频预览图片
  • 视频源地址：设置 MP4 视频地址或 YouTube 链接
  • 视频按钮文字：设置播放按钮文字

3. About 区设置

  • 标题和副标题：设置 About 区标题
  • 描述文本：设置 About 区详细介绍
  • 图片：设置两张宣传图片
  • 按钮文字和链接：设置 About 区按钮
  • 优势列表：设置优势项列表（支持 HTML）
  • 数字统计：设置两组数据统计展示

4. 跑马灯设置

每行一个跑马灯项，格式：图片URL,文字

示例：

assets/images/home-1/marquee-icon.png,专业的设计服务
assets/images/home-1/marquee-icon.png,优质的客户体验
assets/images/home-1/marquee-icon.png,高效的工作流程

5. 工作流程设置

  • 标题和副标题：设置工作流程区标题
  • 工作流程内容：设置工作流程步骤（图标、标题、描述）

示例格式：

assets/images/home-1/work-icon1.png,需求分析,详细了解客户需求，制定个性化方案
assets/images/home-1/work-icon2.png,设计实现,专业团队进行设计和实现
assets/images/home-1/work-icon3.png,测试交付,严格测试，确保质量后交付给客户

6. 推荐文章设置

  • 推荐文章 CID：设置要推荐的文章 ID，用英文逗号分隔
  • 标题和副标题：设置推荐文章区标题

7. 客户评价设置

  • 标题和副标题：设置客户评价区标题
  • 客户评价内容：设置客户评价（头像、姓名、职位、内容）

示例格式：

assets/images/home-1/testi-1.png,张先生,CEO,这是一个非常专业的团队，他们的服务超出了我的预期。
assets/images/home-1/testi-2.png,李女士,营销总监,与他们合作是一次非常愉快的经历，我会向所有朋友推荐。

8. 博客区设置

  • 标题和副标题：设置博客区标题
  • 按钮文字和链接：设置"查看更多"按钮

底部设置

  • 底部 LOGO：设置底部 LOGO
  • 底部描述：设置底部介绍文字
  • 底部版权信息：设置版权文字
  • 备案号：设置网站备案号
  • 公安备案号：设置公安备案号
  • 底部三栏：设置底部三个栏目的标题和内容（支持 HTML）

侧边栏设置

  • 广告位标题：设置侧边栏广告标题
  • 广告图片：设置侧边栏广告图片
  • 广告链接：设置侧边栏广告点击链接

适用场景 ?

LeleXTheme 主题适用于以下类型的网站：

  • 企业官网
  • 个人作品集
  • SEO 服务机构
  • 营销咨询公司
  • 数字营销博客
  • 企业服务展示

插件兼容性 ?

LeleXTheme 与以下 Typecho 插件完美兼容：

  • TeStore：Typecho 插件商店
  • Sitemap：自动生成网站地图
  • BaiduSubmit：百度链接提交
  • Links：友情链接管理
  • ViewsCounter：文章访问统计

浏览器兼容性 ?

  • Chrome 80+
  • Firefox 72+
  • Safari 13+
  • Edge 80+
  • Opera 66+
  • 移动端浏览器（iOS Safari、Android Chrome）

注意事项 ⚠️

  1. 主题依赖 jQuery、Bootstrap 等前端框架
  2. 推荐使用现代浏览器访问以获得最佳体验
  3. 部分功能需要在后台正确配置才能显示
  4. 图片资源建议上传到自己的服务器或使用图床
  5. 视频功能支持 MP4 和 YouTube，其他格式可能需要额外配置
  6. 首次安装后，请务必完成所有主题设置，以确保最佳显示效果

?‍? 关于作者

本插件由乐乐主题创作室开发，专注于Typecho主题定制、插件开发、网站优化与SEO服务。

购买主题

LeleXTheme.zip