ParticleX主页配置随机名言

把ParticleX的开始界面小圆球里的个人介绍改成随机名言

• 起因：

  我不知道在小圆球里说啥好，所以干脆换成名言去了（

• 效果：

  在刷新页面时会同时刷新主页面圆球里的名言。经测试：如果获取名言的API出错获取不到会重新使用config里的数据。

• 注意：

  使用API获取名言

  还有想不到暂时（

• 食用方式：

  1. 创建js文件，放置在自己喜欢的地方

     • 文件名就叫：quote.js

     • 我创建了一个文件夹专门用于存放自己自己写的js文件,路径：themes\particlex\source\js\customjs\quote.js

  2. 编写js，我让ai写的。不得不说ai真好用啊。

     把下面复制到quote.js里即可

      // 定义回调函数
      function handleQuoteResponse(data) {
          const quoteText = data.quoteText || "No quote available";
          const quoteAuthor = data.quoteAuthor || "Unknown";
     
          // 将名言插入到页面中
          const quoteContainer = document.getElementById("quote-container");
          quoteContainer.innerHTML = `
                  <h4>${quoteText}</h4>
                  <footer>— ${quoteAuthor}</footer>
          `;
      }
     
      // 动态创建 script 标签来发起 JSONP 请求
      function fetchQuote() {
          const script = document.createElement("script");
          script.src = "https://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=handleQuoteResponse";
          document.head.appendChild(script);
      }
     
      // 在页面加载时调用 fetchQuote 函数
      document.addEventListener("DOMContentLoaded", fetchQuote);
     

     当然你也可以直接从我的github或者网站上直接获取文件，我就不多介绍了。

  3. 之后修改themes\particlex\layout\index.ejs文件。

     1. 首先在

         <div class="wrap">
             <h1><%= config.title %></h1>
             <h3><%= config.subtitle %></h3>
             <h5><%= config.description %></h5>
         </div>
        

        的class="wrap" 后加上id="quote-container"

     2. 然后在最后插入

         <script src="<%- url_for('/js/customjs/quote.js')%>"></script>
        

     3. 改完后应该是这样的

         <div id="home-head">
             <div
                 id="home-background"
                 ref="homeBackground"
                 data-images="<%- theme.background.map(url_for) %>"
             ></div>
             <div id="home-info" @click="homeClick">
                 <span class="loop"></span>
                 <span class="loop"></span>
                 <span class="loop"></span>
                 <span class="loop"></span>
                 <span class="info">
                     <div class="wrap" id="quote-container">
                         <h1><%= config.title %></h1>
                         <h3><%= config.subtitle %></h3>
                         <h5><%= config.description %></h5>
                     </div>
                 </span>
             </div>
         </div>
         <div
             id="home-posts-wrap"
             ref="homePostsWrap"
             <%- theme.card.enable || 'class="home-posts-wrap-no-card"' %>
         >
             <div id="home-posts">
                 <%- partial("posts") %>
                 <%- partial("current") %>
             </div>
             <% if (theme.card.enable) { %>
             <div id="home-card">
                 <%- partial("card") %>
             </div>
             <% } %>
         </div>
        
         <!-- quote加载 -->
         <script src="<%- url_for('/js/customjs/quote.js')%>"></script>
        

  4. 至此代码部分完结。

      hexo g
     

     ---

      hexo s
     

现在应该可以看到和我一样随机名言小球啦~

• 欸嘿，这次没有具体参考链接喵~