-
Notifications
You must be signed in to change notification settings - Fork 0
/
atom.xml
101 lines (53 loc) · 58.9 KB
/
atom.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"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>生活精彩.万物可爱</title>
<subtitle>多读书</subtitle>
<link href="https://ityang1.github.io/atom.xml" rel="self"/>
<link href="https://ityang1.github.io/"/>
<updated>2024-08-27T02:45:47.250Z</updated>
<id>https://ityang1.github.io/</id>
<author>
<name>Miss.Yang</name>
</author>
<generator uri="https://hexo.io/">Hexo</generator>
<entry>
<title>Hello World</title>
<link href="https://ityang1.github.io/2024/08/27/uncategorized/cm1g8byor0000bokrbb5c4y6a/"/>
<id>https://ityang1.github.io/2024/08/27/uncategorized/cm1g8byor0000bokrbb5c4y6a/</id>
<published>2024-08-27T02:45:46.779Z</published>
<updated>2024-08-27T02:45:47.250Z</updated>
<content type="html"><![CDATA[<p>Welcome to <a href="https://hexo.io/">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href="https://hexo.io/docs/troubleshooting.html">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues">GitHub</a>.</p><h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new <span class="string">"My New Post"</span></span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/writing.html">Writing</a></p><h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo server</span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/server.html">Server</a></p><h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo generate</span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/generating.html">Generating</a></p><h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo deploy</span><br></pre></td></tr></table></figure><p>More info: <a href="https://hexo.io/docs/one-command-deployment.html">Deployment</a></p>]]></content>
<summary type="html">新增的页面</summary>
</entry>
<entry>
<title>弹窗可拖拽弹窗</title>
<link href="https://ityang1.github.io/2024/05/10/uncategorized/cm1g8byp20004bokrh5hq6bl6/"/>
<id>https://ityang1.github.io/2024/05/10/uncategorized/cm1g8byp20004bokrh5hq6bl6/</id>
<published>2024-05-10T05:43:07.995Z</published>
<updated>2024-08-26T05:59:40.642Z</updated>
<content type="html"><![CDATA[<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br><span class="line">289</span><br><span class="line">290</span><br><span class="line">291</span><br><span class="line">292</span><br><span class="line">293</span><br><span class="line">294</span><br><span class="line">295</span><br><span class="line">296</span><br><span class="line">297</span><br><span class="line">298</span><br><span class="line">299</span><br><span class="line">300</span><br><span class="line">301</span><br><span class="line">302</span><br><span class="line">303</span><br><span class="line">304</span><br><span class="line">305</span><br><span class="line">306</span><br><span class="line">307</span><br><span class="line">308</span><br><span class="line">309</span><br><span class="line">310</span><br><span class="line">311</span><br><span class="line">312</span><br><span class="line">313</span><br><span class="line">314</span><br><span class="line">315</span><br><span class="line">316</span><br><span class="line">317</span><br><span class="line">318</span><br><span class="line">319</span><br><span class="line">320</span><br><span class="line">321</span><br><span class="line">322</span><br><span class="line">323</span><br><span class="line">324</span><br><span class="line">325</span><br><span class="line">326</span><br><span class="line">327</span><br><span class="line">328</span><br><span class="line">329</span><br><span class="line">330</span><br><span class="line">331</span><br><span class="line">332</span><br><span class="line">333</span><br><span class="line">334</span><br><span class="line">335</span><br><span class="line">336</span><br><span class="line">337</span><br><span class="line">338</span><br><span class="line">339</span><br><span class="line">340</span><br><span class="line">341</span><br><span class="line">342</span><br><span class="line">343</span><br><span class="line">344</span><br><span class="line">345</span><br><span class="line">346</span><br><span class="line">347</span><br><span class="line">348</span><br><span class="line">349</span><br><span class="line">350</span><br><span class="line">351</span><br><span class="line">352</span><br><span class="line">353</span><br><span class="line">354</span><br><span class="line">355</span><br><span class="line">356</span><br><span class="line">357</span><br><span class="line">358</span><br><span class="line">359</span><br><span class="line">360</span><br><span class="line">361</span><br><span class="line">362</span><br><span class="line">363</span><br><span class="line">364</span><br><span class="line">365</span><br><span class="line">366</span><br><span class="line">367</span><br><span class="line">368</span><br><span class="line">369</span><br><span class="line">370</span><br><span class="line">371</span><br><span class="line">372</span><br></pre></td><td class="code"><pre><span class="line"><template></span><br><span class="line"> <div id="drag"></span><br><span class="line"> <div class="title"></span><br><span class="line"> <h2>这是一个可以拖动的窗口</h2></span><br><span class="line"> <div></span><br><span class="line"> <a class="min" href="javascript:;" title="最小化"></a></span><br><span class="line"> <a class="max" href="javascript:;" title="最大化"></a></span><br><span class="line"> <a class="revert" href="javascript:;" title="还原"></a></span><br><span class="line"> <a class="close" href="javascript:;" title="关闭"></a></span><br><span class="line"> </div></span><br><span class="line"> </div></span><br><span class="line"> <div class="resizeL"></div></span><br><span class="line"> <div class="resizeT"></div></span><br><span class="line"> <div class="resizeR"></div></span><br><span class="line"> <div class="resizeB"></div></span><br><span class="line"> <div class="resizeLT"></div></span><br><span class="line"> <div class="resizeTR"></div></span><br><span class="line"> <div class="resizeBR"></div></span><br><span class="line"> <div class="resizeLB"></div></span><br><span class="line"> <div class="content"></span><br><span class="line"> ① 窗口可以拖动；<br /></span><br><span class="line"> ② 窗口可以通过八个方向改变大小；<br /></span><br><span class="line"> ③ 窗口可以最小化、最大化、还原、关闭；<br /></span><br><span class="line"> ④ 限制窗口最小宽度/高度。</span><br><span class="line"> </div></span><br><span class="line"> </div></span><br><span class="line"></template></span><br><span class="line"><script></span><br><span class="line">export default {</span><br><span class="line"> data() {</span><br><span class="line"> return {</span><br><span class="line"> dragMinWidth: 250,</span><br><span class="line"> dragMinHeight: 125,</span><br><span class="line"> get: {</span><br><span class="line"> byId: (id) => {</span><br><span class="line"> return typeof id === "string" ? document.getElementById(id) : id;</span><br><span class="line"> },</span><br><span class="line"> byClass: (sClass, oParent) => {</span><br><span class="line"> var aClass = [];</span><br><span class="line"> var reClass = new RegExp("(^| )" + sClass + "( |$)");</span><br><span class="line"> var aElem = this.get.byTagName("*", oParent);</span><br><span class="line"> for (var i = 0; i < aElem.length; i++)</span><br><span class="line"> reClass.test(aElem[i].className) && aClass.push(aElem[i]);</span><br><span class="line"> return aClass;</span><br><span class="line"> },</span><br><span class="line"> byTagName: (elem, obj) => {</span><br><span class="line"> return (obj || document).getElementsByTagName(elem);</span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line"> };</span><br><span class="line"> },</span><br><span class="line"></span><br><span class="line"> mounted() {</span><br><span class="line"> const that = this;</span><br><span class="line"> window.onload = () => {</span><br><span class="line"> that.init();</span><br><span class="line"> };</span><br><span class="line"> window.onresize = () => {</span><br><span class="line"> that.init();</span><br><span class="line"> };</span><br><span class="line"> },</span><br><span class="line"></span><br><span class="line"> methods: {</span><br><span class="line"> init() {</span><br><span class="line"> let oDrag = document.getElementById("drag");</span><br><span class="line"> console.log("1---------------", oDrag);</span><br><span class="line"></span><br><span class="line"> let oTitle = this.get.byClass("title", oDrag)[0];</span><br><span class="line"> let oL = this.get.byClass("resizeL", oDrag)[0];</span><br><span class="line"> let oT = this.get.byClass("resizeT", oDrag)[0];</span><br><span class="line"> let oR = this.get.byClass("resizeR", oDrag)[0];</span><br><span class="line"> let oB = this.get.byClass("resizeB", oDrag)[0];</span><br><span class="line"> let oLT = this.get.byClass("resizeLT", oDrag)[0];</span><br><span class="line"> let oTR = this.get.byClass("resizeTR", oDrag)[0];</span><br><span class="line"> let oBR = this.get.byClass("resizeBR", oDrag)[0];</span><br><span class="line"> let oLB = this.get.byClass("resizeLB", oDrag)[0];</span><br><span class="line"> this.drag(oDrag, oTitle);</span><br><span class="line"> //四角</span><br><span class="line"> this.resize(oDrag, oLT, true, true, false, false);</span><br><span class="line"> this.resize(oDrag, oTR, false, true, false, false);</span><br><span class="line"> this.resize(oDrag, oBR, false, false, false, false);</span><br><span class="line"> this.resize(oDrag, oLB, true, false, false, false);</span><br><span class="line"> //四边</span><br><span class="line"> this.resize(oDrag, oL, true, false, false, true);</span><br><span class="line"> this.resize(oDrag, oT, false, true, true, false);</span><br><span class="line"> this.resize(oDrag, oR, false, false, false, true);</span><br><span class="line"> this.resize(oDrag, oB, false, false, true, false);</span><br><span class="line"> oDrag.style.left =</span><br><span class="line"> (document.documentElement.clientWidth - oDrag.offsetWidth) / 2 + "px";</span><br><span class="line"> oDrag.style.top =</span><br><span class="line"> (document.documentElement.clientHeight - oDrag.offsetHeight) / 2 + "px";</span><br><span class="line"> },</span><br><span class="line"></span><br><span class="line"> drag(oDrag, handle) {</span><br><span class="line"> let disX = 0;</span><br><span class="line"> let disY = 0;</span><br><span class="line"> let oMin = this.get.byClass("min", oDrag)[0];</span><br><span class="line"> let oMax = this.get.byClass("max", oDrag)[0];</span><br><span class="line"> let oRevert = this.get.byClass("revert", oDrag)[0];</span><br><span class="line"> let oClose = this.get.byClass("close", oDrag)[0];</span><br><span class="line"> handle = handle || oDrag;</span><br><span class="line"> handle.style.cursor = "move";</span><br><span class="line"> handle.onmousedown = (event) => {</span><br><span class="line"> disX = event.clientX - oDrag.offsetLeft;</span><br><span class="line"> disY = event.clientY - oDrag.offsetTop;</span><br><span class="line"> document.onmousemove = (event) => {</span><br><span class="line"> var iL = event.clientX - disX;</span><br><span class="line"> var iT = event.clientY - disY;</span><br><span class="line"> var maxL = document.documentElement.clientWidth - oDrag.offsetWidth;</span><br><span class="line"> var maxT = document.documentElement.clientHeight - oDrag.offsetHeight;</span><br><span class="line"> iL <= 0 && (iL = 0);</span><br><span class="line"> iT <= 0 && (iT = 0);</span><br><span class="line"> iL >= maxL && (iL = maxL);</span><br><span class="line"> iT >= maxT && (iT = maxT);</span><br><span class="line"> oDrag.style.left = iL + "px";</span><br><span class="line"> oDrag.style.top = iT + "px";</span><br><span class="line"> return false;</span><br><span class="line"> };</span><br><span class="line"> document.onmouseup = () => {</span><br><span class="line"> document.onmousemove = null;</span><br><span class="line"> document.onmouseup = null;</span><br><span class="line"> this.releaseCapture && this.releaseCapture();</span><br><span class="line"> };</span><br><span class="line"> this.setCapture && this.setCapture();</span><br><span class="line"> return false;</span><br><span class="line"> };</span><br><span class="line"> //最大化按钮</span><br><span class="line"> oMax.onclick = () => {</span><br><span class="line"> oDrag.style.top = oDrag.style.left = 0;</span><br><span class="line"> oDrag.style.width = document.documentElement.clientWidth - 2 + "px";</span><br><span class="line"> oDrag.style.height = document.documentElement.clientHeight - 2 + "px";</span><br><span class="line"> this.style.display = "none";</span><br><span class="line"> oRevert.style.display = "block";</span><br><span class="line"> };</span><br><span class="line"> //还原按钮</span><br><span class="line"> oRevert.onclick = () => {</span><br><span class="line"> oDrag.style.width = this.dragMinWidth + "px";</span><br><span class="line"> oDrag.style.height = this.dragMinHeight + "px";</span><br><span class="line"> oDrag.style.left =</span><br><span class="line"> (document.documentElement.clientWidth - oDrag.offsetWidth) / 2 + "px";</span><br><span class="line"> oDrag.style.top =</span><br><span class="line"> (document.documentElement.clientHeight - oDrag.offsetHeight) / 2 +</span><br><span class="line"> "px";</span><br><span class="line"> this.style.display = "none";</span><br><span class="line"> oMax.style.display = "block";</span><br><span class="line"> };</span><br><span class="line"> //最小化按钮</span><br><span class="line"> oMin.onclick = oClose.onclick = () => {</span><br><span class="line"> oDrag.style.display = "none";</span><br><span class="line"> var oA = document.createElement("a");</span><br><span class="line"> oA.className = "open";</span><br><span class="line"> oA.href = "javascript:;";</span><br><span class="line"> oA.title = "还原";</span><br><span class="line"> document.body.appendChild(oA);</span><br><span class="line"> oA.onclick = () => {</span><br><span class="line"> oDrag.style.display = "block";</span><br><span class="line"> document.body.removeChild(this);</span><br><span class="line"> this.onclick = null;</span><br><span class="line"> };</span><br><span class="line"> };</span><br><span class="line"> //阻止冒泡</span><br><span class="line"> oMin.onmousedown =</span><br><span class="line"> oMax.onmousedown =</span><br><span class="line"> oClose.onmousedown =</span><br><span class="line"> (event) => {</span><br><span class="line"> this.onfocus = () => {</span><br><span class="line"> this.blur();</span><br><span class="line"> };</span><br><span class="line"> (event || window.event).cancelBubble = true;</span><br><span class="line"> };</span><br><span class="line"> },</span><br><span class="line"></span><br><span class="line"> resize(oParent, handle, isLeft, isTop, lockX, lockY) {</span><br><span class="line"> handle.onmousedown = (event) => {</span><br><span class="line"> var disX = event.clientX - handle.offsetLeft;</span><br><span class="line"> var disY = event.clientY - handle.offsetTop;</span><br><span class="line"> var iParentTop = oParent.offsetTop;</span><br><span class="line"> var iParentLeft = oParent.offsetLeft;</span><br><span class="line"> var iParentWidth = oParent.offsetWidth;</span><br><span class="line"> var iParentHeight = oParent.offsetHeight;</span><br><span class="line"> document.onmousemove = (event) => {</span><br><span class="line"> var iL = event.clientX - disX;</span><br><span class="line"> var iT = event.clientY - disY;</span><br><span class="line"> var maxW =</span><br><span class="line"> document.documentElement.clientWidth - oParent.offsetLeft - 2;</span><br><span class="line"> var maxH =</span><br><span class="line"> document.documentElement.clientHeight - oParent.offsetTop - 2;</span><br><span class="line"> var iW = isLeft ? iParentWidth - iL : handle.offsetWidth + iL;</span><br><span class="line"> var iH = isTop ? iParentHeight - iT : handle.offsetHeight + iT;</span><br><span class="line"> isLeft && (oParent.style.left = iParentLeft + iL + "px");</span><br><span class="line"> isTop && (oParent.style.top = iParentTop + iT + "px");</span><br><span class="line"> iW < this.dragMinWidth && (iW = this.dragMinWidth);</span><br><span class="line"> iW > maxW && (iW = maxW);</span><br><span class="line"> lockX || (oParent.style.width = iW + "px");</span><br><span class="line"> iH < this.dragMinHeight && (iH = this.dragMinHeight);</span><br><span class="line"> iH > maxH && (iH = maxH);</span><br><span class="line"> lockY || (oParent.style.height = iH + "px");</span><br><span class="line"> if (</span><br><span class="line"> (isLeft && iW == this.dragMinWidth) ||</span><br><span class="line"> (isTop && iH == this.dragMinHeight)</span><br><span class="line"> )</span><br><span class="line"> document.onmousemove = null;</span><br><span class="line"> return false;</span><br><span class="line"> };</span><br><span class="line"> document.onmouseup = () => {</span><br><span class="line"> document.onmousemove = null;</span><br><span class="line"> document.onmouseup = null;</span><br><span class="line"> };</span><br><span class="line"> return false;</span><br><span class="line"> };</span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line">};</span><br><span class="line"></script></span><br><span class="line"></span><br><span class="line"><style></span><br><span class="line">body,</span><br><span class="line">div,</span><br><span class="line">h2 {</span><br><span class="line"> margin: 0;</span><br><span class="line"> padding: 0;</span><br><span class="line">}</span><br><span class="line">body {</span><br><span class="line"> background: url(/src/static/image/meiTu.png);</span><br><span class="line"> color: #333;</span><br><span class="line">}</span><br><span class="line">#drag {</span><br><span class="line"> position: absolute;</span><br><span class="line"> top: 100px;</span><br><span class="line"> left: 100px;</span><br><span class="line"> width: 300px;</span><br><span class="line"> height: 160px;</span><br><span class="line"> background: #e9e9e9;</span><br><span class="line"> border: 1px solid #444;</span><br><span class="line"> border-radius: 5px;</span><br><span class="line"> box-shadow: 0 1px 3px 2px #666;</span><br><span class="line">}</span><br><span class="line">#drag .title {</span><br><span class="line"> position: relative;</span><br><span class="line"> height: 27px;</span><br><span class="line"> margin: 5px;</span><br><span class="line">}</span><br><span class="line">#drag .title h2 {</span><br><span class="line"> font-size: 14px;</span><br><span class="line"> height: 27px;</span><br><span class="line"> line-height: 24px;</span><br><span class="line"> border-bottom: 1px solid #a1b4b0;</span><br><span class="line">}</span><br><span class="line">#drag .title div {</span><br><span class="line"> position: absolute;</span><br><span class="line"> height: 19px;</span><br><span class="line"> top: 2px;</span><br><span class="line"> right: 0;</span><br><span class="line">}</span><br><span class="line">#drag .title a,</span><br><span class="line">a.open {</span><br><span class="line"> float: left;</span><br><span class="line"> width: 21px;</span><br><span class="line"> height: 19px;</span><br><span class="line"> display: block;</span><br><span class="line"> margin-left: 5px;</span><br><span class="line"> background: url(/src/static/image/关闭.png) no-repeat;</span><br><span class="line">}</span><br><span class="line">a.open {</span><br><span class="line"> position: absolute;</span><br><span class="line"> top: 10px;</span><br><span class="line"> left: 50%;</span><br><span class="line"> margin-left: -10px;</span><br><span class="line"> background-position: 0 0;</span><br><span class="line">}</span><br><span class="line">a.open:hover {</span><br><span class="line"> background-position: 0 -29px;</span><br><span class="line">}</span><br><span class="line">#drag .title a.min {</span><br><span class="line"> background-position: -29px 0;</span><br><span class="line">}</span><br><span class="line">#drag .title a.min:hover {</span><br><span class="line"> background-position: -29px -29px;</span><br><span class="line">}</span><br><span class="line">#drag .title a.max {</span><br><span class="line"> background-position: -60px 0;</span><br><span class="line">}</span><br><span class="line">#drag .title a.max:hover {</span><br><span class="line"> background-position: -60px -29px;</span><br><span class="line">}</span><br><span class="line">#drag .title a.revert {</span><br><span class="line"> background-position: -149px 0;</span><br><span class="line"> display: none;</span><br><span class="line">}</span><br><span class="line">#drag .title a.revert:hover {</span><br><span class="line"> background-position: -149px -29px;</span><br><span class="line">}</span><br><span class="line">#drag .title a.close {</span><br><span class="line"> background-position: -89px 0;</span><br><span class="line">}</span><br><span class="line">#drag .title a.close:hover {</span><br><span class="line"> background-position: -89px -29px;</span><br><span class="line">}</span><br><span class="line">#drag .content {</span><br><span class="line"> overflow: auto;</span><br><span class="line"> margin: 0 5px;</span><br><span class="line">}</span><br><span class="line">#drag .resizeBR {</span><br><span class="line"> position: absolute;</span><br><span class="line"> width: 14px;</span><br><span class="line"> height: 14px;</span><br><span class="line"> right: 0;</span><br><span class="line"> bottom: 0;</span><br><span class="line"> overflow: hidden;</span><br><span class="line"> cursor: nw-resize;</span><br><span class="line"> /* background: url(/src/static/image/横线.png) no-repeat;</span><br><span class="line"> background-size: 20px 20px; */</span><br><span class="line">}</span><br><span class="line">#drag .resizeL,</span><br><span class="line">#drag .resizeT,</span><br><span class="line">#drag .resizeR,</span><br><span class="line">#drag .resizeB,</span><br><span class="line">#drag .resizeLT,</span><br><span class="line">#drag .resizeTR,</span><br><span class="line">#drag .resizeLB {</span><br><span class="line"> position: absolute;</span><br><span class="line"> background: #000;</span><br><span class="line"> overflow: hidden;</span><br><span class="line"> opacity: 0;</span><br><span class="line"> filter: alpha(opacity=0);</span><br><span class="line">}</span><br><span class="line">#drag .resizeL,</span><br><span class="line">#drag .resizeR {</span><br><span class="line"> top: 0;</span><br><span class="line"> width: 5px;</span><br><span class="line"> height: 100%;</span><br><span class="line"> cursor: w-resize;</span><br><span class="line">}</span><br><span class="line">#drag .resizeR {</span><br><span class="line"> right: 0;</span><br><span class="line">}</span><br><span class="line">#drag .resizeT,</span><br><span class="line">#drag .resizeB {</span><br><span class="line"> width: 100%;</span><br><span class="line"> height: 5px;</span><br><span class="line"> cursor: n-resize;</span><br><span class="line">}</span><br><span class="line">#drag .resizeT {</span><br><span class="line"> top: 0;</span><br><span class="line">}</span><br><span class="line">#drag .resizeB {</span><br><span class="line"> bottom: 0;</span><br><span class="line">}</span><br><span class="line">#drag .resizeLT,</span><br><span class="line">#drag .resizeTR,</span><br><span class="line">#drag .resizeLB {</span><br><span class="line"> width: 8px;</span><br><span class="line"> height: 8px;</span><br><span class="line"> background: #ff0;</span><br><span class="line">}</span><br><span class="line">#drag .resizeLT {</span><br><span class="line"> top: 0;</span><br><span class="line"> left: 0;</span><br><span class="line"> cursor: nw-resize;</span><br><span class="line">}</span><br><span class="line">#drag .resizeTR {</span><br><span class="line"> top: 0;</span><br><span class="line"> right: 0;</span><br><span class="line"> cursor: ne-resize;</span><br><span class="line">}</span><br><span class="line">#drag .resizeLB {</span><br><span class="line"> left: 0;</span><br><span class="line"> bottom: 0;</span><br><span class="line"> cursor: ne-resize;</span><br><span class="line">}</span><br><span class="line"></style></span><br><span class="line"></span><br></pre></td></tr></table></figure><p>借鉴：<a href="https://www.cnblogs.com/limeiky/p/5818474.html">https://www.cnblogs.com/limeiky/p/5818474.html</a></p>]]></content>
<summary type="html">以vue为框架创建的弹窗，可以进行拖拽和调整大小</summary>
<category term="vue" scheme="https://ityang1.github.io/tags/vue/"/>
<category term="css" scheme="https://ityang1.github.io/tags/css/"/>
<category term="弹窗" scheme="https://ityang1.github.io/tags/%E5%BC%B9%E7%AA%97/"/>
</entry>
<entry>
<title>学习SVG</title>
<link href="https://ityang1.github.io/2024/04/11/uncategorized/cm1g8byoz0002bokr79ha5zon/"/>
<id>https://ityang1.github.io/2024/04/11/uncategorized/cm1g8byoz0002bokr79ha5zon/</id>
<published>2024-04-11T08:08:42.000Z</published>
<updated>2024-08-26T05:54:22.474Z</updated>
<content type="html"><![CDATA[<h1 id="svg学习"><a href="#svg学习" class="headerlink" title="svg学习"></a>svg学习</h1><p>解决图标的最佳方案，平时我们添加图标的时候可能会对图标进行放大和缩小的处理，当图标被放大以后图标像素可能会失真，这样对用户视觉效果有一定的影响，那么怎么解决呢，于是就想到可以尝试用svg解决这个问题<br>Svg 是通过对图形进行绘制而形成的</p><h2 id="使用方式"><a href="#使用方式" class="headerlink" title="使用方式"></a>使用方式</h2><p> <code><svg width='100' height='100'>...</svg></code>创建一个100*100的画布```</p><h3 id="一·绘制种类"><a href="#一·绘制种类" class="headerlink" title="一·绘制种类"></a>一·绘制种类</h3><h4 id="绘制矩形-rect"><a href="#绘制矩形-rect" class="headerlink" title="绘制矩形-rect"></a>绘制矩形-rect</h4> <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><svg width="110" height="110"></span><br><span class="line"> <rect width='110' height='110' fill='yellow' stroke-width='4' stroke='blue' /></span><br><span class="line"> </svg> </span><br></pre></td></tr></table></figure><pre><code> 说明： Width:宽度 Height：高度 fill：填充颜色 stroke-width：边框宽度 stroke：边框的颜色 fill-opacity:填充透明度 stroke-opacity：边框透明度 可以写成opacity：0-1之间任意数 Rx、ry：角度弧形的程度</code></pre><p> 效果图：<br> <img src="learnSVG/矩形.png" alt="矩形"></p><h4 id="绘制圆形-circle"><a href="#绘制圆形-circle" class="headerlink" title="绘制圆形-circle"></a>绘制圆形-circle</h4> <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><svg width="200" height="200" fill='blue'></span><br><span class="line"> <circle cx='50' cy='50' r='45' fill='yellow' stroke-width='4' stroke='blue'/></span><br><span class="line"></svg></span><br></pre></td></tr></table></figure><pre><code>说明: cy、cy：圆形的x、y的坐标 R：圆形的半径效果图：</code></pre><p> <img src="learnSVG/圆形.png" alt="圆形"></p><h4 id="绘制椭圆-ellipse"><a href="#绘制椭圆-ellipse" class="headerlink" title="绘制椭圆-ellipse"></a>绘制椭圆-ellipse</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><svg width="500" height="150"></span><br><span class="line"> <ellipse cx="120" cy="80" rx="100" ry="50" fill="none" stroke="red" stroke-width="3"></ellipse></span><br><span class="line"></svg></span><br></pre></td></tr></table></figure><p> 说明:<br> cx、cy：椭圆的x、y的坐标<br> rx、ry：水平、垂直半径<br> 效果图：<br> <img src="learnSVG/椭圆.png" alt="椭圆"></p><h4 id="绘制线条-line"><a href="#绘制线条-line" class="headerlink" title="绘制线条-line"></a>绘制线条-line</h4> <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><svg width="200" height="200" ></span><br><span class="line"> <line x1='10' y1='10' x2='100' y2='100' stroke="blue" stroke-width="3"/></span><br><span class="line"></svg></span><br></pre></td></tr></table></figure><p> 说明:<br> x1、y1：起点坐标<br> x2、y2：终点坐标<br> 效果图：<br> <img src="learnSVG/线条.png" alt="线条"></p><h4 id="绘制多线条-polyline"><a href="#绘制多线条-polyline" class="headerlink" title="绘制多线条-polyline"></a>绘制多线条-polyline</h4> <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><polyline points="10,30 40,50 60,70" fill="none" stroke="blue" stroke-width="3" /></span><br></pre></td></tr></table></figure><p> 说明:<br> points：三个点的坐标 以空格分开<br> 效果图：<br> <img src="learnSVG/多线条.png" alt="多线条"></p><h4 id="绘制多边形-polygon"><a href="#绘制多边形-polygon" class="headerlink" title="绘制多边形-polygon"></a>绘制多边形-polygon</h4> <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><polygon points="10,30 100,35 50,120" fill="pink" /></span><br></pre></td></tr></table></figure><p> 说明:<br> points：多个点的坐标 以空格分开<br> 效果图：<br> <img src="learnSVG/多边形.png" alt="多边形"></p><h4 id="绘制文本-text"><a href="#绘制文本-text" class="headerlink" title="绘制文本-text"></a>绘制文本-text</h4> <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><text x='20' y='50' transform='rotate(10,20,30)' font-size='20' text-anchor='start/middle/end'> 11111111</text></span><br></pre></td></tr></table></figure><p> 说明:<br> x、y:文本的起点位置<br> transform：旋转角度(r x,y)r-旋转角度 x,y旋转中心点 x,y默认为0,0<br> font-size:字体大小<br> text-anchor：文本对其方式<br> text增加跳转地址：用</p><pre><code><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><svg width="200" height="200" xmlns:xlink='http://www.w3.org/1999/xlink'></span><br><span class="line"> <a xlink:href='' target='_blank'></span><br><span class="line"> <text x='20' y='50' transform='rotate(10,20,30)' font-size='20' text-anchor='start/middle/end'> 跳转</text></span><br><span class="line"> </a></span><br><span class="line"></svg></span><br></pre></td></tr></table></figure></code></pre><h4 id="绘制路径-path"><a href="#绘制路径-path" class="headerlink" title="绘制路径-path"></a>绘制路径-path</h4> <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><svg width="200" height="200"></span><br><span class="line"> <path d='M30 150 q70 -200 150 0' fill="none" stroke-width='2' stroke='orange' /></span><br><span class="line"></svg></span><br></pre></td></tr></table></figure><p> 说明:<br> d(draw):<br> M(Moveto):M-决定定位 m-相对定位<br> L(lineto):<br> q：控制点(x,y) 终点(x,y)<br> stroke-width：边框宽度<br> stroke：边框的颜色<br> stroke-linecap：笔画笔帽属性 -butt 灭有线帽 -round圆形线帽 square 方形<br> stroke-dasharray：虚线笔画数性 至少两个数字<br> 当多个路径或者图形组合在一起。并且拥有相同颜色或者线条宽度时，为了减少多次在标签中设置相同的配置，可以将拥有相同配置的标签以<g>包裹住，在<g>标签上加入属性，如<g fill='red'><br> 效果图：<br> <img src="/source/_posts/learnSVG/路径.png" alt="路径"></p><h4 id="模糊效果和阴影效果"><a href="#模糊效果和阴影效果" class="headerlink" title="模糊效果和阴影效果"></a>模糊效果和阴影效果</h4><p> 模糊效果:<br> <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"> <svg width="200" height="200"></span><br><span class="line"> <defs></span><br><span class="line"> <filter x="0" y="0" id='f1'></span><br><span class="line"> <feGaussianBlur stdDeviation='20' /></span><br><span class="line"> </filter></span><br><span class="line"> </defs></span><br><span class="line"> <rect width='200' height='200' fill='pink' stroke='green' stroke-width='30' filter='url(#f1)'></rect></span><br><span class="line"></svg></span><br></pre></td></tr></table></figure><br> 效果图：<br> <img src="learnSVG/模糊.png" alt="模糊"></p><pre><code>阴影： <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"> <svg width="300" height="300"></span><br><span class="line"> <defs></span><br><span class="line"> <filter x="0" y="0" width="100" height="100" id="f2"></span><br><span class="line"> <feOffset in="SourceAlpha" dx="20" dy="20" /></span><br><span class="line"> <feBlend in="SourceGraphic" /></span><br><span class="line"> </filter></span><br><span class="line"> </defs></span><br><span class="line"> <rect width='200' height='200' fill='green' stroke='yellow' stroke-width='4' filter="url(#f2)"></rect></span><br><span class="line"></svg></span><br></pre></td></tr></table></figure></code></pre><p>注意：filter=”url(#f2)”要与id=”f2”内容是一样的<br> 效果图：<br> <img src="learnSVG/阴影.png" alt="阴影"></p><h4 id="线性渐变-linearGradient"><a href="#线性渐变-linearGradient" class="headerlink" title="线性渐变-linearGradient"></a>线性渐变-linearGradient</h4><pre><code><svg width="200" height="200"> <defs> <linearGradient x1="0%" y1="0%" x2="100%" y2="0%" id="f6"> <stop offset="0%" stop-color="yellow" /> <stop offset="100%" stop-color="pink" /> </linearGradient> </defs> <rect width='200' height='200' fill="url(#f6)" /></svg></code></pre><p>说明:<br> offset:开始和结束位置的属性值<br> stop-color：渐变的颜色<br> 需要注意的是id要与下面的url里面的内容一致<br> 效果图：<br> <img src="learnSVG/线性渐变.png" alt="线性渐变"></p><h4 id="径向渐变-radialGradient"><a href="#径向渐变-radialGradient" class="headerlink" title="径向渐变-radialGradient"></a>径向渐变-radialGradient</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><svg width="400" height="400"></span><br><span class="line"> <defs></span><br><span class="line"> <radialGradient id="f4" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"></span><br><span class="line"> <stop offset="0%" stop-color="yellow" /></span><br><span class="line"> <stop offset="100%" stop-color="pink" /></span><br><span class="line"> </radialGradient></span><br><span class="line"> </defs></span><br><span class="line"> <rect width='200' height='200' cx="200" cy="30" r="50" fx="40" fy="50" fill="url(#f4)"></rect></span><br><span class="line"></svg></span><br></pre></td></tr></table></figure><p>说明:<br> offset:开始和结束位置的属性值<br> stop-color：渐变的颜色<br> cx,cy,r:外面的圆和半径<br> fx,fy:内部的为止<br> 效果图：<br> <img src="learnSVG/线性渐变.png" alt="线性渐变"></p>]]></content>
<summary type="html"><h1 id="svg学习"><a href="#svg学习" class="headerlink" title="svg学习"></a>svg学习</h1><p>解决图标的最佳方案，平时我们添加图标的时候可能会对图标进行放大和缩小的处理，当图标被放大以后图标像素可能会失真，这样</summary>
</entry>
<entry>
<title>首发的博客-如何通过HEXO+github 创建属于自己的博客</title>
<link href="https://ityang1.github.io/2024/03/29/uncategorized/cm1g8byp40005bokrceib2oya/"/>
<id>https://ityang1.github.io/2024/03/29/uncategorized/cm1g8byp40005bokrceib2oya/</id>
<published>2024-03-28T16:00:00.000Z</published>
<updated>2024-08-26T05:47:12.385Z</updated>
<content type="html"><![CDATA[<p>作为一个it打工人，怎么没有一个属于自己的的博客呢，于是我在网上各种搜索，查询各种教程，最后终于创建了一个自己的博客，创建完成之后，就迫不及待地创建了我的第一篇博客文章—-“如何通过HEXO+github 创建属于自己的博客”<br>我用到的依赖包：<br> <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">"hexo-deployer-git": "^4.0.0",</span><br><span class="line"> nvm("node":"16.14.1",npm)</span><br></pre></td></tr></table></figure></p><p>由于我有git账号，注册账号的过程忽略，这里就不说了。</p><h2 id="一、安装hexo"><a href="#一、安装hexo" class="headerlink" title="一、安装hexo"></a>一、安装hexo</h2><p><span style="font-size:16px"><strong>1、</strong></span> 在自己经常存代码的文件夹中，在顶部搜索栏中输入cmd，打开终端,如图：<br><img src="myFirstPage/PixPin_2024-03-29_14-14-16.png" alt="打开终端"></p><p><span style="font-size:16px"><strong>2、</strong></span> 安装hexo，如图<br><img src="myFirstPage/PixPin_2024-03-29_14-35-39.png" alt="安装hexo"></p><p>可以全局安装<br><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm install -g hexo-cli</span><br><span class="line"></span><br></pre></td></tr></table></figure><br>也可以局部安装<br><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo</span><br></pre></td></tr></table></figure></p><p><span style="font-size:16px"><strong>3、</strong></span> 运行hexo init xxx(项目名称)，如图<br><img src="myFirstPage/PixPin_2024-03-29_14-41-46.png" alt="创建hexo项目名称"><br>进入创建的文件夹，按照步骤1进入cmd中，输入<code>npm install</code><br>然后输入<code>hexo s</code><br> 此时一个简单的hexo就完成啦！如图：<br> <img src="myFirstPage/PixPin_2024-03-29_14-47-57.png" alt="hello hexo"></p><h2 id="二、更换主题"><a href="#二、更换主题" class="headerlink" title="二、更换主题"></a>二、更换主题</h2><p><span style="font-size:16px"><strong>1、</strong></span> 打开<a href="https://hexo.io/zh-cn/docs/">hexo官方文档</a><br><img src="myFirstPage/PixPin_2024-03-29_14-53-11.png" alt="主题选择"><br>选择一个自己喜欢的主题，将git地址克隆下来<br><img src="myFirstPage/PixPin_2024-03-29_14-54-59.png" alt="主题选择"><br><img src="myFirstPage/PixPin_2024-03-29_14-55-43.png" alt="git下载"><br>打开根目录下的themes，将git地址下载到themes内，<br><img src="myFirstPage/PixPin_2024-03-29_14-55-43.png" alt="git下载1"><br><img src="myFirstPage/PixPin_2024-03-29_15-00-23.png" alt="git下载1"><br>此时下载下来的文件名字可能是hexo-theme-xxxx,为了方便调用，将文件夹名字改为xxxx,然后打开根目录下的_config.yml文件，将theme后面的名称修改为刚刚文件夹的名字,如图<br><img src="myFirstPage/PixPin_2024-03-29_15-46-15.png" alt="主题更换"><br><span style="font-size:16px"><strong>2、</strong></span> 打开终端Ctrl+c退出项目运行，输入<code>hexo clean</code>,此命令是清理缓存(删除db.json),然后在输入<code>hexo generate或者hexo g</code>此命令是生成静态文件，最后输入<code>hexo server或者hexo s</code> 启动服务器,默认的端口为4000，如果出现端口被占用，如图所示，<br><img src="myFirstPage/PixPin_2024-03-29_16-22-21.png" alt="端口占用报错"><br>那么可以输入```hexp s -p 5555(端口号，可以随意拜变换)````,打开对应的地址，查看界面是否有变化</p><p><img src="myFirstPage/PixPin_2024-03-29_16-24-00.png" alt="成功！"><br>哇哈哈哈<del>~</del>~成功啦</p><h2 id="三、关联git"><a href="#三、关联git" class="headerlink" title="三、关联git"></a>三、关联git</h2><p>说明：安装好git后，要配置SSH，并且要与git创建联系<br><!-- ```js $ git config --global user.name "git用户名"$ git config --global user.email "邮箱地址"``` --></p><p><span style="font-size:16px"><strong>1、</strong></span> 登录git，创建新项目，如图<br><img src="myFirstPage/PixPin_2024-03-29_16-31-16.png" alt="创建项目"><br>这里一定要<span style="color: #ff0000;font-size:30px">注意</span>创建的项目名字一定要以xxx.github.io这种格式命名，并且xxx要与owner的名字一样，不然最后界面显示不出来，项目名字创建完成后，进入如图页面<br><img src="myFirstPage/PixPin_2024-03-29_16-48-55.png" alt="创建项目">复制git地址，打开项目更目录下的_config.yml文件 滚动到最底下，写入类似这种，如图：<br><img src="myFirstPage/PixPin_2024-03-29_16-54-58.png" alt="创建项目"><br><img src="myFirstPage/PixPin_2024-03-29_16-56-13.png" alt="创建项目"><br><span style="font-size:16px"><strong>2、</strong></span> 打开终端Ctrl+c退出项目运行，输入<code>hexo clean</code>,此命令是清理缓存(删除db.json),然后在输入<code>hexo generate或者hexo g</code>此命令是生成静态文件，最后输入<code>hexo server或者hexo s</code> 启动服务器。</p><p>最后的效果<br><img src="myFirstPage/PixPin_2024-03-29_17-20-04.png" alt="创建项目"></p>]]></content>
<summary type="html"><p>作为一个it打工人，怎么没有一个属于自己的的博客呢，于是我在网上各种搜索，查询各种教程，最后终于创建了一个自己的博客，创建完成之后，就迫不及待地创建了我的第一篇博客文章—-“如何通过HEXO+github 创建属于自己的博客”<br>我用到的依赖包：<br> <fig</summary>
<category term="IT" scheme="https://ityang1.github.io/tags/IT/"/>
</entry>
</feed>