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

效果预览

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

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

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

预览视图:

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

文件下载

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/[email protected]/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页面添加之后,还需要到特定的分类页面进行添加,添加方式如上

版权声明:
作者:北忘山
文章:html-在线工具箱仿fuun.fun源码-奇趣网站收藏家 二次修改版
链接:https://www.beiwangshan.com/archives/291.html
来源:beiwangshan.com
文章版权归作者所有,未经允许请勿转载。
THE END
分享
二维码
打赏
< <上一篇
下一篇>>