如何给hexo博客文章加密和实现【matery主题】弹出欢迎弹窗

Hexo 博客加密博客弹窗

博客篇

发布日期: 2024-04-07

更新日期: 2024-04-13

文章字数: 417

阅读时长: 1 分

前言

介绍一种给博客文章加密的方法，很多时候当我们写了一篇博客，但并不想所有人能够访问它。所以得设置密码。也有时候需要弹窗提醒用户。对于WordPress这很容易做到，但是对于hexo，由于是静态网页，并不能做到完全的加密。

0x001 安装

npm install --save hexo-blog-encrypt
或者 yarn add hexo-blog-encrypt (require Yarn)

找到根目录下的_config.yml文件，添加如下:

# Security
encrypt:
    enable: true

在博客开头写上密码

password: 
message: 输入密码访问

参考资料

0x002 弹窗功能实现

1.下载sweetalert2.all.min.js

我们需要将sweetalert.js和sweetalert.css放到自己博客下，防止CDN炸裂导致的错误。(这2个文件用CTRL+S保存吧)

sweetalert.js放在博客根目录\themes\matery\source\js

sweetalert.css放在博客根目录\themes\matery\source\css

2.引入到主题中

打开主题配置文件，在\themes\matery\layout\layout.ejs中写入

  <head> 
    <script type="text/javascript" src ="/js/welcome.js" ></script> 
    <script src="/js/sweetalert.js"></script>
    <link rel="stylesheet" href="/css/sweetalert.css">
</head>

3.自动弹窗欢迎设置 (例子)

创建welcome.js放在博客根目录\themes\matery\source\js

function welcome(){
    let welcome_text = '欢迎光顾本网站~'
    if(document.referrer!==''){
        let referrer=document.referrer.split("/")[2];
        welcome_text="欢迎你，来自"+referrer.toUpperCase()+"的用户！";
        if(referrer.toUpperCase()==document.domain.toUpperCase())return;
    }
    swal({
        title: " 欢迎！",
        text: welcome_text+'\n打开页面下方音乐以获得更佳体验！',
        imageUrl: "/img/avatar.jpg",
        timer: 3000,
        showConfirmButton: false
    });
}
$(document).ready(()=>{
    welcome()
})