大佬们有什么好用的静态导航页源码

14569 · August 25, 2024, 4:29pm

放到 GitHub Pages 里面，用一个 js 文件来储存网站列表的，方便其他人提交 Pull Request，我想收集网站，免费搭建的也收，不要搞得像 HiMCBBS 不接受免费搭建的网站。

Yawaraka · August 25, 2024, 4:40pm

@“14569”#p71934 https://zhblogs.ohyee.cc/

中文博客列表, 本身程序是在GitHub开源的, 可以拿过来直接用

没有服务器的话可以考虑一下 https://github.com/timqian/chinese-independent-blogs
记录在一张表里

14569 · August 25, 2024, 5:13pm

@“知ら無い”#p71940 我要用一个 js 文件来储存网站列表的，方便其他人提交 Pull Request。

Yawaraka · August 25, 2024, 5:24pm

@“14569”#p71951 JS一般不是存代码的吗?

存数据的应该是JSON或者CSV啥的啊?

:baishengnv10:

14569 · August 25, 2024, 5:31pm

@“知ら無い”#p71954 mcbbs.rip 就是用 js 存的，还挺方便，就是我去申请了因免费域名没过，域名还被拉黑了。

Yawaraka · August 25, 2024, 5:35pm

@“14569”#p71957 它GPL开源拿过来直接用不行吗

------

看了这里面不还是JSON嘛

14569 · August 25, 2024, 5:38pm

@“知ら無い”#p71959 js 的啊

