{"id":17017,"date":"2026-08-18T17:47:51","date_gmt":"2026-08-18T21:47:51","guid":{"rendered":"https:\/\/zhangweb.ca\/francais\/?page_id=17017"},"modified":"2026-08-19T14:59:04","modified_gmt":"2026-08-19T18:59:04","slug":"home","status":"publish","type":"page","link":"https:\/\/zhangweb.ca\/francais\/","title":{"rendered":"Home"},"content":{"rendered":"\n<style>\n\/* ===== \u9996\u9875\u6574\u4f53 ===== *\/\n.fr-home {\n    max-width: 900px;\n    margin: 40px auto;\n    padding: 20px;\n    font-family: Arial, \"Microsoft YaHei\", sans-serif;\n    color: #263238;\n}\n\n\/* ===== \u9876\u90e8\u6b22\u8fce\u533a ===== *\/\n.fr-hero {\n    background: linear-gradient(135deg, #e3f2fd, #fff8e1);\n    border-radius: 22px;\n    padding: 38px 30px;\n    text-align: center;\n    margin-bottom: 32px;\n}\n\n.fr-hero h1 {\n    margin: 0 0 12px;\n    font-size: 36px;\n    color: #1565c0;\n}\n\n.fr-hero p {\n    margin: 0;\n    font-size: 18px;\n    line-height: 1.7;\n    color: #455a64;\n}\n\n.fr-hero .small {\n    margin-top: 10px;\n    font-size: 15px;\n    color: #78909c;\n}\n\n\/* ===== \u53e5\u5b50\u5361\u7247 ===== *\/\n.fr-sentences {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 18px;\n}\n\n.fr-card {\n    background: #ffffff;\n    border: 1px solid #e8eef3;\n    border-radius: 18px;\n    padding: 22px;\n    box-shadow: 0 4px 16px rgba(0,0,0,0.05);\n    transition: all 0.25s ease;\n}\n\n.fr-card:hover {\n    transform: translateY(-4px);\n    box-shadow: 0 9px 24px rgba(0,0,0,0.09);\n}\n\n.fr-number {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 34px;\n    height: 34px;\n    border-radius: 50%;\n    background: #e3f2fd;\n    color: #1565c0;\n    font-weight: bold;\n    margin-bottom: 12px;\n}\n\n\/* \u6cd5\u8bed\u53e5\u5b50 + \u53d1\u97f3\u6309\u94ae *\/\n.fr-line {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    margin-bottom: 8px;\n}\n\n.fr-french {\n    font-size: 24px;\n    font-weight: 700;\n    color: #0d47a1;\n}\n\n\/* \u53d1\u97f3\u6309\u94ae *\/\n.fr-speak {\n    width: 38px;\n    height: 38px;\n    border: none;\n    border-radius: 50%;\n    background: #eef6ff;\n    cursor: pointer;\n    font-size: 18px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    transition: all 0.2s ease;\n    flex-shrink: 0;\n}\n\n.fr-speak:hover {\n    background: #1976d2;\n    transform: scale(1.08);\n}\n\n.fr-speak:active {\n    transform: scale(0.95);\n}\n\n\/* \u6b63\u5728\u6717\u8bfb *\/\n.fr-speak.speaking {\n    background: #bbdefb;\n    animation: pulse 0.8s infinite alternate;\n}\n\n@keyframes pulse {\n    from {\n        transform: scale(1);\n    }\n    to {\n        transform: scale(1.12);\n    }\n}\n\n.fr-cn {\n    font-size: 17px;\n    margin-bottom: 10px;\n}\n\n.fr-note {\n    font-size: 14px;\n    line-height: 1.6;\n    color: #78909c;\n    background: #f7fafc;\n    padding: 9px 12px;\n    border-radius: 10px;\n}\n\n\/* \u4e0d\u540c\u7f16\u53f7\u989c\u8272 *\/\n.fr-card:nth-child(3n+1) .fr-number {\n    background: #e3f2fd;\n    color: #1565c0;\n}\n\n.fr-card:nth-child(3n+2) .fr-number {\n    background: #fff3e0;\n    color: #ef6c00;\n}\n\n.fr-card:nth-child(3n+3) .fr-number {\n    background: #e8f5e9;\n    color: #2e7d32;\n}\n\n\/* ===== \u5e95\u90e8 ===== *\/\n.fr-challenge {\n    margin-top: 32px;\n    padding: 28px;\n    text-align: center;\n    background: #f4f9ff;\n    border-radius: 18px;\n}\n\n.fr-challenge h2 {\n    margin-top: 0;\n    color: #1565c0;\n}\n\n.fr-challenge p {\n    font-size: 17px;\n    line-height: 1.7;\n}\n\n.fr-button {\n    display: inline-block;\n    margin-top: 8px;\n    padding: 12px 24px;\n    background: #1976d2;\n    color: white !important;\n    text-decoration: none;\n    border-radius: 30px;\n    font-weight: bold;\n    transition: 0.2s;\n}\n\n.fr-button:hover {\n    background: #0d47a1;\n}\n\n\/* ===== \u624b\u673a ===== *\/\n@media (max-width: 700px) {\n\n    .fr-home {\n        margin: 20px auto;\n        padding: 12px;\n    }\n\n    .fr-hero {\n        padding: 28px 18px;\n    }\n\n    .fr-hero h1 {\n        font-size: 29px;\n    }\n\n    .fr-sentences {\n        grid-template-columns: 1fr;\n    }\n\n    .fr-french {\n        font-size: 22px;\n    }\n}\n<\/style>\n\n\n<div class=\"fr-home\">\n\n    <!-- \u9876\u90e8 -->\n    <section class=\"fr-hero\">\n\n        <h1>\ud83c\uddeb\ud83c\uddf7 Commencez par 10 phrases !<\/h1>\n\n        <p>\n            \u4e0d\u7528\u5148\u5b66\u590d\u6742\u8bed\u6cd5\u3002<br>\n            \u5148\u638c\u63e1\u8fd9 10 \u53e5\uff0c\u4f60\u5df2\u7ecf\u53ef\u4ee5\u5f00\u59cb\u8bf4\u6cd5\u8bed\u4e86\u3002\n        <\/p>\n\n        <div class=\"small\">\n            \ud83d\udd0a \u70b9\u51fb\u5c0f\u5587\u53ed\uff0c\u542c\u6cd5\u8bed\u53d1\u97f3\n        <\/div>\n\n    <\/section>\n\n\n    <div class=\"fr-sentences\">\n\n        <!-- 1 -->\n        <div class=\"fr-card\">\n\n            <div class=\"fr-number\">1<\/div>\n\n            <div class=\"fr-line\">\n                <div class=\"fr-french\">Bonjour !<\/div>\n\n                <button\n                    class=\"fr-speak\"\n                    onclick=\"speakFrench('Bonjour !', this)\"\n                    title=\"\u00c9couter\">\n                    \ud83d\udd0a\n                <\/button>\n            <\/div>\n\n            <div class=\"fr-cn\">\n                \u4f60\u597d\uff01\n            <\/div>\n\n            <div class=\"fr-note\">\n                \u2600\ufe0f \u767d\u5929\u89c1\u9762\u6700\u5e38\u7528\u7684\u95ee\u5019\u8bed\u3002\n            <\/div>\n\n        <\/div>\n\n\n        <!-- 2 -->\n        <div class=\"fr-card\">\n\n            <div class=\"fr-number\">2<\/div>\n\n            <div class=\"fr-line\">\n                <div class=\"fr-french\">\u00c7a va ?<\/div>\n\n                <button\n                    class=\"fr-speak\"\n                    onclick=\"speakFrench('\u00c7a va ?', this)\"\n                    title=\"\u00c9couter\">\n                    \ud83d\udd0a\n                <\/button>\n            <\/div>\n\n            <div class=\"fr-cn\">\n                \u4f60\u597d\u5417\uff1f\n            <\/div>\n\n            <div class=\"fr-note\">\n                \ud83d\ude42 \u975e\u5e38\u5e38\u89c1\u7684\u65e5\u5e38\u95ee\u5019\u3002\u53ef\u4ee5\u56de\u7b54\uff1a\u00c7a va bien.\n            <\/div>\n\n        <\/div>\n\n\n        <!-- 3 -->\n        <div class=\"fr-card\">\n\n            <div class=\"fr-number\">3<\/div>\n\n            <div class=\"fr-line\">\n                <div class=\"fr-french\">Merci !<\/div>\n\n                <button\n                    class=\"fr-speak\"\n                    onclick=\"speakFrench('Merci !', this)\"\n                    title=\"\u00c9couter\">\n                    \ud83d\udd0a\n                <\/button>\n            <\/div>\n\n            <div class=\"fr-cn\">\n                \u8c22\u8c22\uff01\n            <\/div>\n\n            <div class=\"fr-note\">\n                \ud83d\udc9b \u6700\u503c\u5f97\u5148\u5b66\u4f1a\u7684\u6cd5\u8bed\u8bcd\u4e4b\u4e00\u3002\n            <\/div>\n\n        <\/div>\n\n\n        <!-- 4 -->\n        <div class=\"fr-card\">\n\n            <div class=\"fr-number\">4<\/div>\n\n            <div class=\"fr-line\">\n                <div class=\"fr-french\">S&rsquo;il vous pla\u00eet.<\/div>\n\n                <button\n                    class=\"fr-speak\"\n                    onclick=\"speakFrench('S\\'il vous pla\u00eet.', this)\"\n                    title=\"\u00c9couter\">\n                    \ud83d\udd0a\n                <\/button>\n            <\/div>\n\n            <div class=\"fr-cn\">\n                \u8bf7\u3002\n            <\/div>\n\n            <div class=\"fr-note\">\n                \ud83d\ude4f \u4e70\u4e1c\u897f\u3001\u70b9\u9910\u3001\u8bf7\u6c42\u5e2e\u52a9\u65f6\u90fd\u4f1a\u7528\u5230\u3002\n            <\/div>\n\n        <\/div>\n\n\n        <!-- 5 -->\n        <div class=\"fr-card\">\n\n            <div class=\"fr-number\">5<\/div>\n\n            <div class=\"fr-line\">\n                <div class=\"fr-french\">Excusez-moi.<\/div>\n\n                <button\n                    class=\"fr-speak\"\n                    onclick=\"speakFrench('Excusez-moi.', this)\"\n                    title=\"\u00c9couter\">\n                    \ud83d\udd0a\n                <\/button>\n            <\/div>\n\n            <div class=\"fr-cn\">\n                \u4e0d\u597d\u610f\u601d \/ \u6253\u6270\u4e00\u4e0b\u3002\n            <\/div>\n\n            <div class=\"fr-note\">\n                \ud83d\udc4b \u95ee\u8def\u6216\u5411\u964c\u751f\u4eba\u8be2\u95ee\u4e8b\u60c5\u65f6\u7279\u522b\u5b9e\u7528\u3002\n            <\/div>\n\n        <\/div>\n\n\n        <!-- 6 -->\n        <div class=\"fr-card\">\n\n            <div class=\"fr-number\">6<\/div>\n\n            <div class=\"fr-line\">\n                <div class=\"fr-french\">Je m&rsquo;appelle Marie.<\/div>\n\n                <button\n                    class=\"fr-speak\"\n                    onclick=\"speakFrench('Je m\\'appelle Marie.', this)\"\n                    title=\"\u00c9couter\">\n                    \ud83d\udd0a\n                <\/button>\n            <\/div>\n\n            <div class=\"fr-cn\">\n                \u6211\u53eb Marie\u3002\n            <\/div>\n\n            <div class=\"fr-note\">\n                \ud83d\udc64 \u628a Marie \u6362\u6210\u81ea\u5df1\u7684\u540d\u5b57\u5c31\u53ef\u4ee5\u4e86\u3002\n            <\/div>\n\n        <\/div>\n\n\n        <!-- 7 -->\n        <div class=\"fr-card\">\n\n            <div class=\"fr-number\">7<\/div>\n\n            <div class=\"fr-line\">\n                <div class=\"fr-french\">Je ne comprends pas.<\/div>\n\n                <button\n                    class=\"fr-speak\"\n                    onclick=\"speakFrench('Je ne comprends pas.', this)\"\n                    title=\"\u00c9couter\">\n                    \ud83d\udd0a\n                <\/button>\n            <\/div>\n\n            <div class=\"fr-cn\">\n                \u6211\u4e0d\u660e\u767d\u3002\n            <\/div>\n\n            <div class=\"fr-note\">\n                \ud83e\udd14 \u521d\u5b66\u6cd5\u8bed\u65f6\u975e\u5e38\u5b9e\u7528\u7684\u4e00\u53e5\u8bdd\u3002\n            <\/div>\n\n        <\/div>\n\n\n        <!-- 8 -->\n        <div class=\"fr-card\">\n\n            <div class=\"fr-number\">8<\/div>\n\n            <div class=\"fr-line\">\n                <div class=\"fr-french\">Pouvez-vous r\u00e9p\u00e9ter ?<\/div>\n\n                <button\n                    class=\"fr-speak\"\n                    onclick=\"speakFrench('Pouvez-vous r\u00e9p\u00e9ter ?', this)\"\n                    title=\"\u00c9couter\">\n                    \ud83d\udd0a\n                <\/button>\n            <\/div>\n\n            <div class=\"fr-cn\">\n                \u60a8\u53ef\u4ee5\u518d\u8bf4\u4e00\u904d\u5417\uff1f\n            <\/div>\n\n            <div class=\"fr-note\">\n                \ud83d\udd01 \u6ca1\u542c\u6e05\u695a\u7684\u65f6\u5019\u5c31\u7528\u8fd9\u4e00\u53e5\u3002\n            <\/div>\n\n        <\/div>\n\n\n        <!-- 9 -->\n        <div class=\"fr-card\">\n\n            <div class=\"fr-number\">9<\/div>\n\n            <div class=\"fr-line\">\n                <div class=\"fr-french\">Combien \u00e7a co\u00fbte ?<\/div>\n\n                <button\n                    class=\"fr-speak\"\n                    onclick=\"speakFrench('Combien \u00e7a co\u00fbte ?', this)\"\n                    title=\"\u00c9couter\">\n                    \ud83d\udd0a\n                <\/button>\n            <\/div>\n\n            <div class=\"fr-cn\">\n                \u8fd9\u4e2a\u591a\u5c11\u94b1\uff1f\n            <\/div>\n\n            <div class=\"fr-note\">\n                \ud83d\udecd\ufe0f \u5546\u5e97\u3001\u5e02\u573a\u548c\u65c5\u884c\u65f6\u975e\u5e38\u5e38\u7528\u3002\n            <\/div>\n\n        <\/div>\n\n\n        <!-- 10 -->\n        <div class=\"fr-card\">\n\n            <div class=\"fr-number\">10<\/div>\n\n            <div class=\"fr-line\">\n                <div class=\"fr-french\">Au revoir !<\/div>\n\n                <button\n                    class=\"fr-speak\"\n                    onclick=\"speakFrench('Au revoir !', this)\"\n                    title=\"\u00c9couter\">\n                    \ud83d\udd0a\n                <\/button>\n            <\/div>\n\n            <div class=\"fr-cn\">\n                \u518d\u89c1\uff01\n            <\/div>\n\n            <div class=\"fr-note\">\n                \ud83d\udc4b \u79bb\u5f00\u65f6\u6700\u6807\u51c6\u3001\u6700\u5e38\u89c1\u7684\u8bf4\u6cd5\u3002\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n\n    <!-- \u5e95\u90e8 -->\n    <section class=\"fr-challenge\">\n\n        <h2>\ud83c\udfaf Petit d\u00e9fi<\/h2>\n\n        <p>\n            \u70b9\u51fb \ud83d\udd0a \u542c\u4e00\u904d\uff0c\u7136\u540e\u81ea\u5df1\u8ddf\u8bfb\u4e00\u904d\u3002<br>\n            \u8fde\u7eed\u7ec3\u4e60\u4e09\u6b21\uff0c\u8bd5\u8bd5\u770b\u4f60\u80fd\u4e0d\u80fd\u4e0d\u770b\u4e2d\u6587\u8bf4\u51fa\u6765\u3002\n        <\/p>\n\n        <a href=\"\/francais\/alphabet\/\" class=\"fr-button\">\n            Continuer \u00e0 apprendre \u2192\n        <\/a>\n\n    <\/section>\n\n<\/div>\n\n\n<script>\nfunction speakFrench(text, button) {\n\n    \/* \u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u8bed\u97f3 *\/\n    if (!('speechSynthesis' in window)) {\n        alert(\"Votre navigateur ne prend pas en charge la synth\u00e8se vocale.\");\n        return;\n    }\n\n    \/* \u505c\u6b62\u524d\u4e00\u53e5 *\/\n    window.speechSynthesis.cancel();\n\n    \/* \u6e05\u9664\u5176\u4ed6\u6309\u94ae\u72b6\u6001 *\/\n    document.querySelectorAll('.fr-speak').forEach(function(btn) {\n        btn.classList.remove('speaking');\n    });\n\n    const speech = new SpeechSynthesisUtterance(text);\n\n    \/* \u6cd5\u8bed *\/\n    speech.lang = 'fr-FR';\n\n    \/* \u521d\u5b66\u8005\u7a0d\u5fae\u6162\u4e00\u4e9b *\/\n    speech.rate = 0.82;\n\n    speech.pitch = 1;\n    speech.volume = 1;\n\n    \/* \u5c3d\u91cf\u5bfb\u627e\u6cd5\u8bed\u58f0\u97f3 *\/\n    const voices = window.speechSynthesis.getVoices();\n\n    const frenchVoice = voices.find(function(voice) {\n        return voice.lang.toLowerCase().startsWith('fr');\n    });\n\n    if (frenchVoice) {\n        speech.voice = frenchVoice;\n    }\n\n    \/* \u64ad\u653e\u65f6\u6309\u94ae\u52a8\u753b *\/\n    button.classList.add('speaking');\n\n    speech.onend = function() {\n        button.classList.remove('speaking');\n    };\n\n    speech.onerror = function() {\n        button.classList.remove('speaking');\n    };\n\n    window.speechSynthesis.speak(speech);\n}\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\ud83c\uddeb\ud83c\uddf7 Commencez par 10 phrases ! \u4e0d\u7528\u5148\u5b66\u590d\u6742\u8bed\u6cd5\u3002 \u5148\u638c\u63e1\u8fd9 10 \u53e5\uff0c\u4f60\u5df2\u7ecf\u53ef\u4ee5\u5f00\u59cb\u8bf4\u6cd5\u8bed\u4e86\u3002 \ud83d\udd0a \u70b9\u51fb\u5c0f\u5587\u53ed\uff0c\u542c\u6cd5\u8bed\u53d1\u97f3 1 Bonjour ! \ud83d\udd0a \u4f60\u597d\uff01 \u2600\ufe0f \u767d\u5929\u89c1\u9762\u6700\u5e38\u7528\u7684\u95ee\u5019\u8bed\u3002 2 \u00c7a va ? \ud83d\udd0a \u4f60\u597d\u5417\uff1f \ud83d\ude42 \u975e\u5e38\u5e38\u89c1\u7684\u65e5\u5e38\u95ee\u5019\u3002\u53ef\u4ee5\u56de\u7b54\uff1a\u00c7a va bien. 3 Merci ! \ud83d\udd0a \u8c22\u8c22\uff01 \ud83d\udc9b \u6700\u503c\u5f97\u5148\u5b66\u4f1a\u7684\u6cd5\u8bed\u8bcd\u4e4b\u4e00\u3002 4 S&rsquo;il vous pla\u00eet. \ud83d\udd0a \u8bf7\u3002 \ud83d\ude4f \u4e70\u4e1c\u897f\u3001\u70b9\u9910\u3001\u8bf7\u6c42\u5e2e\u52a9\u65f6\u90fd\u4f1a\u7528\u5230\u3002 5 Excusez-moi. \ud83d\udd0a \u4e0d\u597d\u610f\u601d \/ \u6253\u6270\u4e00\u4e0b\u3002 \ud83d\udc4b \u95ee\u8def\u6216\u5411\u964c\u751f\u4eba\u8be2\u95ee\u4e8b\u60c5\u65f6\u7279\u522b\u5b9e\u7528\u3002 6 Je m&rsquo;appelle &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/zhangweb.ca\/francais\/\" class=\"more-link\">Continuer la lecture<span class=\"screen-reader-text\"> de &laquo; Home &raquo;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"class_list":["post-17017","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/zhangweb.ca\/francais\/wp-json\/wp\/v2\/pages\/17017"}],"collection":[{"href":"https:\/\/zhangweb.ca\/francais\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/zhangweb.ca\/francais\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/zhangweb.ca\/francais\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zhangweb.ca\/francais\/wp-json\/wp\/v2\/comments?post=17017"}],"version-history":[{"count":2,"href":"https:\/\/zhangweb.ca\/francais\/wp-json\/wp\/v2\/pages\/17017\/revisions"}],"predecessor-version":[{"id":17047,"href":"https:\/\/zhangweb.ca\/francais\/wp-json\/wp\/v2\/pages\/17017\/revisions\/17047"}],"wp:attachment":[{"href":"https:\/\/zhangweb.ca\/francais\/wp-json\/wp\/v2\/media?parent=17017"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}