说起javascript吧，我只能算是会写一些基础的代码，之前没细致探索过预编译啊、作用域啊。这几天在B站上又细致的看了些这方面内容，特做个笔记，如有错误，欢迎评论指正。

正文

何为预编译？

我们都知道，js是解释型语言，它是看一行执行一行，但在执行前会进行预编译。预编译主要进行变量的声明提示和函数的整体提升。本文将主要介绍执行函数这一块，全局也是差不多一样道理。

示例代码

这是一段代码，里面涉及到控制台输出，小伙伴们可以先判断判断console.log这几处会输出什么。

预编译过程

就函数而言，预编译发生在函数执行的前一刻进行。

• 首先，会创建AO对象。官方名叫运行期上下文对象好像。
• 接着，会找函数里的形参和变量名，并在AO对象中赋值为undefined。
• 然后，形参和实参相统一。即将实参赋值给对应的形参。
• 最后，会找函数里的函数声明，并在AO对象中把函数体赋值给它。

代码详解

首先，在函数执行前一刻创建了AO对象。
然后，我们发现这个函数没有形参，但声明了变量a和变量b，此时的AO对象为：

AO:{  a:undefined,  b:undefined,}

没有形参和实参这一步，我们来到最后一步，发现有个函数声明即function b(){}，到这，AO对象变为：

AO:{  a:undefined,  b:function b(){ ... }}

预编译到这里就结束了。

开始运行函数，那么第一行输出不言而喻，是undefined。下一行var b这一块就可以忽略，因为已经做过预编译了。

下一行不言而喻，是function b(){}。然后接着，a=20,b=30。那么AO对象里也这样变化：

AO:{  a:20,  b:30}

最后两个输出就分别是20和30了。
想的对不对呢，打开浏览器看看：

经验证，是这个理。

后记

以上就是对函数这一块预编译的介绍，欢迎大家评论区讨论、指正。

Github并不陌生，很多源码都在上面。但这玩意平时喜欢抽风，需要使用一些科学手段。那除了科学手段，还有没有其他姿势呢？

正文

工具介绍

前些天了解到有个软件叫做Watt ToolKit，里面可以免费加速Github访问。同时还支持steam、谷歌图形验证码等，如下图：

工具下载

这么好的工具，如何安装呢？我们打开Microsoft store搜索这个软件名下载即可。

工具使用

然后点击左侧的网络加速，在下面勾选想要加速的，点击一键加速即可。

当然，也不是100%可用率，有时候会提示服务不可用。我感觉原理应该和Fast Github差不多，就是找一些github解析的一些现在速度比较快的IP来加速访问而已。

后记

本文就介绍到这里，欢迎交流、指正。

上篇文章介绍了使用gulp压缩css的方法，不更新压缩js的方法，总感觉少点什么。这篇文章将介绍使用Gulp来压缩js。

正文

在这，安装nodejs和初始化项目就不介绍了。

安装插件

压缩css时我们用的gulp-clean-css，压缩js时，特别是含有es6语法，我们用的是gulp-terser。
首先，在终端输入以下命令：

npm i gulp gulp-terser

配置gulp

在项目根目录下新建gulpfile.js，编写以下内容：

