html-在线工具箱仿fuun.fun源码-奇趣网站收藏家 二次修改版

效果预览

原作者网站：奇趣网站收藏家

预览站点：Fun's Web有趣网站

我的博客站：北忘山の博客

预览视图：

文件下载

Release 第一次修改版 · beiwangshan83/FunWeb (github.com)

部署使用

站点使用

移步至最新发布版本:Release 第一次修改版 · beiwangshan83/FunWeb (github.com)

解压后上传FunWeb里面的所有内容至网站根目录，站点使用纯静态

访问站点即可

修改配置

评论系统

网站评论系统使用valine

valine申请教程

自行去该网站注册用户，获取appId和appKey，申请好之后，编辑share.html

在share.html文件中搜索推荐有趣的网站吧定位到appId和appKey的位置，具体代码如下：

<script
            type="text/javascript"> loadComments(); function loadComments() { if (typeof Valine === 'undefined') { var getScript = (options) => { var script = document.createElement('script'); script.defer = true; script.crossOrigin = 'anonymous'; Object.keys(options).forEach((key) => { script[key] = options[key]; }); document.body.appendChild(script); }; getScript({ src: 'https://cdn.jsdelivr.net/npm/valine@1.4.14/dist/Valine.min.js', onload: () => { newValine(); } }); } else { newValine(); } } function newValine() { new Valine({ el: '#vcomments', appId: 'u0EtQJ6KPs4kEw0nptbhYOrp-gzGzoHsz', appKey: 'peanhvXypOBhozptvLzQ0kkg', placeholder: '推荐有趣的网站吧~', avatar: 'wavatar', meta: ['nick', 'mail'], requiredFields: ['nick'] }); }</script>
    

修改其中的appId和appKey即可

图床选择

页面中的所有图片均使用https://sm.ms/，你也可以把图片上传到此

添加网站

添加比较麻烦，因为是纯静态，但是目前系统已经有192个网站，坚持做收藏。

添加导航块

除了share.html，其他文件中均有以下模块，这部分会在页面的左侧输出

<header>
...
</header>

如果你想添加一个导航块，在<header></header>中按照格式添加<li><li>即可

<li>
...
<li>

特别注意：

以上所有添加的内容都需要除了share.html的每个页面添加

添加网站

除了share.html，其他文件中均有以下模块，这部分会在页面的右侧输出

<section class="main">
...
</section>

如果你想添加一个网站，只需要在<section class="main"></section>添加<div class="link_item"></div>即可

    <div class="link_item">
        <div class="content"> <img src="https://i.loli.net/2021/03/16/KYdyCkliMjagrSV.png" alt="" class="logo"
                loading=lazy>
            <div class="title a_animation"> <a href="https://digicol.dpm.org.cn/" target="_blank">故宫博物院数字文物库 <svg
                        xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                        stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <g fill="none" fill-rule="evenodd">
                            <path
                                d="M18 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8c0-1.1.9-2 2-2h5M15 3h6v6M10 14L20.2 3.8" />
                        </g>
                    </svg> </a></div>
            <div class="description">在线查看故宫博物院众多藏品，可根据分类和年代浏览</div>
            <div class="category" style="background-color:#316AF1;color:#316AF1"> 世界</div>
        </div>
    </div>

特别注意：

你在index.html页面添加之后，还需要到特定的分类页面进行添加，添加方式如上