Nanami Kento

新建sun_moon.pug路径：[BlogRoot]\themes\butterfly\layout\includes\custom\ 这部分其实实质上就是一个svg文件，通过js操作它的旋转显隐，淡入淡出实现动画效果。 123456789svg(aria-hidden='true', style='position:absolute; overflow:hidden; width:0; height:0') symbol#icon-sun(viewBox='0 0 1024 1024') path(d='M960 512l-128 128v192h-192l-128 128-128-128H192v-192l-128-128 128-128V192h192l128-128 128 128h192v192z', fill='#FFD878', p-id='8420') path(d='M736 512a224 224 0 1 0-448 0 ...

app构建登录github账号，随后访问settings -> Develpoer setting -> OAuth Apps生成一个自定义app用于gitalk链接 配置完成，可进一步完善，主要获取到Client ID、Client secrets两个参数（注意保护好参数信息，避免被滥用） 修改_config_butterfly.yml1234567891011121314151617181920comments: # Up to two comments system, the first will be shown as default # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk use: Gitalk # Valine,Disqus text: true # Display the comment name next to the button # lazyload: Th ...

修改PUG新建 [blogRoot]\themes\butterfly\layout\includes\rightmenu.pug 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081#rightMenu.js-pjax .rightMenu-group.rightMenu-small a.rightMenu-item(href="javascript:window.history.back();") i.fa.fa-arrow-left a.rightMenu-item(href="javascript:window.history.forward();") i.fa.fa-arrow-right a.rightMenu-item(href="j ...

插件下载1npm install hexo-blog-encrypt 修改_config.yml12encrypt: enable: true xxxxxxxxxx # Beautify (美化頁面顯示)beautify: enable: true field: post # station/post title-prefix-icon: ‘\f863’ title-prefix-icon-color: ‘#F47466’yml 对应加密文章添加12345678---title: Article Name... 其他配置 ...password: your password abstract: Welcome to my blog, enter password to read. message: your message... 其他配置 ...---

字体下载免费的字体下载参考网站 自由字体网https://ziyouziti.com/ ## 具体操作 1. 将下载好的字体命名好，放在你的`[Blogroot]\source\fonts\`下 2. 在你inject头部的css文件里面写入以下代码 12345@font-face { font-family: '你的命名'; /* 字体名自定义即可 */ src: url('/fonts/你的命名.ttf'); /* 字体文件路径 */ font-display: swap;} 修改_config.butterfly.yml目录下 1234567# Global font settings# Don't modify the following settings unless you know how they work (非必要不要修改)font: global-font-size: 16px code-font-size: 16px font-family: 你的命名 code ...

安装插件在博客根目录下打开终端，运行以下指令： 1npm install hexo-butterfly-tag-plugins-plus --save 考虑到hexo自带的markdown渲染插件hexo-renderer-marked与外挂标签语法的兼容性较差，建议您将其替换成hexo-renderer-kramed 12npm uninstall hexo-renderer-marked --savenpm install hexo-renderer-kramed --save xxxxxxxxxx # Beautify (美化頁面顯示)beautify: enable: true field: post # station/post title-prefix-icon: ‘\f863’ title-prefix-icon-color: ‘#F47466’yml 修改_config.yml在站点配置文件_config.yml中添加 123456789101112131415# tag-plugins-plus# see https://akilar.top/posts/61 ...

