单页管理

单页用于展示不需要频繁更新的独立内容，如关于我们、联系方式、服务条款等。

单页概述

什么是单页？

单页（Page）是独立于文章和分类之外的静态页面，通常用于展示网站的固定信息。

单页 vs 文章

特性	单页	文章
用途	固定内容	动态内容
更新频率	低	高
是否归档	否	是
是否有分类	否	是
是否有标签	否	是
时效性	长期有效	可能过时

常见单页类型

公司信息

关于我们
公司简介
团队介绍
发展历程

服务内容

产品介绍
服务项目
解决方案
价格方案

联系方式

联系我们
加入我们
商务合作
客服中心

法律条款

服务条款
隐私政策
免责声明
版权说明

其他

网站地图
友情链接
帮助中心
常见问题

创建单页

基本步骤

进入单页管理
```
内容管理 → 单页管理
```
添加单页
- 点击 添加单页 按钮

填写信息

页面标题：关于我们
URL 别名：about
所属站点：主站

编辑内容
- 使用富文本编辑器编写内容
- 添加图片、表格等元素
- 设置页面布局

SEO 设置

SEO 标题：关于我们 - CarefreeCMS
SEO 关键词：关于,公司简介,团队
SEO 描述：了解 CarefreeCMS 的发展历程和团队介绍

保存发布
- 预览效果
- 点击发布按钮

字段说明

基本信息

页面标题: 关于我们
URL 别名: about
所属站点: 主站
排序: 0
状态: 启用
是否显示在导航: 是

内容区域

页面内容:
  使用富文本编辑器编写
  支持图文混排
  可插入多媒体

高级设置

自定义模板: page/about.html
CSS 类名: page-about
页面类型: 普通页面
是否允许评论: 否

单页编辑

使用富文本编辑器

文本编辑

标题格式（H1-H6）
段落格式
文字样式（粗体、斜体、下划线）
字体和字号
颜色设置

插入元素

图片：上传或选择媒体库
视频：嵌入 URL 或上传
表格：插入表格并编辑
链接：内部链接或外部链接
代码：代码块
分割线：水平线

布局设置

文字对齐
缩进
行距
列表（有序/无序）

使用代码编辑器

切换到源代码模式：

<!DOCTYPE html>
<html>
<head>
  <title>关于我们</title>
  <style>
    .about-section {
      padding: 40px 0;
    }
    .team-member {
      display: inline-block;
      width: 200px;
      margin: 20px;
    }
  </style>
</head>
<body>
  <div class="about-section">
    <h1>关于 CarefreeCMS</h1>
    <p>CarefreeCMS 是一款现代化的内容管理系统...</p>
  </div>

  <div class="about-section">
    <h2>团队介绍</h2>
    <div class="team-member">
      <img src="/images/team/member1.jpg" alt="张三">
      <h3>张三</h3>
      <p>创始人 & CEO</p>
    </div>
  </div>
</body>
</html>

添加组件

联系表单

<form class="contact-form" action="/api/contact" method="POST">
  <input type="text" name="name" placeholder="姓名" required>
  <input type="email" name="email" placeholder="邮箱" required>
  <textarea name="message" placeholder="留言内容" required></textarea>
  <button type="submit">提交</button>
</form>

地图嵌入

<div class="map">
  <iframe
    src="https://maps.google.com/maps?q=北京&output=embed"
    width="100%"
    height="450"
    frameborder="0">
  </iframe>
</div>

视频播放器

<video controls width="100%">
  <source src="/videos/company-intro.mp4" type="video/mp4">
  您的浏览器不支持视频标签。
</video>

单页模板

默认模板

位置：backend/templates/default/page.html

___TWIG0___

___TWIG1______TWIG2______TWIG3___

___TWIG4___
<article class="page">
  <header class="page-header">
    <h1>___TWIG5___</h1>
    ___TWIG6___
      <p class="subtitle">___TWIG7___</p>
    ___TWIG8___
  </header>

  <div class="page-content">
    ___TWIG9___
  </div>

  ___TWIG10___
  <footer class="page-footer">
    <p>最后更新：___TWIG11___</p>
  </footer>
  ___TWIG12___
