指南

介绍

什么是 DiyWeb？

DiyWeb 是基于 Laravel 11 构建的可视化全栈开发平台，专为独立开发者和中小团队设计。通过 Blade 模板引擎实现编辑即所得的开发体验，主要解决以下核心需求：

核心功能：

  • 🖌️ 可视化搭建：通过点击组件或使用创建页面按钮快速构建页面
  • ⚡ 实时协作：开发模式下的修改即时同步到代码层
  • 🛒 开箱即用：集成用户系统、支付模块等商业要素

为什么选择 DiyWeb？

🎯 独特价值

  • 零代码可视化：通过点击组件和页面创建按钮，无需编码即可搭建个性化网站
  • 智能布局引擎：自动响应式设计让页面适配所有设备
  • 商业闭环设计：预置 Stripe 支付、多货币支持、订单管理等商业要素，节省 200+ 小时集成时间

🏆 用户场景

  • 个人用户：3 步创建个人博客/作品集
  • 商家用户：5 分钟搭建电商页面

📊 数据验证

  • 非技术人员平均 2 小时创建完整网站

⚙️ 技术支撑

  • 可视化工作流：悬停编辑 + 实时预览 + 动态创建页面
  • 模板市场：100+ 专业模板随时套用

快速开始

环境依赖

  • PHP 8.2+
  • MySQL

获取 DiyWeb 代码

  1. 在 DiyWeb 官网下单购买

https://www.diy-web.com/pages/pricing

  1. 支付完成后，进入订单中心

https://www.diy-web.com/my-orders

  1. 点击下载按钮，下载代码

image

安装

为确保你能顺利在本地运行和二次开发 DiyWeb，请在你的电脑上安装必要的环境。

  1. 解压代码

  2. 启动项目

在终端中进入当前项目根目录后，执行以下命令启动项目：

php -S 127.0.0.1:8008 -t public
  1. 一键安装

访问 http://127.0.0.1:8008 ，按照提示完成安装。

image

第三方服务配置

在使用社交登录和支付功能前，你需要在相应平台创建 OAuth 应用或获取 API 密钥。请参考下表获取各个服务的配置说明。

服务配置入口链接参数名称说明
GitHubGitHub 开发者设置GITHUB_CLIENT_ID、GITHUB_CLIENT_SECRET、GITHUB_REDIRECT_URI在 GitHub 开发者设置页面创建 OAuth 应用，获取 Client ID、Client Secret，并设置回调地址。
GoogleGoogle 控制台 - 凭据GOOGLE_CLIENT_ID、GOOGLE_CLIENT_SECRET、GOOGLE_REDIRECT_URI在 Google Cloud Platform 的凭据页面创建 OAuth 应用，获取 Client ID、Client Secret，并设置回调 URI。
StripeStripe DashboardSTRIPE_KEY、STRIPE_SECRET、STRIPE_WEBHOOK_SECRET在 Stripe Dashboard 获取 Publishable Key、Secret Key，并在 Webhook 设置中获取签名密钥。

在你的 .env 文件中或者 admin 的 Settings 添加如下配置示例：

# GitHub 配置示例
GITHUB_CLIENT_ID=your_github_client_id_here
GITHUB_CLIENT_SECRET=your_github_client_secret_here
GITHUB_REDIRECT_URI=https://yourdomain.com/login/github/callback

# Google 配置示例
GOOGLE_CLIENT_ID=your_google_client_id_here
GOOGLE_CLIENT_SECRET=your_google_client_secret_here
GOOGLE_REDIRECT_URI=https://yourdomain.com/login/google/callback

# Stripe 配置示例
STRIPE_KEY=your_stripe_publishable_key_here
STRIPE_SECRET=your_stripe_secret_key_here
STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret_here

将上述示例中的 your_github_client_id_here、your_google_client_id_here、your_stripe_publishable_key_here 等替换为你从对应平台获取的实际值，即可完成相关第三方服务的配置。

管理员邮箱配置

有三种方式修改管理员邮箱：

方式一： 在 .env 文件中添加 ADMIN_EMAIL 配置：

ADMIN_EMAIL=admin@example.com

方式二： 在 admin 系统设置中添加管理员邮箱：

  1. 使用管理员账号登录后台
  2. 进入 Settings → Application Settings
  3. 找到 ADMIN_EMAILS 配置项
  4. 输入新的邮箱（多个用英文逗号分隔）
  5. 点击 Save Changes 保存

