├── public
    ├── favicon.ico
    └── index.html
├── babel.config.js
├── src
    ├── assets
    │   ├── favicon
    │   │   └── placeholder.png
    │   └── css
    │   │   ├── base.css
    │   │   └── okarin.less
    ├── main.js
    ├── common
    │   ├── webSet.js
    │   └── web.json
    ├── App.vue
    └── components
    │   ├── Poem.vue
    │   ├── WebSet.vue
    │   ├── SideBar.vue
    │   ├── WebLinks.vue
    │   └── BackToTop.vue
├── .gitignore
├── vue.config.js
├── package.json
└── README.md


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Okarin1/web-project/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/assets/favicon/placeholder.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Okarin1/web-project/HEAD/src/assets/favicon/placeholder.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue"
 2 | import App from "./App.vue"
 3 | import VueLazyload from "vue-lazyload"
 4 | 
 5 | Vue.config.productionTip = false
 6 | Vue.use(VueLazyload, {
 7 |   preLoad: 1.3,
 8 |   error: require("@/assets/favicon/placeholder.png"),
 9 |   loading: require("@/assets/favicon/placeholder.png"),
10 |   attempt: 1,
11 | })
12 | 
13 | new Vue({
14 |   render: (h) => h(App),
15 | }).$mount("#app")
16 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | 
 2 | const path = require('path');
 3 | 
 4 | module.exports = {
 5 |   // ...
 6 |   pluginOptions: {
 7 |     'style-resources-loader': {
 8 |       preProcessor: 'less',
 9 |       // 引入需要全局加载的 less 文件
10 |       patterns: [path.resolve(__dirname, './src/assets/css/okarin.less')],
11 |     },
12 |   },
13 |   configureWebpack: {
14 |     resolve: {
15 |       alias: {
16 |         //src: '@', 默认已配置
17 |         assets: "@/assets",
18 |         common: "@/common",
19 |         components: "@/components",
20 |       },
21 |     },
22 |   },
23 | };


--------------------------------------------------------------------------------
/src/common/webSet.js:
--------------------------------------------------------------------------------
 1 | class WebSet {
 2 |   constructor(name, web) {
 3 |     this.name = name
 4 |     this.web = web
 5 |   }
 6 |   getWebNum() {
 7 |     return this.web.length
 8 |   }
 9 | 
10 |   *[Symbol.iterator]() {
11 |     yield* this.web
12 |   }
13 |   
14 | }
15 | 
16 | class Web {
17 |   constructor(text, url, desc, icon) {
18 |     this.text = text
19 |     this.url = url
20 |     this.desc = desc
21 |     this.icon = icon
22 |   }
23 | }
24 | 
25 | export function getWebSet(webObj) {
26 |   const webArr = ((opt) => {
27 |     for (let i of webObj.children) {
28 |       opt.push(new Web(i.text, i.url, i.desc, i.icon))
29 |     }
30 |     return opt
31 |   })([])
32 |   return new WebSet(webObj.title, webArr)
33 | }
34 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
 8 |     <title>听潮亭</title>
 9 |     <meta name=description content="送报少年的各种网页收藏">
10 |   </head>
11 |   <body>
12 |     <noscript>
13 |       <strong
14 |         >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
15 |         properly without JavaScript enabled. Please enable it to
16 |         continue.</strong
17 |       >
18 |     </noscript>
19 |     <div id="app"></div>
20 |     <!-- built files will be auto injected -->
21 |   </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "web-project",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build"
 8 |   },
 9 |   "dependencies": {
10 |     "axios": "^0.25.0",
11 |     "core-js": "^3.6.5",
12 |     "vue": "^2.6.11",
13 |     "vue-lazyload": "^1.3.3"
14 |   },
15 |   "devDependencies": {
16 |     "@vue/cli-plugin-babel": "~4.5.0",
17 |     "@vue/cli-service": "~4.5.0",
18 |     "less": "^3.0.4",
19 |     "less-loader": "^5.0.0",
20 |     "style-resources-loader": "^1.5.0",
21 |     "vue-cli-plugin-style-resources-loader": "^0.1.5",
22 |     "vue-template-compiler": "^2.6.11"
23 |   },
24 |   "browserslist": [
25 |     "> 1%",
26 |     "last 2 versions",
27 |     "not dead"
28 |   ]
29 | }
30 | 


--------------------------------------------------------------------------------
/src/assets/css/base.css:
--------------------------------------------------------------------------------
 1 | body,
 2 | form,
 3 | h1,
 4 | h2,
 5 | h3,
 6 | h4,
 7 | h5,
 8 | ol,
 9 | p,
10 | ul {
11 |   margin: 0;
12 | }
13 | 
14 | ol,
15 | ul {
16 |   padding: 0;
17 | }
18 | 
19 | html {
20 |   font-size: 15px;
21 |   font-family: Ubuntu, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Cantarell, Fira Sans, Droid Sans,
22 |     Helvetica Neue, sans-serif;
23 |   -webkit-font-smoothing: antialiased;
24 |   color: #222;
25 |   scroll-behavior: smooth;
26 | }
27 | 
28 | button,
29 | input,
30 | option,
31 | select,
32 | textarea {
33 |   font: inherit;
34 | }
35 | 
36 | h1,
37 | h2,
38 | h3,
39 | h4 {
40 |   margin-top: -1.5rem;
41 |   padding-top: 3.6rem;
42 |   margin-bottom: 1rem;
43 |   font-weight: 600;
44 | }
45 | 
46 | button:focus,
47 | input:focus,
48 | textarea:focus {
49 |   outline: 0;
50 | }
51 | 
52 | ul {
53 |   list-style-type: none;
54 | }
55 | 
56 | meta[name="description"] {
57 |   display: block;
58 |   padding: 0.5em 0;
59 |   color: #999;
60 | 
61 | }
62 | meta[name="description"]:after {
63 |   content: attr(content);
64 | }
65 | 
66 | img {
67 |   border: 0 none;
68 | }
69 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="okarin">
 3 |     <div class="content-box">
 4 |       <poem />
 5 |       <web-set :webSet="webSetArr"/>
 6 |       <back-to-top/>
 7 |       
 8 |       <div class="footer">
 9 |         MIT Licensed | Copyright © 2022-present
10 |         <a href="https://github.com/Okarin1/web-project" target="_blank"
11 |           >@Okarin</a
12 |         >
13 |       </div>
14 |     </div>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | import Poem from "./components/Poem.vue";
20 | import WebSet from "./components/WebSet.vue";
21 | import BackToTop from "./components/BackToTop.vue"
22 | 
23 | import data from "@/common/web.json";
24 | import { getWebSet } from "@/common/webSet.js";
25 | export default {
26 |   name: "App",
27 |   components: {
28 |     WebSet,
29 |     Poem,
30 |     BackToTop
31 |    
32 |   },
33 |   created() {
34 |     data.forEach((opt) => {
35 |       this.webSetArr.push(getWebSet(opt));
36 |     });
37 |     console.log("░▒█▀▀▀█░▒█░▄▀░█▀▀▄░▒█▀▀▄░▀█▀░▒█▄░▒█\n░▒█░░▒█░▒█▀▄░▒█▄▄█░▒█▄▄▀░▒█░░▒█▒█▒█\n░▒█▄▄▄█░▒█░▒█▒█░▒█░▒█░▒█░▄█▄░▒█░░▀█\n\n送报少年(okarin.cn)制作")
38 |   },
39 |   data() {
40 |     return {
41 |       webSetArr: [],
42 |     };
43 |   },
44 |  
45 | };
46 | </script>
47 | 
48 | <style lang="less">
49 | @import "assets/css/base.css";
50 | @import "assets/css/okarin.less";
51 | </style>
52 | 


