引言
在时光的长河中，昔日才子曹植于七步之内吟成千古绝唱，其才华横溢、思维敏捷令人叹为观止。而今，星移斗转，岁月如梭，我们站在了2025年的光辉之下，见证着科技与智慧的交融，迎来了一场场新的变革。
今日，我不以诗词争辉，却欲效仿先贤，在区区七步之间，借力于现代科技之巅峰------EdgeOne + EdgeOne Pages + DeepSeek R1，完成一场深度对话。
这不仅是对古人智慧的一种致敬，更是展现了人类文明不断追求进步、超越自我的精神风貌。让我通过AI技术构建起心灵沟通的桥梁，将世界紧密相连。
本文将以DeepSeek R1 为模版，借力沿技术为核心驱动力EdgeOne，在EdgeOne Pages上面部署前端开发和部署平台，为我们开发者快速构建、部署静态站点和无服务器应用。
实践
EdgeOne Pages 的入门非常简单！只需进入 Pages 控制台，连接您的 Git 仓库，选择我们的模板或您自己的 Git 项目，然后点击部署。
官方网址：console.cloud.tencent.com/edgeone/
操作详细文档直通车：edgeone.cloud.tencent.com/
步骤1 登录到EdgeOne控制台创建项目
1、在浏览器地址栏输入控制台地址（console.cloud.tencent.com/edgeone/）；（...
2、找到Pages，目前Pages还在Beta测试版；（参见2）
3、默认情况下，Pages下面是没有项目的，点击"创建项目"即可；（参见3）
步骤2 创建项目后直接选择DeepSeek模版
1、点击"创建项目 "，跳转到创建项目页面，此页面包含选择Git仓库 和选择模版 两个模块，直接在选择模版中选择如图所示的 DeepSeek-R1 for Edge 即可。（参见4）
步骤3 授权代码托管平台并配置项目
1、选择完成模版后，选择代码托管平台，此处我选择了Gitee作为本次演示的代码托管平台（参见5），由于我之前并没有给予授权，所以本次需要先授权，授权完成之后可以自动将代码托管过去。
2、我此处选择了默认的配置，仓库实际选择了"公共"仓库，实际截图时是私有。（参见6）
步骤4 执行创建部署并初始化项目
1、一切配置信息都准备完成后，点击"立即创建"按钮（参见9），平台开始一系列的初始化动作，例如将模版同步克隆到代码托管平台（参见10）。
步骤5 构建部署项目
1、初始化完成之后，跳转到构建部署页面，可以在页面看到完整的初始化、构建部署的过程（参见11）。在初始化完成之后，我们可以去代码托管库确认下是否已经有了代码（参见12）。
步骤6 部署预览
1、构建部署的速度还是相当的快，当页面撒花🎉🎉🎉欢迎时，便是成功之日。（参见13）
2、部署完成之后，将页面向上滑动一下，来到预览按钮处（参见14），点击预览按钮就可以访问我们成功部署的页面地址啦。（参见15）
3、演示时使用的是临时域名，但也足够我玩耍的了。如果你有自己的域名，也可以配置中配置上属于自己的域名，配置好之后才真正属于你的。
在 Pages 中，域名管理是确保您的网站能够被用户顺利访问的重要环节。Pages 提供了多种域名，包括项目域名，部署域名和自定义域名。默认情况下，您的项目会获得一个基于 Pages 平台的子域名，方便您快速访问和分享。
步骤7 实践AI对话网站
1、在前面步骤完成之后，我们访问地址就可以在线快乐了。例如我输入一段文字"你好，请帮我生成一个麻将消消乐游戏的html页面"，响应速度很快出来了内容，内容包括参考信息、思考过程以及最终的答案。
2、在代码完成之后，还给出了详细的游戏规则，真是包容到了极致。
这个实现包含以下功能：
- 麻将牌消消乐核心玩法
- 三张相同牌匹配消除机制
- 辅助功能：
- 界面设计：
- 指南针和常见牌型：
- 周奖励机制：
要运行这个游戏，请将所有代码保存为.html文件，并在现代浏览器中打开。你可以通过点击任意三张相同的牌来消除它们，达成目标即可得分。
注意事项：
- 游戏逻辑需要根据实际情况进一步完善
- 可以添加更多麻将牌类型和图案
- 增加音效和更复杂的动画效果
- 支持保存游戏进度
附录上最终效果图
将代码拷贝到网页中就可以及时行乐啦。
附录上完整的代码
代码均为搭建后产生的，可以将其拷贝到HTML文件中，直接打开即可体验消消乐。
xml
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>麻将消消乐</title>
<style>
body {
font-family: '毛笔字体', Arial, sans-serif;
background-color: #E6E6FA;
}
.game-container {
width: 800px;
margin: 20px auto;
padding: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.game-panel {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 10px;
margin-bottom: 20px;
background-color: #FFE4C4;
padding: 10px;
border-radius: 5px;
}
.mahjong-tile {
width: 60px;
height: 80px;
background-color: #BEBEBE;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
cursor: pointer;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.selected {
background-color: #FFD700;
}
.score-board {
text-align: center;
margin-bottom: 20px;
}
.menu-buttons {
margin-top: 20px;
display: flex;
gap: 10px;
justify-content: center;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
}
.hand-area {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="game-container">
<h1>麻将消消乐</h1>
<div class="score-board">
<p>得分：150</p>
<p>剩余牌数：24</p>
</div>
<div class="hand-area">
<div class="mahjong-tile">中</div>
<div class="mahjong-tile">发</div>
<div class="mahjong-tile">白</div>
</div>
<div class="game-panel" id="board"></div>
<div class="menu-buttons">
<button onclick="removeThree()">移除三张</button>
<button onclick="useBomb()">使用炸彈</button>
<button onclick="shuffleBoard()">随机打乱</button>
<button onclick="viewRewards()">查看奖励</button>
</div>
<h3>每周奖励领取：</h3>
<p id="weekly-reward">已累计欢乐豆：12345</p>
</div>
<script>
let selectedTiles = [];
const mahjongTiles = ['东', '南', '西', '北', '中', '发', '白'];
const board = document.getElementById('board');
// 初始化游戏面板
function initGame() {
const tiles = [];
for (let i = 0; i < 32; i++) {
tiles.push(mahjongTiles[i % 7]);
}
shuffle(tiles);
tiles.forEach(tile => {
const tileElement = createTile(tile);
board.appendChild(tileElement);
});
}
// 创建麻将牌元素
function createTile(value) {
const tile = document.createElement('div');
tile.className = 'mahjong-tile';
tile.textContent = value;
tile.onclick = () => handleTileClick(tile);
return tile;
}
// 处理扑克点击事件
function handleTileClick(tile) {
if (selectedTiles.length >= 3) {
selectedTiles.forEach(t => t.classList.remove('selected'));
selectedTiles = [];
}
if (!selectedTiles.includes(tile)) {
selectedTiles.push(tile);
tile.classList.add('selected');
// 检查是否完成三张匹配
if (selectedTiles.length === 3) {
const values = selectedTiles.map(t => t.textContent);
if (values.every(v => v === values[0])) {
clearSelected();
updateScore(150);
}
}
}
}
// 更新得分
function updateScore(value) {
document.querySelector('.score-board p:first-child').textContent =
`积分：${parseInt(document.querySelector('.score-board p:first-child').textContent.split(' ')[1]) + value}`;
selectedTiles.forEach(t => t.remove());
initGame();
}
// 通用函数
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
// 辅助功能实现
function clearSelected() {
selectedTiles.forEach(t => t.classList.remove('selected'));
selectedTiles = [];
}
// 移除前三张
function removeThree() {
const tiles = board.getElementsByClassName('mahjong-tile');
for (let i = 0; i < 3; i++) {
if (tiles[i]) tiles[i].remove();
}
initGame();
}
// 使用炸彈
function useBomb() {
document.querySelectorAll('. mahjong-tile:contains("中")').forEach(t => t.remove());
initGame();
}
// 随机打乱
function shuffleBoard() {
const tiles = Array.from(board.children);
shuffle(tiles);
board.innerHTML = '';
tiles.forEach(tile => board.appendChild(tile));
}
// 查看奖励
function viewRewards() {
alert(`当前累计欢乐豆：${parseInt(document.getElementById('weekly-reward').textContent.split(' ')[2])}`);
}
initGame();
</script>
</body>
</html>总结
时代的变化，技术的革新，白驹过隙之间便搞定搭建网站，可谓是零成本参与其中。总的说来，其实很简单，在EdgeOne控制台选择模型模版，填写项目信息和代码托管平台信息，直接构建部署即可。总结下就是三步：
- 1 选平台选模型模版
- 2 填写项目信息
- 3 构建部署