技术求助：将Google表格食谱数据同步至HTML页面并分类展示

架构老林

2026-6-17

问题描述

我是HTML新手，正在制作妈妈食谱网站。已通过Google表单收集食材等信息并同步至Google表格，需提取表格数据到HTML页面，按「甜（sladké）」「咸（slané）」分类展示（表格已标记分类），表格最后一列「postup」为烹饪步骤。现有HTML代码如下：

主页代码

<!DOCTYPE html>
<html lang="cz">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kuchařka ztracených receptů</title>
</head>
<style>
    button {
    color: rgb(210, 210, 210);
    background-color: rgb(53, 104, 139);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15pt;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    margin: 15px; /*15px mezera z top, right, bottom, left*/
}

h1 {
    color: rgb(21, 42, 55);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 30pt;
}

.button-container {
    text-align: center; /*centrování tlačítek*/
    margin-top: 20px; /* místo nad tlačítky */
}

</style>
<body style="background-color:rgb(179, 199, 213);">
    <h1>Kuchařka ztracených receptů</h1>
    <div class="button-container">
        <a href="sladke.html"><button>Sladké</button></a>
        <a href="slane.html"><button>Slané</button></a>
    </div>
</body>
</html>

甜食谱页面代码

<!DOCTYPE html>
<html lang="cz">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sladké</title>

</head>

<style>
    button {
    color: rgb(210, 210, 210);
    background-color: rgb(42, 84, 111);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 10pt;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
   
}

h3 {
    color: rgb(21, 42, 55);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 20pt;
}


</style>

<body>
    <h3>Sladké recepty</h3>
    <a href="poseruse.html"><button>Hlavní stránka</button></a>
</body>
</html>

咸食谱页面代码

<!DOCTYPE html>
<html lang="cz">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slané</title>
</head>

<style>
button {
    color: rgb(210, 210, 210);
    background-color: rgb(42, 84, 111);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 10pt;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
  
}

h3 {
    color: rgb(21, 42, 55);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 20pt;
}

</style>

<body>
    <h3>Slané recepty</h3>
    <a href="poseruse.html"><button>Hlavní stránka</button></a>

</body>
</html>

解决方案

针对你的需求，推荐使用Google Sheets的CSV导出功能结合原生JavaScript实现数据加载，无需后端服务，适合新手操作：

1. 配置Google表格权限

打开你的Google表格，点击右上角「分享」，设置权限为知道链接的任何人都可查看，确保数据能被公开访问

2. 获取CSV导出链接

在表格中，点击「文件」→「下载」→「逗号分隔值(.csv)」
复制浏览器地址栏的链接，简化为：https://docs.google.com/spreadsheets/d/1MP70bVV6hTeq-D5Jcc24_vrKXR695RZUrtsn_g-IHmE/export?format=csv（已替换你的表格ID）

3. 修改甜食谱页面（sladke.html）

以下是集成数据加载功能的完整代码，保持了你原有的样式风格：

<!DOCTYPE html>
<html lang="cz">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sladké</title>
    <style>
        button {
            color: rgb(210, 210, 210);
            background-color: rgb(42, 84, 111);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 10pt;
            border: none;
            border-radius: 10px;
            padding: 10px 20px;
        }

        h3 {
            color: rgb(21, 42, 55);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 20pt;
        }

        .recipe-card {
            background-color: #fff;
            border-radius: 8px;
            padding: 15px;
            margin: 15px 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .recipe-card h4 {
            color: rgb(53, 104, 139);
            margin-top: 0;
        }

        .recipe-card .ingredients {
            margin: 10px 0;
            color: #333;
        }

        .recipe-card .steps {
            margin: 10px 0;
            color: #333;
            line-height: 1.5;
        }
    </style>
</head>
<body style="background-color:rgb(179, 199, 213); padding: 0 20px;">
    <h3>Sladké recepty</h3>
    <a href="poseruse.html"><button>Hlavní stránka</button></a>
    <div id="recipes-container"></div>

    <script>
        // 替换为你的CSV导出链接
        const csvUrl = 'https://docs.google.com/spreadsheets/d/1MP70bVV6hTeq-D5Jcc24_vrKXR695RZUrtsn_g-IHmE/export?format=csv';

        // 解析CSV数据
        function parseCSV(csv) {
            const lines = csv.split('\n').filter(line => line.trim() !== '');
            const headers = lines[0].split(',').map(header => header.trim());
            return lines.slice(1).map(line => {
                const values = line.split(',').map(val => val.trim());
                return headers.reduce((obj, header, index) => {
                    obj[header] = values[index];
                    return obj;
                }, {});
            });
        }

        // 加载并展示甜食谱
        fetch(csvUrl)
            .then(response => response.text())
            .then(csv => {
                const recipes = parseCSV(csv);
                const sweetRecipes = recipes.filter(recipe => recipe['kategorie'] === 'sladké');
                const container = document.getElementById('recipes-container');
                
                sweetRecipes.forEach(recipe => {
                    const card = document.createElement('div');
                    card.className = 'recipe-card';
                    card.innerHTML = `
                        <h4>${recipe['název']}</h4>
                        <div class="ingredients"><strong>Suroviny:</strong> ${recipe['suroviny']}</div>
                        <div class="steps"><strong>Postup:</strong> ${recipe['postup']}</div>
                    `;
                    container.appendChild(card);
                });
            })
            .catch(error => console.error('Chyba při načítání receptů:', error));
    </script>
</body>
</html>

4. 修改咸食谱页面（slane.html）

只需将上述代码中的筛选条件改为：

const saltyRecipes = recipes.filter(recipe => recipe['kategorie'] === 'slané');

并调整标题相关内容即可，其余代码保持一致。

内容的提问来源于stack exchange，提问作者Klára Szkawranioková

技术求助：将Google表格食谱数据同步至HTML页面并分类展示

主页代码 #

甜食谱页面代码 #

咸食谱页面代码 #

1. 配置Google表格权限 #

2. 获取CSV导出链接 #

3. 修改甜食谱页面（sladke.html） #

4. 修改咸食谱页面（slane.html） #