Uwakeme

一、准备环境1、安装node 访问Node.js官网：https://nodejs.org/ 下载LTS (长期支持版本) 安装时保持默认选项即可 安装完成后，打开命令提示符验证安装：1node -v 2、安装npm npm已包含在Node.js安装包中，安装Node.js时会自动安装 打开命令提示符验证安装：1npm -v 更新npm到最新版本（可选）：1npm install -g npm 3、安装hexo 打开命令提示符，以管理员身份运行以下命令 npm install -g hexo hexo -v 1234567891011121314151617# 二、Git仓库准备## 1、新建git仓库+ 在GitHub/Gitee上创建一个新的仓库+ 仓库名称建议设置为：`用户名.github.io`（使用GitHub Pages时）或自定义名称+ 初始化时不需要添加README文件## 2、本地同步git仓库+ 在一个空白文件夹中，右键打开git bash，输入命令，将git仓库拉下来 ```shell git clone 仓库地址 > 如果使用SSH连接，请确...

一、前言在AI技术快速发展的时代，为个人博客添加智能助手功能已成为提升用户体验的重要手段。本文详细介绍如何在Hexo博客中实现一个美观实用的AI助手，支持多种AI模型接入（智谱GLM-4、DeepSeek等），并提供完整的代码实现。 特别值得一提的是，智谱AI推出的GLM-4模型目前提供了免费版本（glm-4-flash），可以零成本为你的博客增添智能交互能力。 二、功能特点实现后的AI助手功能将具备以下特点： 美观的浮动聊天窗口：支持深色/浅色模式自动适配 多种模型支持：可接入智谱GLM-4、DeepSeek等多种AI模型 两种实现版本：完整版（API调用）和基础版（预设问答，无需API） 流畅的用户体验：打字动画、加载提示、Markdown渲染支持 响应式设计：完美适配移动端和桌面端 本地记忆功能：保存聊天历史，提供连续对话体验 三、实现步骤（一）准备工作1. 所需资源 已搭建的Hexo博客 智谱AI平台账号（使用GLM-4时需要）或DeepSeek账号 基本的JavaScript和CSS知识 2. 注册智谱AI账号（可选）如果选择使用智谱GLM-4模型： ...

前言在Web开发中，window.history 对象提供了与浏览器会话历史交互的接口。它允许开发者通过脚本控制浏览器的前进、后退功能，以及在单页应用（SPA）中管理路由状态，而无需重新加载整个页面。理解和善用history对象对于提升用户体验和构建现代Web应用至关重要。本文将详细介绍history对象的属性、方法及其应用场景。 一、History对象基本概念history对象是window对象的一个只读属性，它引用了History接口的实例。这个对象存储了用户在当前浏览器标签页或框架中访问过的URL历史记录。 我们可以通过window.history或直接使用history来访问它： 123console.log(history);// 或者console.log(window.history); 出于安全原因，脚本不能直接访问历史记录中其他页面的URL。但是，可以安全地在会话历史中前后导航。 二、History对象的属性（一）lengthhistory.length属性返回一个整数，表示当前会话历史中的条目数量。 12const historyLength = histo...

前言在混合应用（Hybrid App）开发模式中，我们常常需要在原生（Native）代码（如iOS的Swift/Objective-C，Android的Java/Kotlin）和嵌入的WebView中的JavaScript之间进行通信。JS Bridge（JavaScript Bridge）正是实现这种双向通信的关键技术。它像一座桥梁，连接了两个原本隔离的世界，使得Web技术栈可以调用原生功能，原生代码也可以反过来调用或通知Web层。本文将对JS Bridge的原理、实现方式、设计要点及应用场景进行介绍。 一、JS Bridge是什么？JS Bridge 是一种机制，允许在原生应用中嵌入的WebView里的JavaScript代码与原生应用代码进行双向交互。简单来说，它能让： JavaScript 调用 Native 的方法（例如：调用相机、获取设备信息、弹出原生提示框等）。 Native 调用 WebView 中的 JavaScript 函数或执行JS代码片段（例如：更新Web页面内容、触发Web事件等）。 这种能力是Hybrid App能够兼具Web开...

前言前端开发是构建用户直接与之交互的Web界面的过程。随着Web技术的飞速发展，前端技术栈也变得日益复杂和庞大。一个现代化的前端项目通常会涉及到多种技术、框架和工具的组合。本文旨在对当前主流的前端开发技术栈进行梳理和概览，帮助开发者理解各个组成部分及其在项目中的作用。 一、基础核心技术无论技术如何变迁，HTML、CSS和JavaScript始终是前端开发的基石。 （一）HTML (HyperText Markup Language)HTML是网页内容的骨架。它负责定义网页的结构，例如标题、段落、列表、图片、链接等。 HTML5: 最新版本的HTML，引入了许多新的语义化标签（如<article>, <section>, <nav>, <aside>, <header>, <footer>）、多媒体支持（<audio>, <video>）、Canvas绘图、本地存储（localStorage, sessionStorage）等重要特性。 12345678910111213141516...

