mirror of
https://github.com/telekom-security/tpotce.git
synced 2025-04-29 19:58:52 +00:00
293 lines
18 KiB
Text
293 lines
18 KiB
Text
|
<!DOCTYPE html>
|
||
|
|
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8"/>
|
||
|
|
<meta content="IE=edge" http-equiv="X-UA-Compatible"/>
|
||
|
|
<title>Advanced Markdown tips</title>
|
||
|
|
<meta content="True" name="HandheldFriendly"/>
|
||
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||
|
|
<link href="/assets/built/screen.css?v=8cfc086fe8" rel="stylesheet" type="text/css"/>
|
||
|
|
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon"/>
|
||
|
|
<link href="/advanced-markdown/" rel="canonical"/>
|
||
|
|
<meta content="no-referrer-when-downgrade" name="referrer"/>
|
||
|
|
<link href="/advanced-markdown/amp/" rel="amphtml"/>
|
||
|
|
<meta content="user Blog" property="og:site_name"/>
|
||
|
|
<meta content="article" property="og:type"/>
|
||
|
|
<meta content="Advanced Markdown tips" property="og:title"/>
|
||
|
|
<meta content="There are lots of powerful things you can do with the Ghost editor If you've gotten pretty comfortable with all the basics of writing in Ghost, then you may enjoy some more advanced tips about the types of things you can do with Markdown! As with the last post about" property="og:description"/>
|
||
|
|
<meta content="http://172.20.254.138:80/advanced-markdown/" property="og:url"/>
|
||
|
|
<meta content="https://casper.ghost.org/v1.0.0/images/advanced.jpg" property="og:image"/>
|
||
|
|
<meta content="2018-08-09T11:04:47.000Z" property="article:published_time"/>
|
||
|
|
<meta content="2018-08-09T11:04:45.000Z" property="article:modified_time"/>
|
||
|
|
<meta content="Getting Started" property="article:tag"/>
|
||
|
|
<meta content="summary_large_image" name="twitter:card"/>
|
||
|
|
<meta content="Advanced Markdown tips" name="twitter:title"/>
|
||
|
|
<meta content="There are lots of powerful things you can do with the Ghost editor If you've gotten pretty comfortable with all the basics of writing in Ghost, then you may enjoy some more advanced tips about the types of things you can do with Markdown! As with the last post about" name="twitter:description"/>
|
||
|
|
<meta content="http://172.20.254.138:80/advanced-markdown/" name="twitter:url"/>
|
||
|
|
<meta content="https://casper.ghost.org/v1.0.0/images/advanced.jpg" name="twitter:image"/>
|
||
|
|
<meta content="Written by" name="twitter:label1"/>
|
||
|
|
<meta content="Ghost" name="twitter:data1"/>
|
||
|
|
<meta content="Filed under" name="twitter:label2"/>
|
||
|
|
<meta content="Getting Started" name="twitter:data2"/>
|
||
|
|
<meta content="1400" property="og:image:width"/>
|
||
|
|
<meta content="933" property="og:image:height"/>
|
||
|
|
<script type="application/ld+json">
|
||
|
|
{
|
||
|
|
"@context": "https://schema.org",
|
||
|
|
"@type": "Article",
|
||
|
|
"publisher": {
|
||
|
|
"@type": "Organization",
|
||
|
|
"name": "user Blog",
|
||
|
|
"logo": "https://casper.ghost.org/v1.0.0/images/ghost-logo.svg"
|
||
|
|
},
|
||
|
|
"author": {
|
||
|
|
"@type": "Person",
|
||
|
|
"name": "Ghost",
|
||
|
|
"url": "http://172.20.254.138:80/author/ghost/",
|
||
|
|
"sameAs": []
|
||
|
|
},
|
||
|
|
"headline": "Advanced Markdown tips",
|
||
|
|
"url": "http://172.20.254.138:80/advanced-markdown/",
|
||
|
|
"datePublished": "2018-08-09T11:04:47.000Z",
|
||
|
|
"dateModified": "2018-08-09T11:04:45.000Z",
|
||
|
|
"image": {
|
||
|
|
"@type": "ImageObject",
|
||
|
|
"url": "https://casper.ghost.org/v1.0.0/images/advanced.jpg",
|
||
|
|
"width": 1400,
|
||
|
|
"height": 933
|
||
|
|
},
|
||
|
|
"keywords": "Getting Started",
|
||
|
|
"description": "There are lots of powerful things you can do with the Ghost editor If you've gotten pretty comfortable with all the basics of writing in Ghost, then you may enjoy some more advanced tips about the types of things you can do with Markdown! As with the last post about",
|
||
|
|
"mainEntityOfPage": {
|
||
|
|
"@type": "WebPage",
|
||
|
|
"@id": "http://172.20.254.138:80/"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<script>//<![CDATA[
|
||
|
|
!function(){var o,i,n,e,r="//172.20.254.138:80/ghost/api/v0.1/";n={api:function(){var n,e=Array.prototype.slice.call(arguments),t=r;return(n=e.pop())&&"object"!=typeof n&&(e.push(n),n={}),(n=n||{}).client_id=o,n.client_secret=i,e.length&&e.forEach(function(n){t+=n.replace(/^\/|\/$/g,"")+"/"}),t+function(n){var e,t=[];if(!n)return"";for(e in n)n.hasOwnProperty(e)&&(n[e]||!1===n[e])&&t.push(e+"="+encodeURIComponent(n[e]));return t.length?"?"+t.join("&"):""}(n)}},e=function(n){o=n.clientId?n.clientId:"",i=n.clientSecret?n.clientSecret:"",r=n.url?n.url:r.match(/{\{api-url}}/)?"":r},"undefined"!=typeof window&&(window.ghost=window.ghost||{},window.ghost.url=n,window.ghost.init=e),"undefined"!=typeof module&&(module.exports={url:n,init:e})}();
|
||
|
|
//]]></script>
|
||
|
|
<script>ghost.init({clientId:"ghost-frontend",clientSecret:"99616761d626"});</script>
|
||
|
|
<meta content="Ghost 1.25" name="generator"/>
|
||
|
|
<link href="/rss/" rel="alternate" title="user Blog" type="application/rss+xml"/>
|
||
|
|
</head>
|
||
|
|
<body class="post-template tag-getting-started">
|
||
|
|
<div class="site-wrapper">
|
||
|
|
<header class="site-header outer">
|
||
|
|
<div class="inner">
|
||
|
|
<nav class="site-nav">
|
||
|
|
<div class="site-nav-left">
|
||
|
|
<a class="site-nav-logo" href=""><img alt="user Blog" src="/v1.0.0/images/ghost-logo.svg"/></a>
|
||
|
|
<ul class="nav" role="menu">
|
||
|
|
<li class="nav-home" role="menuitem"><a href="/">Home</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="site-nav-right">
|
||
|
|
<div class="social-links">
|
||
|
|
</div>
|
||
|
|
<a class="rss-button" href="https://feedly.com/i/subscription/feed/http://172.20.254.138:80/rss/" rel="noopener" target="_blank"><svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="6.18" cy="17.82" r="2.18"></circle><path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"></path></svg>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
<main class="site-main outer" id="site-main">
|
||
|
|
<div class="inner">
|
||
|
|
<article class="post-full post tag-getting-started ">
|
||
|
|
<header class="post-full-header">
|
||
|
|
<section class="post-full-meta">
|
||
|
|
<time class="post-full-meta-date" datetime="2018-08-09">9 August 2018</time>
|
||
|
|
<span class="date-divider">/</span> <a href="/tag/getting-started/">Getting Started</a>
|
||
|
|
</section>
|
||
|
|
<h1 class="post-full-title">Advanced Markdown tips</h1>
|
||
|
|
</header>
|
||
|
|
<figure class="post-full-image" style="background-image:url(https://casper.ghost.org/v1.0.0/images/advanced.jpg)">
|
||
|
|
</figure>
|
||
|
|
<section class="post-full-content">
|
||
|
|
<div class="post-content">
|
||
|
|
<div class="kg-card-markdown"><p>There are lots of powerful things you can do with the Ghost editor</p>
|
||
|
|
<p>If you've gotten pretty comfortable with <a href="/the-editor/">all the basics</a> of writing in Ghost, then you may enjoy some more advanced tips about the types of things you can do with Markdown!</p>
|
||
|
|
<p>As with the last post about the editor, you'll want to be actually editing this post as you read it so that you can see all the Markdown code we're using.</p>
|
||
|
|
<h2 id="specialformatting">Special formatting</h2>
|
||
|
|
<p>As well as bold and italics, you can also use some other special formatting in Markdown when the need arises, for example:</p>
|
||
|
|
<ul>
|
||
|
|
<li><s>strike through</s></li>
|
||
|
|
<li><mark>highlight</mark></li>
|
||
|
|
<li>*escaped characters*</li>
|
||
|
|
</ul>
|
||
|
|
<h2 id="writingcodeblocks">Writing code blocks</h2>
|
||
|
|
<p>There are two types of code elements which can be inserted in Markdown, the first is inline, and the other is block. Inline code is formatted by wrapping any word or words in back-ticks, <code>like this</code>. Larger snippets of code can be displayed across multiple lines using triple back ticks:</p>
|
||
|
|
<pre><code>.my-link {
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
</code></pre>
|
||
|
|
<p>If you want to get really fancy, you can even add syntax highlighting using <a href="http://prismjs.com/">Prism.js</a>.</p>
|
||
|
|
<h2 id="fullbleedimages">Full bleed images</h2>
|
||
|
|
<p>One neat trick which you can use in Markdown to distinguish between different types of images is to add a <code>#hash</code> value to the end of the source URL, and then target images containing the hash with special styling. For example:</p>
|
||
|
|
<p><img alt="walking" src="/v1.0.0/images/walking.jpg#full"/></p>
|
||
|
|
<p>which is styled with...</p>
|
||
|
|
<pre><code>img[src$="#full"] {
|
||
|
|
max-width: 100vw;
|
||
|
|
}
|
||
|
|
</code></pre>
|
||
|
|
<p>This creates full-bleed images in the Casper theme, which stretch beyond their usual boundaries right up to the edge of the window. Every theme handles these types of things slightly differently, but it's a great trick to play with if you want to have a variety of image sizes and styles.</p>
|
||
|
|
<h2 id="referencelists">Reference lists</h2>
|
||
|
|
<p><strong>The quick brown <a href="https://en.wikipedia.org/wiki/Fox" title="Wikipedia: Fox">fox</a>, jumped over the lazy <a href="https://en.wikipedia.org/wiki/Dog" title="Wikipedia: Dog">dog</a>.</strong></p>
|
||
|
|
<p>Another way to insert links in markdown is using reference lists. You might want to use this style of linking to cite reference material in a Wikipedia-style. All of the links are listed at the end of the document, so you can maintain full separation between content and its source or reference.</p>
|
||
|
|
<h2 id="creatingfootnotes">Creating footnotes</h2>
|
||
|
|
<p>The quick brown fox<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> jumped over the lazy dog<sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup>.</p>
|
||
|
|
<p>Footnotes are a great way to add additional contextual details when appropriate. Ghost will automatically add footnote content to the very end of your post.</p>
|
||
|
|
<h2 id="fullhtml">Full HTML</h2>
|
||
|
|
<p>Perhaps the best part of Markdown is that you're never limited to just Markdown. You can write HTML directly in the Ghost editor and it will just work as HTML usually does. No limits! Here's a standard YouTube embed code as an example:</p>
|
||
|
|
<iframe allowfullscreen="" frameborder="0" height="315" src="/embed/Cniqsc9QfDo?rel=0&showinfo=0" width="560"></iframe>
|
||
|
|
<hr class="footnotes-sep"/>
|
||
|
|
<section class="footnotes">
|
||
|
|
<ol class="footnotes-list">
|
||
|
|
<li class="footnote-item" id="fn1"><p>Foxes are red <a class="footnote-backref" href="#fnref1">↩︎</a></p>
|
||
|
|
</li>
|
||
|
|
<li class="footnote-item" id="fn2"><p>Dogs are usually not red <a class="footnote-backref" href="#fnref2">↩︎</a></p>
|
||
|
|
</li>
|
||
|
|
</ol>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<footer class="post-full-footer">
|
||
|
|
<section class="author-card">
|
||
|
|
<span class="avatar-wrapper"><svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M3.513 18.998C4.749 15.504 8.082 13 12 13s7.251 2.504 8.487 5.998C18.47 21.442 15.417 23 12 23s-6.47-1.558-8.487-4.002zM12 12c2.21 0 4-2.79 4-5s-1.79-4-4-4-4 1.79-4 4 1.79 5 4 5z" fill="#FFF"></path></g></svg>
|
||
|
|
</span>
|
||
|
|
<section class="author-card-content">
|
||
|
|
<h4 class="author-card-name"><a href="/author/ghost/">Ghost</a></h4>
|
||
|
|
<p>You can delete this user to remove all the welcome posts</p>
|
||
|
|
</section>
|
||
|
|
</section>
|
||
|
|
<div class="post-full-footer-right">
|
||
|
|
<a class="author-card-button" href="/author/ghost/">Read More</a>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
</article>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
<aside class="read-next outer">
|
||
|
|
<div class="inner">
|
||
|
|
<div class="read-next-feed">
|
||
|
|
<article class="read-next-card" style="background-image:url(https://casper.ghost.org/v1.0.0/images/blog-cover.jpg)">
|
||
|
|
<header class="read-next-card-header">
|
||
|
|
<small class="read-next-card-header-sitetitle">— user Blog —</small>
|
||
|
|
<h3 class="read-next-card-header-title"><a href="/tag/getting-started/">Getting Started</a></h3>
|
||
|
|
</header>
|
||
|
|
<div class="read-next-divider"><svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M13 14.5s2 3 5 3 5.5-2.463 5.5-5.5S21 6.5 18 6.5c-5 0-7 11-12 11C2.962 17.5.5 15.037.5 12S3 6.5 6 6.5s4.5 3.5 4.5 3.5"></path></svg>
|
||
|
|
</div>
|
||
|
|
<div class="read-next-card-content">
|
||
|
|
<ul>
|
||
|
|
<li><a href="/welcome/">Welcome to Ghost</a></li>
|
||
|
|
<li><a href="/the-editor/">Using the Ghost editor</a></li>
|
||
|
|
<li><a href="/using-tags/">Organising your content with tags</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<footer class="read-next-card-footer">
|
||
|
|
<a href="/tag/getting-started/">See all 6 posts →</a>
|
||
|
|
</footer>
|
||
|
|
</article>
|
||
|
|
<article class="post-card post tag-getting-started">
|
||
|
|
<a class="post-card-image-link" href="/private-sites/">
|
||
|
|
<div class="post-card-image" style="background-image:url(https://casper.ghost.org/v1.0.0/images/locked.jpg)"></div>
|
||
|
|
</a>
|
||
|
|
<div class="post-card-content">
|
||
|
|
<a class="post-card-content-link" href="/private-sites/">
|
||
|
|
<header class="post-card-header">
|
||
|
|
<span class="post-card-tags">Getting Started</span>
|
||
|
|
<h2 class="post-card-title">Making your site private</h2>
|
||
|
|
</header>
|
||
|
|
<section class="post-card-excerpt">
|
||
|
|
<p>Sometimes you might want to put your site behind closed doors If you've got a publication that you don't want the world to see yet because it's not ready to launch, you can</p>
|
||
|
|
</section>
|
||
|
|
</a>
|
||
|
|
<footer class="post-card-meta">
|
||
|
|
<ul class="author-list">
|
||
|
|
<li class="author-list-item">
|
||
|
|
<div class="author-name-tooltip">
|
||
|
|
Ghost
|
||
|
|
</div>
|
||
|
|
<a class="static-avatar author-profile-image" href="/author/ghost/"><svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M3.513 18.998C4.749 15.504 8.082 13 12 13s7.251 2.504 8.487 5.998C18.47 21.442 15.417 23 12 23s-6.47-1.558-8.487-4.002zM12 12c2.21 0 4-2.79 4-5s-1.79-4-4-4-4 1.79-4 4 1.79 5 4 5z" fill="#FFF"></path></g></svg>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<span class="reading-time">1 min read</span>
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
<article class="post-card post tag-getting-started">
|
||
|
|
<a class="post-card-image-link" href="/themes/">
|
||
|
|
<div class="post-card-image" style="background-image:url(https://casper.ghost.org/v1.0.0/images/design.jpg)"></div>
|
||
|
|
</a>
|
||
|
|
<div class="post-card-content">
|
||
|
|
<a class="post-card-content-link" href="/themes/">
|
||
|
|
<header class="post-card-header">
|
||
|
|
<span class="post-card-tags">Getting Started</span>
|
||
|
|
<h2 class="post-card-title">Setting up your own Ghost theme</h2>
|
||
|
|
</header>
|
||
|
|
<section class="post-card-excerpt">
|
||
|
|
<p>Creating a totally custom design for your publication Ghost comes with a beautiful default theme called Casper, which is designed to be a clean, readable publication layout and can be easily adapted for</p>
|
||
|
|
</section>
|
||
|
|
</a>
|
||
|
|
<footer class="post-card-meta">
|
||
|
|
<ul class="author-list">
|
||
|
|
<li class="author-list-item">
|
||
|
|
<div class="author-name-tooltip">
|
||
|
|
Ghost
|
||
|
|
</div>
|
||
|
|
<a class="static-avatar author-profile-image" href="/author/ghost/"><svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M3.513 18.998C4.749 15.504 8.082 13 12 13s7.251 2.504 8.487 5.998C18.47 21.442 15.417 23 12 23s-6.47-1.558-8.487-4.002zM12 12c2.21 0 4-2.79 4-5s-1.79-4-4-4-4 1.79-4 4 1.79 5 4 5z" fill="#FFF"></path></g></svg>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<span class="reading-time">1 min read</span>
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
<div class="floating-header">
|
||
|
|
<div class="floating-header-logo">
|
||
|
|
<a href="">
|
||
|
|
<span>user Blog</span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<span class="floating-header-divider">—</span>
|
||
|
|
<div class="floating-header-title">Advanced Markdown tips</div>
|
||
|
|
<div class="floating-header-share">
|
||
|
|
<div class="floating-header-share-label">Share this <svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<path d="M7.5 15.5V4a1.5 1.5 0 1 1 3 0v4.5h2a1 1 0 0 1 1 1h2a1 1 0 0 1 1 1H18a1.5 1.5 0 0 1 1.5 1.5v3.099c0 .929-.13 1.854-.385 2.748L17.5 23.5h-9c-1.5-2-5.417-8.673-5.417-8.673a1.2 1.2 0 0 1 1.76-1.605L7.5 15.5zm6-6v2m-3-3.5v3.5m6-1v2"></path>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<a class="floating-header-share-tw" href="https://twitter.com/share?text=Advanced%20Markdown%20tips&url=http://172.20.254.138:80/advanced-markdown/" onclick="window.open(this.href, 'share-twitter', 'width=550,height=235');return false;">
|
||
|
|
<svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z"></path></svg>
|
||
|
|
</a>
|
||
|
|
<a class="floating-header-share-fb" href="https://www.facebook.com/sharer/sharer.php?u=http://172.20.254.138:80/advanced-markdown/" onclick="window.open(this.href, 'share-facebook','width=580,height=296');return false;">
|
||
|
|
<svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M19 6h5V0h-5c-3.86 0-7 3.14-7 7v3H8v6h4v16h6V16h5l1-6h-6V7c0-.542.458-1 1-1z"></path></svg>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<progress class="progress" id="reading-progress" value="0">
|
||
|
|
<div class="progress-container">
|
||
|
|
<span class="progress-bar"></span>
|
||
|
|
</div>
|
||
|
|
</progress>
|
||
|
|
</div>
|
||
|
|
<footer class="site-footer outer">
|
||
|
|
<div class="site-footer-content inner">
|
||
|
|
<section class="copyright"><a href="">user Blog</a> © 2018</section>
|
||
|
|
<nav class="site-footer-nav">
|
||
|
|
<a href="">Latest Posts</a>
|
||
|
|
<a href="https://ghost.org" rel="noopener" target="_blank">Ghost</a>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
<script crossorigin="anonymous" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" src="/jquery-3.2.1.min.js"></script>
|
||
|
|
<script src="/assets/js/jquery.fitvids.js,qv=8cfc086fe8.pagespeed.jm.nHU73nSfsl.js" type="text/javascript"></script>
|
||
|
|
<script>$(document).ready(function(){var $postContent=$(".post-full-content");$postContent.fitVids();var progressBar=document.querySelector('#reading-progress');var header=document.querySelector('.floating-header');var title=document.querySelector('.post-full-title');var lastScrollY=window.scrollY;var lastWindowHeight=window.innerHeight;var lastDocumentHeight=$(document).height();var ticking=false;function onScroll(){lastScrollY=window.scrollY;requestTick();}function onResize(){lastWindowHeight=window.innerHeight;lastDocumentHeight=$(document).height();requestTick();}function requestTick(){if(!ticking){requestAnimationFrame(update);}ticking=true;}function update(){var trigger=title.getBoundingClientRect().top+window.scrollY;var triggerOffset=title.offsetHeight+35;var progressMax=lastDocumentHeight-lastWindowHeight;if(lastScrollY>=trigger+triggerOffset){header.classList.add('floating-active');}else{header.classList.remove('floating-active');}progressBar.setAttribute('max',progressMax);progressBar.setAttribute('value',lastScrollY);ticking=false;}window.addEventListener('scroll',onScroll,{passive:true});window.addEventListener('resize',onResize,false);update();});</script>
|
||
|
|
</body>
|
||
|
|
</html>
|