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