</article>
___TWIG13___

自定义模板

创建专用模板：templates/page/about.html

___TWIG0___

___TWIG1______TWIG2___ - ___TWIG3______TWIG4___

___TWIG5___
<div class="about-page">
  ___TWIG6___
  <section class="company-intro">
    <div class="container">
      <h1>___TWIG7___</h1>
      ___TWIG8___
    </div>
  </section>

  ___TWIG9___
  <section class="team-section">
    <div class="container">
      <h2>核心团队</h2>
      <div class="team-grid">
        ___TWIG10___
        <div class="team-member">
          <img src="___TWIG11___" alt="___TWIG12___">
          <h3>___TWIG13___</h3>
          <p class="position">___TWIG14___</p>
          <p class="bio">___TWIG15___</p>
        </div>
        ___TWIG16___
      </div>
    </div>
  </section>

  ___TWIG17___
  <section class="timeline-section">
    <div class="container">
      <h2>发展历程</h2>
      <div class="timeline">
        ___TWIG18___
        <div class="timeline-item">
          <div class="year">___TWIG19___</div>
          <div class="content">___TWIG20___</div>
        </div>
        ___TWIG21___
      </div>
    </div>
  </section>
</div>
___TWIG22___

模板变量

___TWIG0___
___TWIG1___           # 页面 ID
___TWIG2___        # 页面标题
___TWIG3___      # 页面内容
___TWIG4___        # URL 别名
___TWIG5___     # 模板文件

___TWIG6___
___TWIG7___    # SEO 标题
___TWIG8___ # SEO 关键词
___TWIG9___ # SEO 描述

___TWIG10___
___TWIG11___  # 创建时间
___TWIG12___  # 更新时间

___TWIG13___
___TWIG14___       # 状态
___TWIG15___   # 浏览次数

___TWIG16___
___TWIG17___         # 网站名称
___TWIG18___          # 网站 URL
___TWIG19___         # 网站 Logo

单页管理

查看单页列表

单页列表显示：

标题           别名     浏览量    状态    操作
关于我们       about    1,234    启用    编辑/删除
联系我们       contact  567      启用    编辑/删除
服务条款       terms    890      启用    编辑/删除
隐私政策       privacy  456      启用    编辑/删除

编辑单页

点击单页的编辑按钮
修改内容
预览效果
保存更改

删除单页

删除前确认

检查是否有外部链接
确认是否在导航菜单中
备份重要内容

删除操作

点击删除按钮
确认删除
单页移入回收站

恢复删除

进入回收站
找到被删除的单页
点击恢复按钮

排序管理

手动排序

修改排序值：
关于我们: 1
服务介绍: 2
联系我们: 3

拖拽排序

在列表中拖动单页
自动保存新顺序

导航菜单

添加到导航

方法一：编辑单页时设置

编辑单页
勾选 是否显示在导航
保存

方法二：导航管理中添加

进入 系统设置 → 导航菜单
添加菜单项
选择类型为单页
选择具体单页
保存

导航配置

{
  "name": "关于我们",
  "type": "page",
  "page_id": 1,
  "url": "/page/about",
  "target": "_self",
  "icon": "el-icon-info",
  "sort": 10,
  "visible": true
}

前台展示

<nav class="main-nav">
  <a href="/">首页</a>
  <a href="/page/about">关于我们</a>
  <a href="/category/blog">博客</a>
  <a href="/page/service">服务介绍</a>
  <a href="/page/contact">联系我们</a>
</nav>

特殊单页

关于我们页面

内容结构

1. 公司简介
   - Logo 和 Slogan
   - 公司使命和愿景
   - 核心价值观

2. 发展历程
   - 时间线展示
   - 重要里程碑
   - 获得荣誉

