,/congo/de/samples/rich-content/feature-alexander-shatov-mr4JG4SYOF8-unsplash_hu155f404c35e9686a73aa8cdc88b17fb3_131160_1320x0_resize_q75_h2_box.webp 1320w" sizes=100vw type=image/webp><imgwidth=1920height=1440class="mb-6 -mt-4 rounded-md"alt="Ein Beispiel für ein Titelbild, das die Icons einiger bekannter Medienorganisationen zeigt."src=/congo/de/samples/rich-content/feature-alexander-shatov-mr4JG4SYOF8-unsplash_hu155f404c35e9686a73aa8cdc88b17fb3_131160_660x0_resize_q75_box.jpgsrcset="/congo/de/samples/rich-content/feature-alexander-shatov-mr4JG4SYOF8-unsplash_hu155f404c35e9686a73aa8cdc88b17fb3_131160_330x0_resize_q75_box.jpg330w,/congo/de/samples/rich-content/feature-alexander-shatov-mr4JG4SYOF8-unsplash_hu155f404c35e9686a73aa8cdc88b17fb3_131160_660x0_resize_q75_box.jpg660w
,/congo/de/samples/rich-content/feature-alexander-shatov-mr4JG4SYOF8-unsplash_hu155f404c35e9686a73aa8cdc88b17fb3_131160_1320x0_resize_q75_box.jpg 1320w" sizes=100vw></picture><figcaptionclass="-mt-3 mb-6 text-center">Dies ist ein Beispiel für ein Titelbild mit einer Bildunterschrift.</figcaption></div></header><sectionclass="prose mt-0 flex max-w-full flex-col dark:prose-invert lg:flex-row"><divclass="order-first px-0 lg:order-last lg:max-w-xs lg:ps-8"><divclass="toc pe-5 print:hidden lg:sticky lg:top-10"><detailsopenclass="-ms-5 mt-0 overflow-hidden rounded-lg ps-5"><summaryclass="-ms-5 block cursor-pointer bg-neutral-100 py-1 ps-5 text-lg font-semibold text-neutral-800 lg:hidden dark:bg-neutral-700 dark:text-neutral-100">Inhaltsverzeichnis</summary><divclass="-ms-5 border-s border-dotted border-neutral-300 py-2 ps-5 dark:border-neutral-600"><navid=TableOfContents><ul><li><ahref=#youtube>YouTube</a></li><li><ahref=#twitter>Twitter</a></li><li><ahref=#gist>Gist</a></li><li><ahref=#vimeo>Vimeo</a></li></ul></nav></div></details></div></div><divclass="min-h-0 min-w-0 max-w-prose grow"><p>Hugo wird mit mehreren [eingebauten Shortcodes] (
<ahref=https://gohugo.io/content-management/shortcodes/#use-hugos-built-in-shortcodestarget=_blankrel=noreferrer>https://gohugo.io/content-management/shortcodes/#use-hugos-built-in-shortcodes</a>) für reichhaltige Inhalte geliefert, zusammen mit einer [Datenschutzkonfiguration] (
<ahref=https://gohugo.io/about/hugo-and-gdpr/target=_blankrel=noreferrer>https://gohugo.io/about/hugo-and-gdpr/</a>) und einer Reihe von <em>einfachen Shortcodes</em>, die statische und No-JS-Versionen von Einbettungen verschiedener sozialer Medien ermöglichen.</p><h2id=youtubeclass="relative group">YouTube <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#youtubearia-label=Anker>#</a></span></h2><p>Hier ist ein Beispiel des mitgelieferten <code>youtube</code>-Shortcodes.</p><divstyle=position:relative;padding-bottom:56.25%;height:0;overflow:hidden><iframesrc=https://www.youtube.com/embed/ZJthWmvUzzcstyle=position:absolute;top:0;left:0;width:100%;height:100%;border:0allowfullscreentitle="YouTube Video"></iframe></div><h2id=twitterclass="relative group">Twitter <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#twitteraria-label=Anker>#</a></span></h2><p>Dieses Beispiel verwendet den Shortcode <code>twitter_simple</code>, um einen Tweet anzuzeigen. Er benötigt zwei benannte Parameter <code>user</code> und <code>id</code>.</p><styletype=text/css>.twitter-tweet{font:14px/1.45'-apple-system',BlinkMacSystemFont,segoeui,Roboto,Oxygen-Sans,Ubuntu,Cantarell,helveticaneue,sans-serif;border-left:4pxsolid#2b7bb9;padding-left:1.5em;color:#555}.twitter-tweeta{color:#2b7bb9;text-decoration:none}blockquote.twitter-tweeta:hover,blockquote.twitter-tweeta:focus{text-decoration:underline}</style><blockquoteclass=twitter-tweet><plang=endir=ltr>“In addition to being more logical, asymmetry has the advantage that its complete appearance is far more optically effective than symmetry.”<br>— Jan Tschichold <ahref=https://t.co/gcv7SrhvJb>pic.twitter.com/gcv7SrhvJb</a></p>— Design Reviewed | Graphic Design History (@DesignReviewed) <ahref="https://twitter.com/DesignReviewed/status/1085870671291310081?ref_src=twsrc%5Etfw">January 17, 2019</a></blockquote><p>Alternativ kann der Shortcode <code>tweet</code> verwendet werden, um eine vollständig formatierte Twitter-Kachel einzubetten.</p><h2id=gistclass="relative group">Gist <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#gistaria-label=Anker>#</a></span></h2><p>Der Shortcode <code>gist</code> kann verwendet werden, um einen Gist von GitHub einzubetten. Er erfordert zwei unbenannte Parameter: den Benutzernamen und die ID des Gist.</p><scriptsrc=https://gist.github.com/jpanther/a873e1219ffeaa80a926bbe8255f348e.js></script><h2id=vimeoclass="relative group">Vimeo <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#vimeoaria-label=Anker>#</a></span></h2><p>Der Shortcode <code>vimeo_simple</code> bettet ein Video von Vimeo ein.</p><style>.__h_video{position:relative;padding-bottom:56.23%;height:0;overflow:hidden;width:100%;background:#000}.__h_videoimg{width:100%;height:auto;color:#000}.__h_video.play{height:72px;width:72px;left:50%;top:50%;margin-left:-36px;margin-top:-36px;position:absolute;cursor:pointer}</style><divclass="s_video_simple __h_video"><ahref=https://vimeo.com/4.8912912e+07rel=noopenertarget=_blank><imgsrc=https://i.vimeocdn.com/video/337401969-979f0cc9f55fdf305fb8984e90d92639ec9d7ecc4c9dfbc6536e28edb43784ce-d_640srcset="https://i.vimeocdn.com/video/337401969-979f0cc9f55fdf305fb8984e90d92639ec9d7ecc4c9dfbc6536e28edb43784ce-d_6401x,https://i.vimeocdn.com/video/337401969-979f0cc9f55fdf305fb8984e90d92639ec9d7ecc4c9dfbc6536e28edb43784ce-d_64