方式三： 在一键安装过程中添加管理员邮箱：

在 http://yourdomain.com/install/application 页面，找到 ADMIN_EMAILS 配置项，输入新的邮箱（多个用英文逗号分隔）

使用

悬停编辑

工具按钮

image

1. Theme Colors

功能：设置网站主题颜色

使用场景：

  • 自定义网站颜色
  • 提升品牌识别度

2. Create Page

功能：创建新页面

使用场景：

  • 添加新页面
  • 组织网站结构

3. My Pages

功能：查看所有页面

使用场景：

  • 管理网站页面
  • 快速导航到特定页面

4. My Components

功能：查看所有组件

使用场景：

  • 管理网站组件
  • 快速插入组件

5. Edit Page

功能：编辑页面内容

使用场景：

  • 修改页面内容
  • 调整页面布局

6. Edit Header

功能：编辑头部内容

使用场景：

  • 修改头部内容
  • 调整头部布局

7. Edit Footer

功能：编辑底部内容

使用场景：

  • 修改底部内容
  • 调整底部布局

8. Insert Script

功能：在页面尾部插入第三方 JavaScript 脚本（如 Google Analytics、ChatGPT 插件等）

使用场景：

  • 添加网站统计代码
  • 集成客服聊天工具
  • 插入 SEO 优化脚本

示例代码：

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

代码编辑器

用法：点击 + 号按钮，可以选择内置模版组件快速创建页面

image

高级用法

在代码编辑器中构建内置模板

创建一个 hello-diyweb 内置模板步骤：

  1. 在 resources/views/components/insertable 目录下创建一个 hello-diyweb.blade.php 文件

  2. 在 hello-diyweb.blade.php 文件中编写模板代码

<div>
    hello diyweb
</div>

3 在代码编辑器点击 + 号按钮，就可以选择你刚刚添加的 hello-diyweb 内置模板

创建可编辑组件并将其嵌入页面

组件属性说明

属性名称类型默认值说明示例用法
idstring必填组件唯一标识符，用于内容存储和定位id="component-hero-title"
tagstringdiv渲染的HTML标签tag="h2"
filestringnull组件文件路径（相对于resources/views目录）file="views/components/editable/hero-title.blade.php"
previewEnabledstringtrue是否启用实时预览（"true"/"false"）previewEnabled="false"
typestringcomponent组件类型（'component' 普通组件 / 'page' 页面组件）type="page"
defaultClassstringeditable默认CSS类名defaultClass="special-editable"
editableboolapp()->environment('local')是否启用编辑模式（通常自动检测环境）:editable="true"
  1. 在 resources/views/components/editable 目录下创建 diyweb-component.blade.php，参考现有组件结构：
<x-editable 
    id="component-diyweb-example"
    tag="div"
    file="views/components/editable/diyweb-example.blade.php"
    {{ $attributes }}
>
    <!-- 组件内容 -->
    <div class="p-6 transition-all duration-300 bg-white rounded-lg shadow-md dark:bg-gray-800 hover:shadow-xl">
        <h3 class="text-xl font-semibold text-secondary-900 dark:text-white">
            <span class="text-transparent bg-gradient-to-r from-primary-400 via-primary-500 to-primary-700 bg-clip-text animate-gradient-x">
                自定义组件标题
            </span>
        </h3>
        <p class="mt-4 text-secondary-600 dark:text-gray-300">
            这是你的自定义可编辑内容区域
        </p>
    </div>
</x-editable>
  1. 在页面中嵌入组件
<x-editable.diyweb-example />

3 当鼠标悬停在组件上时，会显示编辑按钮，点击编辑按钮，即可进入编辑模式

部署

请参考 Laravel 11.x 部署文档 获取详细部署步骤。

在部署到生产环境时，请注意以下几点：

  • 环境设置
    在 admin 系统设置中，将 APP_ENV 设置为 production。这样一来，所有实时编辑相关的功能都会关闭，从而确保生产环境的安全性。

  • 调试模式
    确保在生产环境中关闭调试（设置 APP_DEBUG=false），防止敏感信息泄露。

  • 安全防护
    建议配置 HTTPS、正确设置防火墙和权限，保障整个应用的安全运行。

这些步骤有助于保障您的 Laravel 项目在生产环境中能够高效、安全地运行。

Last Updated:
Contributors: yxx