在精致餐饮的世界里，唤醒感官的每一个细节都至关重要。香料，这些拥有千年历史的珍贵宝藏，是化腐朽为神奇的烹饪利器，能将简单的餐食升华为令人难忘的味蕾体验。挑选香料需要技巧和专业知识，因为它们拥有独特的能力，能够提升风味，展现食材的微妙之处，并为菜肴营造独特的氛围。从罗林格香料园（Épices Roellinger）的花园到索莱尔德奥克（Soleild’Oc）和非洲大地（Terres d’Afrique）的珍稀之选，这些来自不同产地的香料宝藏，能够提升菜肴的层次感、复杂性和独特个性。从新鲜研磨的杜克罗斯（Ducros）胡椒，到莱奥香料园（Épices de Léo）的浓郁混合香料，再到阿尔特埃科（Alter Eco）的精致异域风情，无论是烹饪新手还是经验丰富的厨师，都能在这里找到无限的可能。选择合适的香料也意味着了解其品质以及如何搭配，让您像艺术家在调色板上挥洒创意一样，尽情享受香料带来的乐趣。从肉桂的温暖甜香到小豆蔻的柠檬清香，每一种香料都诉说着一段独特的感官故事。诸如
Il Gusto Italiano 或 Tambouille de Chef 等网站上的厨师秘诀和专家建议表明，时机、烹饪方法以及香料的新鲜度是提升精致菜肴的关键因素。探索地中海风味的混合香料，例如扎塔尔（za’atar），或是印度风味的混合香料，例如印度香料粉（garam masala），便能领略这门古老艺术的丰富内涵，而如今，像 La Maison des épices 和 Pébéo 这样的标志性品牌更令其熠熠生辉。用这些珍稀或经典的香料唤醒您的味蕾，开启一段由微妙的层次感引领的美食之旅：从彭加白胡椒到藏红花的咸甜香气，再到来自普罗旺斯香料店（L’Épicerie de Provence）的百里香或迷迭香等地中海香草，无不令人回味无穷。考虑到储存方式，使用胡椒研磨器——这是保持香气的必备工具——以及烹饪创意，将助您提升厨艺。探索如何选择、搭配和使用这些香料，将每一道菜肴都变成精致、优雅、充满活力的招牌菜，让您的宾客尽享美味。
/* 主容器居中 */
#spices-infographic {
max-width: 900px;
margin: 2rem auto;
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
}
/* 响应式香料网格 */
.spices-grid {
display:grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 1.3rem;
margin-top: 1rem;
}
/* 交互式香料地图 */
.spice-card {
background: #fffbea;
border-radius: 12px;
padding: 1rem;
box-shadow: 0 0 5px rgb(0 0 0 / 0.1);
cursor: pointer;
transition: box-shadow 0.3s ease;
display:flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.spice-card:hover,
.spice-card:focus {
box-shadow: 0 0 15px #f5a623;
outline:none;
}
/* 香料图片 */
.spice-img {
width: 80px;
height: 80px;
object-fit:contain;
margin-bottom: 0.7rem;
}
/* 香料名称 */
.spice-name {
font-weight: 700;
font-size: 1.1rem;
margin-bottom: 0.3rem;
/* 简短描述 */
.spice-desc {
font-size: 0.85rem;
color: #5a5a5a;
}/* 详细信息区域 */
#spice-info {
margin-top: 2rem;
border-top: 2px solid #f5a623;
padding-top: 1.3rem;
}
#spice-info h3 {
font-weight: 700;font-size: 1.3rem;
margin-bottom: 0.5rem;
color: #bf360c;}
#spice-info p {
font-size: 1rem;
line-height: 1.4;
}
/* 为方便访问，此处视觉上隐藏 */.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
交互式香料列表。点击或按 Tab 键即可显示更详细的信息。
/* 纯 HTML + JavaScript 交互式信息图
主题：如何选择香料来提升精致菜肴的风味？
数据与 API：
– 提供常用香料的静态列表
– 使用维基百科 MediaWiki API 获取香料的描述性摘要
源 API：https://en.wikipedia.org/w/api.php
“藏红花”的简单 API 请求示例：
https://en.wikipedia.org/w/api.php?action=query&format=json&prop=extracts&exintro&explaintext&titles=Saffron&origin=*
JSON 响应示例：
{
“batchcomplete”: “”,
“query”: {
“pages”: {
“12345”: {
“pageid”: 12345,
“ns”: 0,
“title”: “藏红花”,
“extract”: “藏红花是一种从……中提取的香料”
}
}
} 限制：
– 无繁重依赖（除 Bulma CSS 外，用于最小化依赖）样式）
– 键盘访问，ARIA 无障碍公告
– 用于国际化的分隔文本字符串（易于替换）
*/// 可编辑文本（国际化）const texts = {
title: “哪些香料适合用来提升精致菜肴的风味？”,intro: “点击香料，探索它的奥秘以及如何在精致菜肴中使用它。”,loading: “正在加载…”,errorLoading: “目前无法查看描述。”,selectPrompt: “选择一种香料以查看更多详情。”,spicesListLabel: “必备香料列表”
};
// 香料列表，包含图片（免费/CC0 或原创）以及英文/法文维基百科标题
const spices = [
{ key: “黑胡椒”,
name: “黑胡椒”,
wikiTitleFR: “胡椒”,
img: “https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Black_peppercorns_-_whole_%26_powder_%282%29.jpg/120px-Black_peppercorns_-_whole_%26_powder_%282%29.jpg”,
shortDesc: “增添辛辣风味，丰富口感层次。”},
{ key: “肉桂”,
name: “肉桂”,wikiTitleFR: “肉桂”,
img: “https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Cinnamon_Rolls_Sticky_Buns_432x324.jpg/120px-Cinnamon_Rolls_Sticky_Buns_432x324.jpg”,
shortDesc: “温暖、香甜，略带甜味。”
},
{ key: “姜黄”,
name: “姜黄”,
wikiTitleFR: “姜黄”,img: “https://upload.wikimedia.org/wikipedia/commons/thumb/7/7b/Curcuma_Lehmbachii.jpg/120px-Curcuma_Lehmbachii.jpg”,
shortDesc: “增添色彩和微妙的风味。”},
{ key: “藏红花”,name: “藏红花”,wikiTitleFR: “藏红花”,
img: “https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Saffron_car_photo.jpg/120px-Saffron_car_photo.jpg”,
shortDesc: “一种珍贵的香料，带有淡淡的花香。”
},
{ key: “小豆蔻”,
name: “小豆蔻”,
wikiTitleFR: “小豆蔻”,
img: “https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Elettaria_cardamomum_Dried_cardamom_pods.jpg/120px-Elettaria_cardamomum_Dried_cardamom_pods.jpg”,shortDesc: “清新、柠檬味浓郁，带有异域风情。”},
{ key: “辣椒粉”,
name: “辣椒粉”,wikiTitleFR: “辣椒粉”,
img: “https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Paprika_carpaccio_peppers_spice.jpg/120px-Paprika_carpaccio_peppers_spice.jpg”,
shortDesc: “增添甜味和色泽深度。”
- }, { key: “生姜”,
- name: “生姜”,
- wikiTitleFR: “生姜”, img: “https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Fresh-ginger.jpg/120px-Fresh-ginger.jpg”,
- shortDesc: “口感清爽，带有柠檬味。” },
- { key: “孜然”, name: “孜然”, wikiTitleFR: “孜然”,
| img: “https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Cumin_seeds.jpg/120px-Cumin_seeds.jpg”, | shortDesc: “带有泥土气息和温暖的香味。” | }, |
|---|
| { key: “芫荽”, | |
| name: “芫荽”, | | wikiTitleFR: “芫荽”, |
| img: “https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Coriandrum_sativum_samens.jpg/120px-Coriandrum_sativum_samens.jpg”, | shortDesc: “带有柠檬和草本植物的清新香味。” |
| } | ]; |
// 引用 DOM 元素
- const container = document.getElementById(‘epices-infographie’);
- const grid = container.querySelector(‘.epices-grid’); const infoSection = document.getElementById(‘epice-info’);
- const infoTitle = infoSection.querySelector(‘h3’); const infoPara = infoSection.querySelector(‘p’);
- const titleInfographic = document.getElementById(‘title-infographic’);
- const introInfographic = document.getElementById(‘intro-infographic’); / 初始化文本
titleInfographic.textContent = texts.title;
introInfographic.textContent = texts.intro;
infoTitle.textContent = “”;
infoPara.textContent = texts.selectPrompt;
/ 创建交互式香料卡片的函数
function createEpiceCard(epice) {
const card = document.createElement(‘button’);
card.className = “epice-card”;
card.type = “button”;
card.setAttribute(‘aria-describedby’, `desc-${epice.key}`);
card.setAttribute(‘aria-label’, `${epice.name} – ${epice.shortDesc}`);
card.tabIndex = 0;
// 香料图片
const img = document.createElement(‘img’);
img.src = spice.img;
img.alt = spice.name;
img.className = “spice-img”;
card.appendChild(img);
// 香料名称
const h4 = document.createElement(‘div’);
h4.className = “spice-name”;
h4.textContent = spice.name;
card.appendChild(h4);
// 简短描述（视觉效果和可访问性）
const pDesc = document.createElement(‘p’);
pDesc.className = “spice-desc”;
pDesc.id = `desc-${spice.key}`;
pDesc.textContent = epice.shortDesc;
card.appendChild(pDesc);
// 点击 + 键盘事件：加载 wiki 详情
card.addEventListener(‘click’, () => fetchDescription(spice));
card.addEventListener(‘keydown’, e => {
if( e.key === ‘Enter’ || e.key === ‘ ‘ ) {
e.preventDefault();
fetchDescription(spice);
}
});
return card;
}
// 调用维基百科（法语）MediaWiki API 获取香料的描述性摘录
// URL：https://fr.wikipedia.org/w/api.php?action=query&format=json&prop=extracts&exintro&explaintext&titles=Saffron&origin=*
// 使用 ‘origin=*’ 参数修正 CORS 策略
function fetchDescription(spice){
// 显示加载信息
infoTitle.textContent = spice.name;
/ 标题编码
const title = encodeURIComponent(“epice.wikiTitleFR”);
const url = `https://fr.wikipedia.org/w/api.php?action=query&format=json&prop=extracts&exintro&explaintext&titles=${title}&origin=*`;
fetch(url)
.then(response => response.json())
.then(data => {
// pages 属性有一个事先未知的键
const pages = data.query.pages;
} else {
infoPara.textContent = texts.errorLoading;
}
})
.catch(() => {
infoPara.textContent = texts.errorLoading;
});}
// 香料网格初始化
function initGrid() {
spices.forEach(spice => {
const card = createSpiceCard(spice);
grid.appendChild(card);
});
}
// 启动
initGrid();
如何选择优质香料来提升精致菜肴的风味？
卓越调味的秘诀在于所用香料的品质。选择有机种植的香料至关重要，例如 Epices & Co 或 Terres d’Afrique 的产品，以确保无农药残留的纯净度和完整的香气。整粒香料因其能更好地保留香气而更受青睐，Ducros 和 Soleil d’Oc 等高端胡椒研磨器在这方面堪称完美，带来无与伦比的新鲜度。
🧂 选择整粒香料：
芫荽籽、胡椒粒、丁香。
🌿
检查新鲜度：
鲜艳的颜色和浓郁的香气。
⏳
注意保质期：
理想情况下，请在 1 至 3 年内食用。
🌱
选择有机标签：品质和环保责任的保证。⚙️添置一台研磨器：
方便您随时研磨香料，例如，您可以在
Popper Mill
找到胡椒研磨器。
🌟
标准
🌶️
检查项目🍃实用技巧
品质不含农药，完整且未研磨
选择有机产品，优先选择完整香料
风味
浓郁的香气，鲜艳的颜色闻一闻，避免选择蔫掉的香料
储存
近期有效期，密封包装
请存放于阴凉、干燥、避光处
产地
第三方认证机构：Roellinger Spices、L’Épicerie de Provence
选择信誉良好且透明的生产商
打造精致香料收藏的必备之选
从用途广泛的香料入手，即可拥有丰富的风味。Ducros 黑胡椒，整粒包装，方便使用，以其最佳的胡椒碱含量而闻名，是肉类和鱼类的理想搭配。香甜的肉桂与辛辣的生姜完美融合，为甜点和咸味菜肴带来均衡的口感。姜黄是世界各地美食中常见的香料，它能为菜肴增添柔和的色泽和优雅的口感。最后，像 La Maison des Épices 这样的异域风情混合香料，能让您为菜肴增添一丝可控的原创性和地道的风味。
🌟 整粒黑胡椒：
保证新鲜，适用于各种烹饪方式。🌟 肉桂：
香气甜美，甜咸皆宜。🌟 姜黄：
色泽金黄，味道香甜微辣。
[idx] 🌟 小豆蔻：[correctIndex]带有花香和柑橘香气，可提升甜点和茶饮的风味。
🌟 甜椒粉或烟熏辣椒粉：味道浓郁温暖，适合用于烤肉和酱汁。/* 容器样式 */
#quiz-spices {
max-width: 700px;margin: 1.5em auto;
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
background: #fff8f0;border-radius: 10px;
box-shadow: 0 4px 15px rgb(0 0 0 / 0.1);
padding: 1.5em 2em 2em 2em;
user-select: none;
}#quiz-spices h2 {
text-align: center;
color: #7b3e00;
margin-bottom: 1em;
}
.question {
font-weight: 600;
margin-bottom: 0.5em;
color: #5a2e00;
- } .answers {
- list-style: none; padding: 0;
- margin: 0 0 1.5em 0;
- } .answers li {
- margin-bottom: 0.7em; }
| .answers label { | background: #fff4e6; | border: 2px solid #d29148; | border-radius: 6px; |
|---|
| padding: 0.5em 1em; | | display:block; | |
| cursor: pointer; | | transition: background-color 0.25s ease, border-color 0.25s ease; | |
| } | display:none; | | } |
| background-color: #d29148; | | border-color: #7b3e00; | |
font-weight: 700;
- } .answers label:hover {
- background-color: #f7d9a7; }
- #quiz-spices button { background-color: #7b3e00;
- color:white; font-weight: 700;
- border:none;
border-radius: 6px; padding: 0.6em 1.6em; cursor: pointer;
- font-size: 1em;
- display:block;
- margin: 0 auto 1em auto;
- transition: background-color 0.3s ease;
- }
Camille.Richard 