前言在前端项目开发中，日历功能是常见的需求，例如日程展示、事件预约等。FullCalendar 是一款功能强大且高度可定制的 JavaScript 日历库，可以很好地与 Vue.js 集成。本文将详细介绍如何在 Vue 项目中集成和使用 FullCalendar。 一、准备环境在开始之前，请确保您的 Vue 项目已经创建并正常运行。 （一）安装 FullCalendar 相关依赖首先，我们需要安装 FullCalendar 的核心包、Vue 适配器以及您需要使用的插件。FullCalendar 提供了不同版本的 Vue 适配器，请根据您的 Vue 版本进行选择。 对于 Vue 2 项目： 1npm install --save @fullcalendar/core @fullcalendar/vue 对于 Vue 3 项目： 1npm install --save @fullcalendar/core @fullcalendar/vue3 接下来，安装您计划使用的 FullCalendar 插件。常用的插件包括： @fullcalendar/daygrid：提供月视图、周视...

前言在Web应用中实现灵活且精确的打印功能，尤其是在需要进行套打、批量打印、自定义纸张、打印条形码/二维码等场景下，浏览器的原生打印功能往往难以满足需求。C-LODOP是一款优秀的Web打印解决方案，它通过在客户端运行一个本地服务程序，允许JavaScript直接调用其丰富的打印接口，从而实现对打印机的高度控制。本文将详细介绍如何在前端项目中集成和使用C-LODOP。 一、C-LODOP简介与准备（一）C-LODOP是什么？C-LODOP是LODOP打印控件的系列产品之一，它以一个本地HTTP服务的形式存在。前端页面通过引入一个特定的JS文件（LodopFuncs.js），该JS文件会尝试与本地的C-LODOP服务进行通信。如果C-LODOP服务已启动，则可以使用其提供的打印功能；如果未启动或未安装，LodopFuncs.js通常会引导用户下载和安装C-LODOP客户端程序。 C-LODOP的优势在于： 跨浏览器兼容性：由于是通过本地服务实现，避免了传统浏览器插件的兼容性问题。 功能强大：支持几乎所有打印相关的精细控制，如打印项定位、纸张设置、打印机选择、打印预览、直...

Vue中的同步和异步详解：深入理解前端异步编程引言在现代前端开发中，异步编程是一个核心概念，特别是在Vue.js应用开发中。理解同步和异步操作的区别以及如何正确使用它们，对于构建高性能、用户体验良好的应用至关重要。本文将深入探讨Vue中同步和异步的概念、应用场景和最佳实践。 一、基础概念解析1.1 什么是同步操作同步操作是指代码按照顺序执行，每个操作必须等待前一个操作完成后才能继续执行。1 在主线程上排队执行的任务，只有在最前面的任务执行完成之后，才执行后面的任务。 同步操作的特点： 按顺序执行，不会乱序 会阻塞后续代码的执行 执行过程可预测 适合简单的、快速完成的操作 12345678910// 同步操作示例console.log('开始执行');let result = 1 + 2;console.log('计算结果:', result);console.log('执行完成');// 输出顺序：// 开始执行// 计算结果: 3// 执行完成 1.2 什么是异步操作异步操作是指不进入主线程，而是进入”任务队列”...

前言在前端开发中，将表格数据导出为Excel文件是一个常见的需求，方便用户离线查看和分析数据。本文将介绍如何在Vue项目中使用 exceljs 库来实现前端导出表格数据的功能，并参考您项目中已有的实现方式。 一、准备工作（一）安装依赖首先，确保您的Vue项目中已经安装了 exceljs 和 file-saver (用于在浏览器端保存文件)。 1npm install exceljs file-saver --save exceljs 是一个功能强大的库，可以创建、读取和修改Excel文件。file-saver 则可以帮助我们将生成的文件流保存到用户的本地设备。 （二）创建工具方法（或在组件中直接实现）您可以将导出逻辑封装成一个可复用的工具方法，或者直接在需要导出功能的组件中实现。参考您项目 source/_drafts/前台功能.md 中的 tableOutputMethod 方法，这是一个很好的实践。 二、实现导出功能下面我们将详细步骤分解，并结合您项目中的代码示例进行说明。 （一）引入库在您的工具文件或Vue组件中，首先需要引入 exceljs 和 file-saver。 ...

前言Vue 3是Vue.js框架的第三个主要版本，于2020年9月正式发布。作为一个渐进式JavaScript框架，Vue 3在保持Vue 2核心理念的基础上，引入了许多革命性的改进和新特性。本文将深入探讨Vue 3的核心概念、新特性、最佳实践以及与Vue 2的主要区别，帮助开发者全面掌握这个现代化的前端框架。 一、Vue 3概述（一）什么是Vue 3Vue 3是一个用于构建用户界面的渐进式JavaScript框架。它专注于视图层，采用自底向上增量开发的设计理念。Vue 3的目标是通过尽可能简单的API实现响应式数据绑定和组合的视图组件。5 （二）Vue 3的核心特性1. 性能提升相比Vue 2，Vue 3在性能方面有了显著提升：2 渲染性能：提升1.3~2倍 打包体积：更小的bundle size 内存使用：更高效的内存管理 2. Tree-shaking支持Vue 3支持Tree-shaking，这意味着可以按需引入功能，未使用的代码不会被打包到最终的bundle中：3 12345// 按需引入Vue功能import { createApp, ref, reac...