--------------------------------------------------------------------------------
/src/components/Poem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="poem-wrap">
 3 |     <p id="poem">{{ poem }}</p>
 4 |     <p id="info">{{ info }}</p>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import axios from "axios"
10 | export default {
11 |   data() {
12 |     return {
13 |       poem: "",
14 |       info: "",
15 |     }
16 |   },
17 |   mounted() {
18 |     axios.defaults.baseURL = "https://v1.jinrishici.com"
19 |     axios.defaults.timeout = 5000 //毫秒
20 |     axios({
21 |       url: "/all.json",
22 |     })
23 |       .then((res) => {
24 |         //console.log(res.data)
25 |         this.poem = res.data.content
26 |         this.info = `${res.data.author}《${res.data.origin}》`
27 |       })
28 |       .catch((res) => {
29 |         console.log(res)
30 |         this.poem = "醉后不知天在水，满船清梦压星河。"
31 |         this.info = "唐珙《题龙阳县青草湖》"
32 |       })
33 |   },
34 | }
35 | </script>
36 | 
37 | <style lang="less">
38 | /*诗*/
39 | .poem-wrap {
40 |   position: relative;
41 |   width: 730px;
42 |   max-width: 80%;
43 |   border-top: none;
44 |   text-align: center;
45 |   margin: auto;
46 |   font-family: Arial, Helvetica, "sans-serif";
47 | }
48 | 
49 | .poem-wrap p {
50 |   width: 70%;
51 |   margin: auto;
52 |   line-height: 30px;
53 |   color: #797979;
54 | }
55 | 
56 | .poem-wrap p#poem {
57 |   width: 100%;
58 |   margin-top: -5px;
59 |   font-size: 20px;
60 | }
61 | 
62 | .poem-wrap p#info {
63 |   font-size: 15px;
64 |   margin: 15px auto;
65 | }
66 | 
67 | @media (max-width: 1024px) {
68 |   .poem-wrap {
69 |     margin-top: -15px;
70 |   }
71 | 
72 |   .poem-wrap p#poem {
73 |     width: 90%;
74 |     margin: auto;
75 |     font-size: 16px;
76 |   }
77 |   .poem-wrap p#info {
78 |     font-size: 13px;
79 |     margin: 5px auto;
80 |   }
81 | }
82 | </style>
83 | 


--------------------------------------------------------------------------------
/src/components/WebSet.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div v-for="(item, index) in webSet" :key="index">
 4 |       <h2 :id="item.name" ref="webBar">
 5 |         {{ item.name
 6 |         }}<span
 7 |           class="badge badge-theme"
 8 |           style="vertical-align: top"
 9 |           v-text="webCount(item)"
10 |         ></span>
11 |       </h2>
12 |       <web-links :webLink="item" />
13 |     </div>
14 |     <side-bar :sideArray="sideArray" :topIndex="topIndex" />
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | import WebLinks from "./WebLinks.vue";
20 | import SideBar from "./SideBar.vue";
21 | export default {
22 |   components: { WebLinks, SideBar },
23 |   name: "Webset",
24 |   props: {
25 |     webSet: {
26 |       type: Array,
27 |       default: () => {
28 |         return [];
29 |       },
30 |     },
31 |   },
32 |   data() {
33 |     return {
34 |       barTop: [],
35 |       topIndex: 0,
36 |     };
37 |   },
38 |   created() {
39 |     this.$nextTick(() => {
40 |       for (let i in this.webSet) {
41 |         this.barTop.push(this.$refs.webBar[i].offsetTop);
42 |       }
43 |     });
44 |     window.addEventListener("scroll", this.throttle(this.handleScroll, 100));
45 |   },
46 |   methods: {
47 |     handleScroll() {
48 |       for (let s of this.barTop) {
49 |         if (window.scrollY > s) {
50 |           this.topIndex = this.barTop.indexOf(s);
51 |         }
52 |       }
53 |     },
54 |     throttle(func, delay) {
55 |       let timer = null;
56 |       let startTime = Date.now();
57 |       return function () {
58 |         const curTime = Date.now();
59 |         const remaining = delay - (curTime - startTime);
60 |         const context = this;
61 |         const args = arguments;
62 |         clearTimeout(timer);
63 |         if (remaining <= 0) {
64 |           func.apply(context, args);
65 |           startTime = Date.now();
66 |         } else {
67 |           timer = setTimeout(func, remaining);
68 |         }
69 |       };
70 |     },
71 |     webCount(webLink) {
72 |       return webLink.getWebNum();
73 |     },
74 |   },
75 |   computed: {
76 |     sideArray() {
77 |       return this.webSet.map((res) => {
78 |         return res.name;
79 |       });
80 |     },
81 |   },
82 | };
83 | </script>
84 | 
85 | 
86 | <style scoped lang="less">
87 | </style>
88 | 