[upl-image-preview url=https://s.rmimg.com/2024-08-25/1724578727-835122-image.png]

我自己设计了一个，看看还有什么要改的。

14569 · August 26, 2024, 11:22am

大佬们看这个

[upl-image-preview url=https://s.rmimg.com/2024-08-26/1724642437-778823-image.png]

又更新了一点

HTML

```

<!DOCTYPE html>

<html lang=“zh-CN”>
<head>

<meta charset=“UTF-8”>

<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>

<script src=“https://cdn.bootcdn.net/ajax/libs/font-awesome/6.6.0/js/all.js”></script>

<title>友链墙</title>

<style>

@keyframes show-1 {

0% {

opacity: 0;

transform: translateY(-20px);

}

to {

opacity: 1;

transform: translateY(0);

}

}

@keyframes show-2 {

0% {

opacity: 0;

transform: translateY(20px);

}

to {

opacity: 1;

transform: translateY(0);

}

}

:root {

–bg-color: #f4f4f4;

–text-color: #333;

–card-bg-color: #ffffff;

–card-text-color: #333;

–banner-bg-color: #007BFF;

–button-bg-color: #28a745;

–button-hover-bg-color: #218838;

–random-button-bg-color: #007BFF;

–random-button-hover-bg-color: #0056b3;

–tag-bg-color: #007BFF;

}
    body.dark-mode {
        --bg-color: #121212;
        --text-color: #f4f4f4;
        --card-bg-color: #1e1e1e;
        --card-text-color: #f4f4f4;
        --banner-bg-color: #333;
        --button-bg-color: #4caf50;
        --button-hover-bg-color: #45a049;
        --random-button-bg-color: #555;
        --random-button-hover-bg-color: #333;
        --tag-bg-color: #1e90ff;
    }

    body {
        font-family: Arial, sans-serif;
        background-color: var(--bg-color);
        color: var(--text-color);
        margin: 0;
        padding: 80px 20px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: background-color 0.3s, color 0.3s;
    }

    .banner {
        width: 100%;
        background-color: var(--banner-bg-color);
        padding: 15px 20px;
        color: white;
        text-align: center;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: background-color 0.3s;
    }

    .banner-title {
        font-size: 1.5em;
        margin: 0;
    }

    .banner-buttons {
        display: flex;
        margin-right: 30px;
    }

    .banner-buttons a {
        background-color: var(--button-bg-color);
        color: white;
        padding: 10px 20px;
        border-radius: 5px;
        margin-left: 10px;
        text-decoration: none;
        transition: background-color 0.2s;
    }

    .banner-buttons a.random-button {
        background-color: var(--random-button-bg-color);
    }

    .banner-buttons a:hover {
        background-color: var(--button-hover-bg-color);
    }

    .banner-buttons a.random-button:hover {
        background-color: var(--random-button-hover-bg-color);
    }

    .card-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .card {
        background-color: var(--card-bg-color);
        color: var(--card-text-color);
        border-radius: 8px;
        margin: 15px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 90%;
        max-width: 1600px;
        transition: transform 0.2s, background-color 0.3s, color 0.3s;
        opacity: 0;
        animation: show-2 .5s ease-out 0s forwards;
    }

    .card:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.1);
    }

    .card-title {
        font-size: 1.5em;
        margin: 0;
        width: 100%;
    }

    .card-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin: 5px 0;
    }

    .card-description {
        font-size: 1em;
        margin: 0;
        flex: 1;
        text-align: left;
    }

    .card-tags {
        display: flex;
        flex-direction: row;
        margin: 0;
        align-items: center;
    }

    .tag {
        background-color: var(--tag-bg-color);
        color: white;
        border-radius: 15px;
        padding: 5px 10px;
        margin-left: 5px;
        font-size: 0.8em;
    }

    a {
        text-decoration: none;
    }

    .dark-mode-toggle {
        position: fixed;
        left: 20px;
        bottom: 20px;
        background-color: var(--random-button-bg-color);
        color: white;
        border: none;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .dark-mode-toggle:hover {
        background-color: var(--random-button-hover-bg-color);
    }

    .all-links {
        width: 90%;
        text-align: left;
        margin: 15px 0;
    }

    .recommendation {
        width: 90%;
        text-align: left;
        margin: 15px 0;
        display: flex;
        align-items: center;
    }

    .change-button {
        background: none;
        color: var(--random-button-bg-color);
        border: none;
        cursor: pointer;
        margin-left: 10px;
        transition: color 0.2s;
    }
    .change-button:hover {
        color: var(--random-button-hover-bg-color);
    }
&lt;/style&gt;

</head>
<body>

<div class=“banner”>

<div class=“banner-title”>友链墙</div>

<div class=“banner-buttons”>

<a href=“https://github.com/example/example” target=“_blank”><i class=“fa-solid fa-location-arrow”></i> 加入我们</a>

<a href=“javascript:void(0);” class=“random-button” onclick=“randomRedirect()”><i class=“fa-solid fa-link”></i> 随机跳转</a>

</div>

</div>
&lt;div class="recommendation"&gt;
    &lt;h2&gt;随机推荐&lt;/h2&gt;
    &lt;button class="change-button" onclick="generateRandomLinks()"&gt;&lt;i class="fa-solid fa-arrows-rotate fa-lg"&gt;&lt;/i&gt;&lt;/button&gt;
&lt;/div&gt;
&lt;div class="card-container" id="random-links-container"&gt;
    &lt;!-- 随机链接将在这里动态生成 --&gt;
&lt;/div&gt;
&lt;div class="all-links"&gt;
    &lt;h2&gt;全部链接&lt;/h2&gt;
&lt;/div&gt;
&lt;div class="card-container" id="all-links-container"&gt;
    &lt;!-- 友链卡片将通过 JavaScript 动态生成 --&gt;
&lt;/div&gt;

&lt;button class="dark-mode-toggle" onclick="toggleDarkMode()"&gt;
    &lt;i class="fas fa-circle-half-stroke"&gt;&lt;/i&gt;
&lt;/button&gt;

&lt;script src="links.js"&gt;&lt;/script&gt;
&lt;script&gt;
    const randomLinksContainer = document.getElementById('random-links-container');
    const allLinksContainer = document.getElementById('all-links-container');

    function generateRandomLinks() {
        randomLinksContainer.innerHTML = '';

        const randomLinks = [];
        while (randomLinks.length &lt; 4) {
            const randomIndex = Math.floor(Math.random() * links.length);
            if (!randomLinks.includes(links[randomIndex])) {
                randomLinks.push(links[randomIndex]);
            }
        }
        randomLinks.forEach(link =&gt; {
            const card = document.createElement('a');
            card.href = link.url;
            card.target = '_blank';
            card.className = 'card';

            const title = document.createElement('div');
            title.className = 'card-title';
            title.innerHTML = link.title + ' &lt;i class="fa-solid fa-arrow-up-right-from-square fa-xs" style="color: #0076D4;"&gt;&lt;/i&gt;';
            card.appendChild(title);

            const contentContainer = document.createElement('div');
            contentContainer.className = 'card-content';

            const description = document.createElement('div');
            description.className = 'card-description';
            description.textContent = link.description;
            contentContainer.appendChild(description);

            const tagsContainer = document.createElement('div');
            tagsContainer.className = 'card-tags';

            link.tags.forEach(tagObj =&gt; {
                const tag = document.createElement('span');
                tag.className = 'tag';
                tag.textContent = tagObj.tag;
                tagsContainer.appendChild(tag);
            });

            contentContainer.appendChild(tagsContainer);
            card.appendChild(contentContainer);
            randomLinksContainer.appendChild(card);
        });
    }

    window.onload = function () {
        generateRandomLinks();
        links.forEach(link =&gt; {
            const card = document.createElement('a');
            card.href = link.url;
            card.target = '_blank';
            card.className = 'card';

            const title = document.createElement('div');
            title.className = 'card-title';
            title.innerHTML = link.title + ' &lt;i class="fa-solid fa-arrow-up-right-from-square fa-xs" style="color: #0076D4;"&gt;&lt;/i&gt;';
            card.appendChild(title);

            const contentContainer = document.createElement('div');
            contentContainer.className = 'card-content';

            const description = document.createElement('div');
            description.className = 'card-description';
            description.textContent = link.description;
            contentContainer.appendChild(description);

            const tagsContainer = document.createElement('div');
            tagsContainer.className = 'card-tags';

            link.tags.forEach(tagObj =&gt; {
                const tag = document.createElement('span');
                tag.className = 'tag';
                tag.textContent = tagObj.tag;
                tagsContainer.appendChild(tag);
            });

            contentContainer.appendChild(tagsContainer);
            card.appendChild(contentContainer);
            allLinksContainer.appendChild(card);
        });

        const theme = localStorage.getItem('theme');
        if (theme === 'dark') {
            document.body.classList.add('dark-mode');
        }
    }

    function randomRedirect() {
        const randomIndex = Math.floor(Math.random() * links.length);
        window.open(links[randomIndex].url, '_blank');
    }

    function toggleDarkMode() {
        const body = document.body;
        body.classList.toggle('dark-mode');
        if (body.classList.contains('dark-mode')) {
            localStorage.setItem('theme', 'dark');
        } else {
            localStorage.setItem('theme', 'light');
        }
    }
&lt;/script&gt;

</body> </html> ```

links.js

```
const links = [
    {
        title: "145Hub",
        url: "https://hub.00.uy",
        description: "热爱闲聊、分享的社区平台。",
        tags: [
            { tag: "社区" },
            { tag: "分享" }
        ]
    },
    {
        title: "Note.ms 论坛",
        url: "https://bbs.notems.xyz",
        description: "在这里聊聊天或者备个份。",
        tags: [
            { tag: "Note.ms" }
        ]
    },
    {
        title: "Test",
        url: "https://example.com",
        description: "测试一下。",
        tags: [
            { tag: "测试" }
        ]
    },
    {
        title: "Test",
        url: "https://example.com",
        description: "测试一下。",
        tags: [
            { tag: "测试" }
        ]
    },
    {
        title: "Test",
        url: "https://example.com",
        description: "测试一下。",
        tags: [
            { tag: "测试" }
        ]
    },
    {
        title: "Test",
        url: "https://example.com",
        description: "测试一下。",
        tags: [
            { tag: "测试" }
        ]
    },
    {
        title: "Test",
        url: "https://example.com",
        description: "测试一下。",
        tags: [
            { tag: "测试" }
        ]
    },
    {
        title: "Test",
        url: "https://example.com",
        description: "测试一下。",
        tags: [
            { tag: "测试" }
        ]
    },
    {
        title: "Test",
        url: "https://example.com",
        description: "测试一下。",
        tags: [
            { tag: "测试" },
            { tag: "最后一个链接" }
        ]
    }
];
```

James · August 26, 2024, 11:55am

@“14569”#p72297 感觉很简约

wittytsie · August 27, 2024, 11:11am

@“14569”#p72297 <script src=“https://cdn.bootcdn.net/ajax/libs/font-awesome/6.6.0/js/all.js”></script>这行加上了好像没引用吧，这行有什么用处吗

James · August 27, 2024, 11:13am

@“Tsie”#p72816 随机跳转那里有个图标，不知道是不是用的font-awesome。:ac01:

yunxianboy · August 27, 2024, 11:14am

521530.xyz 你可以拔下来

wittytsie · August 27, 2024, 11:27am

@“James”#p72817 应该是，看代码好没有加上微标，我看了演示站，这个友联墙好像网站导航站，但是没分类

14569 · August 27, 2024, 11:35am

@“Tsie”#p72816 FontAwesome 的图标库，加了可以显示图标。

wittytsie · August 27, 2024, 3:06pm

我也搞一个了，maps.us.kg

heiyu · August 27, 2024, 3:25pm

@“Tsie”#p72903

这个蛮不错的分享下呗

wittytsie · August 27, 2024, 3:31pm

@“heiyu”#p72907 你的网站呢？给我，我加上去

Topic		Replies	Views
短网址源码分享成长与作品	21	228	November 3, 2025
NL新增的外链跳转提示页面源码科技与创作	30	338	January 6, 2025
AI助力：用Trae 实现纯静态前后台分离的个人导航页（只有一页的HTML实现所有功能）科技与创作	18	376	April 2, 2025
你们博客都用什么程序和主题？分享一下？互联网服务	34	343	October 21, 2024
Flarum BBCode 语法	9	312	July 20, 2024

大佬们有什么好用的静态导航页源码

Related topics