const gulp=require("gulp")const terser=require("gulp-terser")function minJs(){  return gulp.src("js/*.js") // js文件位置  .pipe(terser({    compress:{      drop_console:true, // 是否清除代码中控制台输出      passes:2,    },    output:{      comments:false, // 是否保留注释    }  }))  .pipe(gulp.dest("dist")) // 指定输出目录}exports.minJs = minJs

运行代码

在终端命令行，输入以下命令：

npx gulp minJs

大概会看到如下结果：

这时候，我们就会发现dist目录中出现了压缩好的文件。

效果对比

压缩前：

压缩后：

通过对比，发现压缩了有1.22kb。代码少可能压缩效果不明显，我本地也没有很大的js文件

补充

gulp-terser这个插件支持es6语法，但不会说把es6转换成es5来支持低版本浏览器。需要转换的话，还要用到babel这个插件，感兴趣的小伙伴可以下去自行探索。

后记

以上就是本文全部内容，欢迎评论区讨论.

css、js写好了，不压缩的话虽然不会对访问速度产生太大影响，但多多少少延长了加载时间。日常使用Vue、React、Nuxt等这些框架，在构建时会自动帮我们压缩好静态资源。但如果我们手搓一个纯静态HTML文件，那css要么是使用网页版的一些压缩工具要么是使用本文提到的这个Gulp。

正文

这个插件依赖于Node.js，nodejs就自行下载安装了。

认识Gulp

先来认识一下gulp

gulp官网有这么一句话，说白了就是压缩文件的。

初始化项目

我们的项目目录中，如果没有package.json，先来初始化一下：

npm init -y

安装Gulp

然后我们来安装gulp和gulp对应压缩css的插件：

npm i gulp gulp-clean-css

我的css存放在目录下css文件夹内，目录结构如下图：

配置Gulp

我们在项目根目录下新建个文件gulpfile.js，然后编写内容：

const gulp=require("gulp")const cleanCss=require("gulp-clean-css")function clean(){    return gulp.src("css/*.css") // css文件位置    .pipe(cleanCss()) // 执行压缩操作    .pipe(gulp.dest("dist")) // 导出到dist文件夹内}exports.clean = clean // 这样可以通过写任务名来执行这个任务

运行代码

写好后，我们打开终端，执行这个任务：

npx gulp clean

我们会发现终端会出现以下输出：

这时，我们会发现我们项目目录下多了个dist文件夹，里面有个style.css，而这正是我们想要的压缩版。可以来看下压缩前后对比图。

效果对比图

压缩前：

压缩后：

后记

当然，也有通过gulp-rename插件把压缩后的文件改名为什么什么.min.css的，感兴趣的小伙伴下去可以自行尝试。本文就到这里了。

众所周知，Nuxtjs项目部署起来与Vuejs项目部署有些许不同。Vuejs在本地构建后生成可直接上传服务器的静态文件，而Nuxtjs因为涉及服务端渲染，需要由Nodejs实时生成并返回HTML。本文，将从0开始把Nuxtjs项目部署到公网上。

正文

安装Nodejs

我们先在服务器上安装Nodejs，这里不使用nvm等工具了，这里在/opt文件夹下放Nodejs。首先，我们先拉包：

wget https://mirrors.aliyun.com/nodejs-release/v24.18.0/node-v24.18.0-linux-x64.tar.gz

然后进行解压：

tar -zxvf node-v24.18.0-linux-x64.tar.gz

在这，我嫌他解压后的文件夹名字太长，给改下名字：

mv node-v24.18.0-linux-x64 node-2418

我们这时ll，会发现有个名为node-2418的文件夹：

配置环境变量

打开/etc/profile，输入以下进行配置：

NODEJS_HOME=/opt/node-2418PATH=$PATH:$NODEJS_HOME/binexport PATH

打开终端，输入以下命令使其生效：

source /etc/profile

检验安装情况

我们打开终端，当输入node -v和npm -v能发现正常运行即安装成功。

配置下载源

因为Nodejs下载包使用的是国外源，速度比较慢，通过输入以下命令使其变为国内源：

npm config set registry=https://registry.npmmirror.com/

安装PM2

nuxt项目需要使用Node启动，为了保护进程，我们需要使用pm2这款插件，输入以下命令安装：

npm i pm2 -g

上传源码到服务器

我们Nuxt项目构建后，会生成名为.output的文件夹，我们需要把整个文件夹都上传到服务器。这里上传到/www/wwwroot/nuxt-blog里。

使用PM2启动

我们打开终端，进到.output/server这里。我们可以指定名字，这里以nuxt-blog为例，也可以指定启动端口，这里以3363为例，输入以下命令：

PORT=3363 pm2 start ./index.mjs --name "nuxt-blog"

会出现以下界面：

我们可以通过pm2 list来查看已启动的列表。

最终效果

可以通过绑定域名 反向代理到3363端口，也可以直接防火墙开放3363端口，直接通过ip地址访问。如下图：

后记

以上就是本文全部内容，欢迎大家讨论。

接上文，继续更新Linux常用命令

正文

软链接：

可以理解为Windows的快捷方式

• ln -s 真实的文件 软链接路径

硬链接：

相当于备份效果，删除源文件，硬链接文件还能用

• ln 文件 硬链接路径

nohup：

nohup代表不挂机，即使退出终端也会继续执行
nohup ./f.sh &

进程：

id 用户名：查找用户id
ps：显示进程列表
ps aux：显示所有进程
ps -u 用户名/用户id：显示指定用户的进程
ps -e –forest：显示进程树

tar命令：

• c：创建新的归档文件
• v：输出命令的归档或解包的过程
• f：指定包文件名
• z：使用gzip压缩归档后的文件
  tar -cvf a.tar a.txt：打包文件
  tar -zcvf a.tar.gz a.txt：打包并压缩一个文件
  解压文件到当前目录：
  tar -xvf a.tar
  tar -zxvf a.tar.gz
  （-C：解压到指定目录，目录要存在）

zip：

zip xxx.zip xxx.txt：压缩文件
zip -r xxx.zip dir/：压缩目录
查看压缩包内容：
unzip -t xxx.zip
unzip -l xxx.zip
解压压缩包：
unzip xxx.zip
unzip xxx.zip -d xxx/：指定解压目录，目录可以不存在

最近小编正在学习Linux一些基础命令，特写此文章，也算个笔记吧。

正文

基本命令

ls：列出所有目录

• ls -l / ll：列出所有目录（显示文件大小、日期等信息）
• ls -a：列出所有目录（包括隐藏的目录）
  pwd：查看当前工作目录
  mkdir：创建目录
  touch：新建文件
  cp：拷贝文件
  mv：移动文件
  rm：删除文件（rm -f：不提示来删除文件）
  cat：显示文件内容（-n：显示行号）
  which：查找并显示指定命令的绝对路径

系统显示

uname：显示系统内核信息（-a：显示完整信息）
date：显示计算机当前时间
uptime：显示计算机运行了多长时间（-p：以人类可读形式输出；-s：以yyyy-mm-dd显示）
df：以磁盘分区查看文件系统
du -sh：查看当前目录大小
free -h：查看内存使用情况
echo：输出（-e：转义输出）

网络状态

如果没有ifconfig，就安装net-tools这个软件包
ifconfig：查看IP地址
ip addr
history：查看历史命令
history 10：显示最新的10条命令

软件包管理

yum：(-y 确认yum)
yum remove：卸载软件包

重启、关机

shutdown -h now：现在关机
shutdown -r now：现在重启
reboot：重启

文件传输：

（-P：指定远程主机端口号、-p：保留文件最后修改时间、最后访问时间）
scp 文件名称 root@目标主机:目标目录：将本地文件传到远程主机
scp root@目标主机:目标目录 文件目录：下载远程主机文件到本地

文件查找

find . -name 1.txt：在当前目录下查找名字为1.txt的文件
find . -iname 1.txt：在当前目录下查找名字为1.txt的文件（不区分大小写）

更改文件权限

4 2 1：r w x
chmod 777 xxx.txt：表示属主、组用户、其他用户都具有可读可写可执行的权限

wget

wget -O aaa.txt http://localhost/fwefwef：下载文件并指定名字为aaa.txt

• –spider：测试下载链接

后记

不断更新中…

之前听许多ai编程软件，如cursor、coplit、claude code、codex等等，但一直没用过，因为考虑到烧token的话挺花钱的。前天还是大前天，在b站上刷到个用Claude code搭配deepseek来写代码的视频，看完后想着试试。

正文

安装Node.js

使用Claude的第一步需要先安装Node.js，这就不介绍了，可去官网下载。

全局安装Claude

打开命令行，输入以下命令全局安装Claude：

npm install -g @anthropic-ai/claude-code

配置Claude

安装好之后，下来就是给Claude配置模型了。这里以deepseek为例，打开windows电脑目录C:\Users\用户名，在里面新建个名为.claude.json的文件，插入以下内容：

{  "env": {    "ANTHROPIC_AUTH_TOKEN": "这里填api Key",    "ANTHROPIC_BASE_URL": "https://api.deepseek.com/anthropic",    "ANTHROPIC_MODEL": "deepseek-v4-pro[1m]",    "ANTHROPIC_DEFAULT_OPUS_MODEL": "deepseek-v4-pro[1m]",    "ANTHROPIC_DEFAULT_SONNET_MODEL": "deepseek-v4-pro[1m]",    "ANTHROPIC_DEFAULT_HAIKU_MODEL": "deepseek-v4-flash",    "CLAUDE_CODE_SUBAGENT_MODEL": "deepseek-v4-flash",    "CLAUDE_CODE_EFFORT_LEVEL": "max",    "CLAUDE_CODE_AUTO_COMPACT_WINDOW": "786432",    "API_TIMEOUT_MS": "3000000",    "CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC": 1,  }}

使用Claude

我们打开终端，输入claude，如果能打开，并且能够成功回复的话，即配置成功，可以使用Claude code了。

后记

这几天用Claude在折腾，产生的费用也不少。但看网上对比起来，deepseek的价格比其他模型来说还是便宜的，但也看最近有公告说计划近期整体上调 DeepSeek API 服务的定价，预计涨幅较大。本篇文章就介绍到这，欢迎小伙伴们讨论.

说起对密码加密，常见的莫不有密码加上盐值然后整体使用md5，这样，就算黑客能拿到用户密码存放的那张数据表，但因为盐值不一样，破解起来也是相当耗时耗力。而我自己之前使用的加密方式就更low了，我使用的同一盐值，直到我那天看康师傅有个课程的视频后，才知道有Bcrypt这个专门对密码仅加密的东西。

正文

Bcrypt加密是什么？

下面给到一段AI介绍：

如何在PHP中使用Bcrypt？

因为我能力有限，平时做一些自己用的项目 开发api的时候，往往使用的php。在这里，主要介绍如何在PHP中使用Bcrypt。其实很简单，加密的时候使用**password_hash()函数，比对的时候使用password_verify()**函数。

password_hash函数

它有两个参数，第一个是密码明文，即我们想要加密的密码，比如123456、su666.等。在这里给一段示例代码：

<?php $password="123456";$encoded_password=password_hash($password,PASSWORD_BCRYPT);echo $encoded_password;?>

我们打开浏览器，会发现网页中出现一串经过加密的字符串：

那能否精确比对上呢？

password_verify()函数

这个函数有两个参数，第一个是密码明文，即我们前面所说的123456等，第二个是加密后的字符串。函数会使用特定的逻辑，去比对密码明文经过加密后是不是后面的字符串。下面给段示例代码：

$hash='$2y$10$Yn5PX34h3Vbg6r.2j77FjOqVe47d.EBMa4GYSJIUAZb1hSyzRT2.S';echo "比对的结果是：".password_verify("123456",$hash);

我们打开网页，发现：

即完美匹配上

后记

以上就是本文全部内容，欢迎小伙伴们讨论交流。

之前的文章大多是关于使用Hexo静态博客框架来建站的，这一篇，将主要介绍下如何使用wordpress搭建一个优美的网站。wordpress是什么？它是一款动态博客框架，官方是这样描述它的：博客工具、发布平台和内容管理系统

正文

安装wordpress

首先，我们来到官方 下载地址 来进行下载，可以选择使用最新版的，也可以点击下面的发行版本选择之前的旧版，因为一些wp主题使用老版本php写的，对于使用最新版PHP的wordpress来说可能会报错等一系列问题。这里，本文选择使用5.3.11版本的。

然后，我们把压缩包的所有内容放到网站根目录下，这时，我们在浏览器输入地址，就会弹出界面，让我们选择语言、配置数据库信息和网站基本信息，配置好后登录进来大概是如下图这般摸样：

只不过这时，使用的主题是wordpress官方自带的，比较丑吧，我们访问域名（即门户），会发现是下面这个样子：

安装主题

这时，我们就要更换主题了，这里以我找的一款自以为还不错的wp主题做示例，感兴趣的小伙伴可以去Gitee仓库访问，然后用git把代码克隆到本地，我们只需要仓库里的Art_Blog.zip，这是作者已经帮我们打包好的主题源码。

然后，我们来到wordpress后台，点击外观选项卡->主题，点击添加，点击上传主题，大概到下面这个界面：

我们点击选择文件，选择刚刚仓库里的zip文件，点击现在安装，过会儿后，会出现以下界面，我们点击启用，即可使用这个主题。

配置主题

这时，我们会发现左边侧边栏多出了一个主题配置，这就是用于配置这个主题的。主题可配置内容很多，比如门户侧边栏视频宣传、轮播图效果（翻转、爆炸、翻页等）等等。这里就给一张里面某些配置的图吧：

我们这里使用示例数据简单配置一下，这时，我们再打开门户大概就是下面这个页面：

其余事项

在wordpress里写文章，好像不支持Markdown格式，感兴趣的可以试试有没有一些插件可以辅助的。主题作者在写文章页面里提供了多样功能，如设置某段内容为加密可见、登录可见等等。

除此之外，我们也可以在链接页面添加友链等，主题也内置了友情链接页面。总之，这款主题还是挺不错的，主题作者之前也录制了一个使用这款主题的视频教程。

稍有遗憾的是，这款主题目前已经停止维护了，主题代码中一些比如评论区获取IP地理位置的api也失效了，我前些天将代码克隆到本地，稍微的进行了修改，换了换api。感兴趣的小伙伴，同样可以自行在主题原有代码基础上进行改造。

后记

不过，wordpress体积较大，相对来说比较臃肿，另一款动态博客框架typecho就比较轻量，好看的主题也不少，感兴趣的小伙伴可以下去自行研究。这篇文章就到这里了，欢迎各位小伙伴评论区讨论。

你是否也在别人网站底部见到这样一个东西，即网站运行时间，效果如下图所示：

那么是如何通过js实现的呢？请看正文

正文

实现着其实也不难，我们只需要拿到现在的和建站时的时间戳之差，这个差值是毫秒，我们除以1000就成秒了，那么下来除以60换成分钟、秒除以3600换成小时等等就清晰了。

想要精确到已经运行了几秒，就可以再来个定时器，每1秒重新获取时间戳之差然后计算即可。

下面放一段我自己手搓的js代码：

let obj=document.getElementById("running_time");let buildDate = new Date("2026-07-18 00:00:00"),nowDate = new Date();setInterval(()=>{    nowDate=new Date();    let passedTime = (nowDate - buildDate)/1000;    let year = parseInt(passedTime/3600/24/365),        day = parseInt((passedTime-(year*365*24*3600))/3600/24),        hour = parseInt((passedTime-(year*365*24*3600)-(day*24*3600))/3600),        minute = parseInt((passedTime-(year*365*24*3600)-(day*24*3600)-(hour*3600))/60),        seconds=parseInt((passedTime-(year*365*24*3600)-(day*24*3600)-(hour*3600)-(minute*60)));        obj.innerText=`${year}年${day}天${hour}时${minute}分${seconds}秒`;            },1000);

使用方法

在网站底部添加这样一段HTML代码：

<p>当前网站已经运行：<span id="running_time">加载中...</span></p>

然后把上面那段js代码放在body标签后即可。

后记

当然，自己手搓的难免有缺陷，欢迎小伙伴们提供更完美的思路和方案。

使用Hexo等框架等搭建博客，除了加载速度快这一个优点，还有一个是，免去部署后端服务而使用虚拟主机/服务器的成本。这篇文章将主要介绍如何在Vercel上部署Hexo博客。除了Vercel，在Cloudflare Pages、Edgeone Pages上同样可以。

正文

操作步骤

首先，我们在Github上创建个仓库，然后把我们整个项目代码推上去。推上去后的仓库目录结构图大概如下图所示：

然后呢，我们打开Vercel，点击右上角登录，可以选择使用Github登录。

登录进来后，我们点击右上角Adds按钮，选择下面的Project

然后，在左边会让我们选择要导入哪个仓库：

我们点击右边的import按钮，然后，我们会发现，它会识别出我们项目用的哪个框架

之后，我们点击下方的Deploy按钮部署即可，部署好后，大概如下图所示：

我们点击Domains旁边的加号按钮，添加我们自己的域名，然后做好DNS解析，我们就可以用自己的域名访问到了。

与以前方式的不同

前几年，我记着是用下面的命令，先生成静态页面然后再把生成的静态页面推到Github，利用Github Pages来放到公网。

hexo g && hexo d

而使用Vercel、Cloudflare Pages、Edgeone Pages等这些服务的时候，我们只用把整个项目代码推上去，这些服务会识别我们用的什么框架，然后自动帮我们构建，并把构建好的页面自动放在公网上，一定程度上，省去了些步骤。

后记

这篇文章到这里就结束了，感谢浏览，欢迎评论区讨论。

什么是Hexo？官网是这样介绍的快速、简洁且高效的博客框架，顾名思义，是一款博客框架，与wordpress、typecho等有区别的它是一款静态博客框架。也就是说，它不会有数据库，它也不会用php啊java啊等语言动态渲染，写好文章后，通过使用命令，它会生成博客所需的所有静态页面，我们只需要把这些静态页面放到服务器上或通过Vercel、一些Pages服务部署到公网上即可。

正文

前置准备

Hexo依赖Node.js，我们首先需要在电脑上安装Node.js，可以前往官网下载。

安装脚手架

安装好之后，我们来安装hexo脚手架，打开终端，输入以下命令：

npm install hexo-cli -g

创建Hexo项目

安装好之后，我们打开一个文件夹，通过输入以下命令来创建一个Hexo项目

hexo init blog

待命令执行结束，我们会发现原本的文件夹多一个名为blog的文件夹，这就是我们创建的Hexo博客项目，目录结构大概如下图：

效果预览

在这里就大功告成一半了，我们这时打开终端，输入以下命令，在本地进行预览：

hexo s

它会给出个地址，我这里是localhost:4000，打开后如下图：

常用命令

新建文章

在Hexo中，如何创建文章呢，我们在命令行输入以下命令：

hexo new "我的第一篇文章"

输入完以上命令后，我们发现我们项目目录下的source/_posts/会多出一个文件：

这也就是我们刚刚新建的文章，我们可以用Markdown格式来写文章了，写完之后，通过刚刚的本地预览命令就可以在本地查看效果。

部署上线

我们通过输入以下命令，就可以让Hexo给我们生成静态文件：

hexo clean && hexo g

这时，我们项目根目录下会多出一个文件夹叫public，打开后如下：

这里面就是Hexo为我们生成的静态页面，我们把它丢到服务器或虚拟主机上即可，也可以用另一种方式。

即将项目所有代码推送到Github仓库里，让Vercel、Cloudflare Pages来帮我们部署，Edgeone Pages同样也可以，大家可以根据自己需求自行选择。

后记

到这，本篇文章就结束了，感谢小伙伴们的浏览。

站点地图并不陌生，它里面包含一个网站所有的链接，搜索引擎的爬虫通过扫描这个文件提取链接非常方便。市面上的Hexo主题大多都自带有生成站点地图这个功能，那么如何在一个没有带这个功能的或者是在自己创建的新主题中添加上呢？

正文

最后生成的效果呢，可以参考如下图：

如何操作呢？步骤不难
首先，安装生成站点地图的插件，即在hexo项目中输入以下命令：

npm i hexo-generator-sitemap -S

安装好插件之后，打开根目录下的_config.yml，在最后面写入配置：

# 通用站点地图 sitemap.xmlsitemap:  path: sitemap.xml  priority: 0.5          # 页面权重 0.0~1.0  changefreq: daily      # 更新频率：daily每日/weekly每周/monthly每月  lastmod: true          # 显示文章最后修改时间  tags: false             # 包含标签页  categories: false       # 包含分类页

因为我博客不想搞那么多花里胡哨的，比如说弄个标签页、分类页啥的，所以这两个我填的false，大家可根据自己需求自行修改。

到这里，基本上就结束了，但市面上还有一个插件好像是专门针对百度搜索引擎，弄的一个百度sitemap生成插件。其实，这两者也没有多大区别，这个插件生成的sitemap预览图如下：

这里就不专门介绍这个插件了，有需要的可以参考网上教程或直接问AI。

后记

本文到这里就结束了，感谢小伙伴们的浏览。

在使用Hexo建站时，如果使用一些没加源码压缩的主题，检查网页源代码时会发现网页结构比较松散，一些css、js文件也没有压缩。就如下图这样，虽然没啥太大影响吧，但我想着如果能把源码压缩下，在访问速度上也会带来一定程度的提升。

正文

市面上能实现这样功能的hexo插件很多，最开始我尝试的是 hexo-neat，但发现对本地js文件压缩不了，可能是因为有ES6语法的缘故。后来转到hexo-all-minifier这个插件，可以说是完全满足了需求。

插件安装

在命令行输入下面命令，将该插件安装到我们的博客项目中

npm i hexo-all-minifier -S

插件配置

接着，我们打开项目根目录下的**_config.yml**，在最后面插入以下代码：

# 静态资源压缩html_minifier:  enable: true  exclude:css_minifier:  enable: true  exclude:    - '**/*.min.css' # 已压缩的css跳过js_minifier:  enable: true  mangle: true # 混淆变量名，压缩更强  compress: true  exclude:    - '**/*.min.js' # 跳过已压缩js    - '**/comment*.js' # 评论插件JS报错就加入排除# 图片压缩（可选关闭）image_minifier:  enable: false

插件效果

之后，不管我们是hexo s来本地预览，还是hexo g生成静态页面，都可以发现我们的html、css、js文件都被进行了压缩，效果可以参考下图：

后记

那么本篇文章就分享到这，欢迎小伙伴们评论区讨论哦。

众所周知，市场上许多博客框架，如wordpress、typecho等，自己也想试着开发一下。
大概是两年前吧，做了一个简易的个人博客系统，但没有前后端分离，相当于html和php相互嵌套着。
这次重新做一个的话，考虑到前后端分离，就需要写后端和前端代码。

正文

看网上许多都是用Springboot开发后端api，因为对这方面不熟悉，还是选择使用PHP开发。
后台前端当然用Vue.js开发，前台前端本来打算用Nuxt.js开发，因为对SEO友好，不像Vue.js。但是对Nuxt不熟悉，导致部署到服务器上运行不了，最后决定前台前端也是用Vue.js开发。

当然，以上这些只是基本的思路，更需要一个详细的方案，比如说数据表怎么设计、api请求地址啊请求参数啊都需要考虑，这里，简单放一下，我在开发之前做的有关文档：


然后，给看一下，最后的后台前端开发效果：


在这里，提一下，因为后台这里要发布文章，之前看大锯老师的课程，用过mavon-editor这个编辑器，最后选择使用这个Vue编辑器，

因为没仔细看文档，简略的按照文档上的提示，使用了之后发现显示不出来以及控制台报错，最后看了一下，像使用Vue.js3的话，要安装对应的3.0以上版本，我打开package.json看了一下，是2.多的，我又安装了一遍，最后才显示出来。emmm，这也相当于一次摸索。

下来，给看一下前台效果：

文章 / 动态 页面：

友链页面：

前台这些样式设计参考了网上一些优秀网站，模仿的写了写样式。本来在考虑是否做评论这个模块，后来想了想，还是做吧，开发好对应api之后，在vue中把评论封装为一个组件，大概样式如下：

因本人能力有限，目前仅支持一级评论。因为不太了解如何用PHP写获取评论列表这个API中，对应的把二级评论给添上去，后续有时间的话，可以再琢磨琢磨。

后文

以上，就是对于分享这次开发个人简易博客系统的体会，感谢您的浏览，欢迎在评论区讨论。