--------------------------------------------------------------------------------
/src/components/SideBar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <ul class="side-bar">
  4 |       <li
  5 |         v-for="(item, index) in sideArray"
  6 |         :key="item"
  7 |         @click="sideClick(item, index)"
  8 |         :class="{ active: index == afterIndex}"
  9 |       >
 10 |         <a class="side-link" :href="`#${item}`" :class="{ active: index == afterIndex}">{{ item }}</a>
 11 |       </li>
 12 |     </ul>
 13 |   </div>
 14 | </template>
 15 | 
 16 | <script>
 17 | export default {
 18 |   props: {
 19 |     sideArray: {
 20 |       type: Array,
 21 |       default: () => {
 22 |         return [];
 23 |       },
 24 |     },
 25 |     topIndex: 0,
 26 |   },
 27 |   data() {
 28 |     return {
 29 |       currentIndex: 0,
 30 |     };
 31 |   },
 32 |   methods: {
 33 |     sideClick(item, index) {
 34 |       this.currentIndex = index;
 35 |       document.getElementById(item).scrollIntoView();
 36 |     },
 37 |   },
 38 |   computed:{
 39 |     afterIndex(){
 40 |       return Math.max(this.topIndex,this.currentIndex)
 41 |     }
 42 |   }
 43 | };
 44 | </script>
 45 | 
 46 | <style lang="less" scoped>
 47 | .side-bar {
 48 |   width: 12rem;
 49 |   transition: transform 0.25s ease-in-out 0s, opacity 0.25s ease-in-out 0s;
 50 |   transform: translateY(0px);
 51 |   opacity: 1;
 52 |   position: fixed;
 53 |   top: 20rem;
 54 |   bottom: 10rem;
 55 |   right: 2rem;
 56 |   overflow-y: scroll;
 57 |   padding-left: 0;
 58 |   list-style: none;
 59 |   font-size: 12px;
 60 |   li {
 61 |     padding: 0.2rem 0;
 62 |     display: list-item;
 63 |     text-align: -webkit-match-parent;
 64 |     cursor: pointer;
 65 |     border-left: 1px solid @code-color;
 66 |     .side-link {
 67 |       font-size: 1em;
 68 |       font-weight: 400;
 69 |       display: block !important;
 70 |       padding: 0.35rem 1rem 0.35rem 1.25rem;
 71 |       line-height: 1;
 72 |     }
 73 |     a {
 74 |       color: #000;
 75 |       text-decoration: none;
 76 |       &:hover {
 77 |         
 78 |         color: @theme-color;
 79 |       }
 80 |     }
 81 |   }
 82 | }
 83 | .side-bar::-webkit-scrollbar {
 84 |   width: 0;
 85 |   height: 0;
 86 | }
 87 | .active {
 88 |   color: @theme-color !important;
 89 |   border-left-color: @theme-color !important;
 90 | }
 91 | 
 92 | @media screen and (max-width: 1024px) {
 93 |   .side-bar {
 94 |     display: none;
 95 |   }
 96 | }
 97 | @media only screen and (max-width: 768px) {
 98 |   .side-bar {
 99 |     display: none;
100 |   }
101 | }
102 | </style>
103 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # 送报少年的听潮亭
  2 | 
  3 | 由于我喜欢收集各种实用或者稀奇古怪的网站，而如何存放它们成了一个问题，于是就有了这个在线的书签网站
  4 | 
  5 | ## 我的在线网页
  6 | https://web.okarin.cn/
  7 | 
  8 | ## 如何在本地运行
  9 | 
 10 | 克隆项目到本地
 11 | ```
 12 | git clone https://github.com/Okarin1/web-project.git
 13 | ```
 14 | 安装依赖
 15 | ```
 16 | yarn install
 17 | ```
 18 | 本地运行
 19 | ```
 20 | yarn serve
 21 | ```
 22 | 
 23 | ## 如何更换内容
 24 | 
 25 | 在项目的 `src` 中的 `common` 文件夹中的 `web.json` 文件换成你自己的版本
 26 | 
 27 | 
 28 | ### 设置 json 格式
 29 | 
 30 | >文件位置/src/common/web.json
 31 | 
 32 | ```js
 33 | [
 34 |   {
 35 |     "title": "实用网站", //分类名字
 36 |     "children": [
 37 |       {
 38 |         "text": "网站一", //网站名字(必须)
 39 |         "url": "https://www.xxx.com/",//网站链接(必须)
 40 |         "icon": "https://www.xxx/com/logo.png", //图标 如果自动获取不到的话可手动填入(可选)
 41 |         "desc": "网站描述" //鼠标停留的描述 (可选)
 42 |       },
 43 |       {
 44 |         "text": "网站二", 
 45 |         "url": "https://www.xxx.com/",
 46 |         "icon": "https://www.xxx/com/logo.png", 
 47 |         "desc": "网站描述" 
 48 |       },
 49 |     ]
 50 |   },
 51 |     {
 52 |     "title": "有趣网站",//分类二
 53 |     "children": [
 54 |       {
 55 |         "text": "网站一", 
 56 |         "url": "https://www.xxx.com/",
 57 |         "icon": "https://www.xxx/com/logo.png", 
 58 |         "desc": "网站描述" 
 59 |       },
 60 |       {
 61 |         "text": "网站二", 
 62 |         "url": "https://www.xxx.com/",
 63 |         "icon": "https://www.xxx/com/logo.png", 
 64 |         "desc": "网站描述" 
 65 |       },
 66 |     ]
 67 |   },
 68 | ]
 69 | ```
 70 | ## 个性化
 71 | 
 72 | ### 更换主题颜色
 73 | 
 74 | >文件位置/src/assets/css/okarin.less
 75 | 
 76 | 将第一行的主题颜色改为你喜欢的颜色
 77 | 
 78 | ```less
 79 |  @theme-color: #007acc;
 80 | ```
 81 | 
 82 | ### 去除诗词
 83 | 
 84 | >文件位置/src/App.vue
 85 | 
 86 | 如果你不喜欢头部的诗句，可以删除上面的文件，同时修改下面代码
 87 | 
 88 | ```js
 89 |    <poem/> //删除
 90 |    import Poem from './Poem.vue' //删除
 91 |    components: {WebSet,Poem,BackToTop}, => components: { WebSet,BackToTop}, //修改
 92 | ```
 93 | 
 94 | ### 标题和描述
 95 | 
 96 | >文件位置/public/index.html
 97 | 
 98 | 修改标题和描述
 99 | 