实现目标功能Q1：二分查找难度：⭐⭐ 解析 在 JavaScript 中，可以使用几种不同的方法来实现二分查找算法，具体取决于个人的编程偏好和问题的特性。以下是几种常见的实现方式：迭代法使用 while 循环来不断缩小搜索范围，直到找到目标值或确定目标值不存在于数组中。递归法通过递归调用来实现二分查找算法，将数组分割成更小的部分无论使用哪种方法，二分查找的核心思想都是将搜索范围一分为二，通过比较中间元素和目标值的大小关系来决定继续搜索的方向，从而达到快速查找的目的 答案 123456789101112131415161718192021222324252627282930313233343536373839function binarySearch(arr, target) { let left = 0; let right = arr.length - 1; // 处理边界情况 ...

概念Q1：浏览器的同源策略是什么难度：⭐ 答案 同源策略（Same-Origin Policy）是浏览器中一种关键的安全策略，它定义了浏览器如何限制一个网页文档或脚本从一个源加载的文档或脚本与来自其他源的资源进行交互。同源是指协议、主机和端口号都相同。 引申 同源策略的主要目的是防止恶意网站通过脚本等手段，访问用户在其他网站上的敏感信息，从而保护用户的隐私和安全。同源策略限制了以下操作：Cookie、LocalStorage 和 IndexDB： 一个网页只能访问自己域下的 Cookie、LocalStorage 和 IndexDB，无法访问其他域下的存储。DOM： 不能使用 JavaScript 获取或修改其他网页的 DOM。AJAX 请求： 不能通过 AJAX 请求向其他域发送请求。同源策略的例外情况包括：跨域资源共享（CORS）： 服务器可以设置响应头，允许来自其他域的请求访问资源。JSONP： 通过动 ...

概念Q1：npm 是什么?难度：⭐ 答案 npm 是 Node.js 的包管理器（Node Package Manager），是 Node.js 生态系统中用于管理和共享代码包（包括库、工具、框架等）的官方工具它是开发者在 Node.js 环境中获取、安装、发布和管理代码包的首选工具之一以下是 npm 的主要功能和特点：包管理npm 提供了一个庞大的包仓库，其中包含了数以万计的开源代码包，涵盖了几乎所有领域的需求开发者可以通过 npm 来查找、安装和管理这些代码包依赖管理npm 可以帮助开发者管理项目依赖，包括生产环境和开发环境中使用的依赖开发者可以在项目中使用 npm install 命令来安装项目所需的所有依赖版本控制npm 支持语义化版本控制（Semantic Versioning），开发者可以在安装包时指定版本号，以确保代码的稳定性和兼容性脚本执行npm 允许开发者在 package.json 文件中定义各种自定义脚本，例如构建、测试、部署等脚本，并通过 npm run 命令来执行这些脚本发布和分享开发者可以使用 n ...

概念Q1：React Portals 有什么用难度：⭐ 答案 React Portals 是 React 提供的一种机制，用于将子组件渲染到父组件 DOM 层次结构之外的位置它在处理一些特殊情况下的 UI 布局或交互时非常有用以下是一些使用 React Portals 的常见情况：在模态框中使用 当你需要在应用的根 DOM 结构之外显示模态框（对话框）时，React Portals 可以帮助你将模态框的内容渲染到根 DOM 之外的地方，而不影响布局处理 z-index 问题 在一些复杂的布局中，可能存在 z-index 的层级关系导致组件无法按照预期的方式叠加显示使用 React Portals 可以将组件渲染到具有更高 z-index 的容器中，以解决这些问题在全局位置显示组件 如果你希望某个组件在页面的固定位置显示，而不受父组件的定位影响，React Portals 可以将该组件渲染到 body 或其他容器中在动画中使用 当你需要在页面中的某个位置执行动画时，React Portals 可以帮助你将动画的内容渲染到离该位 ...

概念 原理Q1：Vue的scoped的原理是什么?难度：⭐⭐⭐⭐ 答案 Vue 的 scoped 样式原理主要是通过在编译阶段给每个标签生成唯一的哈希标识符，并将这个哈希标识符添加到样式类名中，以实现样式的局部作用域。这样，样式只会影响到具有相同哈希标识符的元素。具体原理步骤如下：生成唯一标识符： 在编译时，Vue 会给每个标签生成唯一的哈希标识符（通常是基于文件路径的哈希值）。添加到样式类名： 将生成的唯一标识符添加到每个样式类名前缀，形成类似 .scoped-xxxxxx .your-class 的格式。应用样式： 在渲染时，Vue 会动态地将这个唯一标识符附加到组件的根元素上，并使得样式只对具有相同唯一标识符的元素生效。这样做的好处是，样式类名的唯一性确保了样式的局部性，不会污染全局样式。这对于组件化开发非常有用，防止了样式冲突的问题。例如，如果原本的样式是这样的：1234cssCopy code/* 全局样式 */.your-class { color: red;}经过 scoped 处理后，变 ...

概念Q1：什么是DOM跟BOM难度：⭐ 答案 DOM（文档对象模型）和 BOM（浏览器对象模型）都是由浏览器提供的两个重要的 API（应用程序接口），用于处理和操纵网页内容以及浏览器窗口等相关功能。DOM（文档对象模型）：定义：DOM 是一种对文档的结构化表示，以树状的方式呈现 HTML 或 XML 文档，使开发者可以通过脚本语言（通常是 JavaScript）动态地访问和修改文档的内容、结构和样式。主要功能：提供了一种将文档表示为树形结构的方式，每个 HTML 或 XML 元素都是树中的一个节点。允许开发者通过脚本语言操作文档的内容，例如添加、删除、修改元素。提供了一系列的 API，使开发者能够动态地操作页面的结构和样式，响应用户的交互。BOM（浏览器对象模型）：定义：BOM 是浏览器提供的一组对象，用于表示浏览器窗口和浏览器本身的各种信息，而不是文档的结构。主要对象：window 对象：表示浏览器窗口，包含了有关窗口的信息和方法。navigator 对象：包含有关浏览器的信息，如浏览器类型和版本。screen 对象：包含 ...

概念Q1：怎么触发BFC？BFC有什么应用场景难度：⭐⭐⭐ 答案 BFC（块级格式化上下文）是一个独立的渲染区域，具有一定的规则和约束，它可以包含浮动元素、清除浮动、防止外边距重叠等特性。触发BFC的方法有多种，其中一些常见的方式包括：float 属性： 当一个元素设置了 float 属性值不为 none，会触发该元素生成 BFC。123cssCopy code.element { float: left; /* 触发BFC */}position 属性： 当一个元素的 position 属性值为 absolute 或 fixed，也会触发该元素生成 BFC。123cssCopy code.element { position: absolute; /* 触发BFC */}display 属性： 当一个元素的 display 属性值为 inline-block、table-cell、table-caption 或 flow-root（新的值，用于触发BFC）时，会触发该元素 ...

概念Q1：html为什么要语义化难度：⭐ 答案 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。标签语义化有助于构架良好的HTML结构，有利于搜索引擎的建立索引、抓取。简单来说。有利于不同设备的解析（屏幕阅读器，盲人阅读器等）有利于构建清晰的机构，有利于团队的开发、维护 Q2：html、xml、xhtml有什么区别？难度：⭐ 解析 HTML（Hypertext Markup Language）：HTML 是一种标记语言，用于描述网页的结构。HTML 4 是最早的 HTML 版本，主要基于 SGML（Standard Generalized Markup La ...