guanqr/blog

manifest.json路径问题

Closed this issue · 10 comments

linwhitehat commented

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

guanqr commented

@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 commented

@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

guanqr commented

@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 commented

@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

guanqr commented

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

2020-02-09_131855

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

linwhitehat commented

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

2020-02-09_131855

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

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

guanqr commented

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

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

2020-02-09_132952

linwhitehat commented

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

linwhitehat commented

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

guanqr commented

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