100 | ```html
101 | <title>听潮亭</title>
102 | <meta name=description content="送报少年的各种网页收藏"> 
103 | ```
104 | ### 页脚
105 | 
106 | >文件位置/src/App.vue
107 | 
108 | 不建议修改页脚，如果你一定要修改的话，更改如下文件
109 | 
110 | ```html
111 | <div class="footer">
112 |       MIT Licensed | Copyright © 2022-present  <a href="https://github.com/Okarin1/web-project" target="_blank">@Okarin</a>
113 | </div>
114 | ```
115 | 
116 | ## 部署
117 | 
118 | 本页面目前部署在[vercel](https://vercel.com/)
119 | 
120 | 将修改后的项目，新建一个仓库并连接vercel自动打包部署，更多教程请自行搜索
121 | 
122 | 
123 | ## 打赏
124 | 
125 | [点击链接请我喝瓶美汁源吧！](https://donate.okarin.cn/)
126 | 
127 | 


--------------------------------------------------------------------------------
/src/components/WebLinks.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="nav">
  3 |     <ul class="links" >
  4 |       <li v-for="(items, index) of webLink" :key="index">
  5 |         <a :href="items.url" :title="items.desc" target="_blank" rel="noopener noreferrer">
  6 |           <img v-lazy="showIcon(items)" :key="items.url" />
  7 |           {{ items.text }}
  8 |         </a>
  9 |       </li>
 10 |     </ul>
 11 |   </div>
 12 | </template>
 13 | 
 14 | <script>
 15 | 
 16 | export default {
 17 |   name: "WebLinks",
 18 |   props: {
 19 |     webLink: {
 20 |       type: Object,
 21 |       default: () => {
 22 |         return {};
 23 |       },
 24 |     },
 25 |   },
 26 | 
 27 |   
 28 |   methods: {
 29 |     showIcon(item) {
 30 |       return item.icon ? item.icon : `https://t0.gstatic.cn/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${item.url}&size=32`
 31 |       //return item.icon ? item.icon : `https://api.uomg.com/api/get.favicon?url=${item.url}`
 32 |     },
 33 |     
 34 |   },
 35 | }
 36 | </script>
 37 | 
 38 | <style lang="less" scoped>
 39 | html,
 40 | html.dark {
 41 |   .links {
 42 |     display: flex;
 43 |     align-content: flex-start;
 44 |     flex-flow: row wrap;
 45 |     list-style: none;
 46 |     li {
 47 |       flex: 0 0 28%;
 48 |       margin: 8px !important;
 49 |       position: relative;
 50 |       justify-content: space-between;
 51 |       color: #1f2f3e;
 52 |       transition-timing-function: cubic-bezier(0.88, 0.13, 0.25, 1);
 53 |       box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.06);
 54 |       transition: all 0.4s;
 55 |       border-radius: 2em;
 56 |       &:last-child {
 57 |         border-right: none;
 58 |       }
 59 |       &:hover {
 60 |         box-shadow: 0 10px 20px -10px #999;
 61 |         transform: translateY(-5px);
 62 |         z-index: 1;
 63 |         a {
 64 |           text-shadow: 3px 2px 5px rgba(0, 0, 0, 0.15);
 65 |         }
 66 |       }
 67 |       a {
 68 |         height: 45px;
 69 |         display: flex;
 70 |         align-items: center;
 71 |         justify-content: flex-start;
 72 |         font-size: 15px;
 73 |         text-decoration: none;
 74 |         border-radius: 20px;
 75 |         color: #242424;
 76 |         background: #fffffc;
 77 |         img {
 78 |           width: 16px;
 79 |           height: 16px;
 80 |           vertical-align: middle;
 81 |           margin: 0 5px 0 1em;
 82 |         }
 83 |         &:hover {
 84 |           color: @theme-color;
 85 |         }
 86 |       }
 87 |     }
 88 |   }
 89 | }
 90 | html.dark {
 91 |   .links {
 92 |     li {
 93 |       a {
 94 |         color: #e0eeff;
 95 |         background: #5b6b82;
 96 |         &:hover {
 97 |           color: @theme-color + #111;
 98 |           text-decoration: none;
 99 |         }
100 |       }
101 |     }
102 |   }
103 | }
104 | 
105 | @media screen and (max-width: 1024px) {
106 |   html,
107 |   html.dark {
108 |     .links {
109 |       li {
110 |         flex: 0 46%;
111 |         margin: 8px;
112 |       }
113 |     }
114 |   }
115 | }
116 | @media only screen and (max-width: 768px) {
117 |   html,
118 |   html.dark {
119 |     .links {
120 |       li {
121 |         flex: 0 100%;
122 |         margin: 8px 0;
123 |       }
124 |     }
125 |   }
126 | }
127 | </style>
128 | 


--------------------------------------------------------------------------------
/src/components/BackToTop.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <transition name="fade">
  3 |     <div v-show="showBackTop" class="back-to-ceiling" @click="backToTop">
  4 |       <svg
  5 |         t="1574745035067"
  6 |         class="icon"
  7 |         viewBox="0 0 1024 1024"
  8 |         version="1.1"
  9 |         xmlns="http://www.w3.org/2000/svg"
 10 |         p-id="5404"
 11 |       >
 12 |         <path
 13 |           d="M526.60727968 10.90185116a27.675 27.675 0 0 0-29.21455937 0c-131.36607665 82.28402758-218.69155461 228.01873535-218.69155402 394.07834331a462.20625001 462.20625001 0 0 0 5.36959153 69.94390903c1.00431239 6.55289093-0.34802892 13.13561351-3.76865779 18.80351572-32.63518765 54.11355614-51.75690182 118.55860487-51.7569018 187.94566865a371.06718723 371.06718723 0 0 0 11.50484808 91.98906777c6.53300375 25.50556257 41.68394495 28.14064038 52.69160883 4.22606766 17.37162448-37.73630017 42.14135425-72.50938081 72.80769204-103.21549295 2.18761121 3.04276886 4.15646224 6.24463696 6.40373557 9.22774369a1871.4375 1871.4375 0 0 0 140.04691725 5.34970492 1866.36093723 1866.36093723 0 0 0 140.04691723-5.34970492c2.24727335-2.98310674 4.21612437-6.18497483 6.3937923-9.2178004 30.66633723 30.70611158 55.4360664 65.4791928 72.80769147 103.21549355 11.00766384 23.91457269 46.15860503 21.27949489 52.69160879-4.22606768a371.15156223 371.15156223 0 0 0 11.514792-91.99901164c0-69.36717486-19.13165746-133.82216804-51.75690182-187.92578088-3.42062944-5.66790279-4.76302748-12.26056868-3.76865837-18.80351632a462.20625001 462.20625001 0 0 0 5.36959269-69.943909c-0.00994388-166.08943902-87.32547796-311.81420293-218.6915546-394.09823051zM605.93803103 357.87693858a93.93749974 93.93749974 0 1 1-187.89594924 6.1e-7 93.93749974 93.93749974 0 0 1 187.89594924-6.1e-7z"
 14 |           p-id="5405"
 15 |         ></path>
 16 |         <path
 17 |           d="M429.50777625 765.63860547C429.50777625 803.39355007 466.44236686 1000.39046097 512.00932183 1000.39046097c45.56695499 0 82.4922232-197.00623328 82.5015456-234.7518555 0-37.75494459-36.9345906-68.35043303-82.4922232-68.34111062-45.57627738-0.00932239-82.52019037 30.59548842-82.51086798 68.34111062z"
 18 |           p-id="5406"
 19 |         ></path>
 20 |       </svg>
 21 |     </div>
 22 |   </transition>
 23 | </template>
 24 | 
 25 | <script>
 26 | export default {
 27 |   name: "BackToTop",
 28 |   data() {
 29 |     return {
 30 |       showBackTop: false,
 31 |       visibilityHeight: 500,
 32 |     };
 33 |   },
 34 |   mounted() {
 35 |     window.addEventListener("scroll", this.throttle(this.handleScroll, 500));
 36 |   },
 37 |   beforeDestroy() {
 38 |     window.removeEventListener("scroll", this.throttle(this.handleScroll, 500));
 39 |   },
 40 |   methods: {
 41 |     handleScroll() {
 42 |       this.showBackTop = window.pageYOffset > this.visibilityHeight;
 43 |     },
 44 |     backToTop() {
 45 |       window.scrollTo(0, 0);
 46 |     },
 47 |     throttle(func, delay) {
 48 |       let timer = null;
 49 |       let startTime = Date.now();
 50 |       return function () {
 51 |         const curTime = Date.now();
 52 |         const remaining = delay - (curTime - startTime);
 53 |         const context = this;
 54 |         const args = arguments;
 55 |         clearTimeout(timer);
 56 |         if (remaining <= 0) {
 57 |           func.apply(context, args);
 58 |           startTime = Date.now();
 59 |         } else {
 60 |           timer = setTimeout(func, remaining);
 61 |         }
 62 |       };
 63 |     },
 64 |   },
 65 | };
 66 | </script>
 67 | 
 68 | <style lang="less" scoped>
 69 | .back-to-ceiling {
 70 |   right: 1rem;
 71 |   bottom: 6rem;
 72 |   width: 2.5rem;
 73 |   height: 2.5rem;
 74 |   border-radius: 0.25rem;
 75 |   line-height: 2.5rem;
 76 |   background-color: #fff;
 77 |   box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2);
 78 |   position: fixed;
 79 |   display: inline-block;
 80 |   text-align: center;
 81 |   cursor: pointer;
 82 |   &::hover {
 83 |     background: #d5dbe7;
 84 |   }
 85 |   .icon {
 86 |     position: absolute;
 87 |     top: 0;
 88 |     bottom: 0;
 89 |     left: 0;
 90 |     right: 0;
 91 |     margin: auto;
 92 |     width: 26px;
 93 |     height: 26px;
 94 |     fill: @theme-color;
 95 |   }
 96 | }
 97 | 
 98 | .fade-enter-active,
 99 | .fade-leave-active {
100 |   transition: all 0.5s;
101 | }
102 | .fade-enter,
103 | .fade-leave-to {
104 |   opacity: 0;
105 |   transform: translateY(120px);
106 | }
107 | </style>


