ParticleX主页配置随机名言

2025/2/18 Technology Hexo ParticleX UI

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

起因：

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

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

使用API获取名言

quote.js更新

食用方式：

创建js文件，放置在自己喜欢的地方
- 文件名就叫：quote.js
- 我创建了一个文件夹专门用于存放自己自己写的js文件,路径：themes\particlex\source\js\customjs\quote.js

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

~~把下面复制到quote.js里即可~~
该js使用的api已经过时
点击定位到最新的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或者网站上直接获取文件，我就不多介绍了。

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

首先在

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

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

然后在最后插入

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

改完后应该是这样的

<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>

至此代码部分完结。
```
hexo g
```
```
hexo s
```

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

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

quote.js

//quote.js

// 1. 定义 API 池
const apiPool = [
    //uapi
    {
        url: 'https://uapis.cn/api/v1/saying',
        parser: (data) => ({ text: data.text, author: '' })
    }
];

// 2. 定义默认名言池（本地备用）
const defaultQuotes = [
    { text: '人生就像骑自行车。要保持平衡，你必须不断前进。', author: '爱因斯坦' },
    { text: '不要等待机会，而要创造机会。', author: '乔治·伯纳德·肖' },
    { text: '成功的秘诀在于坚持自己的目标。', author: '本杰明·迪斯雷利' },
    { text: '生活中最重要的不是你所处的位置，而是你所朝的方向。', author: '奥利弗·温德尔·霍姆斯' },
    { text: '一瞥便是惊鸿，芳华乱了浮生。', author: '' },
    { text: '慕然回首，那人却在灯火阑珊处。', author: '辛弃疾' },
    { text: '不经一番寒彻骨，怎得梅花扑鼻香。', author: '陆游' },
    { text: '路漫漫其修远兮，吾将上下而求索。', author: '屈原' },
    { text: '海内存知己，天涯若比邻。', author: '王勃' },
    { text: '长风破浪会有时，直挂云帆济沧海。', author: '李白' },
    { text: '千里之行，始于足下。', author: '老子' },
    { text: '学而不思则罔，思而不学则殆。', author: '孔子' },
    { text: '知之者不如好之者，好之者不如乐之者。', author: '孔子' },
];

// 3. 从默认池中随机取一条
function getRandomDefaultQuote() {
    const index = Math.floor(Math.random() * defaultQuotes.length);
    return defaultQuotes[index];
}

// 4. 从 API 池顺序获取名言
async function fetchQuoteFromPool() {
    for (const api of apiPool) {
        try {
            const response = await fetch(api.url);
            if (!response.ok) throw new Error(`HTTP ${response.status}`);
            const data = await response.json();
            const parsed = api.parser(data);
            if (parsed.text && parsed.text.length > 0) {
                return parsed; // 成功获取
            }
        } catch (error) {
            console.warn(`API ${api.url} 失败:`, error);
            // 继续尝试下一个
        }
    }
    // 所有 API 均失败 → 返回随机默认名言
    return getRandomDefaultQuote();
}

// 5. 更新页面
function displayQuote({ text, author }) {
    const container = document.getElementById('quote-container');
    container.innerHTML = `
        <h4>${text || 'Unknown'}</h4>
        <footer> ${author || ''}</footer>
    `;
}

// 6. 主流程
async function fetchQuote() {
    const quote = await fetchQuoteFromPool();
    displayQuote(quote);
}

// 7. 页面加载后执行
document.addEventListener('DOMContentLoaded', fetchQuote);

LOADING

ParticleX主页配置随机名言

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