maccms v10设计制作一个主机vps博客网页，自适应,直接使用最新tailwind，工程文档风（最利于阅读与SEO），先不使用标签，

先用文字数字代替内容，商家百科介绍可以用视频模型来写，文章模型用来写最新资讯，优惠促销，技术分享等等，

角色库用来写商家业务套餐介绍，明星库（演员库），搜索可以实现分类搜索（分为商家/资讯/明星三个分类搜索）。

设计制作一个主机vps博客网页，整个网站pc平板手机自适应模式，直接使用最新tailwind，工程文档风（最利于阅读与SEO），

护眼色配色，商家百科介绍，最新资讯，优惠促销，技术分享等等，搜索可以实现分类搜索（分为商家/资讯/明星三个分类搜索）。

引用其他文件夹文件时必须使用这个格式{include file="public/include"}、

、

内容先用文字和数字代替，不要使用标签

模板根目录下必须使用的文件和文件夹

js

mages

css

html

 └─public

 │   │─include.html    全站公共引入文件 引入js、css样式，还有系统JS变量

 │   │─head.html       全站头部

 │   │─foot.html       全站尾部

 │   │─jump.html       跳转提示页模板     

 │   │─msg.html        错误提示页模板

 │   │─paging.html     分页样式模板

 │   │─digg.html       顶踩样式模板

 │   │─score.html      普通评分样式模板

 │   │─star.html       星星评分样式模板

 │   │─verify.html     搜索验证模板

 └─comment

 │   │─index.html    评论页

 │   │─ajax.html      评论页

 └─gbook

 │   │─index.html       留言本

 │   │─report.html      报错页面

 └─index

 │   │─index.html     首页

 └─map

 │   │─rss.html    rss

 │   │─baidu.html   百度sitemap

 │   │─google.html  谷歌sitemap

 └─topic

 │   │─index.html   专题首页

 │   │─detail.html  专题详情页

 └─art

 │   │─index.html   专题首页

 │   │─confirm.html     确认支付积分页面

 │   │─detail.html      文章内容页

 │   │─detail_pwd.html      验证密码页

 │   │─rss.html         文章内容rss

 │   │─search.html      文章搜索页

 │   │─type.html        文章分类页

 │   │─show.html        文章分类筛选页

 └─vod

 │   │─confirm.html     确认支付积分页面

 │   │─copyright.html      版权提示和跳转

 │   │─detail.html      视频内容页

 │   │─detail_pwd.html      验证密码页

 │   │─rss.html         视频内容rss

 │   │─play.html        视频播放页

 │   │─player.html      试看页面播放页

 │   │─player_pwd.html      验证密码页

 │   │─down.html        视频下载页

 │   │─downer_pwd.html      验证密码页

 │   │─search.html      视频搜索页面

 │   │─type.html        视频分类页面

 │   │─show.html        视频分类筛选页

 │   │─plot.html        视频分集剧情列表

 └─user

 │   │─ajax_info.html   用户弹出层登录详情

 │   │─ajax_login.html  用户弹出层登录界面

 │   │─buy.html         用户中心-在线充值

 │   │─cards.html       用户中心-充值卡记录

 │   │─cash.html       用户中心-提现记录

 │   │─downs.html       用户中心-下载记录

 │   │─favs.html        用户中心-收藏记录

 │   │─findpass.html    用户中心-找回密码

 │   │─findpass_msg.html    用户中心-找回密码提示信息

 │   │─foot.html        用户中心-公共底部

 │   │─head.html        用户中心-公共头部

 │   │─include.html     用户中心-公共引入文件

 │   │─index.html       用户中心-首页

 │   │─info.html        用户中心-个人详情

 │   │─login.html       用户中心-登录页

 │   │─orders.html      用户中心-在线充值记录

 │   │─pay.html         用户中心-支付页

 │   │─payment_weixin.html         用户中心-支付微信二维码

 │   │─plays.html       用户中心-点播记录

 │   │─popedom.html     用户中心-权限列表

 │   │─reg.html         用户中心-注册

 │   │─reward.html     用户中心-分销记录

 │   │─upgrade.html     用户中心-会员升级

 └─plot

 │   │─uindex.html        分集剧情首页

 │   │─udetail.html       分集剧情详情页

 └─actor

 │   │─index.html        演员首页

 │   │─detail.html       演员详情页

 │   │─search.html       演员网址搜索页

 │   │─show.html       演员筛选页

 │   │─type.html       演员分类页

 └─role

 │   │─index.html        角色首页

 │   │─detail.html       角色详情页

 │   │─show.html         角色筛选页

 └─website

 │   │─index.html        网址导航首页

 │   │─detail.html       网址详情页

 │   │─search.html       网址搜索页

 │   │─show.html       网址筛选页

 │   │─type.html       网址分类页

1) 信息架构（工程文档风的核心）

布局建议：三段式，pc平板手机自适应模式

顶部：轻量导航（Logo、搜索、分类、暗黑切换）

左侧：文档目录式侧栏（分类 + 标签 + “热门专题”）

中间：内容阅读区（文章/评测/教程）

右侧：目录 TOC + 文章信息（更新时间、配置、价格、优惠码）

内容类型建议（适合主机/VPS博客）

教程（HowTo）

评测（Review：线路/性能/稳定性）

优惠（Deals：促销、优惠码、活动）

工具（Tools：测速脚本、bench、流媒体检测）

知识库（KB：术语、FAQ、避坑）

2) 视觉规范（Docs 风格的“工程感”）

配色

背景： 0b0f14（暗） / ffffff（亮）

卡片： 111827（暗） / f8fafc（亮）

主色： 3b82f6（蓝）或 22c55e（绿）

文本： e5e7eb（暗） / 0f172a（亮）

边框：细线 1px，强调“结构清晰”

字体

正文：系统字体（更“文档”）

代码：ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono"

组件风格

多用“信息块”：Tip / Note / Warning / Danger

表格：性能对比一定要表格化（CPU/内存/IO/带宽/流媒体）

代码块：复制按钮 + 语法高亮（后续可接 highlight.js/prism）

3) 页面设计（你要的“主机/VPS博客网页”）

A. 首页（文档门户风）

Hero：一句话定位 + 搜索框（“搜索 VPS 测评 / 教程 / 优惠”）

快速入口卡片：测速脚本、线路测试、流媒体检测、选购指南

最新更新（按时间）

热门评测（按点击）

优惠专区（置顶横条/卡片）

B. 列表页（分类/标签/搜索结果）

左侧侧栏固定：分类树 + 标签云 + “常用工具”

列表项：标题 + 摘要 + 标签 + 更新时间 + 阅读量

顶部提供筛选：地区（CN/HK/JP/SG/US/EU）、用途（建站/落地/中转/AI）、价格区间

C. 文章页（文档阅读体验）

顶部：面包屑 + 标题 + meta（更新时间/分类/标签）

右侧：TOC 自动目录（h2/h3）

内容区：支持“参数卡片”

套餐价格、CPU、内存、硬盘、带宽、IP、线路

末尾：相关文章 + 评论 + 免责声明

D. 评测模板（强烈建议做成统一结构）

概览：优缺点、推荐指数

配置/价格表（表格）

Bench：CPU、内存、磁盘、网络（图/表）

线路：去程/回程/延迟（可贴图）

流媒体：解锁情况

结论：适合人群 + 替代方案