--------------------------------------------------------------------------------
/src/assets/css/okarin.less:
--------------------------------------------------------------------------------
  1 | @theme-color: #007acc; //主题色
  2 | @code-color: #f3f4f4;
  3 | @tip-color: #42b983;
  4 | @warning-color: #e7c000;
  5 | @danger-color: #c00;
  6 | //基本
  7 | 
  8 | 
  9 | 
 10 | body {
 11 |   max-width: 900px;
 12 |   margin: 0 auto;
 13 | }
 14 | 
 15 | head {
 16 |   display: block;
 17 |   text-align: center;
 18 |   padding: 60px 0;
 19 | }
 20 | 
 21 | title {
 22 |   display: block;
 23 |   position: relative;
 24 |   font-weight: bold;
 25 |   font-size: 2.5em;
 26 |   // border-bottom: 4px solid @theme-color;
 27 | }
 28 | title::after{
 29 |   position: absolute;
 30 |   display: block;
 31 |   content: " ";
 32 |   width: 120px;
 33 |   left: 50%;
 34 |   transform: translateX(-50%);
 35 |   border-bottom: 4px solid @theme-color;
 36 | }
 37 | 
 38 | ol,
 39 | p,
 40 | ul {
 41 |   line-height: 1.8;
 42 | }
 43 | //滚动条
 44 | 
 45 | html::-webkit-scrollbar {
 46 |   width: 7px;
 47 | }
 48 | 
 49 | html::-webkit-scrollbar-thumb {
 50 |   background-color: @theme-color;
 51 | }
 52 | 
 53 | //子标题
 54 | 
 55 | h2:before {
 56 |   content: "";
 57 |   margin-right: 5px;
 58 |   border-left: 5px solid @theme-color;
 59 | }
 60 | 
 61 | // 内容
 62 | .content-box {
 63 |   padding: 20px 1.5rem 20px;
 64 | 
 65 |   p {
 66 |     display: block;
 67 |     margin-block-start: 1em;
 68 |     margin-block-end: 1em;
 69 |     margin-inline-start: 0px;
 70 |     margin-inline-end: 0px;
 71 |   }
 72 |   blockquote {
 73 |     font-size: 0.9rem;
 74 |     color: #999;
 75 |     border-left: 0.25rem solid #999;
 76 |     background-color: @code-color;
 77 |     margin: 0.5rem 0;
 78 |     padding: 0.25rem 0.25rem 0.25rem 1rem;
 79 |   }
 80 |   code {
 81 |     color: #476582;
 82 |     padding: 0.25rem 0.5rem;
 83 |     margin: 0;
 84 |     font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace;
 85 |     font-size: 0.85em;
 86 |     background-color: rgba(27, 31, 35, 0.05);
 87 |     border-radius: 3px;
 88 |   }
 89 |   a {
 90 |     font-weight: 500;
 91 |     color: @theme-color;
 92 |     text-decoration: none;
 93 |   }
 94 | 
 95 |   // 链接添加后面的小图标
 96 |   a[href^="http"]::after {
 97 |     display: inline-block;
 98 |     vertical-align: middle;
 99 |     position: relative;
100 |     top: 1px;
101 |     left: 1px;
102 |     content: "";
103 |     width: 1em;
104 |     height: 1em;
105 |     background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGFyaWEtaGlkZGVuPSd0cnVlJyBmb2N1c2FibGU9J2ZhbHNlJyB4PScwcHgnIHk9JzBweCcgdmlld0JveD0nMCAwIDEwMCAxMDAnIHdpZHRoPScxNXB4JyBoZWlnaHQ9JzE1cHgnPjxwYXRoIGZpbGw9JyAjYWFhJyBkPSdNMTguOCw4NS4xaDU2bDAsMGMyLjIsMCw0LTEuOCw0LTR2LTMyaC04djI4aC00OHYtNDhoMjh2LThoLTMybDAsMGMtMi4yLDAtNCwxLjgtNCw0djU2QzE0LjgsODMuMywxNi42LDg1LjEsMTguOCw4NS4xeic+PC9wYXRoPjxwb2x5Z29uIGZpbGw9JyNhYWEnIHBvaW50cz0nNDUuNyw0OC43IDUxLjMsNTQuMyA3Ny4yLDI4LjUgNzcuMiwzNy4yIDg1LjIsMzcuMiA4NS4yLDE0LjkgNjIuOCwxNC45IDYyLjgsMjIuOSA3MS41LDIyLjknPjwvcG9seWdvbj48L3N2Zz4=");
106 |     background-size: cover;
107 |   }
108 | 
109 |  //容器
110 |   .tip {
111 |     display: block;
112 |     background-color: @code-color;
113 |     border-color: @tip-color;
114 |     padding: 0.1rem 1.5rem;
115 |     border-left-width: 0.5rem;
116 |     border-left-style: solid;
117 |     margin: 1rem 0;
118 |     .title {
119 |       font-weight: 600;
120 |       margin-bottom: -0.4rem;
121 |     }
122 |   }
123 | 
124 |   .warning {
125 |     .tip();
126 |     border-color: @warning-color;
127 |     background-color: #ffe5644d;
128 |     color: #6b5900;
129 |     .title {
130 |       color: #b29400;
131 |     }
132 |   }
133 |   .danger {
134 |     .tip();
135 |     border-color: @danger-color;
136 |     background-color: #ffe6e6;
137 |     color: #4d0000;
138 |     .title {
139 |       color: #900;
140 |     }
141 |   }
142 |   //引用容器
143 |   .details {
144 |     margin: 1rem 0;
145 |     padding: 0.1rem 1.5rem;
146 |     border-radius: 0.4rem;
147 |     background-color: @code-color;
148 |     .title {
149 |       margin-top: 0;
150 |       font-weight: 700;
151 |     }
152 |     .right {
153 |       font-size: 0.9rem;
154 |       text-align: right;
155 |     }
156 |   }
157 | 
158 |   //徽章
159 |   .badge {
160 |     display: inline-block;
161 |     font-size: 14px;
162 |     height: 18px;
163 |     line-height: 18px;
164 |     border-radius: 3px;
165 |     margin: 0 4px 0;
166 |     padding: 0 6px;
167 |     color: #fff;
168 |     &-tip {
169 |       background-color: @tip-color;
170 |     }
171 |     &-warning {
172 |       background-color: @warning-color;
173 |     }
174 |     &-theme{
175 |       background-color:@theme-color
176 |     }
177 |   }
178 | 
179 |   //页脚
180 |   .footer {
181 |     padding: 2.5rem;
182 |     margin-top: 200px;
183 |     border-top: 1px solid #eaecef;
184 |     text-align: center;
185 |     color: #4e6e8e;
186 |   }
187 | }
188 | 


