Change Cover
Reposition
Customization
/
Customization
Netlify
The following customization should all be done in your Netlify configuration page and Travis CI.
Scrolling Fix on Touch Screens (Recommended)
Add the following script as "before </head>" on your Netlify configuration page:
<style> .notion-scroller { overflow-y: scroll; -webkit-overflow-scrolling: touch; } </style>
HTML
Also feel free to add your custom CSS.
Mobile Redirection (Recommended)
Notion.so does not have a perfect CSS-powered responsive implementation yet, so Static Rocket creates two versions of your site. The mobile site is available at /m/.
To enable automatic redirection, add the following script as "before </head>".
<script> if (screen.width <= 860 && !document.location.pathname.startsWith("/m/")) { document.location = "/m" + document.location.pathname; } if (screen.width > 860 && document.location.pathname.startsWith("/m/")) { document.location = "/" + document.location.pathname.split('/')[2]; } </script>
HTML
Disqus
Step 1
To integrate with your own Disqus site, add the following script as "before </body>":
<script> var disqus_config = function () { var p = document.location.pathname; if (p.startsWith("/m/")) { p = p.slice(2); }; this.page.identifier = p; }; // ⚠️ Please paste your own code generated by Disqus // The following is an EXAMPLE! (function() { // DON'T EDIT BELOW THIS LINE var d = document, s = d.createElement('script'); s.src = 'https://alan-blog.disqus.com/embed.js'; s.setAttribute('data-timestamp', +new Date()); (d.head || d.body).appendChild(s); })(); </script> <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
HTML
⚠️ Please replace this script with your own Disqus configuration!
Step 2
On your Notion page where you want to have comment enabled, add:
[comment]
Plain Text
as your last block.
Be sure to add it as a plain text block.
Google Analytics
You can simply add your Google Analytics code by adding a script as "before </body>".
lightGallery.js
In your Netlify site settings, add the following blocks to enable lightGallery.js support.
before </head>
<script src="https://cdn.jsdelivr.net/lightgallery.js/1.0.1/js/lightgallery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/lightgallery.js/1.0.1/css/lightgallery.min.css">
HTML
before </body>
<script> lightGallery(document.getElementById('notion-app'), {selector: '.lg img'}) </script>
HTML