-
Notifications
You must be signed in to change notification settings - Fork 0
/
search.xml
101 lines (48 loc) · 27 KB
/
search.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>《真-安全键盘》---灵感来自于河北农信的密码输入键盘</title>
<link href="//post/2024/12/10/%E3%80%8A%E7%9C%9F-%E5%AE%89%E5%85%A8%E9%94%AE%E7%9B%98%E3%80%8B-%E7%81%B5%E6%84%9F%E6%9D%A5%E8%87%AA%E4%BA%8E%E6%B2%B3%E5%8C%97%E5%86%9C%E4%BF%A1%E7%9A%84%E5%AF%86%E7%A0%81%E8%BE%93%E5%85%A5%E9%94%AE%E7%9B%98/"/>
<url>//post/2024/12/10/%E3%80%8A%E7%9C%9F-%E5%AE%89%E5%85%A8%E9%94%AE%E7%9B%98%E3%80%8B-%E7%81%B5%E6%84%9F%E6%9D%A5%E8%87%AA%E4%BA%8E%E6%B2%B3%E5%8C%97%E5%86%9C%E4%BF%A1%E7%9A%84%E5%AF%86%E7%A0%81%E8%BE%93%E5%85%A5%E9%94%AE%E7%9B%98/</url>
<content type="html"><![CDATA[<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>本人有张储蓄卡是农村信用社的，平时查余额都用他家的软件查。有意思的事，他家输入密码的键盘，每次打开那个界面键盘数字都会被打乱，感觉挺有意思的，然后想着用JS复现一下。</p><h1 id="预览"><a href="#预览" class="headerlink" title="预览"></a>预览</h1><img src="/post/2024/12/10/%E3%80%8A%E7%9C%9F-%E5%AE%89%E5%85%A8%E9%94%AE%E7%9B%98%E3%80%8B-%E7%81%B5%E6%84%9F%E6%9D%A5%E8%87%AA%E4%BA%8E%E6%B2%B3%E5%8C%97%E5%86%9C%E4%BF%A1%E7%9A%84%E5%AF%86%E7%A0%81%E8%BE%93%E5%85%A5%E9%94%AE%E7%9B%98/2024-12-10-19-31-24-image.png" class=""><h1 id="HTML"><a href="#HTML" class="headerlink" title="HTML"></a>HTML</h1><pre><code class="html"><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>安全键盘 | ShenYuan</title> <script src="./main.js"></script> <link rel="stylesheet" href="main.css" /></head><body> <div id="keyboard" class="keyboard"> <input id="user-input" class="user-input" disabled /> <div class="keyboard-btns"> <button id="delete-btn" class="delete-btn" onclick="deleteChar()">删除</button> <button id="clear-btn" class="clear-btn" onclick="clearInput()">清空</button> </div> <div id="keyboard-list" class="keyboard-list"></div> </div></body></html></code></pre><h1 id="css"><a href="#css" class="headerlink" title="css"></a>css</h1><pre><code class="css">body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0;}.keyboard { width: 240px; display: flex; flex-direction: column; padding: 16px; border: 2px solid black; border-radius: 20px; background-color: rgb(241, 241, 241);}.user-input{ height: 24px; padding: 4px 8px; background-color: aqua; border: 1px solid grey; border-radius: 16px; box-shadow: inset gray 2px 2px 2px;}.keyboard-btns{ margin: 8px 0; display: grid; grid-template-columns:1fr 1fr; justify-items: center;}.keyboard-btns button { width: 60%; padding: 4px 8px; border: 1px solid grey; border-radius: 16px; box-shadow: gray 2px 2px 2px;}.delete-btn:active{ background-color: rgb(255, 211, 66); box-shadow: inset gray 2px 2px 2px;}.clear-btn:active { background-color: rgb(255, 55, 66); box-shadow: inset gray 2px 2px 2px;}.keyboard-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;}.keyboard-item{ padding: 16px 32px; border: 1px solid gray; border-radius: 10px; box-shadow: gray 2px 2px 2px;}.keyboard-item:active { box-shadow: inset gray 2px 2px 2px; background-color: rgb(255, 255, 255);}</code></pre><h1 id="JS"><a href="#JS" class="headerlink" title="JS"></a>JS</h1><pre><code class="js">window.onload = function () { randomKey(); keyboardInner();}var keylist = [ "k_1", "k_2", "k_3", "k_4", "k_5", "k_6", "k_7", "k_8", "k_9", "k_0", "k_*", "k_#"]var new_keylist = [];var userInput = "";//将keylist元素打乱function randomKey() { const list = [...keylist]; // 复制一份keylist const listLength = list.length; for (var i = 0; i < listLength; i++) { var random = Math.floor(Math.random() * list.length); var newItem = list[random]; // 删除list[random]元素 list.splice(random, 1); new_keylist.push(newItem); }}function keyboardInner() { var keyboard = document.getElementById("keyboard-list"); for (var i = 0; i < new_keylist.length; i++) { var new_key = document.createElement("div"); new_key.className = "keyboard-item"; new_key.id = new_keylist[i]; new_key.innerHTML = new_keylist[i].slice(2); new_key.onclick = keyClick; keyboard.appendChild(new_key); }}function keyClick() { var key_id = this.id; var key_value = key_id.slice(2); userInput += key_value; document.getElementById("user-input").value = userInput; //超出限长不再接收新值 if (userInput.length >= 6) { document.getElementById("keyboard-list").style.display = "none"; }}function clearInput() { userInput = ""; document.getElementById("user-input").value = ""; document.getElementById("keyboard-list").style.display = "grid";}function deleteChar() { userInput = userInput.slice(0, -1); document.getElementById("user-input").value = userInput; if (userInput.length < 6) { document.getElementById("keyboard-list").style.display = "grid"; }}</code></pre><h1 id="结语"><a href="#结语" class="headerlink" title="结语"></a>结语</h1><p>JS给我的感觉就是特性好多啊……</p><p>其中有一段内容，randomKey函数，当我按下面这样写的时候就会报错</p><pre><code class="js">function randomKey() { const list = [...keylist]; // 复制一份keylist for (var i = 0; i= list.length; i++) { var random = Math.floor(Math.random() * list.length); var newItem = list[random]; // 删除list[random]元素 list.splice(random, 1); new_keylist.push(newItem); }}</code></pre><p>AI给出的解释</p><img src="/post/2024/12/10/%E3%80%8A%E7%9C%9F-%E5%AE%89%E5%85%A8%E9%94%AE%E7%9B%98%E3%80%8B-%E7%81%B5%E6%84%9F%E6%9D%A5%E8%87%AA%E4%BA%8E%E6%B2%B3%E5%8C%97%E5%86%9C%E4%BF%A1%E7%9A%84%E5%AF%86%E7%A0%81%E8%BE%93%E5%85%A5%E9%94%AE%E7%9B%98/2024-12-10-19-42-57-image.png" class=""><p>运行前定义和运行中引用是两码事，感觉好奇怪，但是这样就是正确的。</p><h1 id="END"><a href="#END" class="headerlink" title="END"></a>END</h1>]]></content>
<categories>
<category> 闲来无事小功能 </category>
</categories>
<tags>
<tag> JS </tag>
</tags>
</entry>
<entry>
<title>GithHub-Hexo-VUE单页面主题的问题</title>
<link href="//post/2024/12/08/GithHub-Hexo-VUE%E5%8D%95%E9%A1%B5%E9%9D%A2%E4%B8%BB%E9%A2%98%E7%9A%84%E9%97%AE%E9%A2%98/"/>
<url>//post/2024/12/08/GithHub-Hexo-VUE%E5%8D%95%E9%A1%B5%E9%9D%A2%E4%B8%BB%E9%A2%98%E7%9A%84%E9%97%AE%E9%A2%98/</url>
<content type="html"><![CDATA[<h2 id="前情提要"><a href="#前情提要" class="headerlink" title="前情提要"></a>前情提要</h2><p>你在我的博客中某个文章页面刷新，你就会发现报错“404”，但这种情况在原版Hexo是不会出现的，问题在于我用的主题。</p><h2 id="问题"><a href="#问题" class="headerlink" title="问题"></a>问题</h2><p>我所用的主题<a href="https://aurora.tridiamond.tech/cn/">Hexo Aurora Docs | Hexo Aurora Docs</a>是使用VUE开发的，众所不周知VUE是著名的渐进式单页面应用开发框架，但就是因为这个原因导致的在GitHub-Pages中产生“404”问题。</p><p>VUE的路由与页面的关系可以理解成很多很多组件的调用，但是实际上这个路由并没有像网址一样，虽然都是指向了一个页面，但是网址是通过发送新的网络请求来请求页面的。</p><p>而现在GitHub博客VUE单页面应用，实际的路由只是在内部调用组件而已，并没有产生向后端请求数据的网络请求，因为GitHub只是给你使用的静态页面，并没有地方让你部署后端，，况且GitHub博客大多数都是静态页。因此GitHub-Pages做不到对VUE的适配，它对这种路由处理方式依旧是按网络请求来的，但是网络上并没有与这个路由有关的数据页，所以自然而然就报错404了。</p><p><strong>可以这么理解：</strong></p><p>VUE路由：<a href="http://xxxx.xx/post/%7Bpost_name%7D%EF%BC%88%E5%86%85%E9%83%A8%E7%BB%84%E4%BB%B6%E8%B0%83%E7%94%A8%E7%BB%84%E8%A3%85%E7%9A%84%EF%BC%89">http://xxxx.xx/post/{post_name}（内部组件调用组装的）</a></p><p>网址页面：<a href="http://xxxx.xx/post/post_name%EF%BC%88%E5%90%8E%E7%AB%AF%E5%A4%84%E7%90%86%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82%EF%BC%8C%E7%84%B6%E5%90%8E%E8%BF%94%E5%9B%9E%E5%89%8D%E7%AB%AF%E9%A1%B5%E9%9D%A2%E4%B8%8E%E7%9B%B8%E5%85%B3%E6%95%B0%E6%8D%AE%EF%BC%89">http://xxxx.xx/post/post_name（后端处理网络请求，然后返回前端页面与相关数据）</a></p><h2 id="解决方法"><a href="#解决方法" class="headerlink" title="解决方法"></a>解决方法</h2><h3 id="方法一：VUE-Router路由模式"><a href="#方法一：VUE-Router路由模式" class="headerlink" title="方法一：VUE-Router路由模式"></a>方法一：VUE-Router路由模式</h3><p>目前我是没有找到好的解决方法，网上有说与VUE的路由模式（Hash/History）有关的，但我在主题源工程文件更改模式后重新打包部署，依旧没有解决问题【也可能是我操作方式不对】，等有时间了再研究研究这种解决方法吧</p><h3 id="方法二：404页面“重定向”"><a href="#方法二：404页面“重定向”" class="headerlink" title="方法二：404页面“重定向”"></a>方法二：404页面“重定向”</h3><p>这个方法是自定义404页面，默认是GitHub的404页面，当你在站点根目录下创建名为“404.html”文件后，这个文件就是404页面了。</p><p>但为了避免GitHub-404页面失去对的博客操作，你可以：</p><ol><li><p>自定义404页面，添加博客主页的跳转链接</p></li><li><p>复制一份站点根目录的”index.html“文件，重命名为：“404.html”（该方法为自动重定向博客首页的方法，如需要自定义404页面内容，请使用上一条方法）</p></li></ol><h3 id="方法三：不使用VUE开发的框架"><a href="#方法三：不使用VUE开发的框架" class="headerlink" title="方法三：不使用VUE开发的框架"></a>方法三：不使用VUE开发的框架</h3><p>从根源上解决问题，对吧</p><h1 id="END"><a href="#END" class="headerlink" title="END"></a>END</h1>]]></content>
<tags>
<tag> 个人博客 </tag>
<tag> VUE </tag>
</tags>
</entry>
<entry>
<title>HTML/CSS笔记</title>
<link href="//post/2024/12/07/HTML-CSS%E7%AC%94%E8%AE%B0/"/>
<url>//post/2024/12/07/HTML-CSS%E7%AC%94%E8%AE%B0/</url>
<content type="html"><![CDATA[<h1 id="HTML"><a href="#HTML" class="headerlink" title="HTML"></a>HTML</h1><h2 id="零碎知识点"><a href="#零碎知识点" class="headerlink" title="零碎知识点"></a>零碎知识点</h2><h3 id="语义元素"><a href="#语义元素" class="headerlink" title="语义元素"></a>语义元素</h3><p>可以理解为把HTML标签用人话描述出来，并且自带了一些样式。</p><p>旧的HTML4只能通过定义class或者id来给予特定容器以特定的样式类型，HTML5语义元素则通过官方标签的方式将这些复用率较高的容器组件化，便于直接使用，从而节省开发时间。</p><p>同时使页面结构更加现代化，更加直观的展示主要信息，</p><h3 id="web存储"><a href="#web存储" class="headerlink" title="web存储"></a>web存储</h3><h4 id="存储方式与存储周期"><a href="#存储方式与存储周期" class="headerlink" title="存储方式与存储周期"></a>存储方式与存储周期</h4><p>存在以下两种存储方式（客户端）</p><p>localStorage：若用户不主动清除该存储数据，则一直存在于用户浏览器存储中，作用域仅限与之相关联的站点。</p><p>sessionStorage：生命周期为一个标签页的周期，即只能在这个标签页周期内存储与该页面有关的数据，关闭页面后数据也随之删除。</p><p>存储信息以键值对方式存在，数据格式包括num、object、string</p><h4 id="常用命令"><a href="#常用命令" class="headerlink" title="常用命令"></a>常用命令</h4><blockquote><p>local与session指令使用方法一样，只不过前缀不同，下面将以*省略前缀</p></blockquote><p>*Storage.setItem( name[String], value ) 存储名为name，值为value的数据</p><p>*Storage.getItem( name[String] ) 查找名为name的值</p><p>*Storage.removeItem( name[String] ) 移除名为name的数据</p><p>*Storage.clear() 清除所有数据</p><p>*Storage.key() 得到某个数据的索引值</p><h4 id="格式转换"><a href="#格式转换" class="headerlink" title="格式转换"></a>格式转换</h4><blockquote><p>这里需要注意转换的目标数据要符合转换后数据类型的格式要求，不然会导致格式错误，影响后续对数据的调用</p></blockquote><pre><code class="js">//字符串转对象var str = new String;var site = JSON.parse(str);//对象转字符串var site = new Object;var str = JSON.stringify(site); //字符串转数字var str = new String;var num = Number(str);console.log( parseInt( str ) );//解析十进制数，它将四舍五入到最接近的整数值，并将该值转换为stringconsole.log(+str);parseFloat();//解析一段内容，并且将第一个数字输出console.log( str * 1 );console.log( ~~str )//数字转字符串var num = new Number;var str = num.toString();var str = String(num);var str = '' + num;var str = num.toFixed();</code></pre><h4 id="indexedDB"><a href="#indexedDB" class="headerlink" title="indexedDB"></a>indexedDB</h4><p>更符合现代需求的浏览器数据库，取代旧版WBE SQL。较于loaclStorage存储量更大，储存类型更丰富，并且不会阻塞主进程</p><h3 id="Canvas"><a href="#Canvas" class="headerlink" title="Canvas"></a>Canvas</h3><p>HTML页面与JS绘图的桥接物。</p><h3 id="拖放"><a href="#拖放" class="headerlink" title="拖放"></a>拖放</h3><pre><code class="html"><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="/images/logo.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"></div><div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div><script>function allowDrop(ev) { ev.preventDefault();}function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id);}function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data));}</script></code></pre><ol><li><p>设置元素为可拖放：< ** draggable=”true”></**></p></li><li><p>设置拖动元素的数据信息：drag()</p></li><li><p>设置哪些容器可以接收拖动的元素并且消除浏览器默认行为：allowDro()</p></li><li><p>接收元素的容器获取元素的数据并且追加到容器中，同时消除浏览器默认行为：drop()</p></li></ol><p>可以理解为将一个元素剪切然后追加到新容器中。</p><h3 id="H5表单增强（input增强）"><a href="#H5表单增强（input增强）" class="headerlink" title="H5表单增强（input增强）"></a>H5表单增强（input增强）</h3><p>添加了一些更符合现代需求的标签与属性，内容查询参加<a href="https://www.runoob.com/html/html5-form-attributes.html">HTML5 表单属性 | 菜鸟教程</a></p><p>其中主要是对于“input”标签进行属性丰富，最显著的功能为数字/数学计算增强，即“数字输入框”</p>]]></content>
<categories>
<category> 笔记 </category>
</categories>
<tags>
<tag> HTML </tag>
<tag> CSS </tag>
<tag> 私人笔记 </tag>
</tags>
</entry>
<entry>
<title>GitHub-Hexo初次建站简单流程与问题</title>
<link href="//post/2024/12/07/GitHub-Hexo%E5%88%9D%E6%AC%A1%E5%BB%BA%E7%AB%99%E7%AE%80%E5%8D%95%E6%B5%81%E7%A8%8B%E4%B8%8E%E9%97%AE%E9%A2%98/"/>
<url>//post/2024/12/07/GitHub-Hexo%E5%88%9D%E6%AC%A1%E5%BB%BA%E7%AB%99%E7%AE%80%E5%8D%95%E6%B5%81%E7%A8%8B%E4%B8%8E%E9%97%AE%E9%A2%98/</url>
<content type="html"><![CDATA[<blockquote><p>终于是吃上Github的个人博客建站了，之前使用的宝塔-wordpress建站，由于租赁的服务器自动更新导致的宝塔服务崩溃的问题，把服务器站点关了，不仅个人博客关了，自己的项目也停了（当然主要问题不是博客关了🥵）</p></blockquote><p>本文重点不在于建站的流程，而是强调几点建站中遇到的问题（主要寻找的几篇文章中并没有提到这些问题，而是一味的去教死板的建站流程）</p><h1 id="Github-Hexo个人github-io博客搭建"><a href="#Github-Hexo个人github-io博客搭建" class="headerlink" title="Github-Hexo个人github.io博客搭建"></a>Github-Hexo个人github.io博客搭建</h1><p>Github中建站的方式有很多种，其中包括纯搓readme文件以及利用工具搭建，当然，我选择用工具。</p><p>本文使用Hexo工具来进行建站操作。</p><h2 id="Hexo基础搭建与测试内容制作"><a href="#Hexo基础搭建与测试内容制作" class="headerlink" title="Hexo基础搭建与测试内容制作"></a>Hexo基础搭建与测试内容制作</h2><h3 id="前提"><a href="#前提" class="headerlink" title="前提"></a>前提</h3><ol><li>已经拥有Github账号，并且将ssh在本地设置完毕</li><li>本地系统环境已经安装Git</li><li>本地系统环境拥有node合适的版本（具体node版本参见<a href="https://hexo.io/zh-cn/docs/#Node-js-%E7%89%88%E6%9C%AC%E9%99%90%E5%88%B6">文档 | Hexo-Node.js版本限制</a>）</li><li>本地拥有Vscode（建议）软件，并且已设置Vscode的系统环境与用户环境</li><li>本地已经设置了npm镜像（清华镜像或者其他）</li></ol><h3 id="开始"><a href="#开始" class="headerlink" title="开始"></a>开始</h3><p>npm包可以全局安装和局部安装，为了方便使用hexo命令，建议全局安装。</p><p>桌面win+R运行cmd安装hexo基本环境</p><pre><code>npm install hexo -g</code></pre><p>安装完毕后在自己的硬盘中找个地方（禁止C盘战士）新建一个文件夹，然后在文件管理器的地址栏输入”cmd“快速在该文件夹调用cmd</p><img src="/post/2024/12/07/GitHub-Hexo%E5%88%9D%E6%AC%A1%E5%BB%BA%E7%AB%99%E7%AE%80%E5%8D%95%E6%B5%81%E7%A8%8B%E4%B8%8E%E9%97%AE%E9%A2%98/2024-12-07-13-30-42-image.png" class=""><p>然后在终端中输入以下指令进行hexo项目初始化</p><pre><code>npm init</code></pre><blockquote><p>建议使用Vscode集成环境进行项目编写与终端命令执行</p></blockquote><h3 id="配置"><a href="#配置" class="headerlink" title="配置"></a>配置</h3><p>初始化之后需要对项目进行配置，配置方法参见<a href="https://hexo.io/zh-cn/docs/configuration">配置 | Hexo</a></p><p>主要配置字段：</p><ul><li><p>title 站点标题</p></li><li><p>author 你的名字</p></li><li><p>language 站点语言</p></li><li><p>new_post_name 新文章文件名称（文件/文章名字的格式配置）</p></li><li><p>post_asset_folder 是否开启资源文件夹模式（主要用于文章图片的存储）</p></li></ul><h3 id="撰写文章"><a href="#撰写文章" class="headerlink" title="撰写文章"></a>撰写文章</h3><p>首先使用hexo命令创建模板md文件</p><pre><code>hexo new [layout] <title></code></pre><p>其中<em>layout</em>是创建的文件类型，创建文章使用”post“，创建页面使用”page“（这么说不是很正规，但是这样理解是最简单的，具体描述参见<a href="https://hexo.io/zh-cn/docs/commands#new">指令-new | Hexo</a>）</p><p>比如我现在要创建一个文章，那么运行</p><pre><code>hexo new post "新的文件"</code></pre><blockquote><p>这里文件名的双引号最好一直使用这种方式进行命名，虽然英文名可以不加，但避免混淆，最好养成使用单双引号命名的习惯</p></blockquote><p>然后我就可以在我的文件目录”G:\Blog\source_posts\2024-12-07-新的文件.md“找到我的博客文章的文件</p><img src="/post/2024/12/07/GitHub-Hexo%E5%88%9D%E6%AC%A1%E5%BB%BA%E7%AB%99%E7%AE%80%E5%8D%95%E6%B5%81%E7%A8%8B%E4%B8%8E%E9%97%AE%E9%A2%98/2024-12-07-13-58-06-image.png" class=""><p>进入文件后，文件默认自带三行内容</p><img src="/post/2024/12/07/GitHub-Hexo%E5%88%9D%E6%AC%A1%E5%BB%BA%E7%AB%99%E7%AE%80%E5%8D%95%E6%B5%81%E7%A8%8B%E4%B8%8E%E9%97%AE%E9%A2%98/2024-12-07-13-59-10-image.png" class=""><p>title即文章标题，date为框架自动生成的时间戳信息，tags部分为文章标签，支持多个标签。</p><p>该部分配置方法参见<a href="https://hexo.io/zh-cn/docs/front-matter">Front-matter | Hexo</a></p><h3 id="欲发布"><a href="#欲发布" class="headerlink" title="欲发布"></a>欲发布</h3><blockquote><p>为什么不是预发布？事实上到现在为止我并没有教你很多东西，只是在教你如何在github上进行一个博客搭建的测试工作（狗头保命），真正预发布还得去设置站点主题、完善配置文件、完善站点结构，只不过我这篇文章不教，那些东西都烂大街了，直接搜就有</p></blockquote><h4 id="预览"><a href="#预览" class="headerlink" title="预览"></a>预览</h4><p>在发布之前可以进行效果预览。依次执行以下指令</p><pre><code>hexo generatehexo server</code></pre><p>第一条指令是生成静态文件（可以理解为MD文件转换为HTML），第二条指令是在本地4000端口开启预览服务，执行成功后就可以在<u> <em>localhost:4000</em> </u>预览站点</p><img src="/post/2024/12/07/GitHub-Hexo%E5%88%9D%E6%AC%A1%E5%BB%BA%E7%AB%99%E7%AE%80%E5%8D%95%E6%B5%81%E7%A8%8B%E4%B8%8E%E9%97%AE%E9%A2%98/2024-12-07-14-08-21-image.png" class=""><h2 id="GitHub设置"><a href="#GitHub设置" class="headerlink" title="GitHub设置"></a>GitHub设置</h2><h3 id="GitHub仓库初始化"><a href="#GitHub仓库初始化" class="headerlink" title="GitHub仓库初始化"></a>GitHub仓库初始化</h3><p>首先进入你的github主页，新建一个仓库，名称格式为</p><pre><code><username>.github.io</code></pre><p>例如我的（希望没人真的把username.github.io作为名称吧）</p><pre><code>shenyuanol.github.io</code></pre><p>然后如下图操作（仓库名有一个验重，如果名称不可用就会报红，比如我这里我已经创建了该仓库了，就不能再创建了）</p><img src="/post/2024/12/07/GitHub-Hexo%E5%88%9D%E6%AC%A1%E5%BB%BA%E7%AB%99%E7%AE%80%E5%8D%95%E6%B5%81%E7%A8%8B%E4%B8%8E%E9%97%AE%E9%A2%98/2024-12-07-14-19-58-image.png" class=""><p>创建完毕后，使用git命令，将自己的测试内容全都覆盖到仓库中。</p><h3 id="项目Git配置并提交项目到Github（一键部署）"><a href="#项目Git配置并提交项目到Github（一键部署）" class="headerlink" title="项目Git配置并提交项目到Github（一键部署）"></a>项目Git配置并提交项目到Github（一键部署）</h3><h4 id="Git信息配置"><a href="#Git信息配置" class="headerlink" title="Git信息配置"></a>Git信息配置</h4><p>进入你的项目目录，打开_config.yml文件，将以下字段根据自己信息填写进去（如果文件中已经有这段内容了，改一下就行，避免出现配置信息冲突）</p><pre><code class="yml"># Deployment## Docs: https://hexo.io/docs/one-command-deploymentdeploy: type: git repo: https://github.com/<username>/<username>.github.io branch: <站点项目分支></code></pre><h4 id="一键部署"><a href="#一键部署" class="headerlink" title="一键部署"></a>一键部署</h4><p>使用Hexo一键部署可以快速实现部署，只需要执行一个指令</p><pre><code>hexo deploy</code></pre><p>等待进度完毕后即可在GitHub找到这些文件</p><blockquote><p>该操作只会将站点主要文件，即站点文件（项目根目录source文件夹）上传至Github，根目录中其他文件并不会跟随上传。</p><p>如有需求，请使用Git的push方法上传，并开启仓库分支，将源文件与站点文件双份存储，开启站点时指向站点文件分支即可</p></blockquote><img src="/post/2024/12/07/GitHub-Hexo%E5%88%9D%E6%AC%A1%E5%BB%BA%E7%AB%99%E7%AE%80%E5%8D%95%E6%B5%81%E7%A8%8B%E4%B8%8E%E9%97%AE%E9%A2%98/2024-12-07-14-34-55-image.png" class=""><img src="/post/2024/12/07/GitHub-Hexo%E5%88%9D%E6%AC%A1%E5%BB%BA%E7%AB%99%E7%AE%80%E5%8D%95%E6%B5%81%E7%A8%8B%E4%B8%8E%E9%97%AE%E9%A2%98/2024-12-07-14-35-15-image.png" class=""><h3 id="GitHub博客模式设置"><a href="#GitHub博客模式设置" class="headerlink" title="GitHub博客模式设置"></a>GitHub博客模式设置</h3><p>当所有文件上传之后，转到仓库设置（setting）-页面（pages）</p><img src="/post/2024/12/07/GitHub-Hexo%E5%88%9D%E6%AC%A1%E5%BB%BA%E7%AB%99%E7%AE%80%E5%8D%95%E6%B5%81%E7%A8%8B%E4%B8%8E%E9%97%AE%E9%A2%98/2024-12-07-14-37-32-image.png" class=""><p>source模式改为分支模式，branch中选择你站点的分支，然后点击”save“执行更改。</p><p>随后就可以在网址查看自己的站点</p><pre><code>https://<username>.github.io</code></pre><blockquote><p>这里需要注意的是，该操作不会立刻被执行，在1~10分钟内才会被执行，可以重复刷新页面，但是不要去重复上传与部署操作，待10分钟后页面依旧没有反应，再去检查自己的操作是否存在问题，再次执行上传与部署操作。</p></blockquote><h1 id="END"><a href="#END" class="headerlink" title="END"></a>END</h1>]]></content>
<tags>
<tag> 个人博客 </tag>
</tags>
</entry>
</search>