-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathatom.xml
176 lines (85 loc) · 55.2 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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>Hexo</title>
<link href="https://tridiamond.tech/atom.xml" rel="self"/>
<link href="https://tridiamond.tech/"/>
<updated>2024-03-23T08:27:00.398Z</updated>
<id>https://tridiamond.tech/</id>
<author>
<name>John Doe</name>
</author>
<generator uri="https://hexo.io/">Hexo</generator>
<entry>
<title>hexo部署到服务器的踩坑</title>
<link href="https://tridiamond.tech/post/hexo%E9%83%A8%E7%BD%B2%E5%88%B0%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%9A%84%E8%B8%A9%E5%9D%91.html"/>
<id>https://tridiamond.tech/post/hexo%E9%83%A8%E7%BD%B2%E5%88%B0%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%9A%84%E8%B8%A9%E5%9D%91.html</id>
<published>2024-03-23T07:49:09.000Z</published>
<updated>2024-03-23T08:27:00.398Z</updated>
<content type="html"><![CDATA[<h3 id="因为是第一次使用hexo部署服务器所以遇到了许多坑-，记下来以供参考"><a href="#因为是第一次使用hexo部署服务器所以遇到了许多坑-，记下来以供参考" class="headerlink" title="因为是第一次使用hexo部署服务器所以遇到了许多坑 ，记下来以供参考"></a>因为是第一次使用hexo部署服务器所以遇到了许多坑 ，记下来以供参考</h3><p>配置:centos7 2核2G<br>需要安装的东西:nginx，git和xshell</p><h3 id="连接云服务器"><a href="#连接云服务器" class="headerlink" title="连接云服务器"></a>连接云服务器</h3><p>较为简单，不必多说自行百度</p><h3 id="安装nginx"><a href="#安装nginx" class="headerlink" title="安装nginx"></a>安装nginx</h3><p>nginx的安装较为简单，首先检查安装nginx所需要的环境</p><div class="language-txt"><button title="Copy code" class="copy"></button><span class="lang">txt</span><pre class="shiki material-theme-palenight" style="background-color: #1a1a1a" tabindex="0"><code><span class="line"><span style="color: #babed8">#查看 C++ 环境是否安装</span></span><span class="line"><span style="color: #babed8">gcc -v</span></span><span class="line"><span style="color: #babed8">#查看 zlib 是否安装</span></span><span class="line"><span style="color: #babed8">cat /usr/lib64/pkgconfig/zlib.pc</span></span><span class="line"><span style="color: #babed8">#查看 pcre 是否安装</span></span><span class="line"><span style="color: #babed8">pcre-config --version</span></span></code></pre></div><p>配置nginx安装时所需要的运行环境</p><div class="language-txt"><button title="Copy code" class="copy"></button><span class="lang">txt</span><pre class="shiki material-theme-palenight" style="background-color: #1a1a1a" tabindex="0"><code><span class="line"><span style="color: #babed8">#一次安装4个插件</span></span><span class="line"><span style="color: #babed8">yum -y install gcc pcre pcre-devel zlib zlib-devel openssl openssl-devel</span></span><span class="line"><span style="color: #babed8"></span></span><span class="line"><span style="color: #babed8">#如果上面的安装错误可以试一下分开安装（注:上面安装成功了的话下面的直接跳过）</span></span><span class="line"><span style="color: #babed8">======================================================================</span></span><span class="line"><span style="color: #babed8"> #安装 nginx 需要先将官网下载的源码进行编译，编译依赖 gcc 环境</span></span><span class="line"><span style="color: #babed8">yum install gcc-c++</span></span><span class="line"><span style="color: #babed8"> #pcre是一个perl库，包括perl兼容的正则表达式库，nginx的http模块使用pcre来解析正则表达式，所以需要安装pcre库</span></span><span class="line"><span style="color: #babed8">yum install -y pcre pcre-devel</span></span><span class="line"><span style="color: #babed8"> #zlib库提供了很多种压缩和解压缩方式nginx使用zlib对http包的内容进行gzip，所以需要安装</span></span><span class="line"><span style="color: #babed8">yum install -y zlib zlib-devel</span></span><span class="line"><span style="color: #babed8"> #nginx 不仅支持 http 协议，还支持 https（即在ssl协议上传输http），所以需要在 Centos 安装 OpenSSL 库</span></span><span class="line"><span style="color: #babed8">yum install -y openssl openssl-devel</span></span></code></pre></div><h6 id="安装-nginx注意"><a href="#安装-nginx注意" class="headerlink" title="安装 nginx注意"></a>安装 nginx注意</h6><p>方法一：在官网直接下载.tar.gz安装包，然后通过远程工具拉取到 linux 里面【在 /usr/local 里面创建个nginx文件夹，拉进来。（也可以拉到其他地方）注意：如果没有十足把握还是选择方法二，亲身经历】<br>+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++<br>方法二：使用wget命令下载，确保系统已经安装了wget，如果没有安装，执行 yum install wget 安装。</p><h6 id="使用方法二安装"><a href="#使用方法二安装" class="headerlink" title="使用方法二安装"></a>使用方法二安装</h6><p>cd进入usr/local 里面创建 nginx 文件夹以后方便管理</p><div class="language-txt"><button title="Copy code" class="copy"></button><span class="lang">txt</span><pre class="shiki material-theme-palenight" style="background-color: #1a1a1a" tabindex="0"><code><span class="line"><span style="color: #babed8">#进入usr下的local目录</span></span><span class="line"><span style="color: #babed8">cd usr/local</span></span><span class="line"><span style="color: #babed8">#在local目录下创建 mysql 文件夹</span></span><span class="line"><span style="color: #babed8">mkdir nginx</span></span><span class="line"><span style="color: #babed8">#进入nginx目录</span></span><span class="line"><span style="color: #babed8">cd nginx</span></span></code></pre></div><h6 id="通过wegt下载nginx压缩包"><a href="#通过wegt下载nginx压缩包" class="headerlink" title="通过wegt下载nginx压缩包"></a>通过wegt下载nginx压缩包</h6><div class="language-txt"><button title="Copy code" class="copy"></button><span class="lang">txt</span><pre class="shiki material-theme-palenight" style="background-color: #1a1a1a" tabindex="0"><code><span class="line"><span style="color: #babed8">wget https://nginx.org/download/nginx-1.21.6.tar.gz</span></span></code></pre></div><h6 id="解压下载的nginx安装包并进入解压后的文件夹"><a href="#解压下载的nginx安装包并进入解压后的文件夹" class="headerlink" title="解压下载的nginx安装包并进入解压后的文件夹"></a>解压下载的nginx安装包并进入解压后的文件夹</h6><div class="language-txt"><button title="Copy code" class="copy"></button><span class="lang">txt</span><pre class="shiki material-theme-palenight" style="background-color: #1a1a1a" tabindex="0"><code><span class="line"><span style="color: #babed8">#解压</span></span><span class="line"><span style="color: #babed8">tar xvf nginx-1.21.6.tar.gz</span></span><span class="line"><span style="color: #babed8">#进入解压后的目录</span></span><span class="line"><span style="color: #babed8">cd nginx-1.21.6</span></span></code></pre></div><h6 id="配置nginx（注：需要进入解压之后的nginx文件夹）"><a href="#配置nginx（注：需要进入解压之后的nginx文件夹）" class="headerlink" title="配置nginx（注：需要进入解压之后的nginx文件夹）"></a>配置nginx（注：需要进入解压之后的nginx文件夹）</h6><div class="language-txt"><button title="Copy code" class="copy"></button><span class="lang">txt</span><pre class="shiki material-theme-palenight" style="background-color: #1a1a1a" tabindex="0"><code><span class="line"><span style="color: #babed8">./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module</span></span></code></pre></div><h6 id="编译-安装"><a href="#编译-安装" class="headerlink" title="编译 安装"></a>编译 安装</h6><div class="language-txt"><button title="Copy code" class="copy"></button><span class="lang">txt</span><pre class="shiki material-theme-palenight" style="background-color: #1a1a1a" tabindex="0"><code><span class="line"><span style="color: #babed8">#编译</span></span><span class="line"><span style="color: #babed8">make</span></span><span class="line"><span style="color: #babed8">#安装</span></span><span class="line"><span style="color: #babed8">make install</span></span></code></pre></div><h6 id="启动nginx-关闭nginx"><a href="#启动nginx-关闭nginx" class="headerlink" title="启动nginx 关闭nginx"></a>启动nginx 关闭nginx</h6><div class="language-txt"><button title="Copy code" class="copy"></button><span class="lang">txt</span><pre class="shiki material-theme-palenight" style="background-color: #1a1a1a" tabindex="0"><code><span class="line"><span style="color: #babed8">###启动nginx</span></span><span class="line"><span style="color: #babed8">cd /usr/local/nginx/sbin</span></span><span class="line"><span style="color: #babed8">#启动nginx</span></span><span class="line"><span style="color: #babed8">./nginx</span></span><span class="line"><span style="color: #babed8"></span></span><span class="line"><span style="color: #babed8">#关闭nginx</span></span><span class="line"><span style="color: #babed8">./nginx -s stop</span></span></code></pre></div><p>出现下图代表安装成功可以进行后续操作<img src="/image/nginx%E5%AE%89%E8%A3%85%E6%88%90%E5%8A%9F.png" alt="img"></p><h3 id="安装git"><a href="#安装git" class="headerlink" title="安装git"></a>安装git</h3>]]></content>
<summary type="html"><h3 id="因为是第一次使用hexo部署服务器所以遇到了许多坑-，记下来以供参考"><a href="#因为是第一次使用hexo部署服务器所以遇到了许多坑-，记下来以供参考" class="headerlink" title="因为是第一次使用hexo部署服务器所以遇到了许多</summary>
<category term="运维" scheme="https://tridiamond.tech/tags/%E8%BF%90%E7%BB%B4/"/>
</entry>
<entry>
<title>spring boot的使用</title>
<link href="https://tridiamond.tech/post/spring%20boot%E7%9A%84%E4%BD%BF%E7%94%A8.html"/>
<id>https://tridiamond.tech/post/spring%20boot%E7%9A%84%E4%BD%BF%E7%94%A8.html</id>
<published>2024-03-22T09:00:00.000Z</published>
<updated>2024-03-20T09:14:40.508Z</updated>
<content type="html"><![CDATA[<p>Spring Boot作为一款轻量级的Java开发框架，已经成为了构建现代化、高效的Web应用程序的首选框架之一。</p><h3 id="Spring-Boot简介"><a href="#Spring-Boot简介" class="headerlink" title="Spring Boot简介"></a>Spring Boot简介</h3><p>Spring Boot是一款基于Spring框架的快速开发、约定优于配置的框架，旨在简化Spring应用程序的开发和部署。它通过自动化配置和约定优于配置的原则，极大地简化了Spring应用程序的配置和部署过程，同时提供了丰富的开发工具和插件，使得开发者能够更加高效地构建复杂的Web应用。</p><h3 id="在java项目中使用Spring-Boot"><a href="#在java项目中使用Spring-Boot" class="headerlink" title="在java项目中使用Spring Boot"></a>在java项目中使用Spring Boot</h3><h4 id="步骤一：引入Spring-Boot依赖"><a href="#步骤一：引入Spring-Boot依赖" class="headerlink" title="步骤一：引入Spring Boot依赖"></a>步骤一：引入Spring Boot依赖</h4><p>首先，在java项目中引入Spring Boot依赖，可以通过Maven或Gradle等构建工具来管理项目依赖。</p><div class="language-markdown"><button title="Copy code" class="copy"></button><span class="lang">markdown</span><pre class="shiki material-theme-palenight" style="background-color: #1a1a1a" tabindex="0"><code><span class="line"><span style="color: #BABED8"><dependency></span></span><span class="line"><span style="color: #BABED8"> <groupId>org.springframework.boot</groupId></span></span><span class="line"><span style="color: #BABED8"> <artifactId>spring-boot-starter</artifactId></span></span><span class="line"><span style="color: #BABED8"></dependency></span></span></code></pre></div><h4 id="步骤二：创建Spring-Boot应用程序"><a href="#步骤二：创建Spring-Boot应用程序" class="headerlink" title="步骤二：创建Spring Boot应用程序"></a>步骤二：创建Spring Boot应用程序</h4><p>接下来，我们可以创建Spring Boot应用程序，例如创建一个简单的RESTful API服务，用于项目的后端支持。可以使用Spring Boot提供的快速启动器来创建项目骨架，然后根据需求来开发具体功能。</p><div class="language-java"><button title="Copy code" class="copy"></button><span class="lang">java</span><pre class="shiki material-theme-palenight" style="background-color: #1a1a1a" tabindex="0"><code><span class="line"><span style="color: #89DDFF">@</span><span style="color: #C792EA">RestController</span></span><span class="line"><span style="color: #C792EA">public</span><span style="color: #BABED8"> </span><span style="color: #C792EA">class</span><span style="color: #BABED8"> </span><span style="color: #FFCB6B">BlogController</span><span style="color: #BABED8"> </span><span style="color: #89DDFF">{</span></span><span class="line"></span><span class="line"><span style="color: #BABED8"> </span><span style="color: #89DDFF">@</span><span style="color: #C792EA">GetMapping</span><span style="color: #89DDFF">(</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">/hello</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">)</span></span><span class="line"><span style="color: #BABED8"> </span><span style="color: #C792EA">public</span><span style="color: #BABED8"> </span><span style="color: #C792EA">String</span><span style="color: #BABED8"> </span><span style="color: #82AAFF">hello</span><span style="color: #89DDFF">()</span><span style="color: #BABED8"> </span><span style="color: #89DDFF">{</span></span><span class="line"><span style="color: #BABED8"> </span><span style="color: #89DDFF; font-style: italic">return</span><span style="color: #BABED8"> </span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">Hello, Spring Boot!</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">;</span></span><span class="line"><span style="color: #BABED8"> </span><span style="color: #89DDFF">}</span></span><span class="line"><span style="color: #89DDFF">}</span></span></code></pre></div><h4 id="步骤三：部署和集成"><a href="#步骤三：部署和集成" class="headerlink" title="步骤三：部署和集成"></a>步骤三：部署和集成</h4><p>最后，我们需要将Spring Boot应用程序部署到服务器上，并与项目进行集成。可以通过Spring Boot提供的打包工具将应用程序打包成可执行的JAR文件，然后在服务器上运行。同时，可以通过在项目中引用RESTful API来实现前后端的交互。</p><h3 id="见解与经验分享"><a href="#见解与经验分享" class="headerlink" title="见解与经验分享"></a>见解与经验分享</h3><ol><li><strong>轻量级和高效性：</strong> Spring Boot作为一款轻量级的Java框架，能够帮助我们快速构建高效的Web应用程序，同时提供丰富的开发工具和插件，能够大大提升开发效率。</li><li><strong>模块化和扩展性：</strong> Spring Boot采用模块化的设计，能够根据项目需求选择合适的模块进行集成，同时支持自定义模块和插件，具有很高的扩展性。</li><li><strong>生态系统和社区支持：</strong> Spring Boot拥有庞大的生态系统和活跃的社区支持，提供了丰富的文档、示例和教程，能够帮助开发者快速上手并解决实际问题。</li></ol><p>通过合理地应用Spring Boot，我们可以为项目带来更多的可能性，实现更丰富、更灵活的功能。</p>]]></content>
<summary type="html"><p>Spring Boot作为一款轻量级的Java开发框架，已经成为了构建现代化、高效的Web应用程序的首选框架之一。</p>
<h3 id="Spring-Boot简介"><a href="#Spring-Boot简介" class="headerlink" title="S</summary>
<category term="spring boot" scheme="https://tridiamond.tech/tags/spring-boot/"/>
</entry>
<entry>
<title>vue的生命周期</title>
<link href="https://tridiamond.tech/post/vue%E7%9A%84%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F.html"/>
<id>https://tridiamond.tech/post/vue%E7%9A%84%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F.html</id>
<published>2024-03-21T09:00:00.000Z</published>
<updated>2024-03-20T09:08:58.865Z</updated>
<content type="html"><![CDATA[<p>在Hexo博客这样的静态网站生成器中，结合Vue.js能够为博客带来更多的交互性和动态性。Vue.js提供了丰富的生命周期钩子函数，可以帮助我们在不同阶段对组件进行操作，从而实现更加灵活和复杂的功能。</p><h3 id="Vue-js生命周期简介"><a href="#Vue-js生命周期简介" class="headerlink" title="Vue.js生命周期简介"></a>Vue.js生命周期简介</h3><p>Vue.js生命周期钩子函数分为创建阶段、更新阶段和销毁阶段三个阶段，具体包括<code>beforeCreate</code>、<code>created</code>、<code>beforeMount</code>、<code>mounted</code>、<code>beforeUpdate</code>、<code>updated</code>、<code>beforeDestroy</code>和<code>destroyed</code>等钩子函数。这些钩子函数允许我们在组件的不同生命周期阶段执行特定的操作，例如初始化数据、访问DOM元素、发送网络请求、清理定时器等。</p><h3 id="使用Vue-js生命周期"><a href="#使用Vue-js生命周期" class="headerlink" title="使用Vue.js生命周期"></a>使用Vue.js生命周期</h3><h4 id="步骤一：引入Vue-js"><a href="#步骤一：引入Vue-js" class="headerlink" title="步骤一：引入Vue.js"></a>步骤一：引入Vue.js</h4><p>首先，在项目中引入Vue.js，并确保正确配置Vue.js的版本和相关插件。</p><h4 id="步骤二：创建Vue组件"><a href="#步骤二：创建Vue组件" class="headerlink" title="步骤二：创建Vue组件"></a>步骤二：创建Vue组件</h4><p>在项目中使用Vue.js，通常会创建一些Vue组件来实现交互功能。在创建Vue组件时，我们可以利用生命周期钩子函数来执行一些初始化操作，例如在<code>created</code>钩子函数中初始化数据，或者在<code>mounted</code>钩子函数中访问DOM元素。</p><div class="language-markdown"><button title="Copy code" class="copy"></button><span class="lang">markdown</span><pre class="shiki material-theme-palenight" style="background-color: #1a1a1a" tabindex="0"><code><span class="line"><span style="color: #BABED8"><template></span></span><span class="line"><span style="color: #BABED8"> <div></span></span><span class="line"><span style="color: #BABED8"> <h1>{{ message }}</h1></span></span><span class="line"><span style="color: #BABED8"> </div></span></span><span class="line"><span style="color: #BABED8"></template></span></span><span class="line"></span><span class="line"><span style="color: #BABED8"><script></span></span><span class="line"><span style="color: #BABED8">export default {</span></span><span class="line"><span style="color: #BABED8"> data() {</span></span><span class="line"><span style="color: #BABED8"> return {</span></span><span class="line"><span style="color: #BABED8"> message: 'Hello, Vue.js!'</span></span><span class="line"><span style="color: #BABED8"> }</span></span><span class="line"><span style="color: #BABED8"> },</span></span><span class="line"><span style="color: #BABED8"> created() {</span></span><span class="line"><span style="color: #BABED8"> // 在组件创建时执行一些初始化操作</span></span><span class="line"><span style="color: #BABED8"> console.log('Component created');</span></span><span class="line"><span style="color: #BABED8"> },</span></span><span class="line"><span style="color: #BABED8"> mounted() {</span></span><span class="line"><span style="color: #BABED8"> // 在组件挂载到DOM后执行一些DOM操作</span></span><span class="line"><span style="color: #BABED8"> console.log('Component mounted');</span></span><span class="line"><span style="color: #BABED8"> }</span></span><span class="line"><span style="color: #BABED8">}</span></span><span class="line"><span style="color: #BABED8"></script></span></span></code></pre></div><h4 id="步骤三：利用生命周期钩子函数优化交互体验"><a href="#步骤三：利用生命周期钩子函数优化交互体验" class="headerlink" title="步骤三：利用生命周期钩子函数优化交互体验"></a>步骤三：利用生命周期钩子函数优化交互体验</h4><p>通过合理地利用生命周期钩子函数，我们可以优化项目的交互体验。例如，在组件加载时预先加载数据，在组件销毁前清理资源等。</p><h3 id="见解与经验分享"><a href="#见解与经验分享" class="headerlink" title="见解与经验分享"></a>见解与经验分享</h3><ol><li><p><strong>合理利用生命周期钩子函数：</strong> 在项目，我们可以根据需要合理地利用生命周期钩子函数来执行特定的操作，以优化项目的交互体验。但是要注意不要滥用生命周期钩子函数，避免过多的逻辑耦合和复杂度。</p></li><li><p><strong>数据加载和清理：</strong> 在组件的生命周期中，我们可以在<code>created</code>钩子函数中加载数据，在<code>destroyed</code>钩子函数中清理资源，以确保项目的性能和稳定性。</p></li><li><p><strong>调试与优化：</strong> 在开发过程中，我们可以通过在生命周期钩子函数中添加日志输出来调试组件的生命周期，以及通过分析和优化生命周期函数的执行顺序来提升项目的性能。</p></li></ol><p>通过合理地应用Vue.js生命周期钩子函数，我们可以为项目带来更多的可能性，实现更丰富、更灵活的交互体验。</p>]]></content>
<summary type="html"><p>在Hexo博客这样的静态网站生成器中，结合Vue.js能够为博客带来更多的交互性和动态性。Vue.js提供了丰富的生命周期钩子函数，可以帮助我们在不同阶段对组件进行操作，从而实现更加灵活和复杂的功能。</p>
<h3 id="Vue-js生命周期简介"><a href="#</summary>
<category term="vue" scheme="https://tridiamond.tech/tags/vue/"/>
</entry>
<entry>
<title>vue的安装和使用</title>
<link href="https://tridiamond.tech/post/vue%E7%9A%84%E5%AE%89%E8%A3%85%E5%92%8C%E4%BD%BF%E7%94%A8.html"/>
<id>https://tridiamond.tech/post/vue%E7%9A%84%E5%AE%89%E8%A3%85%E5%92%8C%E4%BD%BF%E7%94%A8.html</id>
<published>2024-03-20T09:00:00.000Z</published>
<updated>2024-03-20T09:30:45.921Z</updated>
<content type="html"><![CDATA[<p>随着前端技术的不断演进，Vue.js已经成为了构建现代化、可交互性强的Web应用程序的首选框架之一。在Hexo博客这样的静态网站生成器中，结合Vue.js能够为博客带来更多的交互性和动态性，同时提升用户体验。在本文中，我们将探讨如何在Hexo博客中使用Vue.js，并分享一些见解和经验。</p><h3 id="Vue-js简介"><a href="#Vue-js简介" class="headerlink" title="Vue.js简介"></a>Vue.js简介</h3><p>Vue.js是一款轻量级、高性能的JavaScript框架，专注于构建用户界面。它易于学习、易于集成，并且具有丰富的生态系统，拥有庞大的社区支持。Vue.js采用了MVVM（Model-View-ViewModel）架构模式，通过数据驱动视图，使得开发者能够更加高效地构建复杂的前端应用。</p><h3 id="在Hexo博客中使用Vue-js"><a href="#在Hexo博客中使用Vue-js" class="headerlink" title="在Hexo博客中使用Vue.js"></a>在Hexo博客中使用Vue.js</h3><h4 id="步骤一：安装Vue-js"><a href="#步骤一：安装Vue-js" class="headerlink" title="步骤一：安装Vue.js"></a>步骤一：安装Vue.js</h4><p>首先，我们需要在Hexo博客中安装Vue.js。可以通过npm或者yarn来安装Vue.js，具体命令如下：</p><div class="language-bash"><button title="Copy code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight" style="background-color: #1a1a1a" tabindex="0"><code><span class="line"><span style="color: #FFCB6B">npm</span><span style="color: #BABED8"> </span><span style="color: #C3E88D">install</span><span style="color: #BABED8"> </span><span style="color: #C3E88D">vue</span></span></code></pre></div><p>或者</p><div class="language-bash"><button title="Copy code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight" style="background-color: #1a1a1a" tabindex="0"><code><span class="line"><span style="color: #FFCB6B">yarn</span><span style="color: #BABED8"> </span><span style="color: #C3E88D">add</span><span style="color: #BABED8"> </span><span style="color: #C3E88D">vue</span></span></code></pre></div><p>安装完成后，我们就可以在Hexo项目中使用Vue.js了。</p><h4 id="步骤二：创建Vue组件"><a href="#步骤二：创建Vue组件" class="headerlink" title="步骤二：创建Vue组件"></a>步骤二：创建Vue组件</h4><p>在Hexo博客中使用Vue.js，通常会创建一些Vue组件来实现交互功能。可以在Hexo项目中的特定目录下创建Vue组件文件，然后在博客文章或者页面中引用这些组件。</p><div class="language-html"><button title="Copy code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight" style="background-color: #1a1a1a" tabindex="0"><code><span class="line"><span style="color: #676E95; font-style: italic"><!-- 在Hexo文章或页面中引用Vue组件 --></span></span><span class="line"><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">id</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">app</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span></span><span class="line"><span style="color: #BABED8"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">my-component</span><span style="color: #89DDFF">></</span><span style="color: #F07178">my-component</span><span style="color: #89DDFF">></span></span><span class="line"><span style="color: #89DDFF"></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></span></code></pre></div><h4 id="步骤三：编写Vue组件"><a href="#步骤三：编写Vue组件" class="headerlink" title="步骤三：编写Vue组件"></a>步骤三：编写Vue组件</h4><p>接下来，我们可以编写Vue组件的代码。Vue组件通常由模板、脚本和样式组成，具体内容根据需求而定。</p><div class="language-html"><button title="Copy code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight" style="background-color: #1a1a1a" tabindex="0"><code><span class="line"><span style="color: #676E95; font-style: italic"><!-- Vue组件模板 --></span></span><span class="line"><span style="color: #89DDFF"><</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></span><span class="line"><span style="color: #BABED8"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></span><span class="line"><span style="color: #BABED8"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">h1</span><span style="color: #89DDFF">></span><span style="color: #676E95; font-style: italic">{{ message }}</span><span style="color: #89DDFF"></</span><span style="color: #F07178">h1</span><span style="color: #89DDFF">></span></span><span class="line"><span style="color: #BABED8"> </span><span style="color: #89DDFF"><</span><span style="color: #F07178">button</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">@click</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">changeMessage</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">></span><span style="color: #BABED8">Change Message</span><span style="color: #89DDFF"></</span><span style="color: #F07178">button</span><span style="color: #89DDFF">></span></span><span class="line"><span style="color: #BABED8"> </span><span style="color: #89DDFF"></</span><span style="color: #F07178">div</span><span style="color: #89DDFF">></span></span><span class="line"><span style="color: #89DDFF"></</span><span style="color: #F07178">template</span><span style="color: #89DDFF">></span></span><span class="line"></span><span class="line"><span style="color: #676E95; font-style: italic"><!-- Vue组件脚本 --></span></span><span class="line"><span style="color: #89DDFF"><</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></span><span class="line"><span style="color: #89DDFF; font-style: italic">export</span><span style="color: #BABED8"> </span><span style="color: #89DDFF; font-style: italic">default</span><span style="color: #BABED8"> </span><span style="color: #89DDFF">{</span></span><span class="line"><span style="color: #BABED8"> </span><span style="color: #F07178">data</span><span style="color: #89DDFF">()</span><span style="color: #BABED8"> </span><span style="color: #89DDFF">{</span></span><span class="line"><span style="color: #F07178"> </span><span style="color: #89DDFF; font-style: italic">return</span><span style="color: #F07178"> </span><span style="color: #89DDFF">{</span></span><span class="line"><span style="color: #F07178"> message</span><span style="color: #89DDFF">:</span><span style="color: #F07178"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">Hello, Vue.js!</span><span style="color: #89DDFF">'</span></span><span class="line"><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span></span><span class="line"><span style="color: #F07178"> </span><span style="color: #89DDFF">},</span></span><span class="line"><span style="color: #BABED8"> </span><span style="color: #F07178">methods</span><span style="color: #89DDFF">:</span><span style="color: #BABED8"> </span><span style="color: #89DDFF">{</span></span><span class="line"><span style="color: #BABED8"> </span><span style="color: #F07178">changeMessage</span><span style="color: #89DDFF">()</span><span style="color: #BABED8"> </span><span style="color: #89DDFF">{</span></span><span class="line"><span style="color: #F07178"> </span><span style="color: #89DDFF">this.</span><span style="color: #BABED8">message</span><span style="color: #F07178"> </span><span style="color: #89DDFF">=</span><span style="color: #F07178"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">Vue.js is awesome!</span><span style="color: #89DDFF">'</span></span><span class="line"><span style="color: #F07178"> </span><span style="color: #89DDFF">}</span></span><span class="line"><span style="color: #BABED8"> </span><span style="color: #89DDFF">}</span></span><span class="line"><span style="color: #89DDFF">}</span></span><span class="line"><span style="color: #89DDFF"></</span><span style="color: #F07178">script</span><span style="color: #89DDFF">></span></span><span class="line"></span><span class="line"><span style="color: #676E95; font-style: italic"><!-- Vue组件样式 --></span></span><span class="line"><span style="color: #89DDFF"><</span><span style="color: #F07178">style</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">scoped</span><span style="color: #89DDFF">></span></span><span class="line"><span style="color: #FFCB6B">h1</span><span style="color: #BABED8"> </span><span style="color: #89DDFF">{</span></span><span class="line"><span style="color: #BABED8"> </span><span style="color: #B2CCD6">color</span><span style="color: #89DDFF">:</span><span style="color: #BABED8"> blue</span><span style="color: #89DDFF">;</span></span><span class="line"><span style="color: #89DDFF">}</span></span><span class="line"><span style="color: #89DDFF"></</span><span style="color: #F07178">style</span><span style="color: #89DDFF">></span></span></code></pre></div><h4 id="步骤四：构建和部署"><a href="#步骤四：构建和部署" class="headerlink" title="步骤四：构建和部署"></a>步骤四：构建和部署</h4><p>最后，我们需要将Hexo博客项目构建并部署到服务器上，以便用户能够访问到使用Vue.js编写的交互功能。可以使用Hexo提供的命令来构建和部署博客，具体命令如下：</p><div class="language-bash"><button title="Copy code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight" style="background-color: #1a1a1a" tabindex="0"><code><span class="line"><span style="color: #FFCB6B">hexo</span><span style="color: #BABED8"> </span><span style="color: #C3E88D">generate</span></span><span class="line"><span style="color: #FFCB6B">hexo</span><span style="color: #BABED8"> </span><span style="color: #C3E88D">deploy</span></span></code></pre></div><h3 id="见解与经验分享"><a href="#见解与经验分享" class="headerlink" title="见解与经验分享"></a>见解与经验分享</h3><p>在Hexo博客中使用Vue.js，能够为博客带来更多的交互性和动态性。通过Vue.js，我们可以实现一些高级的前端功能，如数据绑定、事件处理、组件化等，从而提升用户体验。但是，在使用Vue.js时，我们也需要注意以下几点：</p><ol><li><p><strong>性能考虑：</strong> 尽管Vue.js是一款高性能的前端框架，但在Hexo博客这样的静态网站中，要考虑到前端性能的优化问题，避免过多的组件渲染和复杂的交互逻辑，以提升页面加载速度和用户体验。</p></li><li><p><strong>组件复用：</strong> 在编写Vue组件时，要尽量设计成可复用的组件，以便在不同的页面或文章中重复利用，提高代码的可维护性和可扩展性。</p></li><li><p><strong>兼容性：</strong> 考虑到不同浏览器的兼容性，要确保使用的Vue.js版本和相关插件能够在目标浏览器中正常运行，并进行必要的兼容性测试。</p></li><li><p><strong>学习曲线：</strong> 对于初学者来说，Vue.js可能有一定的学习曲线，需要花一些时间去学习其核心概念和使用方法。建议可以通过阅读官方文档、参与社区讨论等方式来加速学习进程。</p></li></ol>]]></content>
<summary type="html"><p>随着前端技术的不断演进，Vue.js已经成为了构建现代化、可交互性强的Web应用程序的首选框架之一。在Hexo博客这样的静态网站生成器中，结合Vue.js能够为博客带来更多的交互性和动态性，同时提升用户体验。在本文中，我们将探讨如何在Hexo博客中使用Vue.js，并分享一</summary>
<category term="vue" scheme="https://tridiamond.tech/tags/vue/"/>
</entry>
<entry>
<title>nginx的使用</title>
<link href="https://tridiamond.tech/post/nginx.html"/>
<id>https://tridiamond.tech/post/nginx.html</id>
<published>2024-03-20T07:00:00.000Z</published>
<updated>2024-03-20T09:28:18.608Z</updated>
<content type="html"><![CDATA[<hr><h1 id="深入理解Nginx：使用和见解"><a href="#深入理解Nginx：使用和见解" class="headerlink" title="深入理解Nginx：使用和见解"></a>深入理解Nginx：使用和见解</h1><p>Nginx（发音为”engine x”）是一个高性能的HTTP和反向代理服务器，也是一个通用的TCP/UDP代理服务器。它以其卓越的性能、高可靠性和低资源消耗而闻名。本文将深入探讨Nginx的使用方法和我们对其的见解。</p><h2 id="Nginx的功能和特性"><a href="#Nginx的功能和特性" class="headerlink" title="Nginx的功能和特性"></a>Nginx的功能和特性</h2><p>Nginx作为一款轻量级的服务器软件，具有以下主要功能和特性：</p><ul><li><strong>高性能</strong>：Nginx采用异步非阻塞的事件驱动模型，能够处理大量并发连接和请求。</li><li><strong>反向代理</strong>：作为反向代理服务器，Nginx可以接收客户端请求，并将请求转发到后端服务器。</li><li><strong>负载均衡</strong>：Nginx支持多种负载均衡策略，可以将请求分发到多个后端服务器上，提高系统的稳定性和性能。</li><li><strong>静态文件服务</strong>：Nginx可以直接提供静态文件服务，加速文件的传输速度。</li><li><strong>动态内容缓存</strong>：Nginx可以缓存动态生成的内容，减轻后端服务器的压力，提高网站的性能。</li><li><strong>SSL/TLS支持</strong>：Nginx支持SSL/TLS协议，可以对传输的数据进行加密，保障数据的安全性。</li><li><strong>可扩展性</strong>：Nginx支持模块化设计，可以通过加载不同的模块来扩展其功能。</li></ul><h2 id="如何使用Nginx？"><a href="#如何使用Nginx？" class="headerlink" title="如何使用Nginx？"></a>如何使用Nginx？</h2><h3 id="1-安装Nginx"><a href="#1-安装Nginx" class="headerlink" title="1. 安装Nginx"></a>1. 安装Nginx</h3><p>在大多数Linux发行版中，可以通过包管理器直接安装Nginx。例如，在Ubuntu上可以使用以下命令安装：</p><div class="language-bash"><button title="Copy code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight" style="background-color: #1a1a1a" tabindex="0"><code><span class="line"><span style="color: #FFCB6B">sudo</span><span style="color: #BABED8"> </span><span style="color: #C3E88D">apt</span><span style="color: #BABED8"> </span><span style="color: #C3E88D">update</span></span><span class="line"><span style="color: #FFCB6B">sudo</span><span style="color: #BABED8"> </span><span style="color: #C3E88D">apt</span><span style="color: #BABED8"> </span><span style="color: #C3E88D">install</span><span style="color: #BABED8"> </span><span style="color: #C3E88D">nginx</span></span></code></pre></div><h3 id="2-配置Nginx"><a href="#2-配置Nginx" class="headerlink" title="2. 配置Nginx"></a>2. 配置Nginx</h3><p>Nginx的主要配置文件位于 <code>/etc/nginx/nginx.conf</code>。你可以通过编辑该文件来配置Nginx的各种功能和行为。另外，Nginx还支持在配置文件中引入其他配置文件，以实现更好的组织和管理。</p><h3 id="3-启动Nginx"><a href="#3-启动Nginx" class="headerlink" title="3. 启动Nginx"></a>3. 启动Nginx</h3><p>安装完成后，可以使用以下命令启动Nginx服务：</p><div class="language-bash"><button title="Copy code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight" style="background-color: #1a1a1a" tabindex="0"><code><span class="line"><span style="color: #FFCB6B">sudo</span><span style="color: #BABED8"> </span><span style="color: #C3E88D">systemctl</span><span style="color: #BABED8"> </span><span style="color: #C3E88D">start</span><span style="color: #BABED8"> </span><span style="color: #C3E88D">nginx</span></span></code></pre></div><h3 id="4-监控Nginx"><a href="#4-监控Nginx" class="headerlink" title="4. 监控Nginx"></a>4. 监控Nginx</h3><p>可以使用<code>nginx -t</code>命令检查Nginx配置文件的语法是否正确，以及使用<code>systemctl status nginx</code>命令查看Nginx服务的运行状态。</p><h3 id="5-常用命令"><a href="#5-常用命令" class="headerlink" title="5. 常用命令"></a>5. 常用命令</h3><p>除了启动和检查Nginx服务外，还有一些常用的命令：</p><ul><li><code>sudo systemctl stop nginx</code>：停止Nginx服务。</li><li><code>sudo systemctl restart nginx</code>：重新启动Nginx服务。</li><li><code>sudo systemctl reload nginx</code>：重新加载Nginx配置文件，不中断已有的连接。</li><li><code>sudo nginx -s reload</code>：另一种重新加载配置的方式。</li></ul><h2 id="我们对Nginx的见解"><a href="#我们对Nginx的见解" class="headerlink" title="我们对Nginx的见解"></a>我们对Nginx的见解</h2><p>Nginx作为一款高性能的服务器软件，为我们的项目提供了稳定和可靠的基础。通过Nginx的负载均衡功能，我们可以将请求分发到多个后端服务器上，实现了高可用性和可扩展性。另外，Nginx的静态文件服务和动态内容缓存功能，有效地提高了我们网站的访问速度和用户体验。</p><p>总的来说，Nginx是我们不可或缺的一部分，我们相信它将继续为我们的项目带来更好的性能和可靠性。</p>]]></content>
<summary type="html"><hr>
<h1 id="深入理解Nginx：使用和见解"><a href="#深入理解Nginx：使用和见解" class="headerlink" title="深入理解Nginx：使用和见解"></a>深入理解Nginx：使用和见解</h1><p>Nginx（发音为”eng</summary>
<category term="nginx" scheme="https://tridiamond.tech/tags/nginx/"/>
</entry>
<entry>
<title>vue面试题</title>
<link href="https://tridiamond.tech/post/vue%E7%9A%84%E5%9F%BA%E6%9C%AC%E9%9D%A2%E8%AF%95%E9%A2%98.html"/>
<id>https://tridiamond.tech/post/vue%E7%9A%84%E5%9F%BA%E6%9C%AC%E9%9D%A2%E8%AF%95%E9%A2%98.html</id>
<published>2024-03-20T04:00:00.000Z</published>
<updated>2024-03-20T09:24:04.218Z</updated>
<content type="html"><![CDATA[<h2 id="Vue-js：常见面试题解析"><a href="#Vue-js：常见面试题解析" class="headerlink" title="Vue.js：常见面试题解析"></a>Vue.js：常见面试题解析</h2><p>Vue.js作为一款流行的前端框架，已经成为了前端开发中的热门话题之一。在面试过程中，对Vue.js的掌握程度往往是面试官们关注的焦点之一。</p><h2 id="1-Vue-js的特点有哪些？"><a href="#1-Vue-js的特点有哪些？" class="headerlink" title="1. Vue.js的特点有哪些？"></a>1. Vue.js的特点有哪些？</h2><p>Vue.js具有以下特点：</p><ul><li><strong>响应式数据绑定</strong>：通过数据驱动视图，实现了快速的视图更新。</li><li><strong>组件化开发</strong>：将界面拆分成独立可复用的组件，使得代码更易于维护和扩展。</li><li><strong>轻量级</strong>：体积小巧，加载速度快。</li><li><strong>简洁易学</strong>：API简单明了，上手容易。</li><li><strong>活跃的社区支持</strong>：拥有庞大的社区支持和丰富的第三方插件。</li></ul><h2 id="2-Vue中的双向数据绑定是如何实现的？"><a href="#2-Vue中的双向数据绑定是如何实现的？" class="headerlink" title="2. Vue中的双向数据绑定是如何实现的？"></a>2. Vue中的双向数据绑定是如何实现的？</h2><p>Vue中的双向数据绑定是通过<code>v-model</code>指令实现的。这个指令可以在表单元素和组件中创建双向数据绑定。当数据发生变化时，视图会自动更新；同时，当用户在输入框等表单元素中输入内容时，绑定的数据也会随之更新。</p><h2 id="3-如何创建一个Vue实例？"><a href="#3-如何创建一个Vue实例？" class="headerlink" title="3. 如何创建一个Vue实例？"></a>3. 如何创建一个Vue实例？</h2><p>在Vue中，通过<code>new Vue()</code>构造函数可以创建一个Vue实例。在构造函数中，需要传入一个选项对象，该对象包含了Vue实例的配置信息，比如<code>el</code>、<code>data</code>等。</p><h2 id="4-Vue中常用的指令有哪些？"><a href="#4-Vue中常用的指令有哪些？" class="headerlink" title="4. Vue中常用的指令有哪些？"></a>4. Vue中常用的指令有哪些？</h2><p>Vue中常用的指令有：</p><ul><li><code>v-if</code>：根据表达式的值条件性地渲染元素。</li><li><code>v-for</code>：基于数据源循环渲染元素。</li><li><code>v-bind</code>：绑定元素属性。</li><li><code>v-on</code>：绑定事件监听器。</li><li><code>v-model</code>：实现表单元素与数据的双向绑定。</li></ul><h2 id="5-Vue中的计算属性和侦听器有什么区别？"><a href="#5-Vue中的计算属性和侦听器有什么区别？" class="headerlink" title="5. Vue中的计算属性和侦听器有什么区别？"></a>5. Vue中的计算属性和侦听器有什么区别？</h2><p>在Vue中，计算属性和侦听器是用于处理数据变化的两种方式。计算属性是基于响应式依赖进行缓存的，只有相关响应式依赖发生改变时才会重新求值；而侦听器则是当数据变化时执行异步或开销较大的操作。</p><h2 id="6-Vue组件是什么？如何定义一个Vue组件？"><a href="#6-Vue组件是什么？如何定义一个Vue组件？" class="headerlink" title="6. Vue组件是什么？如何定义一个Vue组件？"></a>6. Vue组件是什么？如何定义一个Vue组件？</h2><p>Vue组件是Vue应用中的独立单元，可以将界面拆分成可复用的组件。定义一个Vue组件可以使用<code>Vue.component()</code>方法或者单文件组件<code>.vue</code>文件。单文件组件通常包含模板、脚本和样式。</p><h2 id="7-Vue中的父子组件通信有哪些方式？"><a href="#7-Vue中的父子组件通信有哪些方式？" class="headerlink" title="7. Vue中的父子组件通信有哪些方式？"></a>7. Vue中的父子组件通信有哪些方式？</h2><p>在Vue中，父子组件通信可以通过<code>props</code>、<code>$emit</code>事件和<code>$refs</code>等方式实现。<code>props</code>用于父组件向子组件传递数据，<code>$emit</code>用于子组件向父组件传递事件，而<code>$refs</code>则可以用于在父组件中访问子组件的实例。</p><h2 id="8-Vue中的生命周期钩子函数有哪些？"><a href="#8-Vue中的生命周期钩子函数有哪些？" class="headerlink" title="8. Vue中的生命周期钩子函数有哪些？"></a>8. Vue中的生命周期钩子函数有哪些？</h2><p>Vue实例在不同阶段有不同的生命周期钩子函数，包括 <code>beforeCreate</code>、<code>created</code>、<code>beforeMount</code>、<code>mounted</code>、<code>beforeUpdate</code>、<code>updated</code>、<code>beforeDestroy</code>、<code>destroyed</code>等。这些钩子函数允许我们在Vue实例的不同生命周期阶段执行自定义逻辑。</p><h2 id="9-Vue中的路由是什么？如何使用Vue-Router实现路由？"><a href="#9-Vue中的路由是什么？如何使用Vue-Router实现路由？" class="headerlink" title="9. Vue中的路由是什么？如何使用Vue Router实现路由？"></a>9. Vue中的路由是什么？如何使用Vue Router实现路由？</h2><p>路由用于在单页应用中管理不同页面之间的切换。Vue Router是Vue.js的官方路由器，可以通过安装并在Vue应用中配置路由表来实现路由功能。</p><h2 id="10-Vuex是什么？它的作用是什么？"><a href="#10-Vuex是什么？它的作用是什么？" class="headerlink" title="10. Vuex是什么？它的作用是什么？"></a>10. Vuex是什么？它的作用是什么？</h2><p>Vuex是一个专为Vue.js应用程序开发的状态管理模式。它集中管理应用的所有组件的状态，并以相应的规则保证状态的变化可追踪。Vuex的主要作用是解决多个组件共享状态时的复杂性问题。</p>]]></content>
<summary type="html"><h2 id="Vue-js：常见面试题解析"><a href="#Vue-js：常见面试题解析" class="headerlink" title="Vue.js：常见面试题解析"></a>Vue.js：常见面试题解析</h2><p>Vue.js作为一款流行的前端框架，已经成为</summary>
<category term="vue" scheme="https://tridiamond.tech/tags/vue/"/>
</entry>
<entry>
<title>hexo的创建</title>
<link href="https://tridiamond.tech/post/hexo%E7%9A%84%E5%88%9B%E5%BB%BA%E5%92%8C%E4%BD%BF%E7%94%A8%E4%BB%A5%E5%8F%8Aaurora%E4%B8%BB%E9%A2%98%E7%9A%84%E5%AE%89%E8%A3%85.html"/>
<id>https://tridiamond.tech/post/hexo%E7%9A%84%E5%88%9B%E5%BB%BA%E5%92%8C%E4%BD%BF%E7%94%A8%E4%BB%A5%E5%8F%8Aaurora%E4%B8%BB%E9%A2%98%E7%9A%84%E5%AE%89%E8%A3%85.html</id>
<published>2024-03-17T06:29:00.000Z</published>
<updated>2024-03-20T03:57:26.277Z</updated>
<content type="html"><![CDATA[<h3 id="安装-Hexo-相当简单，只需要先安装下列应用程序即可"><a href="#安装-Hexo-相当简单，只需要先安装下列应用程序即可" class="headerlink" title="安装 Hexo 相当简单，只需要先安装下列应用程序即可"></a>安装 Hexo 相当简单，只需要先安装下列应用程序即可</h3><p> Node.js (Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)<br> Git安装最新版就可以</p><h3 id="git安装"><a href="#git安装" class="headerlink" title="git安装"></a>git安装</h3><p>下载并安装 git <a href="https://git-scm.com/download/win">https://git-scm.com/download/win</a></p><h3 id="node-js安装"><a href="#node-js安装" class="headerlink" title="node js安装"></a>node js安装</h3><p>官方推荐<a href="https://nodejs.org/en/download">https://nodejs.org/en/download</a><br>淘宝镜像<a href="https://registry.npmmirror.com/binary.html?path=node/">https://registry.npmmirror.com/binary.html?path=node/</a></p><h3 id="检查git和node-js是否安装成功"><a href="#检查git和node-js是否安装成功" class="headerlink" title="检查git和node js是否安装成功"></a>检查git和node js是否安装成功</h3><p>win+r打开的窗口中输入cmd进入命令提示符，或者win+s搜索命令提示符<br>进入命令提示符窗口之后输入node -v出现版本号即为安装成功<br>同理命令提示符输入git -v出现版本号也为安装成功<br><img src="/image/git%E5%AE%89%E8%A3%85%E6%88%90%E5%8A%9F.png" alt="img"><br>一般来说git和node js除了安装位置需要自己更改一下剩下的只需要默认安装就可以完成</p><h3 id="设置npm淘宝镜像站"><a href="#设置npm淘宝镜像站" class="headerlink" title="设置npm淘宝镜像站"></a>设置npm淘宝镜像站</h3><p>npm默认的源的下载速度可能很慢，建议使用淘宝镜像替换。</p><div class="language-txt"><button title="Copy code" class="copy"></button><span class="lang">txt</span><pre class="shiki material-theme-palenight" style="background-color: #1a1a1a" tabindex="0"><code><span class="line"><span style="color: #babed8">npm config set registry "https://registry.npm.taobao.org"</span></span></code></pre></div><h3 id="安装hexo"><a href="#安装hexo" class="headerlink" title="安装hexo"></a>安装hexo</h3><p>所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。</p><div class="language-txt"><button title="Copy code" class="copy"></button><span class="lang">txt</span><pre class="shiki material-theme-palenight" style="background-color: #1a1a1a" tabindex="0"><code><span class="line"><span style="color: #babed8"># 安装hexo</span></span><span class="line"><span style="color: #babed8">npm install hexo-cli g</span></span><span class="line"><span style="color: #babed8"># 创建博客本体文件夹</span></span><span class="line"><span style="color: #babed8">hexo init blog</span></span><span class="line"><span style="color: #babed8"># 切换到博客文件夹</span></span><span class="line"><span style="color: #babed8">cd blog</span></span><span class="line"><span style="color: #babed8"># 安装hexo依赖</span></span><span class="line"><span style="color: #babed8">npm install</span></span><span class="line"><span style="color: #babed8"># 安装后台管理员插件</span></span><span class="line"><span style="color: #babed8">npm install hexo-admin --save</span></span></code></pre></div><h3 id="启动hexo"><a href="#启动hexo" class="headerlink" title="启动hexo"></a>启动hexo</h3><p>生成静态页面</p><div class="language-txt"><button title="Copy code" class="copy"></button><span class="lang">txt</span><pre class="shiki material-theme-palenight" style="background-color: #1a1a1a" tabindex="0"><code><span class="line"><span style="color: #babed8">hexo generate</span></span></code></pre></div><p>开启服务器</p><div class="language-txt"><button title="Copy code" class="copy"></button><span class="lang">txt</span><pre class="shiki material-theme-palenight" style="background-color: #1a1a1a" tabindex="0"><code><span class="line"><span style="color: #babed8">hexo s</span></span></code></pre></div><p>打开浏览器输入”localhost:4000”一般来说就能看见hexo博客的基本页面了</p><h3 id="可能出现的错误"><a href="#可能出现的错误" class="headerlink" title="可能出现的错误"></a>可能出现的错误</h3><h6 id="hexo进不去浏览器一直转圈圈"><a href="#hexo进不去浏览器一直转圈圈" class="headerlink" title="hexo进不去浏览器一直转圈圈"></a>hexo进不去浏览器一直转圈圈</h6><p>端口被占用，执行命令</p><div class="language-txt"><button title="Copy code" class="copy"></button><span class="lang">txt</span><pre class="shiki material-theme-palenight" style="background-color: #1a1a1a" tabindex="0"><code><span class="line"><span style="color: #babed8">hexo s -p 5000</span></span></code></pre></div><p>然后浏览器地址输入</p><div class="language-txt"><button title="Copy code" class="copy"></button><span class="lang">txt</span><pre class="shiki material-theme-palenight" style="background-color: #1a1a1a" tabindex="0"><code><span class="line"><span style="color: #babed8">http://localhost:5000</span></span></code></pre></div><h6 id="官方错误文档"><a href="#官方错误文档" class="headerlink" title="官方错误文档"></a>官方错误文档</h6><div class="language-txt"><button title="Copy code" class="copy"></button><span class="lang">txt</span><pre class="shiki material-theme-palenight" style="background-color: #1a1a1a" tabindex="0"><code><span class="line"><span style="color: #babed8">https://hexo.io/zh-cn/docs/troubleshooting.html</span></span></code></pre></div><h3 id="基本上hexo的安装就是这么简单如果有问题可以在下方留言"><a href="#基本上hexo的安装就是这么简单如果有问题可以在下方留言" class="headerlink" title="基本上hexo的安装就是这么简单如果有问题可以在下方留言"></a>基本上hexo的安装就是这么简单如果有问题可以在下方留言</h3>]]></content>
<summary type="html"><h3 id="安装-Hexo-相当简单，只需要先安装下列应用程序即可"><a href="#安装-Hexo-相当简单，只需要先安装下列应用程序即可" class="headerlink" title="安装 Hexo 相当简单，只需要先安装下列应用程序即可"></a>安装 He</summary>
<category term="hexo" scheme="https://tridiamond.tech/tags/hexo/"/>
</entry>
</feed>