--------------------------------------------------------------------------------
/src/common/web.json:
--------------------------------------------------------------------------------
  1 | [
  2 |   {
  3 |     "title": "实用网站",
  4 |     "children": [
  5 |       {
  6 |         "text": "今日热榜",
  7 |         "url": "https://tophub.today/",
  8 |         "desc": "一觉醒来世界发生了什么"
  9 |       },
 10 |       {
 11 |         "text": "wikiHow",
 12 |         "url": "https://zh.wikihow.com/",
 13 |         "desc": "互联网上最值得信赖的指南网站"
 14 |       },
 15 |       {
 16 |         "text": "wallhaven 壁纸",
 17 |         "url": "https://wallhaven.cc/",
 18 |         "desc": "这个壁纸网站我直接吹爆好吧!"
 19 |       },
 20 |       {
 21 |         "text": "Pexels 免费素材图片",
 22 |         "url": "https://www.pexels.com/",
 23 |         "desc": "免费的素材图片和视频"
 24 |       },
 25 |       {
 26 |         "text": "iData",
 27 |         "url": "https://www.cn-ki.net/",
 28 |         "desc": "类似知网"
 29 |       },
 30 |       {
 31 |         "text": "医学微视",
 32 |         "url": "https://www.mvyxws.com/",
 33 |         "desc": "先看看专家怎么说，别去百度看病了"
 34 |       },
 35 |       {
 36 |         "text": "默沙东诊疗手册",
 37 |         "url": "https://www.msdmanuals.cn/",
 38 |         "desc": "一个涵盖了医学所有领域成千上万主题的广泛医学信息来源。"
 39 |       },
 40 |       {
 41 |         "text": "热点后续",
 42 |         "url": "https://houxu.app/",
 43 |         "desc": "有记忆的新闻，持续追踪社会热点"
 44 |       },
 45 |       {
 46 |         "text": "万能法律咨询",
 47 |         "url": "https://ai.12348.gov.cn/pc/",
 48 |         "icon": "https://api.uomg.com/api/get.favicon?url=https://ai.12348.gov.cn/pc/",
 49 |         "desc": "根据问卷提示填写相关信息，在线为您免费出具法律意见书，供您参考"
 50 |       },
 51 |       {
 52 |         "text": "全历史",
 53 |         "url": "https://www.allhistory.com/",
 54 |         "desc": "知识地图制作分享平台，它将地图和文字结合，反映中国历史、军事、地理、文化等方面的知识"
 55 |       },
 56 |       {
 57 |         "text": "中国地图",
 58 |         "url": "https://www.ageeye.cn/",
 59 |         "desc": "沉浸在纵横开阔、左图右史的知识海洋中"
 60 |       },
 61 |       {
 62 |         "text": "宜家特价榜",
 63 |         "url": "https://ikea-lp.netlify.app/",
 64 |         "desc": "一个提供所有品类的宜家低价物品的网站"
 65 |       },
 66 |       {
 67 |         "text": "纯净下载",
 68 |         "url": "http://soft.tinybad.cn/",
 69 |         "desc": "一个纯净下载网站，帮你远离捆绑软件干扰"
 70 |       },
 71 |       {
 72 |         "text": "做音乐",
 73 |         "url": "https://learningmusic.ableton.com/",
 74 |         "desc": "学习到音乐创作的基础知识，无需任何经验或设备，在浏览器中完成所有工作"
 75 |       },
 76 |       {
 77 |         "text": "微词云",
 78 |         "url": "https://www.weiciyun.com/"
 79 |       },
 80 |       {
 81 |         "text": "特殊符号大全",
 82 |         "url": "http://tool.cc/fuhao/"
 83 |       },
 84 |       {
 85 |         "text": "能不能好好说话？",
 86 |         "url": "https://lab.magiconch.com/nbnhhsh/",
 87 |         "desc": "拼音缩写释义"
 88 |       },
 89 |       {
 90 |         "text": "图片找番",
 91 |         "url": "https://trace.moe/",
 92 |         "desc": "根据图片查找番剧"
 93 |       },
 94 |       {
 95 |         "text": "找台词",
 96 |         "url": "http://www.zhaotaici.cn/",
 97 |         "desc": "根据台词找电影"
 98 |       },
 99 |       {
100 |         "text": "windy 天气",
101 |         "url": "https://www.windy.com/"
102 |       },
103 |       {
104 |         "text": "DeepL 翻译",
105 |         "url": "https://www.deepl.com/",
106 |         "desc": "更地道的翻译"
107 |       },
108 |       {
109 |         "text": "GBT乐赏游戏空间",
110 |         "url": "http://gbtgame.ys168.com/",
111 |         "desc": "寻宝"
112 |       },
113 |       {
114 |         "text": "全国音游地图",
115 |         "url": "https://map.bemanicn.com/",
116 |         "desc": "为音游街机爱好者提供,像素风太喜欢了"
117 |       },
118 |       {
119 |         "text": "Wuxia World",
120 |         "url": "https://www.wuxiaworld.com/",
121 |         "desc": "海外版的起点小说网，看小说的同时学习英文"
122 |       },
123 |       {
124 |         "text": "学发音",
125 |         "url": "https://zh.forvo.com/languages/",
126 |         "desc": "世界各地的母语者教你正确发音"
127 |       },
128 |       {
129 |         "text": "打字俱乐部",
130 |         "url": "https://www.typingclub.com/da-zi",
131 |         "desc": "纠正你的错误打字指法"
132 |       }
133 |     ]
134 |   },
135 |   {
136 |     "title": "奇趣网站",
137 |     "children": [
138 |       {
139 |         "text": "crazygames",
140 |         "url": "https://www.crazygames.com/",
141 |         "desc": "在线游戏网站"
142 |       },
143 |       {
144 |         "text": "indiexpo",
145 |         "url": "https://www.indiexpo.net/zh",
146 |         "desc": "独立游戏网站"
147 |       },
148 |       {
149 |         "text": "Yikm",
150 |         "url": "https://www.yikm.net",
151 |         "desc": "复古游戏网站"
152 |       },
153 |       {
154 |         "text": "Mr.doob",
155 |         "url": "https://mrdoob.com/",
156 |         "desc": "有趣网页合集"
157 |       },
158 |       {
159 |         "text": "雀魂麻将",
160 |         "url": "https://game.maj-soul.com/1/",
161 |         "desc": "荣!断幺九!1000点!"
162 |       },
163 |       {
164 |         "text": "beatstage 音游",
165 |         "url": "https://www.beatstage.com/"
166 |       },
167 |       {
168 |         "text": "找色差",
169 |         "url": "http://www.cuishuai.cc/game/",
170 |         "desc": "它说我是个瞎子???"
171 |       },
172 |       {
173 |         "text": "解谜游戏",
174 |         "url": "https://nazo.one-story.cn/",
175 |         "desc": "目前第11关"
176 |       },
177 |       {
178 |         "text": "人生重开模拟器",
179 |         "url": "http://liferestart.syaro.io/view/index.html",
180 |         "desc": "这垃圾的人生一点也不想呆了"
181 |       },
182 |       {
183 |         "text": "TouchPianist",
184 |         "url": "http://touchpianist.com/",
185 |         "desc": "超美在线钢琴网站"
186 |       },
187 |       {
188 |         "text": "灵魂社区",
189 |         "url": "https://soulapartment.net/",
190 |         "desc": "暖心的社区"
191 |       },
192 |       {
193 |         "text": "emoji合成器",
194 |         "url": "https://tikolu.net/emojimix/",
195 |         "desc": "太好玩了，边玩边笑"
196 |       },
197 |       {
198 |         "text": "宝可梦杂交大师",
199 |         "url": "https://pokemon.alexonsager.net/zh",
200 |         "desc": "妙蛙火龙?我直接好家伙"
201 |       },
202 |       {
203 |         "text": "魔方栈",
204 |         "url": "https://huazhechen.gitee.io/cuber/",
205 |         "desc": "玩魔方，很丝滑"
206 |       },
207 |       {
208 |         "text": "HTML5 神奇效果",
209 |         "url": "https://fff.cmiscm.com/",
210 |         "icon": "https://api.uomg.com/api/get.favicon?url=https://fff.cmiscm.com/",
211 |         "desc": "各种神奇效果"
212 |       },
213 |       {
214 |         "text": "GNOOSIC",
215 |         "url": "https://www.gnoosic.com/faves.php",
216 |         "desc": "AI音乐推荐"
217 |       },
218 |       {
219 |         "text": "恋爱循环论证器",
220 |         "url": "https://love.okarin.cn/",
221 |         "icon": "https://api.uomg.com/api/get.favicon?url=https://okarin.cn",
222 |         "desc": "伟大的送报少年证明了每一个数都可以被分解为5201314的公式 (不是"
223 |       },
224 |       {
225 |         "text": "人工智障写作",
226 |         "url": "http://if.caiyunai.com/dream/",
227 |         "desc": "彩云小梦尝鲜版 - AI续写"
228 |       },
229 |       {
230 |         "text": "Dear Website",
231 |         "url": "https://www.thiswebsitewillselfdestruct.com/",
232 |         "icon": "https://i.loli.net/2021/11/20/a18pevYWqrlUD9V.png",
233 |         "desc": "一个会自杀的网站"
234 |       },
235 |       {
236 |         "text": "地图生成器",
237 |         "url": "https://azgaar.github.io/Fantasy-Map-Generator/",
238 |         "desc": "Azgaar的幻想地图生成器"
239 |       },
240 |       {
241 |         "text": "Rain Mood",
242 |         "url": "https://www.rainymood.com/",
243 |         "icon": "https://www.rainymood.com/favicon.ico",
244 |         "desc": "听雨的声音"
245 |       },
246 |       {
247 |         "text": "A SOFT MURMUR",
248 |         "url": "https://asoftmurmur.com/",
249 |         "icon": "https://asoftmurmur.com/favicon.ico",
250 |         "desc": "背景白噪音"
251 |       },
252 |       {
253 |         "text": "纪妖",
254 |         "url": "https://www.cbaigui.com/",
255 |         "desc": "收集中国古今妖怪"
256 |       },
257 |       {
258 |         "text": "window-swap",
259 |         "url": "https://www.window-swap.com/",
260 |         "desc": "开窗户"
261 |       },
262 |       {
263 |         "text": "假装Windows升级",
264 |         "url": "https://fakeupdate.net/",
265 |         "icon": "https://www.microsoft.com/favicon.ico",
266 |         "desc": "假装Windows升级界面，享受摸鱼时光吧"
267 |       },
268 |       {
269 |         "text": "沙雕新闻",
270 |         "url": "https://shadiao.plus/",
271 |         "desc": "收集了很多沙雕社会新闻"
272 |       },
273 |       {
274 |         "text": "ANIMATED DRAWINGS",
275 |         "url": "https://sketch.metademolab.com/",
276 |         "desc": "让画作动起来"
277 |       },
278 |       {
279 |         "text": "Pointer Pointer",
280 |         "url": "https://pointerpointer.com/",
281 |         "desc": "刷新一张指着你鼠标的图片"
282 |       },
283 |       {
284 |         "text": "在线架子鼓",
285 |         "url": "http://tool.mkblog.cn/durms",
286 |         "desc": "一套架子鼓，记得戴耳机!"
287 |       },
288 |       {
289 |         "text": "templatemaker",
290 |         "url": "https://www.templatemaker.nl/zh/",
291 |         "desc": "各种纸盒折纸教程"
292 |       }
293 | 
294 |     ]
295 |   },
296 |   {
297 |     "title": "剪辑设计",
298 |     "children": [
299 |       {
300 |         "text": "稿定抠图",
301 |         "url": "https://www.gaoding.com/koutu"
302 |       },
303 |       {
304 |         "text": "BgRemover",
305 |         "url": "https://www.aigei.com/bgremover",
306 |         "desc": "抠图"
307 |       },
308 |       {
309 |         "text": "Magic Eraser",
310 |         "url": "https://www.magiceraser.io/",
311 |         "desc": "魔法消除"
312 |       },
313 |       {
314 |         "text": "Background Eraser",
315 |         "url": "https://www.backgrounderaser.io",
316 |         "desc": "消除背景"
317 |       },
318 |       {
319 |         "text": "皮卡智能抠图",
320 |         "url": "https://www.picup.shop/currencyBatch.html"
321 |       },
322 |       {
323 |         "text": "创客贴",
324 |         "url": "https://www.chuangkit.com/dc.html",
325 |         "desc": "在线平面设计工具"
326 |       },
327 |       {
328 |         "text": "YASAI",
329 |         "url": "https://wangyasai.github.io/designtools.html",
330 |         "desc": "绝绝子艺术设计工具"
331 |       },
332 |       {
333 |         "text": "slidesgo",
334 |         "url": "https://slidesgo.com/theme/isometric-proposal",
335 |         "desc": "免费谷歌幻灯片主题和PowerPoint模板"
336 |       },
337 |       {
338 |         "text": "SVG背景图案",
339 |         "url": "https://cn.pattern.monster/",
340 |         "desc": "一个简单的重复性SVG图案在线生成器"
341 |       },
342 |       {
343 |         "text": "书法生成",
344 |         "url": "http://www.ziticq.com/shufa/",
345 |         "desc": "在线书法字体生成，AI矢量书法字体"
346 |       },
347 |       {
348 |         "text": "Text Editor",
349 |         "url": "https://texteditor.com/",
350 |         "desc": "在线生成艺术风格字符"
351 |       },
352 |       {
353 |         "text": "ShapeFactory",
354 |         "url": "https://shapefactory.co",
355 |         "desc": "LOGO、Duotone图片一键生成"
356 |       },
357 |       {
358 |         "text": "Squoosh",
359 |         "url": "https://squoosh.app/",
360 |         "desc": "超好用图片压缩网站"
361 |       },
362 |       {
363 |         "text": "Iconfont",
364 |         "url": "https://www.iconfont.cn/",
365 |         "desc": "阿里矢量图标库"
366 |       },
367 |       {
368 |         "text": "IconPark",
369 |         "url": "https://iconpark.oceanengine.com/"
370 |       },
371 |       {
372 |         "text": "Free Mesh Gradient",
373 |         "url": "https://products.ls.graphics/mesh-gradients/",
374 |         "icon": "https://assets-global.website-files.com/5bfd1275cc56e15ce750b18e/5bfd1275cc56e1460d50b19d_Logo%20Copy%202.svg",
375 |         "desc": "渐变色配色网站"
376 |       },
377 |       {
378 |         "text": "中国传统色",
379 |         "url": "http://www.2kil.com/",
380 |         "desc": "每个颜色都该有它好听的名字!"
381 |       },
382 |       {
383 |         "text": "CreativeMass",
384 |         "url": "https://creativemass.cn/",
385 |         "desc": "创意导航网站"
386 |       },
387 |       {
388 |         "text": "设计导航",
389 |         "url": "https://hao.shejidaren.com/",
390 |         "icon": "https://api.uomg.com/api/get.favicon?url=https://hao.shejidaren.com/",
391 |         "desc": "设计导航网站"
392 |       },
393 |       {
394 |         "text": "切九图",
395 |         "url": "https://lab.magiconch.com/v/sns-image"
396 |       },
397 |       {
398 |         "text": "油画转换",
399 |         "url": "https://fotosketcher.com/",
400 |         "desc": "用你的数码照片创造美丽的艺术作品"
401 |       },
402 |       {
403 |         "text": "Image Colorization",
404 |         "url": "https://deepai.org/machine-learning-model/colorizer",
405 |         "desc": "黑白照片上色"
406 |       },
407 |       {
408 |         "text": "Selfie2Anime",
409 |         "url": "https://selfie2anime.com/",
410 |         "desc": "动漫头像生成"
411 |       },
412 |       {
413 |         "text": "TOONME",
414 |         "url": "https://toonme.com/",
415 |         "desc": "卡通化你的脸"
416 |       },
417 |       {
418 |         "text": "Plot Parade",
419 |         "url": "https://plotparade.com/",
420 |         "desc": "好看的条形图生成"
421 |       },
422 |       {
423 |         "text": "Pixel Bubble",
424 |         "url": "https://pixelspeechbubble.com/",
425 |         "desc": "生成像素风对话框"
426 |       },
427 |       {
428 |         "text": "立绘生成",
429 |         "url": "https://resdiy.evkworld.cn/",
430 |         "icon": "https://api.uomg.com/api/get.favicon?url=https://resdiy.evkworld.cn/",
431 |         "desc": "自动生成立绘"
432 |       },
433 |       {
434 |         "text": "O'RLY封面工厂",
435 |         "url": "https://orly.nanmu.me/",
436 |         "desc": "生成动物书封面"
437 |       },
438 |       {
439 |         "text": "Greate Beautiful Posts",
440 |         "url": "https://poet.so/",
441 |         "desc": "生成好看的分享卡片"
442 |       },
443 |       {
444 |         "text": "Text Chat Animator",
445 |         "url": "https://chat-animator.com/",
446 |         "desc": "创建仿真对话消息并生成视频或 GIF 图"
447 |       },
448 |       {
449 |         "text": "PixelMe",
450 |         "url": "https://pixel-me.tokyo/en/",
451 |         "desc": "照片像素化工具"
452 |       },
453 |       {
454 |         "text": "Device Shots",
455 |         "url": "https://deviceshots.com/",
456 |         "desc": "多种设备套壳截图工具"
457 |       },
458 |       {
459 |         "text": "BrowserFrame",
460 |         "url": "https://browserframe.com/",
461 |         "desc": "浏览器套壳截图工具"
462 |       }
463 |     ]
464 |   },
465 |   {
466 |     "title": "工具合集",
467 |     "children": [
468 |       {
469 |         "text": "Tool 工具箱",
470 |         "url": "https://tool.lu/"
471 |       },
472 |       {
473 |         "text": "Miku 工具箱",
474 |         "url": "https://tools.miku.ac/"
475 |       },
476 |       {
477 |         "text": "孟坤工具箱",
478 |         "url": "http://tool.mkblog.cn/",
479 |         "desc": "LOGO 生成以及各种在线音乐工具等"
480 |       },
481 |       {
482 |         "text": "Text-Difference",
483 |         "url": "https://www.qianbo.com.cn/Tool/Text-Difference/",
484 |         "desc": "在线文本对比工具"
485 |       },
486 |       {
487 |         "text": "waifu2x",
488 |         "url": "http://waifu2x.udp.jp/",
489 |         "desc": "图片画质增强"
490 |       },
491 |       {
492 |         "text": "alltoall 格式转换",
493 |         "url": "https://www.alltoall.net/"
494 |       },
495 |       {
496 |         "text": "aconvert 格式转换",
497 |         "url": "https://www.aconvert.com/"
498 |       },
499 |       {
500 |         "text": "AirPortal 空投",
501 |         "url": "https://airportal.cn/",
502 |         "desc": "只要您的设备联网，您就可以通过它在任意系统、任意设备间传输文件"
503 |       },
504 |       {
505 |         "text": "AI音轨分离",
506 |         "url": "https://dango.ai/",
507 |         "desc": "借助我们音质至上的AI技术，您可以从任何音频中分离出伴奏，人声，和声，鼓点，贝斯等轨道"
508 |       },
509 |       {
510 |         "text": " LALAL.AI",
511 |         "url": "https://www.lalal.ai/",
512 |         "desc": "伴奏提取"
513 |       },
514 |       {
515 |         "text": "菜鸟工具",
516 |         "url": "https://c.runoob.com/",
517 |         "icon": "https://api.uomg.com/api/get.favicon?url=https://c.runoob.com/"
518 |       },
519 |       {
520 |         "text": "OSCHINA",
521 |         "url": "https://tool.oschina.net/"
522 |       },
523 |       {
524 |         "text": "脚本之家",
525 |         "url": "http://tools.jb51.net/"
526 |       },
527 |       {
528 |         "text": "W3Cschool",
529 |         "url": "https://123.w3cschool.cn/webtools"
530 |       }
531 |     ]
532 |   },
533 |   {
534 |     "title": "前端相关",
535 |     "children": [
536 |       {
537 |         "text": "VueJs",
538 |         "url": "https://cn.vuejs.org/"
539 |       },
540 |       {
541 |         "text": "Element-UI",
542 |         "url": "https://element-plus.gitee.io/zh-CN/"
543 |       },
544 |       {
545 |         "text": "View UI",
546 |         "url": "https://www.iviewui.com/"
547 |       },
548 |       {
549 |         "text": "Vant UI",
550 |         "url": "https://youzan.github.io/vant/#/zh-CN/"
551 |       },
552 |       {
553 |         "text": "React",
554 |         "url": "https://zh-hans.reactjs.org/"
555 |       },
556 |       {
557 |         "text": "Ant Design",
558 |         "url": "https://ant.design/"
559 |       },
560 |       {
561 |         "text": "React Bootstrap",
562 |         "url": "https://react-bootstrap.github.io/ "
563 |       },
564 |       {
565 |         "text": "MATERIAL-UI",
566 |         "url": "https://material-ui.com/"
567 |       },
568 |       {
569 |         "text": "Meditor.md",
570 |         "url": "https://pandao.github.io/editor.md/"
571 |       },
572 |       {
573 |         "text": "Swiper",
574 |         "url": "https://www.swiper.com.cn/"
575 |       },
576 |       {
577 |         "text": "Can I use",
578 |         "url": "https://caniuse.com/"
579 |       },
580 |       {
581 |         "text": "Apache ECharts",
582 |         "url": "https://echarts.apache.org/zh/"
583 |       }
584 |     ]
585 |   },
586 |   {
587 |     "title": "JavaScript相关",
588 |     "children": [
589 |       {
590 |         "text": "Lodash",
591 |         "url": "https://www.lodashjs.com/"
592 |       },
593 |       {
594 |         "text": "Day.js",
595 |         "url": "https://dayjs.fenxianglu.cn/"
596 |       },
597 |       {
598 |         "text": "timeago.js",
599 |         "url": "https://github.com/hustcc/timeago.js"
600 |       },
601 |       {
602 |         "text": "validator.js",
603 |         "url": "https://github.com/validatorjs/validator.js"
604 |       },
605 |       {
606 |         "text": "mescroll.js",
607 |         "url": "http://www.mescroll.com/api.html"
608 |       },
609 |       {
610 |         "text": "echarts",
611 |         "url": "https://echarts.apache.org/zh/index.html"
612 |       }
613 |     ]
614 |   },
615 |   {
616 |     "title": "CSS相关",
617 |     "children": [
618 |       {
619 |         "text": "CSS ICON",
620 |         "url": "https://cssicon.space/"
621 |       },
622 |       {
623 |         "text": "CSS.gg",
624 |         "url": "https://css.gg/",
625 |         "desc": "700+用CSS做的图标"
626 |       },
627 |       {
628 |         "text": "Animate.css",
629 |         "url": "https://animate.style/"
630 |       },
631 |       {
632 |         "text": "Font Awesome Animation",
633 |         "url": "https://l-lin.github.io/font-awesome-animation/"
634 |       },
635 |       {
636 |         "text": "Image Effects with CSS",
637 |         "url": "https://bennettfeely.com/image-effects/"
638 |       },
639 |       {
640 |         "text": "CSS triangle generator",
641 |         "url": "http://apps.eky.hk/css-triangle-generator/"
642 |       },
643 |       {
644 |         "text": "SASS to CSS",
645 |         "url": "https://www.sassmeister.com/"
646 |       }
647 |     ]
648 |   },
649 |   {
650 |     "title": "Vue轮子",
651 |     "children": [
652 |       {
653 |         "text": "Vue-draggable",
654 |         "url": "https://www.itxst.com/vue-draggable/tutorial.html",
655 |         "desc": "Vue拖拽轮子"
656 |       },
657 |       {
658 |         "text": "Vue-qr",
659 |         "url": "https://www.npmjs.com/package/vue-qr"
660 |       },
661 |       {
662 |         "text": "Vue-cropper",
663 |         "url": "https://github.com/xyxiao001/vue-cropper"
664 |       },
665 |       {
666 |         "text": "Vue-lazyload",
667 |         "url": "https://www.npmjs.com/package/vue-lazyload"
668 |       },
669 |       {
670 |         "text": "Vue-simple-upload",
671 |         "url": "https://github.com/saivarunk/vue-simple-upload"
672 |       },
673 |       {
674 |         "text": "Vxe-table",
675 |         "url": "https://xuliangzhan_admin.gitee.io/vxe-table",
676 |         "icon": "https://xuliangzhan_admin.gitee.io/vxe-table/logo.png"
677 |       },
678 |       {
679 |         "text": "Vuesax",
680 |         "url": "https://vuesax.com/",
681 |         "desc": "Vue开源组件库"
682 |       }
683 |     ]
684 |   },
685 |   {
686 |     "title": "冷门网站",
687 |     "children": [
688 |       {
689 |         "text": "中国古籍保护网",
690 |         "url": "http://www.nlc.cn/pcab/zy/zhgj_zyk/",
691 |         "desc": "看古籍的"
692 |       },
693 |       {
694 |         "text": "behind the name",
695 |         "url": "https://www.behindthename.com/",
696 |         "desc": "名字的起源和历史"
697 |       },
698 |       {
699 |         "text": "鲁迅说过吗?",
700 |         "url": "http://www.luxunmuseum.com.cn/cx/",
701 |         "icon": "https://api.uomg.com/api/get.favicon?url=http://www.luxunmuseum.com.cn/cx/",
702 |         "desc": "我确实说过这句话——鲁迅"
703 |       },
704 |       {
705 |         "text": "海の見える駅を探す",
706 |         "url": "https://seaside-station.com/region/hokkaido/",
707 |         "desc": "记录日本靠海的车站"
708 |       }
709 |     ]
710 |   }
711 | ]
712 | 


--------------------------------------------------------------------------------