如何为hexo添加一个后台管理面板
hexo-admin 是一个Hexo博客引擎的管理用户界面插件。为Hexo博客添加后台管理面板有几种方法，其中最常用的是使用Hexo-Admin插件。以下是添加Hexo-Admin后台管理面板的步骤：
安装Hexo-Admin插件首先，进入你的Hexo博客项目根目录，然后在命令行中执行以下命令安装插件:
npm install hexo-admin --save
启动Hexo服务器hexo server
访问后台管理界面启动服务器后，在浏览器中访问 http://localhost:4000/admin 即可进入Hexo-Admin的后台管理界面。
配置密码保护（可选）admin:username: 你的用户名password_hash: 你的密码哈希secret: 一个随机字符串
你可以使用在线工具生成密码哈希和随机字符串。
使用后台管理功能通过Hexo-Admin后台，你可以方便地进行以下操作:
创建、编辑和删除文章
管理分类和标签
预览文章效果
发布文章
除了Hexo-Admin，还有其他选择，如Qexo。Qexo是一个开源程序，可以为Hexo博客提供更完善的后台管 ...
SSE（Server-Sent Events）技术及演示
什么是SSEServer-Sent Events（SSE）是一种用于实现服务器主动向客户端推送数据的技术，也被称为”事件流”（Event Stream）。它基于HTTP协议，利用长连接特性，在客户端与服务器之间建立一条持久化连接，实现服务器向客户端的实时数据推送。
SSE的基本原理
客户端向服务器发送一个GET请求，带有指定的header，表示可以接收事件流类型。
服务器返回响应，指定事件的媒体类型和编码，使用分块传输编码（chunked）来流式传输动态生成的内容。
服务器在有数据更新时，向客户端发送一个或多个由名称：值字段组成的事件，事件之间由两个换行符分隔。
客户端使用EventSource接口创建对象，打开连接，并订阅onopen、onmessage和onerror等事件处理程序。
SSE与WebSocket的区别虽然SSE和WebSocket都用于实现服务器向客户端实时推送数据，但它们有以下区别：
技术实现：SSE基于HTTP协议，而WebSocket通过特殊的升级协议建立新的TCP连接。
数据流向：SSE只支持服务器向客户端的单向数据流，WebSocket支持双向数据流。 ...
推荐一款好用且免费的笔记软件 Obsidian
Obsidian是一款强大的笔记软件，它支持Markdown格式，可以帮助你更好地组织和链接你的思想。
界面效果图
Obsidian简介Obsidian 是一款免费的笔记软件，它的主要特点包括：
链接思维：Obsidian 允许你创建笔记并通过链接将它们连接起来，形成一个你的知识网络。
Markdown 支持：Obsidian 支持 Markdown 格式，你可以使用 Markdown 语法来编写和格式化你的笔记。
强大的搜索功能：Obsidian 提供了强大的搜索功能，你可以快速找到你的笔记。
图形视图：Obsidian 提供了图形视图，你可以在图形视图中看到你的笔记之间的链接关系。
插件支持：Obsidian 支持插件，你可以安装插件来扩展 Obsidian 的功能。
……
使用指南基本配置通过官网 obsidian.md 下载客户端，根据提示安装。Obsidian的配置项非常多，初次使用只需要关注下面三点配置即可：
配置客户端语言：
打开设置面板（快捷键：Ctrl + ,）。
选择General。
在Language中选择你的语言。
点击Relaunch重新启动应用。
...
vue 创建全局方法
在Vue中，可以通过Vue.prototype添加全局方法或属性。需要注意的是，Vue会把所有在Vue.prototype上添加的属性和方法都定义在Vue的原型上，这样可以让所有的Vue实例共享这些属性和方法。
将方法挂载到 Vue.prototype 上这种方式最直接,可以在 main.js 入口文件中进行配置:
// main.jsimport Vue from 'vue'import App from './App.vue'// 定义全局方法Vue.prototype.$globalMethod = function() { // 方法体}new Vue({ render: h => h(App)}).$mount('#app')
之后在任何组件中都可以通过 this.$globalMethod() 来调用该方法。
利用全局混入 (mixin)// mixin.jsexport default { methods: { globalMeth ...
简单实现禁止调试前端页面代码
由于前端页面会调用很多接口，有些接口会被别人爬虫分析，破解后获取数据为了杜绝这种情况，最简单的方法就是禁止人家调试自己的前端代码
要禁止别人调试自己的前端页面代码,主要有以下几种方案:
无限debugger这是最常见的方法,通过不断执行debugger语句来疯狂输出断点,从而阻止代码调试。基础代码:
(() => { function ban() { setInterval(() => { debugger; }, 50); try { ban(); } catch (err) {} }})();
禁止断点将setInterval中的debugger代码写在一行,就能禁止用户添加断点,即使添加logpoint为false也无用。
(() => { function ban() { setInterval(() => {debugger;}, 50); t ...
css实现当文本内容过长，中间显示省略号，两遍正常显示
思路解析
文字内容的父级标签li设置line-height: 2;、overflow: hidden;、height: 2em;，因此 li 标签的高度是当前元素字体大小的2倍，行高也是当前字体大小的2倍，同时内容若溢出则隐藏。
li 标签内部有两个 span 标签，二者的作用分别是：类名为.txt的标签用来展示不需要省略号时的文本，类名为.title用来展示需要省略号时的文本，具体是如何实现的请看第五步。
给.title设置伪类before，将伪类宽度设置为50%，搭配浮动float: right;，使得伪类文本内容靠右，这样设置后，.title和伪类就会各占父级宽度的一半了。
.title标签设置text-align: justify;，用来将文本内容和伪类的内容两端对齐。
给伪类before设置文字对齐方式direction: rtl;，将伪类内的文本从右向左流动，即right to left，再设置溢出省略的css样式就可以了。
.title标签设置了top: -4em,.txt标签设置max-height: 4em;这样保证.title永远都在.txt上面，当内容足够长，.t ...
vue中使用echarts刷新可以正常渲染，路由跳转不显示
在 Vue 中使用 ECharts 组件时，遇到路由跳转后图表不显示的问题可能是因为组件销毁和重新创建的原因。当你从一个页面切换到另一个页面时，旧页面上的组件会被销毁，并在新页面上重新创建。
<template> <div> <div ref="chartContainer"></div> </div></template><script>import echarts from 'echarts';export default { data() { return { myChart: null, }; }, mounted() { this.initChart(); }, methods: { initChart() { const chartContainer = this.$refs.chartContain ...
推荐几款小而美的前端库
整理几款小而美的前端库，接入成本很低又能满足日常开发需求，同时无论是 npm 方式引入还是直接复制到本地使用都可以。
radashradash是一个实用的工具库，提供更多新功能（tryit，retry 等函数），源码可读性高。同时支持 TypeScript，并且旨在提供强大的函数来解决 JavaScript 中的现代问题。
use-debounceuse-debounce是一个 React Hook Debouce 库，它的体积小，不到1KB，与 underscore / lodash impl 兼容，一次学习，随处使用，并且服务器渲染友好。
timeago.jstimeago.js是一个格式化日期时间库，它非常简洁、轻量级，不到2KB。能够将 datetime 时间转化成类似于“3小时前”的描述字符串，同时支持多语言、自动实时更新、npm 方式和浏览器 script 方式，并且测试用例完善，执行良好。
react-usereact-use是一个强大的 React Hook 库，提供了各种工具函数和副作用钩子，如 createMemo、useToggle、useBoolean ...
vue 渲染函数
在绝大多数情况下，Vue 推荐使用模板语法来创建应用。然而在某些使用场景下，我们真的需要用到 JavaScript 完全的编程能力。这时渲染函数就派上用场了。
在Vue中，可以使用渲染函数（render function）来创建Vue组件。渲染函数提供了一种强大的方法来动态构建Vue组件的DOM渲染。
下面是一个简单的例子，使用渲染函数创建一个显示”Hello, Vue!”的组件：
Vue.component('hello-component', { render: function (createElement) { return createElement( 'div', 'Hello, Vue!' ); }});
或者使用ES6的箭头函数简化代码：
Vue.component('hello-component', { render: (createElement) => createElement( ...
uni-app分包教程
为什么要分包？因为小程序有体积和资源加载限制，各家小程序平台提供了分包方式，优化小程序的下载和启动速度。
Uni-app分包的教程可以参考以下步骤：
在原应用的pages目录同级目录下创建新的目录，例如命名为package1，根据需要创建更多这样的目录，例如package2、package3等。
将想要包含在分包中的模块复制到新创建的目录中，这些模块原本位于pages目录中。如果需要，可以创建一个pages目录，但不是必须的。
修改manifest.json文件，增加“optimization”配置，设置“ subPackages `”为true，以开启分包优化。
修改pages.json文件，在pages.json中添加一个名为“ subPackages ”的数组，其中包含“root”和“pages”两个参数，“root”指定子包的根目录，“pages”指定子包包含的页面。
访问分包中的页面时，可以通过构建一个URL来完成，该URL由分包的根目录和路径组成，例如，要访问package1中pages目录下的myDaily页面，可以使用以下代码：uni.navigateTo ...
