guanqr/blog

manifest.json路径问题

Closed this issue · 10 comments

你好,我根据你的博客教程,配置manifest.json到source目录下,但是部署后,网站显示存在错误
image
然后我点击查看,发现文件是空,但是在GitHub目录下是存在内容的,是路径存在问题吗?

@linwhitehat

看一看博客配置文件下的 skip_render 的内容。将 manifest.json 文件填写到这里。因为在执行 hexo g 命令后, source 文件夹下的内容会渲染成 html 类型的文件,所以可能是 manifest.json 内容被修改了。

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
+ skip_render: [README.md,manifest.json]

@linwhitehat

看一看博客配置文件下的 skip_render 的内容。将 manifest.json 文件填写到这里。因为在执行 hexo g 命令后, source 文件夹下的内容会渲染成 html 类型的文件,所以可能是 manifest.json 内容被修改了。

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
+ skip_render: [README.md,manifest.json]

确实是这个问题,我修改skip_render之后可以正常显示文件内容,但是却显示这个新问题
image
查看sw.js加载的问题,显示问题是这个,这是因为谷歌服务获取不到吗?
image

@linwhitehat ,看了一下网页的代码和加载项,sw.js 加载了,只是没有显示,注册 Service Worker 用的代码应该加在 <body></body> 之间。而不是 <body> 之前。

把下面的代码加在主题文件夹内的 /layout/_layout.swig 最后的 </body> 前面试一试(注意是 </body>,不是 <body>)。

<div class="app-refresh" id="app-refresh">
    <div class="app-refresh-wrap" onclick="location.reload()">
        <label>已更新最新版本</label>
        <span>点击刷新</span>
    </div>
</div>

<script>
    if ('serviceWorker' in navigator) {
        if (navigator.serviceWorker.controller) {
            navigator.serviceWorker.addEventListener('controllerchange', function() {
                showNotification();
            });
        }

        window.addEventListener('load', function() {
            navigator.serviceWorker.register('/sw.js');
        });
    }

    function showNotification() {
        document.querySelector('meta[name=theme-color]').content = '#000';
        document.getElementById('app-refresh').className += ' app-refresh-show';
    }
</script>

显示 https://linwhitehat.github.io/categories/Handbook/Latex/index.html 该网页 404,似乎是因为你的网站中并没有存在这个目录。 Latex 改成小写 latex 就加载出来了。执行 hexo clean 清理一下 public 文件夹试试。

@linwhitehat ,看了一下网页的代码和加载项,sw.js 加载了,只是没有显示,注册 Service Worker 用的代码应该加在 <body></body> 之间。而不是 <body> 之前。

把下面的代码加在主题文件夹内的 /layout/_layout.swig 最后的 </body> 前面试一试(注意是 </body>,不是 <body>)。

<div class="app-refresh" id="app-refresh">
    <div class="app-refresh-wrap" onclick="location.reload()">
        <label>已更新最新版本</label>
        <span>点击刷新</span>
    </div>
</div>

<script>
    if ('serviceWorker' in navigator) {
        if (navigator.serviceWorker.controller) {
            navigator.serviceWorker.addEventListener('controllerchange', function() {
                showNotification();
            });
        }

        window.addEventListener('load', function() {
            navigator.serviceWorker.register('/sw.js');
        });
    }

    function showNotification() {
        document.querySelector('meta[name=theme-color]').content = '#000';
        document.getElementById('app-refresh').className += ' app-refresh-show';
    }
</script>

显示 https://linwhitehat.github.io/categories/Handbook/Latex/index.html 该网页 404,似乎是因为你的网站中并没有存在这个目录。 Latex 改成小写 latex 就加载出来了。执行 hexo clean 清理一下 public 文件夹试试。

感谢指正,确实是service worker配置错误了,同时也修正了页面404的问题,但是存在一个奇怪的404,我没印象写过这个,请问这种错误yi'b一般怎么调试排查
image

@linwhitehat ,直接查看网页的源代码看哪里出错就行了。应该是引用 google 字体的时候多了一个链接

2020-02-09_131855

另外字体直接使用 google 的链接 https://fonts.googleapis.com/ 就可以了,我觉得这个国内的镜像 https://fonts.loli.net/ 的加载时间也没多快。

@linwhitehat ,直接查看网页的源代码看哪里出错就行了。应该是引用 google 字体的时候多了一个链接

2020-02-09_131855

另外字体直接使用 google 的链接 https://fonts.googleapis.com/ 就可以了,我觉得这个国内的镜像 https://fonts.loli.net/ 的加载时间也没多快。

感谢,然后我想压缩html代码时好像必须存在本地文件才能压缩是吗?但是我的404设置了腾讯公益404,本地没有404.html文件,所以显示这个错误,必须我在本地写一个404.html才能解决吗?
image

@linwhitehat ,似乎并不是这个原因,可能是 gulpfile.js 里 minify-css 这部分代码内容有问题吧。我现在也没用这个压缩过代码了,不太清楚怎么回事……

另外刚才看代码,你的 google 字体引用了两遍,在主题配置文件中添加的字体不用再在 <head> 额外添加链接了,主题会自动添加上。并且这些字体链接中间空格的地方应该是 + 号,否则加载不出来。

2020-02-09_132952

嗯嗯,确实是配置出错了,我修改之后可以压缩源码了,但是怎么让源码更简洁,将源码做一些编码之类的,或者怎么提高网站的安全性?

另外,博客部署很多第三方插件,还要配置一些账号密码,发布在github仓库的只有public内容,那怎么检查有没有可能存在这些配置泄露呢?本地hexo配置的内容只在本地吗?

@linwhitehat ,因为是静态博客,第三方配置的一些 id 还有 key 的值可能会直接暴露在代码中,在生成的网页代码中搜一下看看就知道泄露没有了。安全方面只能在第三方插件这边做一些防护措施吧。我没用到多少第三方插件,直接把整个博客文件夹开源放在仓库里了,所以也没考虑过安全方面的问题,我觉得不需要把一个静态博客做得过于复杂,重点是文章写作本身。