{"id":2,"date":"2023-01-19T19:47:12","date_gmt":"2023-01-19T11:47:12","guid":{"rendered":"https:\/\/3i3c.cn\/?page_id=2"},"modified":"2026-03-12T10:51:35","modified_gmt":"2026-03-12T02:51:35","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/bwcxbk.com\/fr\/sample-page","title":{"rendered":"Bienvenue sur le blog de M. Jun Ke !"},"content":{"rendered":"<!-- About \u00b7 \u541b\u8f72\u5148\u751f \/ Sean Liu \u00b7 JS+CSS \u9002\u914d\u5916\u5c42\u5bb9\u5668\uff08\u65e0\u989d\u5916\u5916\u6846\uff09 -->\n<div class=\"about-block\" id=\"about-seanliu\">\n  <style>\n    \/* \u4ec5\u4f5c\u7528\u4e8e .about-block \u4f5c\u7528\u57df\uff0c\u907f\u514d\u6c61\u67d3\u4e3b\u9898 *\/\n    .about-block, .about-block * { box-sizing: border-box; }\n    .about-block{\n      \/* \u4e0d\u6dfb\u52a0\u80cc\u666f\u548c\u8fb9\u6846\uff0c\u907f\u514d\u4e0e\u4e3b\u9898\u5916\u5c42\u5bb9\u5668\u91cd\u590d *\/\n      color: var(--about-fg, #1b1b1b);\n      font: 16px\/1.8 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,\"PingFang SC\",\"Microsoft YaHei\";\n    }\n    @media (prefers-color-scheme: dark){\n      .about-block{ color: var(--about-fg, #e9eef7); }\n    }\n\n    \/* \u53ef\u81ea\u5b9a\u4e49\u54c1\u724c\u8272 *\/\n    .about-block{\n      --about-accent:#4c9eff;         \/* \u4e3b\u8272 *\/\n      --about-accent-2:#86f7a3;       \/* \u8f85\u8272\uff08\u7528\u4e8e\u6e10\u53d8\/\u5149\u70b9\uff09 *\/\n      --about-muted:#5b6b81;          \/* \u6b21\u8981\u6587\u5b57 *\/\n      --about-chip-bg:rgba(76,158,255,0.08);\n      --about-chip-bd:rgba(76,158,255,0.18);\n      --about-card-bg:rgba(0,0,0,0);  \/* \u900f\u660e\uff0c\u4f9d\u8d56\u5916\u5c42\u5bb9\u5668 *\/\n      --about-card-bd:transparent;\n      --about-shadow:0 10px 24px rgba(0,0,0,.06);\n    }\n    @media (prefers-color-scheme: dark){\n      .about-block{\n        --about-muted:#9fb0d7;\n        --about-chip-bg:rgba(76,158,255,0.12);\n        --about-chip-bd:rgba(76,158,255,0.28);\n        --about-shadow:0 10px 24px rgba(0,0,0,.12);\n      }\n    }\n\n    \/* \u6807\u9898\u884c\uff1a\u6e10\u53d8\u6587\u5b57 + \u7ec6\u7ebf\u9ad8\u4eae\uff0c\u4e0d\u589e\u52a0\u5916\u8fb9\u6846\u611f *\/\n    .about-title{\n      margin: 0 0 .75rem;\n      font-weight: 800;\n      font-size: clamp(20px, 4.8vw, 26px);\n      line-height: 1.25;\n      background: linear-gradient(120deg, var(--about-accent), var(--about-accent-2));\n      -webkit-background-clip: text; background-clip: text; color: transparent;\n      position: relative; display: inline-block;\n    }\n    .about-title::after{\n      content:\"\"; position:absolute; left:0; bottom:-6px; width:100%; height:2px;\n      background: linear-gradient(90deg, var(--about-accent), transparent 70%);\n      opacity:.45; transform-origin:left; transform: scaleX(.6);\n    }\n\n    .about-sub{\n      color: var(--about-muted);\n      font-size: .96rem;\n      margin: .2rem 0 1rem;\n    }\n\n    \/* \u5fbd\u7ae0 chips *\/\n    .about-badges{ display:flex; flex-wrap:wrap; gap:.5rem; }\n    .about-chip{\n      padding:.28rem .72rem; border-radius: 999px; font-size: .85rem;\n      background: var(--about-chip-bg); border:1px solid var(--about-chip-bd);\n      color: var(--about-accent); transition: transform .15s ease, box-shadow .2s ease;\n    }\n    .about-chip:hover{ transform: translateY(-1px); box-shadow: var(--about-shadow); }\n\n    \/* \u5361\u7247\u533a\u5757\uff08\u5185\u90e8\u8f7b\u9634\u5f71\uff0c\u4e0d\u753b\u8fb9\u6846\uff09 *\/\n    .about-card{\n      background: var(--about-card-bg);\n      border: 1px solid var(--about-card-bd);\n      border-radius: 16px;\n      padding: 1rem 1rem;\n      margin: 1rem 0;\n      opacity: 0; transform: translateY(8px);\n      will-change: transform, opacity;\n    }\n    .about-card.reveal{ opacity:1; transform: translateY(0); transition: .6s ease; }\n    .about-card h3{\n      margin:.2rem 0 .6rem; font-size: 1.05rem; font-weight: 700; color: var(--about-fg);\n      position: relative; padding-left: 1.05rem;\n    }\n    .about-card h3::before{\n      content:\"#\"; position:absolute; left:0; top:0; color: var(--about-accent); font-weight: 900;\n    }\n\n    .about-muted{ color: var(--about-muted); }\n\n    .about-list{ margin:.3rem 0 .2rem 1rem; }\n    .about-list li{ margin:.25rem 0; }\n\n    \/* \u5f15\u6587\u6761\uff08\u7ec6\u8fb9+\u6de1\u80cc\u666f\uff0c\u907f\u514d\u201c\u7b2c\u4e8c\u5708\u201d\u9519\u89c9\uff09 *\/\n    .about-quote{\n      margin: .8rem 0 0;\n      padding: .8rem .9rem .8rem 1rem;\n      border-left: 3px solid var(--about-accent);\n      background: linear-gradient(180deg, rgba(76,158,255,.06), transparent);\n      border-radius: 8px;\n      font-style: italic;\n    }\n\n    \/* \u56fe\u7247\uff1a\u53ef\u9009\u8f7b\u5fae\u89c6\u5dee *\/\n    .about-figure{ margin: 1rem 0; text-align:center; }\n    .about-img{\n      max-width:100%; height:auto; border-radius: 14px;\n      box-shadow: var(--about-shadow);\n      transform: translateY(8px); opacity: 0;\n    }\n    .about-img.reveal{ transform: translateY(0); opacity:1; transition: .7s ease; }\n\n    \/* \u6253\u5b57\u673a\u5149\u6807\uff08JS \u8bbe\u7f6e\u6587\u5b57\uff09 *\/\n    .about-typer{\n      display:inline-block; white-space:nowrap; overflow:hidden; border-right:2px solid currentColor;\n      animation: about-caret 1s step-end infinite;\n    }\n    @keyframes about-caret{ 50%{ border-color: transparent; } }\n\n    \/* \u5c0f\u5c4f\u4f18\u5316 *\/\n    @media (max-width: 420px){\n      .about-chip{ font-size:.82rem; padding:.24rem .6rem; }\n      .about-card{ padding:.9rem .85rem; }\n    }\n  <\/style>\n\n  <!-- Hero -->\n  <div class=\"about-card\" data-anim>\n    <div class=\"about-title\">Si vous lisez ce blog, c'est qu'il y a un lien ou que je vous fais confiance.<\/div>\n    <div class=\"about-sub\">\n      <span class=\"about-typer\" id=\"about-typer\"><\/span>\n    <\/div>\n\n    <div class=\"about-badges\" style=\"margin-top:.85rem\">\n      <span class=\"about-chip\">Nom d'\u00e9cran chinois : M. Jun Ke<\/span>\n      <span class=\"about-chip\">Nom anglais : Sean Liu<\/span>\n      <span class=\"about-chip\">De la Chine au Sud<\/span>\n      <span class=\"about-chip\">La classe ouvri\u00e8re dans les pays socialistes<\/span>\n      <span class=\"about-chip\">Cercle priv\u00e9 d'amis \/ Blog \/ Weblog<\/span>\n    <\/div>\n  <\/div>\n\n  <!-- \u5173\u4e8e\u6211 -->\n  <div class=\"about-card\" data-anim>\n    <h3>A propos de moi.<\/h3>\n    <p>Mon nom chinois en ligne est \"Mr Jun Ke\" et mon nom anglais est \"Sean\". Je viens de Chine, un pays socialiste ouvrier, et voici mon cercle priv\u00e9 d'amis, \u00e9galement connu sous le nom de \"blog \/ weblog\".<\/p>\n    <p>Je vis dans le sud de la Chine et j'ai un \u00e9pagneul chinois extr\u00eamement humain appel\u00e9 \"Qian Duoduo\" et un chat civette r\u00e9cemment adopt\u00e9.<\/p>\n  <\/div>\n\n  <!-- \u5174\u8da3\u7231\u597d -->\n  <div class=\"about-card\" data-anim>\n    <h3>loisirs<\/h3>\n    <ul class=\"about-list\">\n      <li>Lecture de romans chinois, badminton<\/li>\n      <li>Passionn\u00e9 de voyages et de photographie<\/li>\n    <\/ul>\n    <p class=\"about-muted\">Actuellement ou en permanence dans la classe contributrice socialiste, avec un grand d\u00e9sir d'explorer et d'apprendre la vie, et un respect pour la cr\u00e9ativit\u00e9.<\/p>\n    <p>Aspire \u00e0 \u00eatre un cr\u00e9ateur de contenu de qualit\u00e9 dans la communaut\u00e9 et un consommateur de qualit\u00e9.<\/p>\n  <\/div>\n\n  <!-- \u535a\u5ba2\u7684\u8d77\u6e90 -->\n  <div class=\"about-card\" data-anim>\n    <h3>Origine des blogs<\/h3>\n    <p>Pourquoi est-ce que j'\u00e9cris ce blog ?<\/p>\n    <p><em><strong>J'aime avoir le sentiment de contr\u00f4ler la situation et je ne veux pas stocker mes donn\u00e9es sur d'autres plateformes de m\u00e9dias sociaux, c'est pourquoi j'ai cr\u00e9\u00e9 ce blog.<\/strong><\/em><\/p>\n    <p>Esp\u00e9rance de vie de 80 ans par habitant en Chine <strong>78,6 ans<\/strong>. Les cellules du corps se m\u00e9tabolisent et sont remplac\u00e9es tous les trois mois ; \u00e0 mesure que les vieilles cellules meurent, de nouvelles naissent. Pendant environ sept ans, nous sommes comme une autre personne sur le plan physique.<\/p>\n    <p>En quelques d\u00e9cennies, les oublieux ont toujours tendance \u00e0 oublier le pass\u00e9. Qu'il s'agisse de plaisir ou de douleur, j'aime l'\u00e9crire avec des mots ; parfois, j'ai l'impression que le pass\u00e9 se r\u00e9p\u00e8te, mais j'ai une exp\u00e9rience diff\u00e9rente. Des moments et des exp\u00e9riences diff\u00e9rents me procurent des sentiments diff\u00e9rents.<\/p>\n    <div class=\"about-quote\">Bien s\u00fbr. Est-ce un journal intime ? Non, ce n'est pas un journal. Qui tient un journal ? Vous tenez un journal intime ?<\/div>\n    <p style=\"text-align:center;margin:.5rem 0 0;\">Je n'\u00e9cris pas, je ne suis qu'un gourou qui embellit et emballe le pass\u00e9.<\/p>\n    <p class=\"about-muted\" style=\"text-align:center;margin:.15rem 0 0;\"><strong>Les gens sont toujours inconstants, et ce que j'\u00e9cris aujourd'hui n'est donc pas repr\u00e9sentatif des opinions et des points de vue futurs.<\/strong><\/p>\n  <\/div>\n\n\n  <script>\n    (function(){\n      \/\/ \u6253\u5b57\u673a\n      const typer = document.getElementById('about-typer');\n      const text = \"\u5f88\u9ad8\u5174\u8ba4\u8bc6\u4f60\u3002Nice to meet you.\";\n      if(typer){\n        let i = 0;\n        const step = () => {\n          typer.textContent = text.slice(0, i++);\n          if(i <= text.length){ requestAnimationFrame(step); }\n        };\n        \/\/ \u8f7b\u5ef6\u65f6\uff0c\u5f85\u9875\u9762\u7a33\u5b9a\u540e\u518d\u5f00\u59cb\n        setTimeout(()=>requestAnimationFrame(step), 180);\n      }\n\n      \/\/ \u6eda\u52a8\u8fdb\u573a\n      const reveal = (el)=> el.classList.add('reveal');\n      const cards = document.querySelectorAll('.about-card[data-anim]');\n      const img = document.getElementById('about-img');\n\n      if('IntersectionObserver' in window){\n        const io = new IntersectionObserver((es)=>{\n          es.forEach(e=>{ if(e.isIntersecting){ reveal(e.target); io.unobserve(e.target);} });\n        }, { threshold: .12 });\n        cards.forEach(c=> io.observe(c));\n        if(img) io.observe(img);\n      }else{\n        \/\/ \u964d\u7ea7\uff1a\u76f4\u63a5\u663e\u793a\n        cards.forEach(reveal);\n        if(img) img.classList.add('reveal');\n      }\n\n      \/\/ \u8f7b\u5fae\u89c6\u5dee\uff08\u53ef\u5173\uff09\n      let lastY = 0;\n      function parallax(){\n        const y = window.scrollY || document.documentElement.scrollTop;\n        if(img){ img.style.transform = `translateY(${Math.min(10,(y - lastY)*0.04)}px)`; }\n        lastY = y;\n      }\n      window.addEventListener('scroll', parallax, { passive:true });\n\n      \/\/ \u5c0a\u91cd\u964d\u4f4e\u52a8\u6548\n      if(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches){\n        document.querySelectorAll('.about-card, .about-img').forEach(el=>{\n          el.style.transition = 'none'; el.classList.add('reveal');\n        });\n        window.removeEventListener('scroll', parallax, { passive:true });\n      }\n    })();\n  <\/script>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Si vous voyez ce blog, c'est qu'il y a un destin ou que je vous fais confiance. Nom d'\u00e9cran chinois : Mr Jun Ke Nom anglais : Sean Liu De Chine - Sud [...]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bwcxbk.com\/fr\/wp-json\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bwcxbk.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bwcxbk.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bwcxbk.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bwcxbk.com\/fr\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":30,"href":"https:\/\/bwcxbk.com\/fr\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":938,"href":"https:\/\/bwcxbk.com\/fr\/wp-json\/wp\/v2\/pages\/2\/revisions\/938"}],"wp:attachment":[{"href":"https:\/\/bwcxbk.com\/fr\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}