<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <author>
    <name>东子</name>
  </author>
  <generator uri="https://hexo.io/">Hexo</generator>
  <id>https://wudy.top/</id>
  <link href="https://wudy.top/" rel="alternate"/>
  <link href="https://wudy.top/atom.xml" rel="self"/>
  <rights>All rights reserved 2026, 东子</rights>
  <subtitle>关注前端技术,记录日常生活的个人网站</subtitle>
  <title>东子前端博客</title>
  <updated>2026-10-25T06:09:34.390Z</updated>
  <entry>
    <author>
      <name>东子</name>
    </author>
    <content>
      <![CDATA[<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>为啥突然想到给自己站点接入图形验证码了呢，主要还是怕后台被暴力破解。就想着在登录的时候搞个图形验证码，尽量避免机器自动在那破解啥的。虽然是小站点吧，可能也没啥人搭理，但不搞终究内心不安。前些天，刷到一个博主博客评论系统被人恶意注入  额度啥的直接满了。</p><h2 id="正文"><a href="#正文" class="headerlink" title="正文"></a>正文</h2><p>市面上有很多图形验证码形式，自己搭建的话，遭到恶意请求也挺浪费服务器资源。最先看的是腾讯的T-Sec验证码</p><p><img src="https://pub-cdn-2024.sunofbeaches.com/sob-v3/images/2026_10_05/2106973484455473154.png"></p><p>只不过这个，我没免费额度，后付费的话，每次是0.005元。被人刷的话，估计会造成天价账单。免费的话，找到了个<strong>接口盒子</strong>提供的图形验证码。</p><p>这个有每分钟频次限制，我直接拿共享的来用</p><p><img src="https://pub-cdn-2024.sunofbeaches.com/sob-v3/images/2026_10_05/2106974417088327681.png"><br><img src="https://pub-cdn-2024.sunofbeaches.com/sob-v3/images/2026_10_05/2106974575725293570.png"></p><p>这种验证码挺古怪的，有静图也有动图，星星一直在动，让去数白色五角星的数目。机器去识别这种gif验证码应该还是有困难吧</p><h3 id="示例代码"><a href="#示例代码" class="headerlink" title="示例代码"></a>示例代码</h3><p>前端（Vue）：</p><pre><code class="language-html">&lt;div class=&quot;verifyCodeBox&quot;&gt;                    &lt;el-input type=&quot;text&quot; placeholder=&quot;右侧验证码&quot; v-model=&quot;form.verify_code&quot; @keyup.native.enter=&quot;login&quot; /&gt;                    &lt;img :src=&quot;imgUrl&quot; /&gt;                &lt;/div&gt;</code></pre><pre><code class="language-javascript">// 获取验证码图片const imgUrl = ref(&quot;&quot;);const getImg=async()=&gt;{    const res=await hzAxios.get(&quot;/api/xingkong/xk5get.php?id=88888888&amp;key=88888888&quot;);    if(res.data.code==200){        // console.log(res.data);        imgUrl.value = res.data.imgurl;        form.value.image_key = res.data.md5key;    }else{        ElMessage.error(&quot;图形验证码加载失败&quot;);    }}getImg();</code></pre><p>后端（PHP）：</p><pre><code class="language-php">// 比对验证码$request=file_get_contents(&quot;https://cn.apihz.cn/api/xingkong/xk5yz.php?id=88888888&amp;key=88888888&amp;code=&quot;.$verifyCode.&quot;&amp;md5key=&quot;.$imageKey);$verifyRes = json_decode($request)-&gt;code;if($verifyRes!=200){    responseErr(&quot;图形验证码错误&quot;);}</code></pre><p>这样，在一定程度上，应该能避免些机器去暴力破解账号密码，上来得过图形验证码这关，哈哈。</p>]]>
    </content>
    <id>https://wudy.top/20261005/133238.html</id>
    <link href="https://wudy.top/20261005/133238.html"/>
    <link href="https://pub-cdn-2024.sunofbeaches.com/sob-v3/images/2026_10_05/2106974575725293570.png" rel="enclosure"/>
    <published>2026-10-05T05:32:38.000Z</published>
    <summary>为啥突然想到给自己站点接入图形验证码了呢，主要还是怕后台被暴力破解。就想着在登录的时候搞个图形验证码，尽量避免机器自动在那破解啥的。虽然是小站点吧，可能也没啥人搭理，但不搞终究内心不安...</summary>
    <title>记给网站接入图形验证码</title>
    <updated>2026-10-25T06:09:34.390Z</updated>
  </entry>
  <entry>
    <author>
      <name>东子</name>
    </author>
    <category term="实用教程" scheme="https://wudy.top/categories/%E5%AE%9E%E7%94%A8%E6%95%99%E7%A8%8B/"/>
    <content>
      <![CDATA[<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>Github并不陌生，很多源码都在上面。但这玩意平时喜欢抽风，需要使用一些科学手段。那除了科学手段，还有没有其他姿势呢？<br><img src="https://pub-cdn-2024.sunofbeaches.com/sob-v3/images/2026_08_23/2091393100885180418.jpg" alt="Github"></p><h2 id="正文"><a href="#正文" class="headerlink" title="正文"></a>正文</h2><h3 id="工具介绍"><a href="#工具介绍" class="headerlink" title="工具介绍"></a>工具介绍</h3><p>前些天了解到有个软件叫做<strong>Watt ToolKit</strong>，里面可以免费加速Github访问。同时还支持steam、谷歌图形验证码等，如下图：<br><img src="https://pub-cdn-2024.sunofbeaches.com/sob-v3/images/2026_08_23/2091394059271061506.jpg"></p><h3 id="工具下载"><a href="#工具下载" class="headerlink" title="工具下载"></a>工具下载</h3><p>这么好的工具，如何安装呢？我们打开Microsoft store搜索这个软件名下载即可。</p><h3 id="工具使用"><a href="#工具使用" class="headerlink" title="工具使用"></a>工具使用</h3><p>然后点击左侧的<strong>网络加速</strong>，在下面勾选想要加速的，点击一键加速即可。<br><img src="https://pub-cdn-2024.sunofbeaches.com/sob-v3/images/2026_08_23/2091394510506868737.jpg" alt="操作步骤"></p><p>当然，也不是100%可用率，有时候会提示服务不可用。我感觉原理应该和<strong>Fast Github</strong>差不多，就是找一些github解析的一些现在速度比较快的IP来加速访问而已。</p><h2 id="后记"><a href="#后记" class="headerlink" title="后记"></a>后记</h2><p>本文就介绍到这里，欢迎交流、指正。</p>]]>
    </content>
    <id>https://wudy.top/20260823/131111.html</id>
    <link href="https://wudy.top/20260823/131111.html"/>
    <link href="https://pub-cdn-2024.sunofbeaches.com/sob-v3/images/2026_08_23/2091393100885180418.jpg" rel="enclosure"/>
    <published>2026-08-23T05:11:11.000Z</published>
    <summary>Github并不陌生，很多源码都在上面。但这玩意平时喜欢抽风，需要使用一些科学手段。那除了科学手段，还有没有其他姿势呢...</summary>
    <title>访问Github的另一种姿势</title>
    <updated>2026-10-25T06:09:34.390Z</updated>
  </entry>
  <entry>
    <author>
      <name>东子</name>
    </author>
    <category term="人工智能" scheme="https://wudy.top/categories/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/"/>
    <content>
      <![CDATA[<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>之前听许多ai编程软件，如cursor、coplit、claude code、codex等等，但一直没用过，因为考虑到烧token的话挺花钱的。前天还是大前天，在b站上刷到个用Claude code搭配deepseek来写代码的视频，看完后想着试试。</p><h2 id="正文"><a href="#正文" class="headerlink" title="正文"></a>正文</h2><h3 id="安装Node-js"><a href="#安装Node-js" class="headerlink" title="安装Node.js"></a>安装Node.js</h3><p>使用Claude的第一步需要先安装Node.js，这就不介绍了，可去<a href="https://nodejs.org/zh-cn/download">官网</a>下载。<br><img src="https://pub-cdn-2024.sunofbeaches.com/sob-v3/images/2026_08_12/2087412694819213313.png" alt="Node.js下载"></p><h3 id="全局安装Claude"><a href="#全局安装Claude" class="headerlink" title="全局安装Claude"></a>全局安装Claude</h3><p>打开命令行，输入以下命令全局安装Claude：</p><pre><code class="language-bash">npm install -g @anthropic-ai/claude-code</code></pre><h3 id="配置Claude"><a href="#配置Claude" class="headerlink" title="配置Claude"></a>配置Claude</h3><p>安装好之后，下来就是给Claude配置模型了。这里以deepseek为例，打开windows电脑目录<strong>C:\Users\用户名</strong>，在里面新建个名为.claude.json的文件，插入以下内容：</p><pre><code class="language-json">{  &quot;env&quot;: {    &quot;ANTHROPIC_AUTH_TOKEN&quot;: &quot;这里填api Key&quot;,    &quot;ANTHROPIC_BASE_URL&quot;: &quot;https://api.deepseek.com/anthropic&quot;,    &quot;ANTHROPIC_MODEL&quot;: &quot;deepseek-v4-pro[1m]&quot;,    &quot;ANTHROPIC_DEFAULT_OPUS_MODEL&quot;: &quot;deepseek-v4-pro[1m]&quot;,    &quot;ANTHROPIC_DEFAULT_SONNET_MODEL&quot;: &quot;deepseek-v4-pro[1m]&quot;,    &quot;ANTHROPIC_DEFAULT_HAIKU_MODEL&quot;: &quot;deepseek-v4-flash&quot;,    &quot;CLAUDE_CODE_SUBAGENT_MODEL&quot;: &quot;deepseek-v4-flash&quot;,    &quot;CLAUDE_CODE_EFFORT_LEVEL&quot;: &quot;max&quot;,    &quot;CLAUDE_CODE_AUTO_COMPACT_WINDOW&quot;: &quot;786432&quot;,    &quot;API_TIMEOUT_MS&quot;: &quot;3000000&quot;,    &quot;CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC&quot;: 1,  }}</code></pre><h3 id="使用Claude"><a href="#使用Claude" class="headerlink" title="使用Claude"></a>使用Claude</h3><p>我们打开终端，输入<strong>claude</strong>，如果能打开，并且能够成功回复的话，即配置成功，可以使用Claude code了。<br><img src="https://pub-cdn-2024.sunofbeaches.com/sob-v3/images/2026_08_12/2087414810497454081.png" alt="Claude code"></p><h2 id="后记"><a href="#后记" class="headerlink" title="后记"></a>后记</h2><p>这几天用Claude在折腾，产生的费用也不少。但看网上对比起来，deepseek的价格比其他模型来说还是便宜的，但也看最近有公告说<strong>计划近期整体上调 DeepSeek API 服务的定价，预计涨幅较大</strong>。本篇文章就介绍到这，欢迎小伙伴们讨论.</p>]]>
    </content>
    <id>https://wudy.top/20260812/133143.html</id>
    <link href="https://wudy.top/20260812/133143.html"/>
    <link href="https://pub-cdn-2024.sunofbeaches.com/sob-v3/images/2026_08_12/2087414810497454081.png" rel="enclosure"/>
    <published>2026-08-12T05:31:43.000Z</published>
    <summary>之前听许多ai编程软件，如cursor、coplit、claude code、codex等等，但一直没用过，因为考虑到烧token的话挺花钱的。前天还是大前天，在b站上刷到个用Claude code搭配deepseek来写代码的视频，看完后想着试试，使用Claude的第一步需要先安装Node.js，这就不介绍了...</summary>
    <title>记从0使用Claude code写代码</title>
    <updated>2026-10-25T06:09:34.390Z</updated>
  </entry>
  <entry>
    <author>
      <name>东子</name>
    </author>
    <category term="后端语言" scheme="https://wudy.top/categories/%E5%90%8E%E7%AB%AF%E8%AF%AD%E8%A8%80/"/>
    <content>
      <![CDATA[<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>说起对密码加密，常见的莫不有密码加上盐值然后整体使用md5，这样，就算黑客能拿到用户密码存放的那张数据表，但因为盐值不一样，破解起来也是相当耗时耗力。而我自己之前使用的加密方式就更low了，我使用的同一盐值，直到我那天看康师傅有个课程的视频后，才知道有Bcrypt这个专门对密码仅加密的东西。</p><h2 id="正文"><a href="#正文" class="headerlink" title="正文"></a>正文</h2><h3 id="Bcrypt加密是什么？"><a href="#Bcrypt加密是什么？" class="headerlink" title="Bcrypt加密是什么？"></a>Bcrypt加密是什么？</h3><p>下面给到一段AI介绍：<br><img src="https://pub-cdn-2024.sunofbeaches.com/sob-v3/images/2026_08_10/2086647460575776770.png" alt="Bcrypt加密"></p><h3 id="如何在PHP中使用Bcrypt？"><a href="#如何在PHP中使用Bcrypt？" class="headerlink" title="如何在PHP中使用Bcrypt？"></a>如何在PHP中使用Bcrypt？</h3><p>因为我能力有限，平时做一些自己用的项目 开发api的时候，往往使用的php。在这里，主要介绍如何在PHP中使用Bcrypt。其实很简单，加密的时候使用**password_hash()<strong>函数，比对的时候使用</strong>password_verify()**函数。</p><h4 id="password-hash函数"><a href="#password-hash函数" class="headerlink" title="password_hash函数"></a>password_hash函数</h4><p>它有两个参数，第一个是密码明文，即我们想要加密的密码，比如123456、su666.等。在这里给一段示例代码：</p><pre><code class="language-php">&lt;?php $password=&quot;123456&quot;;$encoded_password=password_hash($password,PASSWORD_BCRYPT);echo $encoded_password;?&gt;</code></pre><p>我们打开浏览器，会发现网页中出现一串经过加密的字符串：<br><img src="https://pub-cdn-2024.sunofbeaches.com/sob-v3/images/2026_08_10/2086648585894957057.png" alt="bcrypt加密后结果"></p><p>那能否精确比对上呢？</p><h4 id="password-verify-函数"><a href="#password-verify-函数" class="headerlink" title="password_verify()函数"></a>password_verify()函数</h4><p>这个函数有两个参数，第一个是密码明文，即我们前面所说的123456等，第二个是加密后的字符串。函数会使用特定的逻辑，去比对密码明文经过加密后是不是后面的字符串。下面给段示例代码：</p><pre><code class="language-php">$hash=&#39;$2y$10$Yn5PX34h3Vbg6r.2j77FjOqVe47d.EBMa4GYSJIUAZb1hSyzRT2.S&#39;;echo &quot;比对的结果是：&quot;.password_verify(&quot;123456&quot;,$hash);</code></pre><p>我们打开网页，发现：<br><img src="https://pub-cdn-2024.sunofbeaches.com/sob-v3/images/2026_08_10/2086649972296978434.png" alt="匹配结果"></p><p>即完美匹配上</p><h2 id="后记"><a href="#后记" class="headerlink" title="后记"></a>后记</h2><p>以上就是本文全部内容，欢迎小伙伴们讨论交流。</p>]]>
    </content>
    <id>https://wudy.top/20260810/104830.html</id>
    <link href="https://wudy.top/20260810/104830.html"/>
    <link href="https://pub-cdn-2024.sunofbeaches.com/sob-v3/images/2026_08_10/2086647460575776770.png" rel="enclosure"/>
    <published>2026-08-10T02:48:30.000Z</published>
    <summary>说起对密码加密，常见的莫不有密码加上盐值然后整体使用md5，这样，就算黑客能拿到用户密码存放的那张数据表，但因为盐值不一样，破解起来也是相当耗时耗力。而我自己之前使用的加密方式就更low了，我使用的同一盐值，直到我那天看康师傅有个课程的视频后，才知道有Bcrypt这个专门对密码仅加密的东西...</summary>
    <title>PHP实现密码加密</title>
    <updated>2026-10-25T06:09:34.390Z</updated>
  </entry>
  <entry>
    <author>
      <name>东子</name>
    </author>
    <category term="建站教程" scheme="https://wudy.top/categories/%E5%BB%BA%E7%AB%99%E6%95%99%E7%A8%8B/"/>
    <content>
      <![CDATA[<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>站点地图并不陌生，它里面包含一个网站所有的链接，搜索引擎的爬虫通过扫描这个文件提取链接非常方便。市面上的Hexo主题大多都自带有生成站点地图这个功能，那么如何在一个没有带这个功能的或者是在自己创建的新主题中添加上呢？</p><h2 id="正文"><a href="#正文" class="headerlink" title="正文"></a>正文</h2><p>最后生成的效果呢，可以参考如下图：<br><img src="https://pub-cdn-2024.sunofbeaches.com/sob-v3/images/2026_07_24/2080497047038672897.png" alt="站点地图预览"></p><p>如何操作呢？步骤不难<br>首先，安装生成站点地图的插件，即在hexo项目中输入以下命令：</p><pre><code class="language-bash">npm i hexo-generator-sitemap -S</code></pre><p>安装好插件之后，打开根目录下的_config.yml，在最后面写入配置：</p><pre><code class="language-yml"># 通用站点地图 sitemap.xmlsitemap:  path: sitemap.xml  priority: 0.5          # 页面权重 0.0~1.0  changefreq: daily      # 更新频率：daily每日/weekly每周/monthly每月  lastmod: true          # 显示文章最后修改时间  tags: false             # 包含标签页  categories: false       # 包含分类页</code></pre><p>因为我博客不想搞那么多花里胡哨的，比如说弄个标签页、分类页啥的，所以这两个我填的false，大家可根据自己需求自行修改。</p><p>到这里，基本上就结束了，但市面上还有一个插件好像是专门针对百度搜索引擎，弄的一个百度sitemap生成插件。其实，这两者也没有多大区别，这个插件生成的sitemap预览图如下：<br><img src="https://pub-cdn-2024.sunofbeaches.com/sob-v3/images/2026_07_24/2080498267509833730.png" alt="百度sitemap预览"><br>这里就不专门介绍这个插件了，有需要的可以参考网上教程或直接问AI。</p><h2 id="后记"><a href="#后记" class="headerlink" title="后记"></a>后记</h2><p>本文到这里就结束了，感谢小伙伴们的浏览。</p>]]>
    </content>
    <id>https://wudy.top/20260724/113106.html</id>
    <link href="https://wudy.top/20260724/113106.html"/>
    <link href="https://pub-cdn-2024.sunofbeaches.com/sob-v3/images/2026_07_24/2080498267509833730.png" rel="enclosure"/>
    <published>2026-07-24T03:31:06.000Z</published>
    <summary>站点地图并不陌生，它里面包含一个网站所有的链接，搜索引擎的爬虫通过扫描这个文件提取链接非常方便。市面上的Hexo主题大多都自带有生成站点地图这个功能，那么如何在一个没有带这个功能的或者是在自己创建的新主题中添加上呢...</summary>
    <title>Hexo实现生成站点地图</title>
    <updated>2026-10-25T06:09:34.390Z</updated>
  </entry>
  <entry>
    <author>
      <name>东子</name>
    </author>
    <category term="建站教程" scheme="https://wudy.top/categories/%E5%BB%BA%E7%AB%99%E6%95%99%E7%A8%8B/"/>
    <content>
      <![CDATA[<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>在使用Hexo建站时，如果使用一些没加源码压缩的主题，检查网页源代码时会发现网页结构比较松散，一些css、js文件也没有压缩。就如下图这样，虽然没啥太大影响吧，但我想着如果能把源码压缩下，在访问速度上也会带来一定程度的提升。<br><img src="https://pub-cdn-2024.sunofbeaches.com/sob-v3/images/2026_07_20/2079033285207212034.png" alt="网页源代码"></p><h2 id="正文"><a href="#正文" class="headerlink" title="正文"></a>正文</h2><p>市面上能实现这样功能的hexo插件很多，最开始我尝试的是 <strong>hexo-neat</strong>，但发现对本地js文件压缩不了，可能是因为有ES6语法的缘故。后来转到<strong>hexo-all-minifier</strong>这个插件，可以说是完全满足了需求。</p><h3 id="插件安装"><a href="#插件安装" class="headerlink" title="插件安装"></a>插件安装</h3><p>在命令行输入下面命令，将该插件安装到我们的博客项目中</p><pre><code class="language-bash">npm i hexo-all-minifier -S</code></pre><h3 id="插件配置"><a href="#插件配置" class="headerlink" title="插件配置"></a>插件配置</h3><p>接着，我们打开项目根目录下的**_config.yml**，在最后面插入以下代码：</p><pre><code class="language-yml"># 静态资源压缩html_minifier:  enable: true  exclude:css_minifier:  enable: true  exclude:    - &#39;**/*.min.css&#39; # 已压缩的css跳过js_minifier:  enable: true  mangle: true # 混淆变量名，压缩更强  compress: true  exclude:    - &#39;**/*.min.js&#39; # 跳过已压缩js    - &#39;**/comment*.js&#39; # 评论插件JS报错就加入排除# 图片压缩（可选关闭）image_minifier:  enable: false</code></pre><h3 id="插件效果"><a href="#插件效果" class="headerlink" title="插件效果"></a>插件效果</h3><p>之后，不管我们是<strong>hexo s</strong>来本地预览，还是<strong>hexo g</strong>生成静态页面，都可以发现我们的html、css、js文件都被进行了压缩，效果可以参考下图：<br><img src="https://pub-cdn-2024.sunofbeaches.com/sob-v3/images/2026_07_20/2079035403540447234.png" alt="压缩后的网页源代码图片"></p><h2 id="后记"><a href="#后记" class="headerlink" title="后记"></a>后记</h2><p>那么本篇文章就分享到这，欢迎小伙伴们评论区讨论哦。</p>]]>
    </content>
    <id>https://wudy.top/20260720/103633.html</id>
    <link href="https://wudy.top/20260720/103633.html"/>
    <link href="https://pub-cdn-2024.sunofbeaches.com/sob-v3/images/2026_07_20/2079033285207212034.png" rel="enclosure"/>
    <published>2026-07-20T02:36:33.000Z</published>
    <summary>在使用Hexo建站时，如果使用一些没加源码压缩的主题，检查网页源代码时会发现网页结构比较松散，一些css、js文件也没有压缩。就如下图这样，虽然没啥太大影响吧，但我想着如果能把源码压缩下，在访问速度上也会带来一定程度的提升...</summary>
    <title>Hexo实现代码压缩</title>
    <updated>2026-10-25T06:09:34.390Z</updated>
  </entry>
  <entry>
    <author>
      <name>东子</name>
    </author>
    <content>
      <![CDATA[<h2 id="为什么用Hexo"><a href="#为什么用Hexo" class="headerlink" title="为什么用Hexo"></a>为什么用Hexo</h2><p>它是静态博客框架，我可以托管在Cloudflare、Vercel上，一定程度上来说，省去了一些使用动态博客的成本。</p><h2 id="第一次尝试Hexo主题制作"><a href="#第一次尝试Hexo主题制作" class="headerlink" title="第一次尝试Hexo主题制作"></a>第一次尝试Hexo主题制作</h2><p>之前也试过Hexo这些静态博客框架，但感觉很难找到心仪的主题和满足自己的主题配置，也没再尝试过。今天(2026年7月18日)，我想着看着文档能不能简单搓一个差不多的。我让豆包给我生成了个静态的博客HTML，然后我给它整合到Hexo里，我对ejs、pug模版引擎不熟悉，又问了问豆包基本的用法，整合的过程中也不乏遇到问着豆包但报错仍不停止的情况，这可让我甚是为难。<br><img src="https://pub-cdn-2024.sunofbeaches.com/sob-v3/images/2026_07_18/2078361931810160641.png" alt="报错图片"></p><p>这些基本的弄好后，开始给文章等页面嵌入评论，使用的Twikoo，官方文档介绍的很详细，配置起来也比较简单。</p><p>我也将慢慢不断探索Hexo，力使主题趋于完善、访问体验趋于最佳。</p>]]>
    </content>
    <id>https://wudy.top/20260718/121807.html</id>
    <link href="https://wudy.top/20260718/121807.html"/>
    <link href="https://pub-cdn-2024.sunofbeaches.com/sob-v3/images/2026_07_18/2078361931810160641.png" rel="enclosure"/>
    <published>2026-07-18T04:18:07.000Z</published>
    <summary>它是静态博客框架，我可以托管在Cloudflare、Vercel上，一定程度上来说，省去了一些使用动态博客的成本，之前也试过Hexo这些静态博客框架，但感觉很难找到心仪的主题和满足自己的主题配置...</summary>
    <title>第一篇文章</title>
    <updated>2026-10-25T06:09:34.390Z</updated>
  </entry>
  <entry>
    <author>
      <name>东子</name>
    </author>
    <category term="建站教程" scheme="https://wudy.top/categories/%E5%BB%BA%E7%AB%99%E6%95%99%E7%A8%8B/"/>
    <content>
      <![CDATA[<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>众所周知，市场上许多博客框架，如wordpress、typecho等，自己也想试着开发一下。<br>大概是两年前吧，做了一个简易的个人博客系统，但没有前后端分离，相当于html和php相互嵌套着。<br>这次重新做一个的话，考虑到前后端分离，就需要写后端和前端代码。</p><h2 id="正文"><a href="#正文" class="headerlink" title="正文"></a>正文</h2><p>看网上许多都是用Springboot开发后端api，因为对这方面不熟悉，还是选择使用PHP开发。<br>后台前端当然用Vue.js开发，前台前端本来打算用Nuxt.js开发，因为对SEO友好，不像Vue.js。但是对Nuxt不熟悉，导致部署到服务器上运行不了，最后决定前台前端也是用Vue.js开发。</p><p>当然，以上这些只是基本的思路，更需要一个详细的方案，比如说数据表怎么设计、api请求地址啊请求参数啊都需要考虑，这里，简单放一下，我在开发之前做的有关文档：<br><img src="https://images.sunofbeaches.com//images/2025_08_02/1951516405480423426.png" alt="图片描述"><br><img src="https://images.sunofbeaches.com//images/2025_08_02/1951516549848367106.png" alt="图片描述"><br>然后，给看一下，最后的后台前端开发效果：<br><img src="https://images.sunofbeaches.com//images/2025_08_02/1951516700595847169.png" alt="图片描述"><br><img src="https://images.sunofbeaches.com//images/2025_08_02/1951516835597910018.png" alt="图片描述"><br>在这里，提一下，因为后台这里要发布文章，之前看大锯老师的课程，用过<strong>mavon-editor</strong>这个编辑器，最后选择使用这个Vue编辑器，<br><img src="https://images.sunofbeaches.com//images/2025_08_02/1951517193657253890.png" alt="图片描述"><br>因为没仔细看文档，简略的按照文档上的提示，使用了之后发现显示不出来以及控制台报错，最后看了一下，像使用Vue.js3的话，要安装对应的3.0以上版本，我打开package.json看了一下，是2.多的，我又安装了一遍，最后才显示出来。emmm，这也相当于一次摸索。</p><p>下来，给看一下前台效果：<br><img src="https://images.sunofbeaches.com//images/2025_08_02/1951517334703308801.png" alt="图片描述"><br>文章 &#x2F; 动态 页面：<br><img src="https://images.sunofbeaches.com//images/2025_08_02/1951517414881624065.png" alt="图片描述"><br>友链页面：<br><img src="https://images.sunofbeaches.com//images/2025_08_02/1951517574965624833.png" alt="图片描述"><br>前台这些样式设计参考了网上一些优秀网站，模仿的写了写样式。本来在考虑是否做评论这个模块，后来想了想，还是做吧，开发好对应api之后，在vue中把评论封装为一个组件，大概样式如下：<br><img src="https://images.sunofbeaches.com//images/2025_08_02/1951517704443789314.png" alt="图片描述"><br>因本人能力有限，目前仅支持一级评论。因为不太了解如何用PHP写获取评论列表这个API中，对应的把二级评论给添上去，后续有时间的话，可以再琢磨琢磨。</p><h2 id="后文"><a href="#后文" class="headerlink" title="后文"></a>后文</h2><p>以上，就是对于分享这次开发个人简易博客系统的体会，感谢您的浏览，欢迎在评论区讨论。</p>]]>
    </content>
    <id>https://wudy.top/20250802/134000.html</id>
    <link href="https://wudy.top/20250802/134000.html"/>
    <link href="https://images.sunofbeaches.com//images/2025_08_02/1951516700595847169.png" rel="enclosure"/>
    <published>2025-08-02T05:40:00.000Z</published>
    <summary>众所周知，市场上许多博客框架,如wordpress、typecho等,自己也想试着开发一下。大概是两年前吧，做了一个简易的个人博客系统，但没有前后端分离，相当于html和php相互嵌套着。这次重新做一个的话，考虑到前后端分离，就需要写后端和前端代码...</summary>
    <title>记开发简易个人博客系统</title>
    <updated>2026-10-25T06:09:34.390Z</updated>
  </entry>
</feed>
