拾点灵犀
标签 hugo 下共有 3 篇文章
为hugo主题添加PWA支持
无论是在手机还是在电脑,都很喜欢将经常用的网站添加到桌面,苹果手机的是添加到主屏幕,将网站单独当应用使用。网页如果支持PWA,添加到主屏幕后,它就是一个应用。它的缓存机制,能提高访问速度,提供访问体验。如下图: 图 2 让网页支持PWA其实很简单,只需3步骤,前提是网页支持https访问。 1、创建manifest.json 内容如下:比如我的manifest.json 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 { "theme_color": "#4c8953", "background_color": "#ffffff", "display": "fullscreen", "scope": "/", "start_url": "/", "name": "拾点灵犀", "short_name": "拾点灵犀", "description": "刹那的火花,却也是永恒。", "icons": [{ "src": "https://life97.top/icon.png", "type": "image/png", "sizes": "150x150" }] } 2、创建serviceWorker 内容如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 (()=> { var cacheName = 'top'; var offlineUrl = '/offline.
给 hugo 主题添加有进度条的返回顶部按钮
Hugo 是一个静态网站生成器,可以使用 JavaScript 和 CSS 构建自定义插件。可以在 Hugo 模板中添加 JavaScript 代码,以实现所说的功能。 只需在 hugo 的主题文件 footer.html 里添加以下代码: 显示进度铵钮并点击返回 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 <script type="text/javascript"> // 创建进度按钮 var progressBtn = document.createElement('button'); progressBtn.style.backgroundColor = '#0275d8'; progressBtn.