3. 团队介绍
   - 核心团队成员
   - 照片和职位
   - 个人简介

4. 联系方式
   - 公司地址
   - 联系电话
   - 电子邮箱

联系我们页面

必要元素

<!-- 联系信息 -->
<div class="contact-info">
  <div class="info-item">
    <i class="icon-location"></i>
    <h3>公司地址</h3>
    <p>北京市朝阳区xxx大厦xxx室</p>
  </div>
  <div class="info-item">
    <i class="icon-phone"></i>
    <h3>联系电话</h3>
    <p>400-123-4567</p>
  </div>
  <div class="info-item">
    <i class="icon-email"></i>
    <h3>电子邮箱</h3>
    <p>contact@example.com</p>
  </div>
</div>

<!-- 联系表单 -->
<form class="contact-form">
  <input type="text" placeholder="姓名" required>
  <input type="email" placeholder="邮箱" required>
  <input type="tel" placeholder="电话">
  <textarea placeholder="留言内容" required></textarea>
  <button type="submit">提交</button>
</form>

<!-- 地图 -->
<div class="map">
  <iframe src="地图嵌入代码"></iframe>
</div>

服务条款页面

内容要点

# 服务条款

## 1. 接受条款
使用本网站即表示您同意以下条款...

## 2. 服务说明
本网站提供的服务包括...

## 3. 用户责任
用户在使用本网站时应当...

## 4. 知识产权
本网站的内容受版权保护...

## 5. 免责声明
本网站不对以下情况负责...

## 6. 条款修改
我们保留随时修改这些条款的权利...

## 7. 联系我们
如有疑问，请联系...

最后更新：2024-01-15

隐私政策页面

内容框架

# 隐私政策

## 1. 信息收集
我们收集以下类型的信息：
- 个人信息（姓名、邮箱等）
- 使用数据（访问日志、Cookie）
- 设备信息

## 2. 信息使用
我们使用收集的信息用于：
- 提供和改进服务
- 发送通知和更新
- 数据分析

## 3. 信息共享
我们不会出售或出租您的个人信息...

## 4. 信息安全
我们采取合理措施保护您的信息...

## 5. Cookie 使用
本网站使用 Cookie 来...

## 6. 您的权利
您有权：
- 访问您的个人信息
- 更正或删除信息
- 撤回同意

## 7. 联系我们
隐私问题请联系：privacy@example.com

URL 配置

默认 URL

格式：/page/别名

示例：
/page/about       # 关于我们
/page/contact     # 联系我们
/page/privacy     # 隐私政策

自定义 URL

配置路由

// backend/route/app.php
Route::get('about', 'index/Page/about');
Route::get('contact', 'index/Page/contact');

Nginx 重写

location /about {
    rewrite ^/about$ /page/about last;
}

效果

/about    → /page/about
/contact  → /page/contact

前台访问

单页详情

URL 访问

https://www.example.com/page/about

页面元素

页面标题
面包屑导航
页面内容
相关链接
页脚信息

SEO 优化

TDK 设置

<title>关于我们 - CarefreeCMS</title>
<meta name="keywords" content="关于,公司简介,团队介绍">
<meta name="description" content="了解 CarefreeCMS 的发展历程和核心团队">

结构化数据

{
  "@context": "https://schema.org",
  "@type": "AboutPage",
  "name": "关于我们",
  "description": "CarefreeCMS 公司介绍页面",
  "url": "https://www.example.com/page/about"
}

API 接口

获取单页列表

请求

GET /api/pages

响应

{
  "code": 200,
  "data": [
    {
      "id": 1,
      "title": "关于我们",
      "alias": "about",
      "view_count": 1234
    }
  ]
}

获取单页详情

请求

GET /api/pages/about

响应

{
  "code": 200,
  "data": {
    "id": 1,
    "title": "关于我们",
    "content": "<p>页面内容...</p>",
    "seo_title": "关于我们 - CarefreeCMS",
    "create_time": "2024-01-01 00:00:00"
  }
}