如何整合Quarto Website与Quarto Dashboard并保持统一风格？

可行性说明 #

完全可以实现。Quarto的网站和Dashboard基于同一套技术框架，天然支持将Dashboard作为网站的子页面整合，且能轻松保持视觉风格统一——二者共享Quarto的主题配置系统，无需额外做风格适配。

具体操作方法 #

• 搭建项目结构
  先创建Quarto网站项目，执行命令：

  quarto create-project my-website --type website
  

  在项目根目录下新建子目录（比如dashboard），在该目录内创建Dashboard文件（建议命名为index.qmd），按照Quarto Dashboard的语法编写看板内容（比如添加交互式图表、数据组件等）。

• 配置网站导航
  打开网站根目录的_quarto.yml配置文件，在navbar节点中添加Dashboard的导航入口，示例配置：

  navbar:
    title: "我的Quarto站点"
    left:
      - text: "首页"
        href: index.qmd
      - text: "数据看板"
        href: dashboard/index.qmd
  

  保存配置后，网站导航栏会新增指向Dashboard子页面的直接入口。

• 确保风格统一
  网站和Dashboard默认会继承相同的主题样式，无需额外配置。如果需要自定义主题，只需在根目录的_quarto.yml中设置全局主题参数，示例：

  format:
    html:
      theme: flatly
      css: styles.css
  

  自定义的CSS文件也会自动作用于Dashboard页面，保证全站视觉风格一致。

• 预览与发布
  执行quarto preview启动本地预览，点击导航栏的“数据看板”链接即可直接访问嵌入的Dashboard；发布时执行quarto publish，整个站点（包括Dashboard子页面）会一并部署到目标平台。

最佳实践案例 #

• 科研项目整合站：将项目文档放在网站主页，Dashboard子页面展示实验数据的交互式可视化结果，让读者查阅文档时能直观查看数据细节，无需跳转外部链接。
• 个人数据博客：博客主页分享数据分析文章，嵌入的Dashboard作为“数据展示”子页面，展示文章中提到的动态数据图表，增强内容的直观性和互动性。
• 内部数据门户：企业搭建内部站点，网站部分用于发布公告、流程文档，Dashboard子页面作为各部门的业务报表看板，统一入口且风格一致，降低员工的学习成本。

内容的提问来源于stack exchange，提问作者feder80