<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/">
    <channel>
        <title>VIXCITY BLOG</title>
        <link>https://blog.vixcitycc.top//</link>
        <description>我的小破博客</description>
        <lastBuildDate>Fri, 23 May 2025 01:51:34 GMT</lastBuildDate>
        <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
        <generator>https://github.com/jpmonette/feed</generator>
        <language>zh-CN</language>
        <copyright>All rights reserved 2025, Vixcity</copyright>
        <item>
            <title><![CDATA[【随笔】随笔小记（一）]]></title>
            <link>https://blog.vixcitycc.top//article/偶感随笔，轻微小记（一）</link>
            <guid>https://blog.vixcitycc.top//article/偶感随笔，轻微小记（一）</guid>
            <pubDate>Wed, 03 May 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[偶感随笔，轻微小记（一）]]></description>
            <content:encoded><![CDATA[<div id="notion-article" class="mx-auto overflow-hidden "><main class="notion light-mode notion-page notion-block-6fb43175bed84ece80578135d694658f"><div class="notion-viewport"></div><div class="notion-collection-page-properties"></div><h3 class="notion-h notion-h2 notion-h-indent-0 notion-block-5bc560842b4945c3be37d2d0652c9d60" data-id="5bc560842b4945c3be37d2d0652c9d60"><span><div id="5bc560842b4945c3be37d2d0652c9d60" class="notion-header-anchor"></div><a class="notion-hash-link" href="#5bc560842b4945c3be37d2d0652c9d60" title="小记"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title">小记</span></span></h3><div class="notion-text notion-block-fcd40f4134934730a5ad4e5ed2577c2f">我们终是人世无根无据的小草，在历史的长河中，终是比不过耀眼的灿灿繁星，只得以求其温饱，苟苟渡活</div><div class="notion-blank notion-block-f176fc30311945cbb9bc127d450a3e16"> </div><div class="notion-text notion-block-6ecf05b64cb44c16a9b1afe8705b933d">明明这世界那么美好，但是我却觉得莫名的心累，一种精神被掏空的感觉，不想动弹，也不想想事情，陷入了深深的自我内耗之中，也很疑惑也很不解</div><div class="notion-blank notion-block-f1899153534345e8a3173ee148827327"> </div><div class="notion-text notion-block-ca60d5ed795b4cd18ac8d8b7f9f4d31e">《归乡有感》</div><div class="notion-text notion-block-7bd036f0a8674faba354c12dcc3e11eb">月落了无痕，浅苔入梦真。</div><div class="notion-text notion-block-628e6cd4861f48499fdc8b92ee24e30f">归乡尝旧酒，游子思良人。</div><div class="notion-blank notion-block-d897c93a7c7f47ed9d274c4a17f34089"> </div><div class="notion-text notion-block-f9c9d67acf0047afa8856464239e063d">《酒》</div><div class="notion-text notion-block-831406083af242b885b0cfc39f3842de">量少凭需饮，吾心当自明</div><div class="notion-blank notion-block-dd2f2449827c4445b4fb441785835065"> </div><div class="notion-text notion-block-929312a4557d4d8d838308c62f09d12c">《雪》</div><div class="notion-text notion-block-7ee7db47c88a46df8406d4d4a5675975">雪拥天地色，穿庭止飞花</div><div class="notion-text notion-block-db45b54c8d22439c87d254f64e3afa89">AI3.0、闪、涵、谢</div><div class="notion-text notion-block-6629f0803c264bae9fcb3c490b1fbc4b">雪拥天地色，穿庭落飞花</div><div class="notion-text notion-block-9f1b003674154743be339681e47b3b10">👂、瑞、杰、AI3.5、刘、文心一言</div><div class="notion-text notion-block-0209e45594aa481b9d294e3f05762163">雪拥天地色，穿庭恰飞花</div><div class="notion-text notion-block-283923eab5c542e9a8ee1b686b99578e">诚</div><div class="notion-blank notion-block-3ab86e2bbe8346a8bbc5481d0a8317c5"> </div><div class="notion-text notion-block-eae391d498e341c6a396ad47943bde5d">《春日·愁》</div><div class="notion-text notion-block-3e10daa8fea8475b9ae412005b3ade56">轻风拂翠叶，思绪舞云裳。</div><div class="notion-text notion-block-dab5dd58fd9d48bebcd0eaf03f9abdc8">愁事撩春草，鸟鸣入夜长。</div><div class="notion-text notion-block-32ef47b6cef24621b17e545e3d57d085">星河遥灿灿，月色映华窗。</div><div class="notion-text notion-block-efdca7b82be8403b947a4e9692a4f8ee">独坐思乡人，眼中泪两行。</div><div class="notion-blank notion-block-fa71c4256cbe4e68bcc247b00ce0e89f"> </div><div class="notion-text notion-block-97c6282724fa4189bddc0402e94d1cec">《春日·喜》</div><div class="notion-text notion-block-c0351d9d0a8a485c9446ce47ad4acb3f">轻风拂翠叶，思绪舞云裳。</div><div class="notion-text notion-block-d34a71b381e6462b888eb36e8939127f">喜事撩春草，鸟鸣入夜忙。</div><div class="notion-text notion-block-5be2a18851a948f3aed76c534fe8d2aa">星河遥灿灿，月色映华窗。</div><div class="notion-text notion-block-b5112e6aabc14e9d95453779da749bb1">独坐思佳人，眼中笑意长。</div><div class="notion-blank notion-block-c873bce48c6843d4a5c0a6082d9f1124"> </div><div class="notion-text notion-block-0cdccff173914c43a4146d90839293be">《白露》</div><div class="notion-text notion-block-50bdcb34dda3487c873b94fa7eed4095">秋前寸草凉，入岁满金黄。</div><div class="notion-text notion-block-4ec52f0a4f244133a30b718a4e290a6e">残日留余热，月圆叹落霜。</div><div class="notion-text notion-block-3919897e5a914084bd323fc0c38a2dbe">轻舟摇碧水，归客在他乡。</div><div class="notion-text notion-block-26721795b17e4f279d6b5a41aa0c12bb">惜有凌云志，无为愁断肠。</div><div class="notion-blank notion-block-a3fc3b192a3c403995ab87a8c2b0dbad"> </div><div class="notion-text notion-block-152f0c8387584e6384325914f5e8d37d">《冬夜》</div><div class="notion-text notion-block-e621107eafab4d7780eae3140e40cf47">风北撼窗棂，夜寒将自行。</div><div class="notion-text notion-block-20c7a02ba5c541f6bc085ab46b6ea135">无声听雪落，有意使白停。</div><div class="notion-text notion-block-13b2839e5beb46049291c6204a0e03ae">黯淡星河寂，长空弄月影。</div><div class="notion-text notion-block-a5186d3348e6475fac335d1d269c12e7">孤思天漫漫，独虑话冥冥。</div><div class="notion-blank notion-block-1c2bd1a94ec743898ceff07f4f87c600"> </div><div class="notion-text notion-block-85f57a2412ea408eb8ff2e7ec44c16f7">《岁月行》</div><div class="notion-text notion-block-d2e6fa81bb924d68a0c9c388dce58b53">不知岁月几多愁，雪落青山变白头。</div><div class="notion-text notion-block-2eea21abaebd42049f3a4adc1778eb91">天高雨走星云阔，海携江月泛花舟。</div><div class="notion-text notion-block-37e29bfcaa774f6c970ba256fe34a0a8">恣意人生遥自在，小船轻骑水长流。</div><div class="notion-text notion-block-bb3f1d3980a24f64b7c8a50b86f84bbf">梦醒再无轻快马，为爱更登九重楼。</div><div class="notion-blank notion-block-435156c65acc4d88bab3379be3549f38"> </div><div class="notion-text notion-block-91f9a675658b4411ba75baa3e5d2bc10">《乡情》</div><div class="notion-text notion-block-ea26c2c7b34e4885a527739425c22d91">远行千里路飘魂，近水万方多走神。</div><div class="notion-text notion-block-55c25b0e611a43ac90f180300b37f76a">每念思乡情更切，悠悠不敢唤来人。</div><div class="notion-blank notion-block-846971b528cf4ade96c64ae1d3fcf2a4"> </div><div class="notion-text notion-block-9c997d89660a4364807e070952b43341">《江南春》</div><div class="notion-text notion-block-6116df963ad1453f86e6169615bf2b6b">江南烟雨家，波漾映晚霞。</div><div class="notion-text notion-block-fd3ccaf9f42d4e42bfacb3ab840bedcb">风舞清波起，千帆随浪斜。</div><div class="notion-text notion-block-876dccda5cfa42488e4cc3456dd45e30">桃花争艳蕊，柳树惹寒鸦。</div><div class="notion-text notion-block-d5db7d4c977b4858aeb146c07eac222f">心悠方远梦，诗写故乡花。</div><div class="notion-blank notion-block-34683f72337249b893058857922a1245"> </div><div class="notion-text notion-block-aaa8d9ea8ac24a2685b83634c7910cdc">《中秋舒感》</div><div class="notion-text notion-block-eea8d7a1c12b4539b0e0a2675c82b795">某无惊世才，细笔写尘埃。</div><div class="notion-text notion-block-e50b3ec19d10462a95a76f97fee03d2b">天下国家事，记书用以摘。</div><div class="notion-text notion-block-07277574eada4b5ba1c8d0a3e5d4d0cd">时年秋夜月，共庆为将来。</div><div class="notion-text notion-block-d1275718ba344c4c8c0f6ce42150a693">渺渺凉风度，悠悠舒热怀。</div><div class="notion-blank notion-block-ca06b7c693304dde922876d4d1b66e24"> </div><div class="notion-text notion-block-ea46b96fd673480dbe6e5cdd196fd04c">《秋至》</div><div class="notion-text notion-block-b7346b84440c486f842ccf9a4903857f">不闻高挂已中秋，月色入河伴水流。</div><div class="notion-text notion-block-dd94f10609be449abf82ef1254d628bf">寒寒静夜白霜在，寂寂空寻鸟鸣纠。</div><div class="notion-text notion-block-dfe54a1864fd426d81386ddb06a1abcf">小有诗情随画意，长惜别去生哀愁。</div><div class="notion-text notion-block-27427bed18344284a78c853a568657d6">当年遥望凌云志，不教无才以入侯。</div><div class="notion-blank notion-block-dcaa6432a4ae473fbd150e9da6c1fb61"> </div><div class="notion-text notion-block-b28434e1162e4770ba8461c5d09c522c">《秋思》</div><div class="notion-text notion-block-b2cfc4b27549455b99492e4e41b000ef">金桂忽觉秋已中，寒凉入月水光同。</div><div class="notion-text notion-block-8f1d19689063481b928cae42ec94f5b4">相思提笔书黑夜，未晓鱼白天色东。</div><div class="notion-blank notion-block-9769ce6ec9ad4f50b452d8a4660abafe"> </div><div class="notion-text notion-block-ed93991694574ce1bbe9aa17913249df">《午思》</div><div class="notion-text notion-block-eb49f3dd7c944342aa46de0d2ee89cd6">一卷题试官相封，平步青云鸡犬升。</div><div class="notion-text notion-block-ecd417c473614280b5d22b590446b730">共上九重星伴月，无消听遍黄土声。</div><div class="notion-blank notion-block-bae57edff9404bdfa07882e7d797bf37"> </div><div class="notion-text notion-block-1c0269bc62924e4597a2b6c5d3f36f73">肯教千金还玉骨，无需游子唤良人</div><div class="notion-blank notion-block-b76da90cd56b463aabc53fac9cecb7ea"> </div><div class="notion-text notion-block-5454dec8b01747738cb3696074106924">《观夜有感》</div><div class="notion-text notion-block-d016b90e10374fe29c272ee4aa2cf57d">灯花折桂下，海浪褪轻纱。</div><div class="notion-text notion-block-eab13ca7586e4b3bb79810e1e49d79f9">一杯西夜月，半盏苦参茶。</div><div class="notion-blank notion-block-0cdfea02f87c43fd837cf14c6f314ba5"> </div><div class="notion-text notion-block-1faa8c1ce98648819b0b8b15d08debc3">《江畔》</div><div class="notion-text notion-block-21a5fd8aff5a4644ad33cf557a200b95">登步悠然望远烟，青山翠影落江前。</div><div class="notion-text notion-block-2501675d8d044e42ba3dec0c3307c8d0">飘飘思绪随风去，点点心思随夜闲。</div><div class="notion-text notion-block-b294fb64c8a443aa85aa4f5080a24872">海阔无需谁伴语，月高自有星共眠。</div><div class="notion-text notion-block-ab5d9fef60144c4a8b76c4caa574811c">凭栏遥想天上意，自渡小舟云水间。</div><div class="notion-blank notion-block-ae8dc6130bb44b218fd783faaee9816b"> </div><div class="notion-text notion-block-b42c41b8ff1b47aeaecaaede53da76e8">《父书至感怀思乡》</div><div class="notion-text notion-block-b68888f7a6d9414b927bd54325952e2f">平海无风起波澜，家书几字泪盘桓。</div><div class="notion-text notion-block-098a5b90001a4049b5bfc8f86bbb55d4">初八癸卯七夕后，仍念归乡思满船。</div><div class="notion-blank notion-block-3f61efbe5a834ef8b0f348591dd3c585"> </div><div class="notion-text notion-block-1ac5aabf5e6f4030b3a7bbdc89b1051b">横峰飞寸雨，庭树落黄花</div><div class="notion-text notion-block-05dfee5162d44ae9a33f6e58fbc66958">👂、AI3.5、谢、文心一言</div><div class="notion-text notion-block-d45e9eb6d01a4a329335fa1db4cf6e0c">横峰留寸雨，庭树葬黄花</div><div class="notion-text notion-block-a652bc45831944d8b9bcb67725f3b9f6">杰、瑞、闪、AI3.0、刘</div><div class="notion-text notion-block-ca5d513d146a48d6993d2dff62e011ad">横峰留寸雨，庭树送黄花</div><div class="notion-text notion-block-8887b0d8e3a24281b68d31797fc3a8d2">杰、诚、涵</div><div class="notion-blank notion-block-1588db726cfe4279af83f8838e1c116e"> </div><div class="notion-text notion-block-17cce665c7bf42198562060ec459d01e">《少年·其一》</div><div class="notion-text notion-block-061338e6be77454f996641d1352562e0">少年曾有志凌云，踏步向前逐日寻。</div><div class="notion-text notion-block-267118bd645a42f88a1e20b2dd085c86">坎坷何需泥泞路，千金散尽终成氲</div><div class="notion-blank notion-block-5212b89cbd4549b588d9f85daa63d11b"> </div><div class="notion-text notion-block-aaaf38e096d142e181fde3be856d67e2">《少年·其二》</div><div class="notion-text notion-block-25bc1441305943dc97b3cc5fc1a6839a">少年也有志凌云，无胆无金无处寻。</div><div class="notion-text notion-block-1a1ed999c3ba49c6a39786a91072a9da">也曾幻想今朝日，潇洒人间花下裙。</div><div class="notion-blank notion-block-d76f95f4bf8d4abc8e5328c0bd6de2a5"> </div><div class="notion-text notion-block-26cd408a61294fefbe44c7267e9d5bcf">《东极》</div><div class="notion-text notion-block-4b566590fdad4c86bca6240e0ec48323">沧海浪涛劲，岸边孤塔迷。</div><div class="notion-text notion-block-2ccaeab582cc446bbdca5ec547145ce5">浮云遥望去，午夜梦东极。</div><div class="notion-blank notion-block-75ed6fdfdf5b43678b333564da866fe8"> </div><div class="notion-text notion-block-31d372ce1da24f9987e8da2ccb455d86">《岁月与东极》</div><div class="notion-text notion-block-2158a9b8e15e4e8c9f1d34666a4a0f91">光阴半晌虚华急，一度人生观复奇。</div><div class="notion-text notion-block-08297714ae6f44498e6087220ab8cbe1">曾几浮云遥望去，又回午夜梦东极。</div><div class="notion-blank notion-block-a4da57cd61b3428cbbb918bf06ccf375"> </div><div class="notion-text notion-block-b96caf46650d46e5986c8d1f42089d4f">《江南》</div><div class="notion-text notion-block-fb398446f5ca4227855f6f463ee2c800">晓看繁花春色晚，碧波泛处真江南。</div><div class="notion-text notion-block-1987de0cd73a4874b8c8fa2489aa395e">轻舟横渡野桥外，侧卧船中听雨眠。</div><div class="notion-blank notion-block-5e51a5b71fb5401985ff2354070a703b"> </div><div class="notion-text notion-block-3bb7a9a4037c4de3a912efaf998f5a4b">折桂落蟾宫</div><div class="notion-blank notion-block-aa2ec9bbd098468e8277eba154994349"> </div><div class="notion-text notion-block-b7054d5f87774587933db07a5d940952">最羡江南烟雨色，零落花舟雕泛波</div><div class="notion-text notion-block-97cfa52f66114902a21200c91ab7af62">杰、王、文心一言</div><div class="notion-text notion-block-9840ea2cf06244278d352c48a2cb9990">最羡江南烟雨色，清波江上惹人眠</div><div class="notion-text notion-block-23211949e0fe43e1b597bd745df7a861">谢、👂</div><div class="notion-blank notion-block-baab4a319df14b4db80aac3e34399fa0"> </div><div class="notion-text notion-block-ea94e90c46bb45118163b1441fa772df">《无题》</div><div class="notion-text notion-block-2eab558a64f74ef288512ea05dddf56d">高飞云影戏寒鸦，和寡曲高细雨狭。</div><div class="notion-text notion-block-48d865bba55a454f915d789fa84520d8">最羡江南烟雨色，无言已是老人家。</div><div class="notion-blank notion-block-f38809290c704fe19ea914f87bd6940a"> </div><div class="notion-text notion-block-3f6aa7cf4b874adf825cd5be9212f7e1">《月星云雨》</div><div class="notion-text notion-block-ad5dcc3be6a04818a8a28b397f02d06e">圆影缀空庭，稀星随片岭。</div><div class="notion-text notion-block-5af5640e7e7a4174a9f2f66aaecfce73">流云点素翠，落雨闪银明。</div><div class="notion-text notion-block-8941669698724732920ddb5043abffbe">折桂留弯月，绛河入汉清。</div><div class="notion-text notion-block-c633e714234848d0a1cfd21e21ab8605">曾阴拥碧气，苦雨化甘霖。</div><div class="notion-blank notion-block-be7e25e349ad43b481d38bffe08cb993"> </div><div class="notion-text notion-block-23e859d336ba40f485efa20515fa06ca">《江城子》</div><div class="notion-text notion-block-0faabc86aecb4a0b9a096c3528b1106b">相思日日最难熬，双方焦，两泪瞧。风起银河，魂断鹊归桥。</div><div class="notion-text notion-block-6ef3fa63f5ed432ea37d945ee8f145db">杯酒朝朝终梦处，情苦处，心如潮。</div><div class="notion-text notion-block-ed840b65984548ada5616c2492bb06a4">滴雨落落断天牢，路无逃，岁添高。白发又出，绿蚁宰羊羔。</div><div class="notion-text notion-block-7f17eba2a2b84105a4230257a14d5b83">此月年年归此地，三九夜，上松梢。</div><div class="notion-blank notion-block-6997caaa616d48afaffc9dd9ca7e4d8e"> </div><div class="notion-text notion-block-d545e1d01a0d4e319929cf794eee86f2">《长相思·晴一遭》</div><div class="notion-text notion-block-ee536d59594c4858bb72a7ed4b20fcb1">晴一遭，雨一遭，晴雨潇潇怎可逃，双眸坐地瞧。</div><div class="notion-text notion-block-d2e357812237432c8a4f575c13c722f7">岁也高，年也高，年岁遥遥呼又号，浮萍望柳梢。</div><div class="notion-blank notion-block-c3c86cd38461438ab5f57a9f228a8188"> </div><div class="notion-text notion-block-e19b66ebf932408db5d948760789701c">《志止》</div><div class="notion-text notion-block-a89d0589418744f99e2e3b9219cd82bc">万缕青丝千里愁，肯教杯雪入白头。</div><div class="notion-text notion-block-524df1622d214c0985a628b1992e0b83">经年累月山河在，草木城春寸水流。</div><div class="notion-text notion-block-637fae84181e47bea843c168038ec68b">一纸唏嘘无奈尽，残垣断壁又将秋。</div><div class="notion-text notion-block-41c80030803646479ef253d7c0da88fa">少时昔日梦为马，今岁再无雄志留。</div><div class="notion-blank notion-block-ece565fd518946358986b6dcc4a63a51"> </div><div class="notion-text notion-block-0d61a6cdba784fbb8eb286721fdbc946">《秋悲》</div><div class="notion-text notion-block-83fd8804edd542fd83baf3ccbe681086">何以巧思梳我愁，牵绵心事浸寂秋。</div><div class="notion-text notion-block-401e1a5ff6564e1298bf4021f5ef2b88">抚琴弹断念思弦，萦绕情丝红花洲。</div><div class="notion-text notion-block-a01106fd6c53482e976c657fca74a6fa">岁月匆匆如昼过，离别满目入烟收。</div><div class="notion-text notion-block-907f7d6e854b459ca15ccc074b78a560">寒风萧瑟湿衣袖，苦苦凄然独泛舟。</div><div class="notion-blank notion-block-ced075d4498740a09fc1511376d023a1"> </div><div class="notion-text notion-block-90693f1340844de289fd1f0f3af68ddf">《巧思》</div><div class="notion-text notion-block-3b826df6148d422f9c7543f5055336e7">何以巧思梳我愁，悲伤纵有亦停休。</div><div class="notion-text notion-block-e3a3aa79150643ee9651139039ac9e09">愿君浅聆我心语，长河岁月向东流。</div><div class="notion-blank notion-block-bbc1f77f0f7748ddae996bec190b1474"> </div><div class="notion-text notion-block-c0d6295dc9b046d9a40dbfad67d8e3dd">《雨夜有感》</div><div class="notion-text notion-block-a78783fdae7049d193941a7ba70635ed">西户夜无尽，东窗昼渐光。</div><div class="notion-text notion-block-140976fd6ce44f24be2e84b6863bb74e">暗香随雨落，思绪绕身旁。</div><div class="notion-text notion-block-ff6248470d834835b03f2fa2f021db97">点点斜丝细，滴滴浅入房。</div><div class="notion-text notion-block-2336199761a7407e881a1a560c54409d">宁和于夜幕，沐浴散清光。

《雨夜有感》</div><div class="notion-text notion-block-e60b42ebe2c14d94a62975578e8582e0">西户夜无尽，东窗昼渐光。</div><div class="notion-text notion-block-6139c08657ca49f2858f9efd8def8e4a">暗香随雨落，思绪绕身旁。</div><div class="notion-text notion-block-37c02f4724da43389b74d3aac03e55d0">点点斜丝细，滴滴入愁肠。</div><div class="notion-text notion-block-abfa0ce312784b558720a481f6d2a2fe">宁和于夜幕，沐浴散清光。</div><div class="notion-blank notion-block-35c7518c9c9b4db5871e3eeaa6b70f40"> </div><div class="notion-text notion-block-82ea959af586409f9c2dfb07dbef2178">《急雨》</div><div class="notion-text notion-block-e29e6987d64a4b8cb5d172e07945e8e1">清浅路倏滑，黑云流肃杀。</div><div class="notion-text notion-block-bbb848cbe9c14577a36e92733f3a3db6">疾风湿落叶，骤雨落飞花。</div><div class="notion-text notion-block-645236b3e64c4d54946f36756b348e55">江岸垂纶客，伞中躲粗纱。</div><div class="notion-text notion-block-7361bc5689f94973a89315fb73735669">逍遥好自在，粗布伴桑麻。</div><div class="notion-blank notion-block-616211b8beb6476896b967371bdf9a96"> </div><div class="notion-text notion-block-a8f1746a06414b528cc2eddc96fd5cd1">《雨》</div><div class="notion-text notion-block-82775d94aa6040ab8f78cb7de1e170cc">落雨飘飘无处逃，</div><div class="notion-text notion-block-c44807f9a3ac4822bd39c59adb281014">多年叹叹岁增高。</div><div class="notion-text notion-block-c42bd6426c304db8af45b16e043695ab">晴空长日凌云志，</div><div class="notion-text notion-block-0bad960a26a14373b6f4f751ec087c44">无此涂烦心更糟。</div><div class="notion-blank notion-block-e7f4d265a55b489a9c40c8e0a0272c6e"> </div><div class="notion-text notion-block-bdc3f3479f104705bcf433b9338b82eb">《雨山中》</div><div class="notion-text notion-block-c9246deb3ac8498299fa7aeeb3709e6a">醉君诗意化成书，碧翠山间路行独。</div><div class="notion-text notion-block-e7a3c88ea732438f803eb0106eb4652d">但此逍遥常自在，春秋几载未殊途。</div><div class="notion-text notion-block-d4a589156a7c4d1e8df22cea5488f2d4">踏经人世寻真意，女子恍如夜明珠。</div><div class="notion-text notion-block-0a96995915ce4ee9a1ec0fbb9516d6b6">望望有朝觅尔步，潇潇排解吾心孤。</div><div class="notion-blank notion-block-b2eeaf355f0c4a55a2ceb603358ff069"> </div><div class="notion-text notion-block-ee8256c5ee5a4daab83b3c5a103e1798">《AI》</div><div class="notion-text notion-block-99ba3e90767a4c279fe5a7d03e62b713">鸟儿归巢落霞晚，水面波光倒映天。</div><div class="notion-text notion-block-62c4fc12cb0f4eb1aab0abc90cba3eac">放浪随波心自在，舟影轻摇入梦田。</div><div class="notion-blank notion-block-d18ecbfc5e38428fa3895167eb427f6d"> </div><div class="notion-text notion-block-69a98b78f2364471ae008bde88a06820">船中倦眠听雨声</div><div class="notion-blank notion-block-d5eb29f9dcf14da79cfa38732d32a110"> </div><div class="notion-text notion-block-880966e2b8ae4a52a4ae9d20fe279475">《AI》</div><div class="notion-text notion-block-b7c98bbca5ac4d3c8a5b40f6376552ab">梦境缱绻情难眠，倚船红烛映江南。</div><div class="notion-text notion-block-c1522f3b43bf4ef0b47f51c97cc576c2">悠然岁月如流水，心在清波荡漾间。</div><div class="notion-blank notion-block-36b4b9f04c8c4071b02828447b57301f"> </div><div class="notion-text notion-block-9c009f2d0bcb46cbb0c374ee89eb3bdb">《AI》</div><div class="notion-text notion-block-f577d159bc3343bca6f6884321160f93">凌晨阴雨漫天空，悲怆心声润青松。</div><div class="notion-text notion-block-a78bfa2c3c5d4eef92103cf1bf4b5fa3">霏霏白雾湿花朵，滴落情丝摇素风。</div><div class="notion-blank notion-block-1b51b3fefa838042bb4ac389c23f1493"> </div><div class="notion-text notion-block-1b51b3fefa8380bc9bbbfa213a8a3e49">《归望》</div><div class="notion-text notion-block-1b51b3fefa83802e8debc6291094fbcc">三山点点碧空垂，双目岑岑望念归。</div><div class="notion-text notion-block-1b51b3fefa8380b98dfad6cdbaa52be5">墨鉴苔痕浅草绿，砚台空望落花随。</div><div class="notion-text notion-block-1b51b3fefa83807cbaa5fce5a82e5f25">雨斜横亘苦冬后，晴伴残阳虹隙催。</div><div class="notion-text notion-block-1b51b3fefa8380a1952af68fcf73ad09">终了暖春前野现，翩跹柳叶焕新髓。</div><div class="notion-blank notion-block-1b51b3fefa838033b35fd2f5302dd000"> </div><div class="notion-text notion-block-1b51b3fefa838096b6ccc069a49b4bd9">《梦》</div><div class="notion-text notion-block-1b51b3fefa8380459dd1f846d1490ba8">蓝绸一缎舞霓裳, 玉树银花暗雪香
苦梦长焦千百度, 终归入手送红妆
灼灼粉翠忽来早, 夭夭桃嫩需还乡
遮天铁甲金乌蔽, 一扫风清来日长</div><div class="notion-blank notion-block-1f11b3fefa8380c8b076f313eaa83798"> </div><div class="notion-text notion-block-1f11b3fefa83806e9abcf19c6bb60680">《尘游》</div><div class="notion-text notion-block-1f11b3fefa8380a5a23ac9dd8423f264">苍苍岁月苍苍留, 苟苟人间苟苟秋
最是多情烦恼事, 洒脱遥羡渡江舟
阴晴玉桂浑不定, 晨暮橘黄未可收
愿过尘世终却恼, 蜉蝣一度需何愁</div><div class="notion-blank notion-block-1f11b3fefa83809cbbbbe11a2ab4474a"> </div><div class="notion-text notion-block-1f11b3fefa838062a651d7741144b552">《绿皮》</div><div class="notion-text notion-block-1f11b3fefa83808d8f0be9d61767911c">匆匆撇过树的间隙
窥见浮华城市的一隅
踏进火车的绿皮
嗅着岁月的痕迹
耳边传来的是聒噪
心底是悄悄地沉寂
鲜花闪烁着无息
绿草生长遍地
跨过一座城
惊觉还想
在茵茵绿草处
安静的归西</div><div class="notion-blank notion-block-1f11b3fefa83803f9253d5eba88d2ee3"> </div><div class="notion-text notion-block-1f11b3fefa83805c8e4cee79328ca948">《枇杷》</div><div class="notion-text notion-block-1f11b3fefa838057a111d6e673ec15a7">枇杷悄悄地熟了
结出了一颗颗
金黄的葡萄
在枝桠上微微荡漾
泛起波澜
清风抚过她的发
她在咯咯的偷笑
雨水轻按她的肩
她于无声中泪垂
此为
枇杷的悄悄
无声的喧嚣</div><div class="notion-blank notion-block-713497289fd7421c9f5765185466a384"> </div><div class="notion-text notion-block-6df474a870c245d4ac89a7f17b2373e4">长夜高歌浓雾起
短朝清唱浅云稀</div><div class="notion-blank notion-block-1b51b3fefa83806aaf44e210c9585130"> </div><div class="notion-text notion-block-1b51b3fefa838080ae1ae29b808ae8ec">残虹更笑花无力，云海难寻渡世舟</div><div class="notion-blank notion-block-1b51b3fefa8380f78c66d8b3e0e9d793"> </div><div class="notion-text notion-block-1b51b3fefa8380368b6bc2bf73f4801f">浅望遥遥春草色，无端寞寞落花声</div><div class="notion-blank notion-block-1b51b3fefa8380b9be85f9927a1f16e6"> </div><div class="notion-text notion-block-1b51b3fefa838012b444d4aaf469ea78">残阳暮色孤城外, 几度春秋几度哀</div><div class="notion-blank notion-block-f48a063d2a094160b7ebe92235d70435"> </div><div class="notion-text notion-block-baa25f6003624308a8282b71a917c878">感悟伤怀，悲春伤秋</div><div class="notion-blank notion-block-678ad57d77fe4fa58e0bbf3b333749f9"> </div><div class="notion-text notion-block-75490c8119f543c08e1e9eb0d404e693">文采逸兴，思绪横飞</div><div class="notion-text notion-block-2a36d27849694d7a8826a76275bfa308">文采逸性，思绪横飞</div><div class="notion-text notion-block-f66e5e4dcf774255b015016e59f358ef">文采溢兴，思绪横飞</div><div class="notion-blank notion-block-5b98d190973b4878a96793ab8b678e37"> </div><div class="notion-text notion-block-38818b2f0c1045279f6fb82224b088e0">世界，请你好好的温柔的对待每一个人，不要那么粗鲁</div><div class="notion-text notion-block-18606086f1d74c0ba6457d022efde958">我好迷恋这个美丽的世界啊</div><div class="notion-text notion-block-de286bb4260d4c0f85f01b98dc073519">好喜欢这个浮世的浮华游戏</div><div class="notion-text notion-block-20a9c993178d4c8894b6b05848669c5a">好迷恋梦境，不想出来，梦里有竹林，冰川，火山，海浪</div><div class="notion-text notion-block-e5bb5a9e42884df1985185f1b1da4dc6">我就可以放肆大醉一场了</div><div class="notion-blank notion-block-393722c4b3ea4a7baa149f444613ce99"> </div><div class="notion-text notion-block-911b93415fdd44c9b534933e67bc9e6e">为啥不能和阿姨坐在同一条船上</div><div class="notion-text notion-block-49c0cb25ad9d4a6ba6fdd59df565b53a">因为友谊的小船说翻就翻</div><div class="notion-blank notion-block-00c5c7e3ed62475aa5ea662caf264512"> </div><div class="notion-text notion-block-8804796d21c448da8265e6018f8e09dc">这个世界犹如一幅宏伟的画卷，绚烂多彩，美不胜收。然而，我们常常被琐碎的生活所压迫，感到疲惫不堪。我们仿佛是历史长河中的一株小草，渺小而无助。即便我们仰望天空，看到繁星闪烁，也只得以求得温饱，苟苟度日。然而，我们不能放弃追求更高的理想，不能停下脚步。我们应该像那些闪耀的星辰一样，散发出自己的光芒，不断前行，不断超越。虽然我们只是宇宙中的一粒微尘，但是我们可以用自己微薄的力量，为这个世界注入更多的美好与希望。</div></main></div>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[【前端】一些前端的小知识（二）]]></title>
            <link>https://blog.vixcitycc.top//article/一些前端的小知识（二）</link>
            <guid>https://blog.vixcitycc.top//article/一些前端的小知识（二）</guid>
            <pubDate>Sat, 27 Apr 2024 00:00:00 GMT</pubDate>
            <description><![CDATA[一些前端的小知识（二）]]></description>
            <content:encoded><![CDATA[<div id="notion-article" class="mx-auto overflow-hidden "><main class="notion light-mode notion-page notion-block-d00abde6865c4b05bb259d195c0d39a0"><div class="notion-viewport"></div><div class="notion-collection-page-properties"></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-94daa6d1c55a44f9a28a6f79b7ddb6ce" href="https://blog.csdn.net/m0_71723001/article/details/134555936"><div><div class="notion-bookmark-title">blog.csdn.net</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-text">https://blog.csdn.net/m0_71723001/article/details/134555936</div></div></div></a></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-10fe176596f648d88df18cd706bea899" href="https://jbaysolutions.github.io/vue-grid-layout/zh/guide/events.html#gridlayout"><div><div class="notion-bookmark-title">事件 — Vue Grid Layout</div><div class="notion-bookmark-description">A draggable and resizable grid layout, as a Vue component.</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-icon"><img src="https://www.notion.so/image/https%3A%2F%2Fjbaysolutions.github.io%2Fvue-grid-layout%2Fassets%2Ffavicon%2Fapple-touch-icon.png?table=block&amp;id=10fe1765-96f6-48d8-8df1-8cd706bea899&amp;t=10fe1765-96f6-48d8-8df1-8cd706bea899" alt="事件 — Vue Grid Layout" loading="lazy" decoding="async"/></div><div class="notion-bookmark-link-text">https://jbaysolutions.github.io/vue-grid-layout/zh/guide/events.html#gridlayout</div></div></div></a></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-5aca83e71c0f45c381fb90587ffe4b5e" href="https://atlassian.design/components/pragmatic-drag-and-drop/about"><div><div class="notion-bookmark-title">atlassian.design</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-text">https://atlassian.design/components/pragmatic-drag-and-drop/about</div></div></div></a></div><a target="_blank" rel="noopener noreferrer" href="https://github.com/chinanf-boy/react-beautiful-dnd-zh" class="notion-external notion-external-block notion-row notion-block-9cec725fe2474ba7afbd18097a11193d"><div class="notion-external-image"><svg viewBox="0 0 260 260"><g><path d="M128.00106,0 C57.3172926,0 0,57.3066942 0,128.00106 C0,184.555281 36.6761997,232.535542 87.534937,249.460899 C93.9320223,250.645779 96.280588,246.684165 96.280588,243.303333 C96.280588,240.251045 96.1618878,230.167899 96.106777,219.472176 C60.4967585,227.215235 52.9826207,204.369712 52.9826207,204.369712 C47.1599584,189.574598 38.770408,185.640538 38.770408,185.640538 C27.1568785,177.696113 39.6458206,177.859325 39.6458206,177.859325 C52.4993419,178.762293 59.267365,191.04987 59.267365,191.04987 C70.6837675,210.618423 89.2115753,204.961093 96.5158685,201.690482 C97.6647155,193.417512 100.981959,187.77078 104.642583,184.574357 C76.211799,181.33766 46.324819,170.362144 46.324819,121.315702 C46.324819,107.340889 51.3250588,95.9223682 59.5132437,86.9583937 C58.1842268,83.7344152 53.8029229,70.715562 60.7532354,53.0843636 C60.7532354,53.0843636 71.5019501,49.6441813 95.9626412,66.2049595 C106.172967,63.368876 117.123047,61.9465949 128.00106,61.8978432 C138.879073,61.9465949 149.837632,63.368876 160.067033,66.2049595 C184.49805,49.6441813 195.231926,53.0843636 195.231926,53.0843636 C202.199197,70.715562 197.815773,83.7344152 196.486756,86.9583937 C204.694018,95.9223682 209.660343,107.340889 209.660343,121.315702 C209.660343,170.478725 179.716133,181.303747 151.213281,184.472614 C155.80443,188.444828 159.895342,196.234518 159.895342,208.176593 C159.895342,225.303317 159.746968,239.087361 159.746968,243.303333 C159.746968,246.709601 162.05102,250.70089 168.53925,249.443941 C219.370432,232.499507 256,184.536204 256,128.00106 C256,57.3066942 198.691187,0 128.00106,0 Z M47.9405593,182.340212 C47.6586465,182.976105 46.6581745,183.166873 45.7467277,182.730227 C44.8183235,182.312656 44.2968914,181.445722 44.5978808,180.80771 C44.8734344,180.152739 45.876026,179.97045 46.8023103,180.409216 C47.7328342,180.826786 48.2627451,181.702199 47.9405593,182.340212 Z M54.2367892,187.958254 C53.6263318,188.524199 52.4329723,188.261363 51.6232682,187.366874 C50.7860088,186.474504 50.6291553,185.281144 51.2480912,184.70672 C51.8776254,184.140775 53.0349512,184.405731 53.8743302,185.298101 C54.7115892,186.201069 54.8748019,187.38595 54.2367892,187.958254 Z M58.5562413,195.146347 C57.7719732,195.691096 56.4895886,195.180261 55.6968417,194.042013 C54.9125733,192.903764 54.9125733,191.538713 55.713799,190.991845 C56.5086651,190.444977 57.7719732,190.936735 58.5753181,192.066505 C59.3574669,193.22383 59.3574669,194.58888 58.5562413,195.146347 Z M65.8613592,203.471174 C65.1597571,204.244846 63.6654083,204.03712 62.5716717,202.981538 C61.4524999,201.94927 61.1409122,200.484596 61.8446341,199.710926 C62.5547146,198.935137 64.0575422,199.15346 65.1597571,200.200564 C66.2704506,201.230712 66.6095936,202.705984 65.8613592,203.471174 Z M75.3025151,206.281542 C74.9930474,207.284134 73.553809,207.739857 72.1039724,207.313809 C70.6562556,206.875043 69.7087748,205.700761 70.0012857,204.687571 C70.302275,203.678621 71.7478721,203.20382 73.2083069,203.659543 C74.6539041,204.09619 75.6035048,205.261994 75.3025151,206.281542 Z M86.046947,207.473627 C86.0829806,208.529209 84.8535871,209.404622 83.3316829,209.4237 C81.8013,209.457614 80.563428,208.603398 80.5464708,207.564772 C80.5464708,206.498591 81.7483088,205.631657 83.2786917,205.606221 C84.8005962,205.576546 86.046947,206.424403 86.046947,207.473627 Z M96.6021471,207.069023 C96.7844366,208.099171 95.7267341,209.156872 94.215428,209.438785 C92.7295577,209.710099 91.3539086,209.074206 91.1652603,208.052538 C90.9808515,206.996955 92.0576306,205.939253 93.5413813,205.66582 C95.054807,205.402984 96.4092596,206.021919 96.6021471,207.069023 Z" fill="#161614"></path></g></svg></div><div class="notion-external-description"><div class="notion-external-title">react-beautiful-dnd-zh</div><div class="notion-external-block-desc">chinanf-boy<span> • </span>Updated Jun 12, 2024</div></div></a><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-5e4d8ee84f144b5692aa1820b9f7a2e7" href="https://www.cnblogs.com/shuiche/p/17568301.html"><div><div class="notion-bookmark-title">vue绘制思维导图 - 水车 - 博客园</div><div class="notion-bookmark-description">## 前言 在做web的思维导图功能时，搜索了一些开源项目，在这里整理记录一下 ## 正文 ### vue-power-tree &amp;gt; **vue3** &amp;gt; github: [https://github.com/yj-liuzepeng/vue-power-tree](https://g</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-icon"><img src="https://www.notion.so/image/https%3A%2F%2Fassets.cnblogs.com%2Ffavicon.svg%3Fv%3D2?table=block&amp;id=5e4d8ee8-4f14-4b56-92aa-1820b9f7a2e7&amp;t=5e4d8ee8-4f14-4b56-92aa-1820b9f7a2e7" alt="vue绘制思维导图 - 水车 - 博客园" loading="lazy" decoding="async"/></div><div class="notion-bookmark-link-text">https://www.cnblogs.com/shuiche/p/17568301.html</div></div></div></a></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-e222109a84774a7cae1ad06a20017e30" href="https://mp.weixin.qq.com/s/PBEQkoMIRUynf9G3a2SCtw"><div><div class="notion-bookmark-title">【动画进阶】巧用 CSS/SVG 实现复杂线条光效动画</div><div class="notion-bookmark-description">巧妙的实现线条光效动画！</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-icon"><img src="https://www.notion.so/image/https%3A%2F%2Fres.wx.qq.com%2Fa%2Fwx_fed%2Fassets%2Fres%2FMjliNWVm.svg?table=block&amp;id=e222109a-8477-4a7c-ae1a-d06a20017e30&amp;t=e222109a-8477-4a7c-ae1a-d06a20017e30" alt="【动画进阶】巧用 CSS/SVG 实现复杂线条光效动画" loading="lazy" decoding="async"/></div><div class="notion-bookmark-link-text">https://mp.weixin.qq.com/s/PBEQkoMIRUynf9G3a2SCtw</div></div></div><div class="notion-bookmark-image"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fmmbiz.qpic.cn%2Fsz_mmbiz_jpg%2FSMw0rcHsoNJuXsk8j7ZgHv9hiafD3FlMP9r7qAxwOMn7xt8BY9ukPT5JPic0oudtk9dwumvZaF32fDLoF7zYPaicQ%2F0%3Fwx_fmt%3Djpeg?table=block&amp;id=e222109a-8477-4a7c-ae1a-d06a20017e30&amp;t=e222109a-8477-4a7c-ae1a-d06a20017e30" alt="【动画进阶】巧用 CSS/SVG 实现复杂线条光效动画" loading="lazy" decoding="async"/></div></a></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-cc1d6a58b2db4ba48c3262f3f80ac23f" href="https://mp.weixin.qq.com/s/13Ynb8f2T4vB0DCL1ZFP4Q"><div><div class="notion-bookmark-title">让人眼前一亮的 Toast 库推荐！！！</div><div class="notion-bookmark-description">一个为 React 应用打造的轻量级、高度可定制的通知库。它不仅易于使用，而且默认样式美观，能够为你的 Web应用提供流畅的用户体验</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-icon"><img src="https://www.notion.so/image/https%3A%2F%2Fres.wx.qq.com%2Fa%2Fwx_fed%2Fassets%2Fres%2FMjliNWVm.svg?table=block&amp;id=cc1d6a58-b2db-4ba4-8c32-62f3f80ac23f&amp;t=cc1d6a58-b2db-4ba4-8c32-62f3f80ac23f" alt="让人眼前一亮的 Toast 库推荐！！！" loading="lazy" decoding="async"/></div><div class="notion-bookmark-link-text">https://mp.weixin.qq.com/s/13Ynb8f2T4vB0DCL1ZFP4Q</div></div></div><div class="notion-bookmark-image"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_jpg%2FMDPRplBm9ZXvQr3pbOZ2VlHOCasTRVOhE9iaBDg3SibvE2TOLXRUaP6edFYmHnSo66iaeOAbByoLR1aDSPwg5ukicg%2F0%3Fwx_fmt%3Djpeg?table=block&amp;id=cc1d6a58-b2db-4ba4-8c32-62f3f80ac23f&amp;t=cc1d6a58-b2db-4ba4-8c32-62f3f80ac23f" alt="让人眼前一亮的 Toast 库推荐！！！" loading="lazy" decoding="async"/></div></a></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-a545bfaba64f48f4a668e064947b5441" href="https://mp.weixin.qq.com/s/2THDr-6d3D8bpNGwg-0cMA"><div><div class="notion-bookmark-title">【动画进阶】光标也可以这么秀？极具创意的鼠标交互动画！</div><div class="notion-bookmark-description">鼠标交互也可以这么秀？</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-icon"><img src="https://www.notion.so/image/https%3A%2F%2Fres.wx.qq.com%2Fa%2Fwx_fed%2Fassets%2Fres%2FMjliNWVm.svg?table=block&amp;id=a545bfab-a64f-48f4-a668-e064947b5441&amp;t=a545bfab-a64f-48f4-a668-e064947b5441" alt="【动画进阶】光标也可以这么秀？极具创意的鼠标交互动画！" loading="lazy" decoding="async"/></div><div class="notion-bookmark-link-text">https://mp.weixin.qq.com/s/2THDr-6d3D8bpNGwg-0cMA</div></div></div><div class="notion-bookmark-image"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fmmbiz.qpic.cn%2Fsz_mmbiz_jpg%2FSMw0rcHsoNJBF6qg8Uw5XctY0IyefwvS4aFJBvGvcjDAydpmanOB6llLOge6XxQwkJaVLVRibSsR2qQ2vpIdBuw%2F0%3Fwx_fmt%3Djpeg?table=block&amp;id=a545bfab-a64f-48f4-a668-e064947b5441&amp;t=a545bfab-a64f-48f4-a668-e064947b5441" alt="【动画进阶】光标也可以这么秀？极具创意的鼠标交互动画！" loading="lazy" decoding="async"/></div></a></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-683a440d1f2348d98c9b2d5263e2a6b1" href="https://mp.weixin.qq.com/s/YaElAMFkdmcy3_8iBOdyEw"><div><div class="notion-bookmark-title">VUE3专属富文本，nice！！！</div><div class="notion-bookmark-description">之前文章介绍过一个基于markdown语法的vue2/3的富文本mavonEditor，今天介绍另外一个vue3富文本。</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-icon"><img src="https://www.notion.so/image/https%3A%2F%2Fres.wx.qq.com%2Fa%2Fwx_fed%2Fassets%2Fres%2FMjliNWVm.svg?table=block&amp;id=683a440d-1f23-48d9-8c9b-2d5263e2a6b1&amp;t=683a440d-1f23-48d9-8c9b-2d5263e2a6b1" alt="VUE3专属富文本，nice！！！" loading="lazy" decoding="async"/></div><div class="notion-bookmark-link-text">https://mp.weixin.qq.com/s/YaElAMFkdmcy3_8iBOdyEw</div></div></div><div class="notion-bookmark-image"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_jpg%2FODiaMNroZ9t9EHFFK4slcRY67Oge1ZYJwh7wJ8JXqlmJHDLCnP8DghV40OjedezPQ33mE2tpSHialdSbUqk1qZog%2F0%3Fwx_fmt%3Djpeg?table=block&amp;id=683a440d-1f23-48d9-8c9b-2d5263e2a6b1&amp;t=683a440d-1f23-48d9-8c9b-2d5263e2a6b1" alt="VUE3专属富文本，nice！！！" loading="lazy" decoding="async"/></div></a></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-82ccde92124a4d9f9c1610590a5566dc" href="https://mp.weixin.qq.com/s/-EnI8uK62kSBdK_Py9ToMw"><div><div class="notion-bookmark-title">强烈推荐一款好用到爆的可视化拖拽库</div><div class="notion-bookmark-description">今天给大家推荐这款拖拽组件VueDraggablePlus，试了一下非常不错，据说还被尤雨溪推荐过，咱们国人自己开发的，中国人不骗🇨🇳人，我就再来推荐一遍吧。</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-icon"><img src="https://www.notion.so/image/https%3A%2F%2Fres.wx.qq.com%2Fa%2Fwx_fed%2Fassets%2Fres%2FMjliNWVm.svg?table=block&amp;id=82ccde92-124a-4d9f-9c16-10590a5566dc&amp;t=82ccde92-124a-4d9f-9c16-10590a5566dc" alt="强烈推荐一款好用到爆的可视化拖拽库" loading="lazy" decoding="async"/></div><div class="notion-bookmark-link-text">https://mp.weixin.qq.com/s/-EnI8uK62kSBdK_Py9ToMw</div></div></div><div class="notion-bookmark-image"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_jpg%2FMDPRplBm9ZXhpLdRPawDl30RmqKMpiaATYvOeAXZr5NAtIkr513XOGXhquXrJYOxwMvxATb6t2RcgR9VZOibVrOQ%2F0%3Fwx_fmt%3Djpeg?table=block&amp;id=82ccde92-124a-4d9f-9c16-10590a5566dc&amp;t=82ccde92-124a-4d9f-9c16-10590a5566dc" alt="强烈推荐一款好用到爆的可视化拖拽库" loading="lazy" decoding="async"/></div></a></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-3bfde6ccae344df0b55d8a8f4c1f16b1" href="https://mp.weixin.qq.com/s/DKLiJfpbZoyvW9_BUkn2iA"><div><div class="notion-bookmark-title">上百个精美网页Loading效果</div><div class="notion-bookmark-description">上百个精美loading效果....你只需复制粘贴</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-icon"><img src="https://www.notion.so/image/https%3A%2F%2Fres.wx.qq.com%2Fa%2Fwx_fed%2Fassets%2Fres%2FMjliNWVm.svg?table=block&amp;id=3bfde6cc-ae34-4df0-b55d-8a8f4c1f16b1&amp;t=3bfde6cc-ae34-4df0-b55d-8a8f4c1f16b1" alt="上百个精美网页Loading效果" loading="lazy" decoding="async"/></div><div class="notion-bookmark-link-text">https://mp.weixin.qq.com/s/DKLiJfpbZoyvW9_BUkn2iA</div></div></div><div class="notion-bookmark-image"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_jpg%2FdK7orxYickAmibWQE9UATskWzibq6kH3OKr4pZvzmDqicDfzZujrbRa9ExsRPd5ws7qOgwgHGwGuaPrRibicF5u3TM2A%2F0%3Fwx_fmt%3Djpeg?table=block&amp;id=3bfde6cc-ae34-4df0-b55d-8a8f4c1f16b1&amp;t=3bfde6cc-ae34-4df0-b55d-8a8f4c1f16b1" alt="上百个精美网页Loading效果" loading="lazy" decoding="async"/></div></a></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-a26964333c4647929300e1c04e12aeeb" href="https://mp.weixin.qq.com/s/7ZFFaVJmakDM7NgKUERzxA"><div><div class="notion-bookmark-title">前端开发中大并发量如何控制并发数</div><div class="notion-bookmark-description">The following article is from 宇宙一码平川
                                                        Author 一川</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-icon"><img src="https://www.notion.so/image/https%3A%2F%2Fres.wx.qq.com%2Fa%2Fwx_fed%2Fassets%2Fres%2FMjliNWVm.svg?table=block&amp;id=a2696433-3c46-4792-9300-e1c04e12aeeb&amp;t=a2696433-3c46-4792-9300-e1c04e12aeeb" alt="前端开发中大并发量如何控制并发数" loading="lazy" decoding="async"/></div><div class="notion-bookmark-link-text">https://mp.weixin.qq.com/s/7ZFFaVJmakDM7NgKUERzxA</div></div></div><div class="notion-bookmark-image"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fmmbiz.qpic.cn%2Fsz_mmbiz_jpg%2F83d3vL8fIicaVIVtBCvciaCvFAXiaOAWSlvQia6nGibYU7pdOJHrticWKekJLuppJdatlT5VDOqnwDumsqwHEI6yodGw%2F0%3Fwx_fmt%3Djpeg?table=block&amp;id=a2696433-3c46-4792-9300-e1c04e12aeeb&amp;t=a2696433-3c46-4792-9300-e1c04e12aeeb" alt="前端开发中大并发量如何控制并发数" loading="lazy" decoding="async"/></div></a></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-f346fb8c96e24255b9a8539c27e89770" href="https://mp.weixin.qq.com/s/4xJv9V79zVIQBzrHgNAOwQ"><div><div class="notion-bookmark-title">前端CSS奇技淫巧合集，208个！</div><div class="notion-bookmark-description">推荐一个前端CSS奇技淫巧集合，18.8k star！</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-icon"><img src="https://www.notion.so/image/https%3A%2F%2Fres.wx.qq.com%2Fa%2Fwx_fed%2Fassets%2Fres%2FMjliNWVm.svg?table=block&amp;id=f346fb8c-96e2-4255-b9a8-539c27e89770&amp;t=f346fb8c-96e2-4255-b9a8-539c27e89770" alt="前端CSS奇技淫巧合集，208个！" loading="lazy" decoding="async"/></div><div class="notion-bookmark-link-text">https://mp.weixin.qq.com/s/4xJv9V79zVIQBzrHgNAOwQ</div></div></div><div class="notion-bookmark-image"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fmmbiz.qpic.cn%2Fsz_mmbiz_jpg%2FHLN2IKtpicicGE0V2mmMlQd7nicWIPrutyMeSnyceo85bibwlpA60RpRdCnPVvbqdl9voZ8NgGF7myKJKYUpNJibeBQ%2F0%3Fwx_fmt%3Djpeg?table=block&amp;id=f346fb8c-96e2-4255-b9a8-539c27e89770&amp;t=f346fb8c-96e2-4255-b9a8-539c27e89770" alt="前端CSS奇技淫巧合集，208个！" loading="lazy" decoding="async"/></div></a></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-901032bd03ff40229affbf81af7c60e6" href="https://mp.weixin.qq.com/s/xmgKIi3ib4MytoSAFirtxA"><div><div class="notion-bookmark-title">Nextjs+Antd5.0打造面向AI的文档可视化引擎（最新更新）</div><div class="notion-bookmark-description">文档搭建引擎最新功能和技术栈分享</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-icon"><img src="https://www.notion.so/image/https%3A%2F%2Fres.wx.qq.com%2Fa%2Fwx_fed%2Fassets%2Fres%2FMjliNWVm.svg?table=block&amp;id=901032bd-03ff-4022-9aff-bf81af7c60e6&amp;t=901032bd-03ff-4022-9aff-bf81af7c60e6" alt="Nextjs+Antd5.0打造面向AI的文档可视化引擎（最新更新）" loading="lazy" decoding="async"/></div><div class="notion-bookmark-link-text">https://mp.weixin.qq.com/s/xmgKIi3ib4MytoSAFirtxA</div></div></div><div class="notion-bookmark-image"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_jpg%2FdFTfMt01148ctibhuuOPHEYkM9VIA9oTkeVdicOtgoZB08OHSVe7SCUnDuF4bMibIqUX2GLz8rCria5sMadrVDkhKQ%2F0%3Fwx_fmt%3Djpeg?table=block&amp;id=901032bd-03ff-4022-9aff-bf81af7c60e6&amp;t=901032bd-03ff-4022-9aff-bf81af7c60e6" alt="Nextjs+Antd5.0打造面向AI的文档可视化引擎（最新更新）" loading="lazy" decoding="async"/></div></a></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-570193aae59a430d82c4d379a99b00cf" href="https://mp.weixin.qq.com/s/jvfl11YEfhOiosJ2-kSsAw"><div><div class="notion-bookmark-title">盘点15个高颜值的Tailwind CSS 前端UI组件库</div><div class="notion-bookmark-description">Tailwind CSS 灵感宝库</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-icon"><img src="https://www.notion.so/image/https%3A%2F%2Fres.wx.qq.com%2Fa%2Fwx_fed%2Fassets%2Fres%2FMjliNWVm.svg?table=block&amp;id=570193aa-e59a-430d-82c4-d379a99b00cf&amp;t=570193aa-e59a-430d-82c4-d379a99b00cf" alt="盘点15个高颜值的Tailwind CSS 前端UI组件库" loading="lazy" decoding="async"/></div><div class="notion-bookmark-link-text">https://mp.weixin.qq.com/s/jvfl11YEfhOiosJ2-kSsAw</div></div></div><div class="notion-bookmark-image"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fmmbiz.qpic.cn%2Fsz_mmbiz_jpg%2FHLN2IKtpicicEESRBPV6EHXlYr3oPELmy7aAcicFrqeial2QFQgpaygjg1wPEYialHticekRbOQeibZjpibdw619iacDS8Q%2F0%3Fwx_fmt%3Djpeg?table=block&amp;id=570193aa-e59a-430d-82c4-d379a99b00cf&amp;t=570193aa-e59a-430d-82c4-d379a99b00cf" alt="盘点15个高颜值的Tailwind CSS 前端UI组件库" loading="lazy" decoding="async"/></div></a></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-88ba88e324fa448b983211f1739992f0" href="https://mp.weixin.qq.com/s/RFqz2gQmtGLiLcnaDcOEEA"><div><div class="notion-bookmark-title">不一样的SVG！SVG在 CSS 中的应用</div><div class="notion-bookmark-description">SVG 不一样的奇妙用法~</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-icon"><img src="https://www.notion.so/image/https%3A%2F%2Fres.wx.qq.com%2Fa%2Fwx_fed%2Fassets%2Fres%2FMjliNWVm.svg?table=block&amp;id=88ba88e3-24fa-448b-9832-11f1739992f0&amp;t=88ba88e3-24fa-448b-9832-11f1739992f0" alt="不一样的SVG！SVG在 CSS 中的应用" loading="lazy" decoding="async"/></div><div class="notion-bookmark-link-text">https://mp.weixin.qq.com/s/RFqz2gQmtGLiLcnaDcOEEA</div></div></div><div class="notion-bookmark-image"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fmmbiz.qpic.cn%2Fsz_mmbiz_jpg%2FSMw0rcHsoNIRScZCFiavCUa26Vn73I5QJjzWLSwVVuSBRoOGRmBqjgJtPvguMqeN63PKOy79cVyFxBAObxKmhRA%2F0%3Fwx_fmt%3Djpeg?table=block&amp;id=88ba88e3-24fa-448b-9832-11f1739992f0&amp;t=88ba88e3-24fa-448b-9832-11f1739992f0" alt="不一样的SVG！SVG在 CSS 中的应用" loading="lazy" decoding="async"/></div></a></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-9c8e9a8173fc45d884a8e10efdd78f85" href="https://mp.weixin.qq.com/s/UCoRtFI0IhS1QQbKO29Dog"><div><div class="notion-bookmark-title">如何在网页实现 TypeScript 编辑器？</div><div class="notion-bookmark-description">并且我们基于 @typescript/ata 实现了自动下载用到的 ts 类型的功能，它会扫描代码里的 import，然后自动下载类型，之后 addExtraLib 添加到 ts 里。</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-icon"><img src="https://www.notion.so/image/https%3A%2F%2Fres.wx.qq.com%2Fa%2Fwx_fed%2Fassets%2Fres%2FMjliNWVm.svg?table=block&amp;id=9c8e9a81-73fc-45d8-84a8-e10efdd78f85&amp;t=9c8e9a81-73fc-45d8-84a8-e10efdd78f85" alt="如何在网页实现 TypeScript 编辑器？" loading="lazy" decoding="async"/></div><div class="notion-bookmark-link-text">https://mp.weixin.qq.com/s/UCoRtFI0IhS1QQbKO29Dog</div></div></div><div class="notion-bookmark-image"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fmmbiz.qpic.cn%2Fsz_mmbiz_jpg%2FYprkEU0TtGhSkoelH0Sk9QiaIibMFBYwjJ5bRGuOCHx2avfblswdwtGPTRWNHNQTiaedoESFDNura9URKxFqbATqw%2F0%3Fwx_fmt%3Djpeg?table=block&amp;id=9c8e9a81-73fc-45d8-84a8-e10efdd78f85&amp;t=9c8e9a81-73fc-45d8-84a8-e10efdd78f85" alt="如何在网页实现 TypeScript 编辑器？" loading="lazy" decoding="async"/></div></a></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-35b86ca907994665b709d67daeed694b" href="https://mp.weixin.qq.com/s/YkucbnmOSDFqyW6nq2Q71Q"><div><div class="notion-bookmark-title">mp.weixin.qq.com</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-icon"><img src="https://www.notion.so/image/https%3A%2F%2Fres.wx.qq.com%2Fa%2Fwx_fed%2Fassets%2Fres%2FMjliNWVm.svg?table=block&amp;id=35b86ca9-0799-4665-b709-d67daeed694b&amp;t=35b86ca9-0799-4665-b709-d67daeed694b" alt="mp.weixin.qq.com" loading="lazy" decoding="async"/></div><div class="notion-bookmark-link-text">https://mp.weixin.qq.com/s/YkucbnmOSDFqyW6nq2Q71Q</div></div></div></a></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-ef4898a0071547a68b1c63cddb772c6b" href="https://mp.weixin.qq.com/s/-qLZX1dT8I6UUWgW-BKGSg"><div><div class="notion-bookmark-title">前端常用的几种请求方式</div><div class="notion-bookmark-description">The following article is from 奇舞精选
                                                        Author 李慧娟</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-icon"><img src="https://www.notion.so/image/https%3A%2F%2Fres.wx.qq.com%2Fa%2Fwx_fed%2Fassets%2Fres%2FMjliNWVm.svg?table=block&amp;id=ef4898a0-0715-47a6-8b1c-63cddb772c6b&amp;t=ef4898a0-0715-47a6-8b1c-63cddb772c6b" alt="前端常用的几种请求方式" loading="lazy" decoding="async"/></div><div class="notion-bookmark-link-text">https://mp.weixin.qq.com/s/-qLZX1dT8I6UUWgW-BKGSg</div></div></div><div class="notion-bookmark-image"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_jpg%2FzewrLkrYfsMC28oOtvPBERTr6gbVdqu0GlxB20cYtGsFKImjgObUB9KX50HwMu59YiclztI68piacFHwjXiaSPArQ%2F0%3Fwx_fmt%3Djpeg?table=block&amp;id=ef4898a0-0715-47a6-8b1c-63cddb772c6b&amp;t=ef4898a0-0715-47a6-8b1c-63cddb772c6b" alt="前端常用的几种请求方式" loading="lazy" decoding="async"/></div></a></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-5ea5c572a3cc468ba1af675bfb9988fa" href="https://mp.weixin.qq.com/s/9IxEMUH2hgHkHYTgwtLWJQ"><div><div class="notion-bookmark-title">本周推荐的6个火火火的Github开源项目！</div><div class="notion-bookmark-description">Spug 是一个开源的自动化运维管理平台，由 JavaScript 和 Python 编写，面向中小型企业设计，无需 Agent，非常轻量化。为运维人员提供了自动化部署、配置管理、任务编排、监控告警等一系列强大功能，帮助轻松管理大规模的服务器集群。</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-icon"><img src="https://www.notion.so/image/https%3A%2F%2Fres.wx.qq.com%2Fa%2Fwx_fed%2Fassets%2Fres%2FMjliNWVm.svg?table=block&amp;id=5ea5c572-a3cc-468b-a1af-675bfb9988fa&amp;t=5ea5c572-a3cc-468b-a1af-675bfb9988fa" alt="本周推荐的6个火火火的Github开源项目！" loading="lazy" decoding="async"/></div><div class="notion-bookmark-link-text">https://mp.weixin.qq.com/s/9IxEMUH2hgHkHYTgwtLWJQ</div></div></div><div class="notion-bookmark-image"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_jpg%2FwrSY9P4VMJGDEqDymY1NSygN6Vzmv9P5DU5RvZicH2jBzOOssKb9tBWHH3feVtTsxghhtPI9ibWibxRGPN30ajtJw%2F0%3Fwx_fmt%3Djpeg?table=block&amp;id=5ea5c572-a3cc-468b-a1af-675bfb9988fa&amp;t=5ea5c572-a3cc-468b-a1af-675bfb9988fa" alt="本周推荐的6个火火火的Github开源项目！" loading="lazy" decoding="async"/></div></a></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-5459b0f2f62d4403bddd15eca0eb87f9" href="https://juejin.cn/post/7309791510873784372"><div><div class="notion-bookmark-title">juejin.cn</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-text">https://juejin.cn/post/7309791510873784372</div></div></div></a></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-2b6a361f0967486c9ce37eed7c189989" href="https://juejin.cn/post/7359475637205876770"><div><div class="notion-bookmark-title">juejin.cn</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-text">https://juejin.cn/post/7359475637205876770</div></div></div></a></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-9ec9d1ffb559473087e100dd1caa408c" href="https://juejin.cn/post/7310143510103064585"><div><div class="notion-bookmark-title">juejin.cn</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-text">https://juejin.cn/post/7310143510103064585</div></div></div></a></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-416fb4cc6f294e4c855911a8939325c6" href="https://juejin.cn/post/7343921389084426277"><div><div class="notion-bookmark-title">juejin.cn</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-text">https://juejin.cn/post/7343921389084426277</div></div></div></a></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-c53134113aca4d83b55e5159ebb86dd1" href="https://juejin.cn/post/7351642274273165322"><div><div class="notion-bookmark-title">juejin.cn</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-text">https://juejin.cn/post/7351642274273165322</div></div></div></a></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-a4f5c47d02a84d728f9264ac9c28404f" href="https://juejin.cn/post/7317463986014453797"><div><div class="notion-bookmark-title">juejin.cn</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-text">https://juejin.cn/post/7317463986014453797</div></div></div></a></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-3d9f9756d8334b8db4953a225e4189fe" href="https://juejin.cn/post/7359077652416725018"><div><div class="notion-bookmark-title">juejin.cn</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-text">https://juejin.cn/post/7359077652416725018</div></div></div></a></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-0845707b11bb48e88507bc6987a78620" href="https://juejin.cn/post/7326978074281820187"><div><div class="notion-bookmark-title">juejin.cn</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-text">https://juejin.cn/post/7326978074281820187</div></div></div></a></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-7d8a7a531fbd4e6e9077b631fd70f27c" href="https://juejin.cn/post/7352245958594494502?share_token=AF74ED3B-40F5-423D-B48B-0C6DC60AFC95"><div><div class="notion-bookmark-title">juejin.cn</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-text">https://juejin.cn/post/7352245958594494502?share_token=AF74ED3B-40F5-423D-B48B-0C6DC60AFC95</div></div></div></a></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-310e4b0e89684d4b8858bc24e2f3e09b" href="https://juejin.cn/post/6844903926110617613"><div><div class="notion-bookmark-title">juejin.cn</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-text">https://juejin.cn/post/6844903926110617613</div></div></div></a></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-4d60dd49e6a54164b68e1cc2978c5501" href="https://juejin.cn/post/7346221612578914344"><div><div class="notion-bookmark-title">juejin.cn</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-text">https://juejin.cn/post/7346221612578914344</div></div></div></a></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-6a9c18bfa4ab46a29372b6f4da84535e" href="https://juejin.cn/post/7358267998664458240"><div><div class="notion-bookmark-title">juejin.cn</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-text">https://juejin.cn/post/7358267998664458240</div></div></div></a></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-43eb6017ac0e4bd0a0a3921e7b44b0db" href="https://juejin.cn/post/7331938596738891788"><div><div class="notion-bookmark-title">juejin.cn</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-text">https://juejin.cn/post/7331938596738891788</div></div></div></a></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-58778a5ae55940f3bb82496d9d370350" href="https://juejin.cn/post/7350874162011750400"><div><div class="notion-bookmark-title">juejin.cn</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-text">https://juejin.cn/post/7350874162011750400</div></div></div></a></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-0c5ca0323a624c13863c6b62e96600bf" href="https://blog.csdn.net/m0_49017085/article/details/130006849"><div><div class="notion-bookmark-title">FullCalendar 日历插件排班表排课表保姆级详解(可拖动排班排课)-CSDN博客</div><div class="notion-bookmark-description">文章浏览阅读8.3k次，点赞9次，收藏42次。闲来无事搞个排班排课表，之前貌似遇到过这类的需求，只不过没做上。主要用的就是FullCalendar插件。基于vue框架写法。基本的功能可以新建个日程看看样式，可以拖拽日程进去。提示：以下是本篇文章正文内容，下面案例可供参考以上就是实现简易排班排课表的雏形啦，复杂的功能还是要基于数据啦，静态只是看看大概。先说这么多，后面有坑我再写；以及后面看看能不能再加上些好玩的功能。_fullcalendar</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-icon"><img src="https://www.notion.so/image/https%3A%2F%2Fg.csdnimg.cn%2Fstatic%2Flogo%2Ffavicon32.ico?table=block&amp;id=0c5ca032-3a62-4c13-863c-6b62e96600bf&amp;t=0c5ca032-3a62-4c13-863c-6b62e96600bf" alt="FullCalendar 日历插件排班表排课表保姆级详解(可拖动排班排课)-CSDN博客" loading="lazy" decoding="async"/></div><div class="notion-bookmark-link-text">https://blog.csdn.net/m0_49017085/article/details/130006849</div></div></div></a></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-353a8f50c16b4345b12d83c0ba9733e0" href="https://ikun-ui.netlify.app/components/KForm.html"><div><div class="notion-bookmark-title">ikun-ui</div><div class="notion-bookmark-description">Popular, beautiful and fast UnoCSS component library</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-icon"><img src="https://www.notion.so/image/https%3A%2F%2Fikun-ui.netlify.app%2Flogo.svg?table=block&amp;id=353a8f50-c16b-4345-b12d-83c0ba9733e0&amp;t=353a8f50-c16b-4345-b12d-83c0ba9733e0" alt="ikun-ui" loading="lazy" decoding="async"/></div><div class="notion-bookmark-link-text">https://ikun-ui.netlify.app/components/KForm.html</div></div></div></a></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-08598b97003446b7a5b7b51462334065" href="https://6tail.cn/calendar/api.html"><div><div class="notion-bookmark-title">lunar</div><div class="notion-bookmark-description">lunar是一个无依赖的支持阳历、阴历、佛历和道历的日历工具库。</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-icon"><img src="https://www.notion.so/image/https%3A%2F%2F6tail.cn%2Ffavicon.ico?table=block&amp;id=08598b97-0034-46b7-a5b7-b51462334065&amp;t=08598b97-0034-46b7-a5b7-b51462334065" alt="lunar" loading="lazy" decoding="async"/></div><div class="notion-bookmark-link-text">https://6tail.cn/calendar/api.html</div></div></div></a></div><a target="_blank" rel="noopener noreferrer" href="https://github.com/xyxc0673/calendar-remark" class="notion-external notion-external-block notion-row notion-block-360b70a319434cb996cdb809b295f6c9"><div class="notion-external-image"><svg viewBox="0 0 260 260"><g><path d="M128.00106,0 C57.3172926,0 0,57.3066942 0,128.00106 C0,184.555281 36.6761997,232.535542 87.534937,249.460899 C93.9320223,250.645779 96.280588,246.684165 96.280588,243.303333 C96.280588,240.251045 96.1618878,230.167899 96.106777,219.472176 C60.4967585,227.215235 52.9826207,204.369712 52.9826207,204.369712 C47.1599584,189.574598 38.770408,185.640538 38.770408,185.640538 C27.1568785,177.696113 39.6458206,177.859325 39.6458206,177.859325 C52.4993419,178.762293 59.267365,191.04987 59.267365,191.04987 C70.6837675,210.618423 89.2115753,204.961093 96.5158685,201.690482 C97.6647155,193.417512 100.981959,187.77078 104.642583,184.574357 C76.211799,181.33766 46.324819,170.362144 46.324819,121.315702 C46.324819,107.340889 51.3250588,95.9223682 59.5132437,86.9583937 C58.1842268,83.7344152 53.8029229,70.715562 60.7532354,53.0843636 C60.7532354,53.0843636 71.5019501,49.6441813 95.9626412,66.2049595 C106.172967,63.368876 117.123047,61.9465949 128.00106,61.8978432 C138.879073,61.9465949 149.837632,63.368876 160.067033,66.2049595 C184.49805,49.6441813 195.231926,53.0843636 195.231926,53.0843636 C202.199197,70.715562 197.815773,83.7344152 196.486756,86.9583937 C204.694018,95.9223682 209.660343,107.340889 209.660343,121.315702 C209.660343,170.478725 179.716133,181.303747 151.213281,184.472614 C155.80443,188.444828 159.895342,196.234518 159.895342,208.176593 C159.895342,225.303317 159.746968,239.087361 159.746968,243.303333 C159.746968,246.709601 162.05102,250.70089 168.53925,249.443941 C219.370432,232.499507 256,184.536204 256,128.00106 C256,57.3066942 198.691187,0 128.00106,0 Z M47.9405593,182.340212 C47.6586465,182.976105 46.6581745,183.166873 45.7467277,182.730227 C44.8183235,182.312656 44.2968914,181.445722 44.5978808,180.80771 C44.8734344,180.152739 45.876026,179.97045 46.8023103,180.409216 C47.7328342,180.826786 48.2627451,181.702199 47.9405593,182.340212 Z M54.2367892,187.958254 C53.6263318,188.524199 52.4329723,188.261363 51.6232682,187.366874 C50.7860088,186.474504 50.6291553,185.281144 51.2480912,184.70672 C51.8776254,184.140775 53.0349512,184.405731 53.8743302,185.298101 C54.7115892,186.201069 54.8748019,187.38595 54.2367892,187.958254 Z M58.5562413,195.146347 C57.7719732,195.691096 56.4895886,195.180261 55.6968417,194.042013 C54.9125733,192.903764 54.9125733,191.538713 55.713799,190.991845 C56.5086651,190.444977 57.7719732,190.936735 58.5753181,192.066505 C59.3574669,193.22383 59.3574669,194.58888 58.5562413,195.146347 Z M65.8613592,203.471174 C65.1597571,204.244846 63.6654083,204.03712 62.5716717,202.981538 C61.4524999,201.94927 61.1409122,200.484596 61.8446341,199.710926 C62.5547146,198.935137 64.0575422,199.15346 65.1597571,200.200564 C66.2704506,201.230712 66.6095936,202.705984 65.8613592,203.471174 Z M75.3025151,206.281542 C74.9930474,207.284134 73.553809,207.739857 72.1039724,207.313809 C70.6562556,206.875043 69.7087748,205.700761 70.0012857,204.687571 C70.302275,203.678621 71.7478721,203.20382 73.2083069,203.659543 C74.6539041,204.09619 75.6035048,205.261994 75.3025151,206.281542 Z M86.046947,207.473627 C86.0829806,208.529209 84.8535871,209.404622 83.3316829,209.4237 C81.8013,209.457614 80.563428,208.603398 80.5464708,207.564772 C80.5464708,206.498591 81.7483088,205.631657 83.2786917,205.606221 C84.8005962,205.576546 86.046947,206.424403 86.046947,207.473627 Z M96.6021471,207.069023 C96.7844366,208.099171 95.7267341,209.156872 94.215428,209.438785 C92.7295577,209.710099 91.3539086,209.074206 91.1652603,208.052538 C90.9808515,206.996955 92.0576306,205.939253 93.5413813,205.66582 C95.054807,205.402984 96.4092596,206.021919 96.6021471,207.069023 Z" fill="#161614"></path></g></svg></div><div class="notion-external-description"><div class="notion-external-title">calendar-remark</div><div class="notion-external-block-desc">xyxc0673<span> • </span>Updated Jul 21, 2024</div></div></a><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-fcaa54c2b0474ae898c1bf300a68825b" href="https://calendar.xym.im/"><div><div class="notion-bookmark-title">Calendar Remark</div><div class="notion-bookmark-description">A simple calendar with nice design for remarking a date.</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-icon"><img src="https://www.notion.so/image/https%3A%2F%2Fcalendar.xym.im%2Ffavicon.svg?table=block&amp;id=fcaa54c2-b047-4ae8-98c1-bf300a68825b&amp;t=fcaa54c2-b047-4ae8-98c1-bf300a68825b" alt="Calendar Remark" loading="lazy" decoding="async"/></div><div class="notion-bookmark-link-text">https://calendar.xym.im/</div></div></div></a></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-534dea6159354a848cba1c7411da9203" href="https://soybeanjs.cn/home"><div><div class="notion-bookmark-title">SoybeanAdmin</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-icon"><img src="https://www.notion.so/image/https%3A%2F%2Fsoybeanjs.cn%2Ffavicon.svg?table=block&amp;id=534dea61-5935-4a84-8cba-1c7411da9203&amp;t=534dea61-5935-4a84-8cba-1c7411da9203" alt="SoybeanAdmin" loading="lazy" decoding="async"/></div><div class="notion-bookmark-link-text">https://soybeanjs.cn/home</div></div></div></a></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-d8a4acba6b3c4b68bdbfa3f03e601d0b" href="https://uiverse.io/elements"><div><div class="notion-bookmark-title">4310 UI elements: CSS &amp; Tailwind</div><div class="notion-bookmark-description">All content (UI elements) on this site are published under the MIT License.</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-icon"><img src="https://www.notion.so/image/https%3A%2F%2Fuiverse.io%2Fandroid-chrome-512x512.png?table=block&amp;id=d8a4acba-6b3c-4b68-bdbf-a3f03e601d0b&amp;t=d8a4acba-6b3c-4b68-bdbf-a3f03e601d0b" alt="4310 UI elements: CSS &amp; Tailwind" loading="lazy" decoding="async"/></div><div class="notion-bookmark-link-text">https://uiverse.io/elements</div></div></div><div class="notion-bookmark-image"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fimagedelivery.net%2FKMb5EadhEKC1gAE0LkjL1g%2Fe2e7fec9-4fa4-4641-bbdb-4ea62eb8c300%2Fpublic?table=block&amp;id=d8a4acba-6b3c-4b68-bdbf-a3f03e601d0b&amp;t=d8a4acba-6b3c-4b68-bdbf-a3f03e601d0b" alt="4310 UI elements: CSS &amp; Tailwind" loading="lazy" decoding="async"/></div></a></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-1f172543294a49ccbbc2b89261378083" href="https://chat18.aichatos.xyz/#/chat/1702626951147"><div><div class="notion-bookmark-title">AIchatOS</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-icon"><img src="https://www.notion.so/image/https%3A%2F%2Fchat18.aichatos.xyz%2Ffavicon.svg?table=block&amp;id=1f172543-294a-49cc-bbc2-b89261378083&amp;t=1f172543-294a-49cc-bbc2-b89261378083" alt="AIchatOS" loading="lazy" decoding="async"/></div><div class="notion-bookmark-link-text">https://chat18.aichatos.xyz/#/chat/1702626951147</div></div></div></a></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-c654e4e2ed3046e28a6f595bb131216a" href="https://www.huisezhizhao.com/"><div><div class="notion-bookmark-title">灰大设计导航</div><div class="notion-bookmark-description">灰大设计导航是灰色执照创建的设计师导航网站</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-icon"><img src="https://www.notion.so/image/https%3A%2F%2Fwww.huisezhizhao.com%2Fnav%2Fimages%2Fnav.ico?table=block&amp;id=c654e4e2-ed30-46e2-8a6f-595bb131216a&amp;t=c654e4e2-ed30-46e2-8a6f-595bb131216a" alt="灰大设计导航" loading="lazy" decoding="async"/></div><div class="notion-bookmark-link-text">https://www.huisezhizhao.com/</div></div></div></a></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-842ff66a8ffc47b2a168b8c3b46621e6" href="https://github.com/gridstack/gridstack.js/tree/master"><div><div class="notion-bookmark-title">GitHub - gridstack/gridstack.js: Build interactive dashboards in minutes.</div><div class="notion-bookmark-description">Build interactive dashboards in minutes. Contribute to gridstack/gridstack.js development by creating an account on GitHub.</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-icon"><img src="https://www.notion.so/image/https%3A%2F%2Fgithub.com%2Ffluidicon.png?table=block&amp;id=842ff66a-8ffc-47b2-a168-b8c3b46621e6&amp;t=842ff66a-8ffc-47b2-a168-b8c3b46621e6" alt="GitHub - gridstack/gridstack.js: Build interactive dashboards in minutes." loading="lazy" decoding="async"/></div><div class="notion-bookmark-link-text">https://github.com/gridstack/gridstack.js/tree/master</div></div></div><div class="notion-bookmark-image"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Frepository-images.githubusercontent.com%2F26417283%2F3a305f80-8980-11eb-8d49-c9270c2c4e4b?table=block&amp;id=842ff66a-8ffc-47b2-a168-b8c3b46621e6&amp;t=842ff66a-8ffc-47b2-a168-b8c3b46621e6" alt="GitHub - gridstack/gridstack.js: Build interactive dashboards in minutes." loading="lazy" decoding="async"/></div></a></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-4c326d589e1b48cfa6aafc949ac048f1" href="https://cloud.tencent.com/developer/article/2378245"><div><div class="notion-bookmark-title">23年最火的前端组件库项目，竟然是它！-腾讯云开发者社区-腾讯云</div><div class="notion-bookmark-description">大家注意：因为微信最近又改了推送机制，经常有小伙伴说错过了之前被删的文章，或者一些限时福利，错过了就是错过了。所以建议大家加个星标，就能第一时间收到推送。</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-icon"><img src="https://www.notion.so/image/https%3A%2F%2Fcloud.tencent.com%2Ffavicon.ico?table=block&amp;id=4c326d58-9e1b-48cf-a6aa-fc949ac048f1&amp;t=4c326d58-9e1b-48cf-a6aa-fc949ac048f1" alt="23年最火的前端组件库项目，竟然是它！-腾讯云开发者社区-腾讯云" loading="lazy" decoding="async"/></div><div class="notion-bookmark-link-text">https://cloud.tencent.com/developer/article/2378245</div></div></div><div class="notion-bookmark-image"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fcloudcache.tencentcs.com%2Fopen_proj%2Fproj_qcloud_v2%2Fgateway%2Fshareicons%2Fcloud.png?table=block&amp;id=4c326d58-9e1b-48cf-a6aa-fc949ac048f1&amp;t=4c326d58-9e1b-48cf-a6aa-fc949ac048f1" alt="23年最火的前端组件库项目，竟然是它！-腾讯云开发者社区-腾讯云" loading="lazy" decoding="async"/></div></a></div><a target="_blank" rel="noopener noreferrer" href="https://github.com/shadcn-ui/ui" class="notion-external notion-external-block notion-row notion-block-44930decbf8045ff8a57523ed2c2c0d8"><div class="notion-external-image"><svg viewBox="0 0 260 260"><g><path d="M128.00106,0 C57.3172926,0 0,57.3066942 0,128.00106 C0,184.555281 36.6761997,232.535542 87.534937,249.460899 C93.9320223,250.645779 96.280588,246.684165 96.280588,243.303333 C96.280588,240.251045 96.1618878,230.167899 96.106777,219.472176 C60.4967585,227.215235 52.9826207,204.369712 52.9826207,204.369712 C47.1599584,189.574598 38.770408,185.640538 38.770408,185.640538 C27.1568785,177.696113 39.6458206,177.859325 39.6458206,177.859325 C52.4993419,178.762293 59.267365,191.04987 59.267365,191.04987 C70.6837675,210.618423 89.2115753,204.961093 96.5158685,201.690482 C97.6647155,193.417512 100.981959,187.77078 104.642583,184.574357 C76.211799,181.33766 46.324819,170.362144 46.324819,121.315702 C46.324819,107.340889 51.3250588,95.9223682 59.5132437,86.9583937 C58.1842268,83.7344152 53.8029229,70.715562 60.7532354,53.0843636 C60.7532354,53.0843636 71.5019501,49.6441813 95.9626412,66.2049595 C106.172967,63.368876 117.123047,61.9465949 128.00106,61.8978432 C138.879073,61.9465949 149.837632,63.368876 160.067033,66.2049595 C184.49805,49.6441813 195.231926,53.0843636 195.231926,53.0843636 C202.199197,70.715562 197.815773,83.7344152 196.486756,86.9583937 C204.694018,95.9223682 209.660343,107.340889 209.660343,121.315702 C209.660343,170.478725 179.716133,181.303747 151.213281,184.472614 C155.80443,188.444828 159.895342,196.234518 159.895342,208.176593 C159.895342,225.303317 159.746968,239.087361 159.746968,243.303333 C159.746968,246.709601 162.05102,250.70089 168.53925,249.443941 C219.370432,232.499507 256,184.536204 256,128.00106 C256,57.3066942 198.691187,0 128.00106,0 Z M47.9405593,182.340212 C47.6586465,182.976105 46.6581745,183.166873 45.7467277,182.730227 C44.8183235,182.312656 44.2968914,181.445722 44.5978808,180.80771 C44.8734344,180.152739 45.876026,179.97045 46.8023103,180.409216 C47.7328342,180.826786 48.2627451,181.702199 47.9405593,182.340212 Z M54.2367892,187.958254 C53.6263318,188.524199 52.4329723,188.261363 51.6232682,187.366874 C50.7860088,186.474504 50.6291553,185.281144 51.2480912,184.70672 C51.8776254,184.140775 53.0349512,184.405731 53.8743302,185.298101 C54.7115892,186.201069 54.8748019,187.38595 54.2367892,187.958254 Z M58.5562413,195.146347 C57.7719732,195.691096 56.4895886,195.180261 55.6968417,194.042013 C54.9125733,192.903764 54.9125733,191.538713 55.713799,190.991845 C56.5086651,190.444977 57.7719732,190.936735 58.5753181,192.066505 C59.3574669,193.22383 59.3574669,194.58888 58.5562413,195.146347 Z M65.8613592,203.471174 C65.1597571,204.244846 63.6654083,204.03712 62.5716717,202.981538 C61.4524999,201.94927 61.1409122,200.484596 61.8446341,199.710926 C62.5547146,198.935137 64.0575422,199.15346 65.1597571,200.200564 C66.2704506,201.230712 66.6095936,202.705984 65.8613592,203.471174 Z M75.3025151,206.281542 C74.9930474,207.284134 73.553809,207.739857 72.1039724,207.313809 C70.6562556,206.875043 69.7087748,205.700761 70.0012857,204.687571 C70.302275,203.678621 71.7478721,203.20382 73.2083069,203.659543 C74.6539041,204.09619 75.6035048,205.261994 75.3025151,206.281542 Z M86.046947,207.473627 C86.0829806,208.529209 84.8535871,209.404622 83.3316829,209.4237 C81.8013,209.457614 80.563428,208.603398 80.5464708,207.564772 C80.5464708,206.498591 81.7483088,205.631657 83.2786917,205.606221 C84.8005962,205.576546 86.046947,206.424403 86.046947,207.473627 Z M96.6021471,207.069023 C96.7844366,208.099171 95.7267341,209.156872 94.215428,209.438785 C92.7295577,209.710099 91.3539086,209.074206 91.1652603,208.052538 C90.9808515,206.996955 92.0576306,205.939253 93.5413813,205.66582 C95.054807,205.402984 96.4092596,206.021919 96.6021471,207.069023 Z" fill="#161614"></path></g></svg></div><div class="notion-external-description"><div class="notion-external-title">ui</div><div class="notion-external-block-desc">shadcn-ui<span> • </span>Updated Jul 24, 2024</div></div></a><a target="_blank" rel="noopener noreferrer" href="https://github.com/radix-vue/shadcn-vue" class="notion-external notion-external-block notion-row notion-block-3204d4adc4de46c2a36f888584ad8054"><div class="notion-external-image"><svg viewBox="0 0 260 260"><g><path d="M128.00106,0 C57.3172926,0 0,57.3066942 0,128.00106 C0,184.555281 36.6761997,232.535542 87.534937,249.460899 C93.9320223,250.645779 96.280588,246.684165 96.280588,243.303333 C96.280588,240.251045 96.1618878,230.167899 96.106777,219.472176 C60.4967585,227.215235 52.9826207,204.369712 52.9826207,204.369712 C47.1599584,189.574598 38.770408,185.640538 38.770408,185.640538 C27.1568785,177.696113 39.6458206,177.859325 39.6458206,177.859325 C52.4993419,178.762293 59.267365,191.04987 59.267365,191.04987 C70.6837675,210.618423 89.2115753,204.961093 96.5158685,201.690482 C97.6647155,193.417512 100.981959,187.77078 104.642583,184.574357 C76.211799,181.33766 46.324819,170.362144 46.324819,121.315702 C46.324819,107.340889 51.3250588,95.9223682 59.5132437,86.9583937 C58.1842268,83.7344152 53.8029229,70.715562 60.7532354,53.0843636 C60.7532354,53.0843636 71.5019501,49.6441813 95.9626412,66.2049595 C106.172967,63.368876 117.123047,61.9465949 128.00106,61.8978432 C138.879073,61.9465949 149.837632,63.368876 160.067033,66.2049595 C184.49805,49.6441813 195.231926,53.0843636 195.231926,53.0843636 C202.199197,70.715562 197.815773,83.7344152 196.486756,86.9583937 C204.694018,95.9223682 209.660343,107.340889 209.660343,121.315702 C209.660343,170.478725 179.716133,181.303747 151.213281,184.472614 C155.80443,188.444828 159.895342,196.234518 159.895342,208.176593 C159.895342,225.303317 159.746968,239.087361 159.746968,243.303333 C159.746968,246.709601 162.05102,250.70089 168.53925,249.443941 C219.370432,232.499507 256,184.536204 256,128.00106 C256,57.3066942 198.691187,0 128.00106,0 Z M47.9405593,182.340212 C47.6586465,182.976105 46.6581745,183.166873 45.7467277,182.730227 C44.8183235,182.312656 44.2968914,181.445722 44.5978808,180.80771 C44.8734344,180.152739 45.876026,179.97045 46.8023103,180.409216 C47.7328342,180.826786 48.2627451,181.702199 47.9405593,182.340212 Z M54.2367892,187.958254 C53.6263318,188.524199 52.4329723,188.261363 51.6232682,187.366874 C50.7860088,186.474504 50.6291553,185.281144 51.2480912,184.70672 C51.8776254,184.140775 53.0349512,184.405731 53.8743302,185.298101 C54.7115892,186.201069 54.8748019,187.38595 54.2367892,187.958254 Z M58.5562413,195.146347 C57.7719732,195.691096 56.4895886,195.180261 55.6968417,194.042013 C54.9125733,192.903764 54.9125733,191.538713 55.713799,190.991845 C56.5086651,190.444977 57.7719732,190.936735 58.5753181,192.066505 C59.3574669,193.22383 59.3574669,194.58888 58.5562413,195.146347 Z M65.8613592,203.471174 C65.1597571,204.244846 63.6654083,204.03712 62.5716717,202.981538 C61.4524999,201.94927 61.1409122,200.484596 61.8446341,199.710926 C62.5547146,198.935137 64.0575422,199.15346 65.1597571,200.200564 C66.2704506,201.230712 66.6095936,202.705984 65.8613592,203.471174 Z M75.3025151,206.281542 C74.9930474,207.284134 73.553809,207.739857 72.1039724,207.313809 C70.6562556,206.875043 69.7087748,205.700761 70.0012857,204.687571 C70.302275,203.678621 71.7478721,203.20382 73.2083069,203.659543 C74.6539041,204.09619 75.6035048,205.261994 75.3025151,206.281542 Z M86.046947,207.473627 C86.0829806,208.529209 84.8535871,209.404622 83.3316829,209.4237 C81.8013,209.457614 80.563428,208.603398 80.5464708,207.564772 C80.5464708,206.498591 81.7483088,205.631657 83.2786917,205.606221 C84.8005962,205.576546 86.046947,206.424403 86.046947,207.473627 Z M96.6021471,207.069023 C96.7844366,208.099171 95.7267341,209.156872 94.215428,209.438785 C92.7295577,209.710099 91.3539086,209.074206 91.1652603,208.052538 C90.9808515,206.996955 92.0576306,205.939253 93.5413813,205.66582 C95.054807,205.402984 96.4092596,206.021919 96.6021471,207.069023 Z" fill="#161614"></path></g></svg></div><div class="notion-external-description"><div class="notion-external-title">shadcn-vue</div><div class="notion-external-block-desc">radix-vue<span> • </span>Updated Jul 24, 2024</div></div></a><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-a1b14a89256c4cce94cf8a8f0c05f348" href="https://juejin.cn/post/7349940323026485289"><div><div class="notion-bookmark-title">juejin.cn</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-text">https://juejin.cn/post/7349940323026485289</div></div></div></a></div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-686d1aea67644500b02548f744eae8c1" href="https://blog.csdn.net/weixin_41697143/article/details/129011932"><div><div class="notion-bookmark-title">常用的JS库整理-CSDN博客</div><div class="notion-bookmark-description">文章浏览阅读1.8k次，点赞3次，收藏12次。常用的JS库整理1. Lodash &amp; Underscore也许大多数童鞋都已经知道它们。Underscore提供了日常使用的基础函数。Lodash, 作为NPM最多下载量和被依赖最多的包，旨在为数组，字符串，对象和参数对象提供更一致的跨环境迭代支持。它已经是Underscore的超集。Underscor..._js库</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-icon"><img src="https://www.notion.so/image/https%3A%2F%2Fg.csdnimg.cn%2Fstatic%2Flogo%2Ffavicon32.ico?table=block&amp;id=686d1aea-6764-4500-b025-48f744eae8c1&amp;t=686d1aea-6764-4500-b025-48f744eae8c1" alt="常用的JS库整理-CSDN博客" loading="lazy" decoding="async"/></div><div class="notion-bookmark-link-text">https://blog.csdn.net/weixin_41697143/article/details/129011932</div></div></div></a></div></main></div>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[【前端】一些前端的小知识（一）]]></title>
            <link>https://blog.vixcitycc.top//article/一些前端的小知识（一）</link>
            <guid>https://blog.vixcitycc.top//article/一些前端的小知识（一）</guid>
            <pubDate>Sat, 27 Apr 2024 00:00:00 GMT</pubDate>
            <description><![CDATA[一些前端的小知识（一）]]></description>
            <content:encoded><![CDATA[<div id="notion-article" class="mx-auto overflow-hidden "><main class="notion light-mode notion-page notion-block-3adbb8f3820c42ceb3e77d975bcc7ca7"><div class="notion-viewport"></div><div class="notion-collection-page-properties"></div><div class="notion-row notion-block-d26ea3bfdf4c488ab4bd87ede966a263"><div class="notion-column notion-block-10344aa1b4b44a90904c917396e8822c" style="width:calc((100% - (1 * min(32px, 4vw))) * 0.1875)"><div class="notion-text notion-block-e98f73c4959343c6bf43efdacd3a5c15">原文连接 🫱</div><div class="notion-text notion-block-9baab7c62bcc4e52bb5fde1c3d13621e">您可以瞧一瞧</div><div class="notion-text notion-block-5372d88f1614440fbffba6ac3d2131f2">点进去看看</div></div><div class="notion-spacer"></div><div class="notion-column notion-block-3edd7f8c0ca544b18d68e67040661602" style="width:calc((100% - (1 * min(32px, 4vw))) * 0.8125)"><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-1caa82b52709445ebb92f9b5a4307102" href="https://mp.weixin.qq.com/s/9hzsC4E-S2CL4WDdliuCpQ"><div><div class="notion-bookmark-title">推荐7个自己常用小而美的前端依赖库</div><div class="notion-bookmark-description">推荐个自己常用小而美的前端依赖库2020年以后，软件工程都往轻量方便的方面发展。</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-icon"><img src="https://www.notion.so/image/https%3A%2F%2Fres.wx.qq.com%2Fa%2Fwx_fed%2Fassets%2Fres%2FMjliNWVm.svg?table=block&amp;id=1caa82b5-2709-445e-bb92-f9b5a4307102&amp;t=1caa82b5-2709-445e-bb92-f9b5a4307102" alt="推荐7个自己常用小而美的前端依赖库" loading="lazy" decoding="async"/></div><div class="notion-bookmark-link-text">https://mp.weixin.qq.com/s/9hzsC4E-S2CL4WDdliuCpQ</div></div></div><div class="notion-bookmark-image"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fmmbiz.qpic.cn%2Fsz_mmbiz_jpg%2FgEBm6Eh965e8ticYYjIshIqLT2VIkxPxHjHKE5oT3phCAu3byUWTdqccKQGCJYfuHiaxeFyxyZQPZr6agQZLib9eA%2F0%3Fwx_fmt%3Djpeg?table=block&amp;id=1caa82b5-2709-445e-bb92-f9b5a4307102&amp;t=1caa82b5-2709-445e-bb92-f9b5a4307102" alt="推荐7个自己常用小而美的前端依赖库" loading="lazy" decoding="async"/></div></a></div></div><div class="notion-spacer"></div></div><h2 class="notion-h notion-h1 notion-h-indent-0 notion-block-1108e31609744447a2a53a3823c2377f" data-id="1108e31609744447a2a53a3823c2377f"><span><div id="1108e31609744447a2a53a3823c2377f" class="notion-header-anchor"></div><a class="notion-hash-link" href="#1108e31609744447a2a53a3823c2377f" title="推荐个自己常用小而美的前端依赖库"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><b>推荐个自己常用小而美的前端依赖库</b></span></span></h2><div class="notion-text notion-block-5000e315bcdd4ca8b4d6468f72292876">2020年以后，软件工程都往轻量方便的方面发展。前端类型的框架加入hooks的概念也是试图让自己看起来轻。</div><div class="notion-text notion-block-b7a9bb85e1e247b4b5f79f812915c98d">梦兽编程这里推荐几个日常开发中使用比较多的开发库。使用在一些项目不大资源有限的项目中可以达到事半功倍的效果。产物也不会太多，这才是我们追求的小而美。</div><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-346c0162d5254a60b731452dd125d988" data-id="346c0162d5254a60b731452dd125d988"><span><div id="346c0162d5254a60b731452dd125d988" class="notion-header-anchor"></div><a class="notion-hash-link" href="#346c0162d5254a60b731452dd125d988" title="「radash」"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><b>「radash」</b></span></span></h3><div class="notion-text notion-block-1dfabfd7af444e849f8b8c73722b6a0c">radash的定位是ramda、lodash这一款工具库的代替产物，radash相比两者会更现代化和更轻量级。<code class="notion-inline-code">radash</code> 的设计哲学是提供一个简洁、直观的 API，同时保持高性能和模块化。</div><ul class="notion-list notion-list-disc notion-block-e7d590d89e7d468a8bea11945ba42fbb"><li>零依赖：<code class="notion-inline-code">radash</code> 不依赖于任何第三方库，使得项目更加轻量级。</li></ul><ul class="notion-list notion-list-disc notion-block-d06d029aa820400098fceaca9bf99c8b"><li>TypeScript友好：<code class="notion-inline-code">radash</code> 完全使用TypeScript编写，提供了准确的类型定义。</li></ul><ul class="notion-list notion-list-disc notion-block-8d1fc9ded1b94de09e593d37e31bc9ec"><li>现代化功能：<code class="notion-inline-code">radash</code> 去除了 <code class="notion-inline-code">Lodash</code> 中一些过时的函数，并引入了许多新的实用功能。</li></ul><ul class="notion-list notion-list-disc notion-block-ccdaf14de78d40188d4963bda50315ab"><li>易于理解和维护：<code class="notion-inline-code">radash</code> 的源代码易于理解，对新手友好。</li></ul><blockquote class="notion-quote notion-block-a0e609efcbc74669b86e54dad443adba"><div><code class="notion-inline-code">radash</code>有部分api吸收了golang的思路，如果你写过golang，那几乎是0迁移</div></blockquote><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-c1875996f11643438c379ac2a50c08f4"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:583px;max-width:100%;flex-direction:column"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2Fb26cc056-ca0e-421b-be51-1fb9824bd58e%2F640.webp?table=block&amp;id=c1875996-f116-4343-8c37-9ac2a50c08f4&amp;t=c1875996-f116-4343-8c37-9ac2a50c08f4&amp;width=583&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-bf377cd6cc2b4e8bb61f92a90b0032a8" data-id="bf377cd6cc2b4e8bb61f92a90b0032a8"><span><div id="bf377cd6cc2b4e8bb61f92a90b0032a8" class="notion-header-anchor"></div><a class="notion-hash-link" href="#bf377cd6cc2b4e8bb61f92a90b0032a8" title="day.js"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><b>day.js</b></span></span></h3><div class="notion-text notion-block-83064dc97a8742949c978ba3e0633124">Day.js 是一个轻量级的 JavaScript 时间日期处理库，与 Moment.js 的使用方法和接口非常相似，但它有一个显著的特点：体积小巧，仅有 2KB 左右。这使得 Day.js 在需要处理日期和时间，但又不希望增加太多体积的应用中非常受欢迎。</div><div class="notion-text notion-block-7f49070aee38421285a206de7e68c61c">Day.js 的设计哲学是提供一个不可变且持久化的日期时间库，它提供了简洁的 API 来解析、验证、操作和显示日期和时间。Day.js 支持链式调用，这意味着你可以将多个操作链接在一起，以实现复杂的时间日期处理。</div><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-249a855d326a42238fa2440c26705fc2" data-id="249a855d326a42238fa2440c26705fc2"><span><div id="249a855d326a42238fa2440c26705fc2" class="notion-header-anchor"></div><a class="notion-hash-link" href="#249a855d326a42238fa2440c26705fc2" title="Driver.js"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><b>Driver.js</b></span></span></h3><div class="notion-text notion-block-ad81e5c00ebd40d48b38968e872faa7c">如果你现在需要做一个引导新手的页面，在国内一般企业的前端框架使用Antd。一般会使用Antd的引导组件。如果你和梦兽一样不喜欢用Antd这么庞大的组件依赖可以使用Driver.js上手非常简单，体积在 gzip 压缩下仅仅 5kb。</div><div class="notion-text notion-block-b24bddef035d4fbdbb1ffcd867f55509">Driver.js 是一个轻量级的、无依赖的 JavaScript 库，用于创建新特性引导（feature tour）或突出显示页面上的元素。它可以帮助开发者引导用户关注页面的特定部分，通常用于新用户教程、产品介绍或功能更新提示。</div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-fa44100391a14024952eb0ab30593e4f"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:100%;max-width:100%;flex-direction:column;height:100%"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2Fccaafffe-ab33-4ffc-b90c-a5db5ba71b2c%2F6401.webp?table=block&amp;id=fa441003-91a1-4024-952e-b0ab30593e4f&amp;t=fa441003-91a1-4024-952e-b0ab30593e4f&amp;width=708&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-cb7e1a096a074e74b4b537ca1223244d" data-id="cb7e1a096a074e74b4b537ca1223244d"><span><div id="cb7e1a096a074e74b4b537ca1223244d" class="notion-header-anchor"></div><a class="notion-hash-link" href="#cb7e1a096a074e74b4b537ca1223244d" title="「filesize」"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><b>「filesize」</b></span></span></h3><div class="notion-text notion-block-1ab31bffef024a3e8edeaf2fb19685de">如果你现在有业务需要显示文件大小，需要你处理成kb,mb,g的时候。filesize就可以帮你快速解决这个问题。</div><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-52fa1b574e6f440282049407cfb9d0dd" data-id="52fa1b574e6f440282049407cfb9d0dd"><span><div id="52fa1b574e6f440282049407cfb9d0dd" class="notion-header-anchor"></div><a class="notion-hash-link" href="#52fa1b574e6f440282049407cfb9d0dd" title="「react-use」"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><b>「react-use」</b></span></span></h3><div class="notion-text notion-block-7845b36b490b4f7ea5a4adbe4532541e">react-use比ahooks提供了更多，更全面的hooks。但是如果你有性能方面的要求，建议使用ahooks。</div><div class="notion-text notion-block-cc4a69aa5cab428f8fd302515f765a27">这个库提供了大量的自定义 Hook，涵盖了从基本的状态管理、动画、副作用处理到复杂的传感器数据、WebRTC等各个方面。</div><div class="notion-text notion-block-ca8ad9d4b5fa4548867f7a3822754c99">从Logo就可以看出它的YYDS</div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-d6331df8d8a54eb6a3df741a49a6ef6d"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:450px;max-width:100%;flex-direction:column"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2Fae914232-7058-4a52-9732-175038b62668%2F6402.webp?table=block&amp;id=d6331df8-d8a5-4eb6-a3df-741a49a6ef6d&amp;t=d6331df8-d8a5-4eb6-a3df-741a49a6ef6d&amp;width=450&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-ba5bea0545f74726b49b5786b62010f0" data-id="ba5bea0545f74726b49b5786b62010f0"><span><div id="ba5bea0545f74726b49b5786b62010f0" class="notion-header-anchor"></div><a class="notion-hash-link" href="#ba5bea0545f74726b49b5786b62010f0" title="timeago.js"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><b>timeago.js</b></span></span></h3><div class="notion-text notion-block-a5d2056983ed40108ef31ae4a4c83a66">做CMS系统的同学可以用的比较多这个功能，需要对某些发布的文章做些特殊的格式形式要求。</div><div class="notion-text notion-block-944851669f3a49179d7a38091437d2e2">例如“几分钟前”、“几天前”、“几个月前”等。这个库可以帮助开发者轻松地在网页上显示相对时间，而不是显示具体的时间戳。</div><div class="notion-text notion-block-f5463367d86a4ae081020a27d0340ed6">timeago仅 2Kb 大小。同时提供了 React 版本 timeago-react。</div><blockquote class="notion-quote notion-block-9ae2185ba3ea4a14bbc963490389d35b"><div>如果要显示其他语言，需要下载对应的语言包。默认是英语</div></blockquote><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-9136cad59f05425ba4f4aca16fb90a38" data-id="9136cad59f05425ba4f4aca16fb90a38"><span><div id="9136cad59f05425ba4f4aca16fb90a38" class="notion-header-anchor"></div><a class="notion-hash-link" href="#9136cad59f05425ba4f4aca16fb90a38" title="「@formkit/drag-and-drop」"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><b>「@formkit/drag-and-drop」</b></span></span></h3><div class="notion-text notion-block-dea55e98a24a4c9c9409b330162a8f72">FormKit DnD 是一个小型库，它简单、灵活、与框架无关，压缩后只有 4Kb 左右，设计理念为数据优先。</div><div class="notion-text notion-block-1ef387cb9a3c40679e80af70098492c0">相比React Dnd不但体积变小了，而且api也非常简单！没有特性要求你只需要把两个参数挂载到对应的Dom节点即可。同时支持跨框架运行</div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-e0506f55e6b547e389c827500558833f"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:100%;max-width:100%;flex-direction:column;height:100%"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2F897914a0-263f-4ea0-b50f-0e0cbdb68cff%2F640.webp?table=block&amp;id=e0506f55-e6b5-47e3-89c8-27500558833f&amp;t=e0506f55-e6b5-47e3-89c8-27500558833f&amp;width=708&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><div class="notion-text notion-block-f582c7b98d0247ccb657618fa909a5e7">总之，这些前端依赖库都是非常不错的选择,它们轻量级、功能丰富,可以帮助我们提高开发效率,构建更优质的产品。如果你也在寻找优秀的前端工具,不妨试试这些推荐库,相信它们一定会为你的开发之路带来不少帮助。</div><div class="notion-text notion-block-1ce6e0da55204fc099cc2ff24f14bd92">如果你觉得这篇文章对你有所帮助,欢迎分享给更多需要的人。同时,也欢迎关注梦兽编程,我们会持续为大家推荐更多优质的前端资源和技术分享。让我们一起探索前端的美好世界!</div><hr class="notion-hr notion-block-e0741398367541c5a0488820c59ef289"/><div class="notion-row notion-block-d41e2138ec6b46f7b64dc9738c5b8d44"><div class="notion-column notion-block-a672d89696794d46b790f8aed2788ee9" style="width:calc((100% - (1 * min(32px, 4vw))) * 0.1875)"><div class="notion-text notion-block-b0a9b666fff546d3bbd3dbf1ac64f1ad">原文连接 🫱</div><div class="notion-text notion-block-95ad90bc6d1b4b5cbc100b2b5df512d0">您可以瞧一瞧</div><div class="notion-text notion-block-6e9e6546caa64ebc899a4ece85ace7d1">点进去看看</div></div><div class="notion-spacer"></div><div class="notion-column notion-block-46a9cc55080c46d2aaf32541dbc66174" style="width:calc((100% - (1 * min(32px, 4vw))) * 0.8125)"><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-94263179f0ef43a9b49b4566642274e0" href="https://mp.weixin.qq.com/s/ow1t-jRkktDE962pCXAGEw"><div><div class="notion-bookmark-title">5.2K star！ 一款贼好用的低代码报表工具，开源免费！</div><div class="notion-bookmark-description">最近，开源君发现一个很好用的开源报表工具- JimuReport，只需要拖拖拽拽就能搞定一个大屏数据和报表功能，可以帮我们快速、高效地完成各种报表设计和开发。</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-icon"><img src="https://www.notion.so/image/https%3A%2F%2Fres.wx.qq.com%2Fa%2Fwx_fed%2Fassets%2Fres%2FMjliNWVm.svg?table=block&amp;id=94263179-f0ef-43a9-b49b-4566642274e0&amp;t=94263179-f0ef-43a9-b49b-4566642274e0" alt="5.2K star！ 一款贼好用的低代码报表工具，开源免费！" loading="lazy" decoding="async"/></div><div class="notion-bookmark-link-text">https://mp.weixin.qq.com/s/ow1t-jRkktDE962pCXAGEw</div></div></div><div class="notion-bookmark-image"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_jpg%2FwrSY9P4VMJFpicceWtAbo9wvOgKwFJFQ254YicHuzDcF4tibY9Xcksic7L81p295k2gicIZC1ZGeS5DqroFbhHCbxkw%2F0%3Fwx_fmt%3Djpeg?table=block&amp;id=94263179-f0ef-43a9-b49b-4566642274e0&amp;t=94263179-f0ef-43a9-b49b-4566642274e0" alt="5.2K star！ 一款贼好用的低代码报表工具，开源免费！" loading="lazy" decoding="async"/></div></a></div></div><div class="notion-spacer"></div></div><h2 class="notion-h notion-h1 notion-h-indent-0 notion-block-088f9669cc66482d98af7d07f5d61a75" data-id="088f9669cc66482d98af7d07f5d61a75"><span><div id="088f9669cc66482d98af7d07f5d61a75" class="notion-header-anchor"></div><a class="notion-hash-link" href="#088f9669cc66482d98af7d07f5d61a75" title="5.2K star！ 一款贼好用的低代码报表工具，开源免费！"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title">5.2K star！ 一款贼好用的低代码报表工具，开源免费！</span></span></h2><div class="notion-text notion-block-16a28bd3b82c4221b307effb5d3aaded">大家好，我是开源君！</div><div class="notion-text notion-block-614349b17b0c4944ba815a51fb5fe8ef">最近，开源君发现一个很好用的开源报表工具- <code class="notion-inline-code">JimuReport</code>，只需要拖拖拽拽就能搞定一个大屏数据和报表功能，可以帮我们快速、高效地完成各种报表设计和开发。</div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-f73d7e91e34d48ffac858185e141dde8"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:100%;max-width:100%;flex-direction:column;height:100%"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2F3760264f-5741-475f-80b1-762493578c80%2F640_(1).webp?table=block&amp;id=f73d7e91-e34d-48ff-ac85-8185e141dde8&amp;t=f73d7e91-e34d-48ff-ac85-8185e141dde8&amp;width=708&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-d98d6fb79a314f1983d7ea4c74d25e86" data-id="d98d6fb79a314f1983d7ea4c74d25e86"><span><div id="d98d6fb79a314f1983d7ea4c74d25e86" class="notion-header-anchor"></div><a class="notion-hash-link" href="#d98d6fb79a314f1983d7ea4c74d25e86" title="项目介绍"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><b>项目介绍</b></span></span></h3><div class="notion-text notion-block-9a3b916c7f434aa08f1d6faed5345c24"><code class="notion-inline-code">JimuReport(积木报表)</code>是一款基于Web技术的报表工具，采用低代码开发模式，零代码即可快速生成各种精美报表，包括：数据报表、图表报表、打印报表 大屏设计等。</div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-65849ae8def941a5aa8fafbfae9417be"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:100%;max-width:100%;flex-direction:column;height:100%"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2Fd0618d0e-c287-4a74-9efb-fcef70b7681c%2F640.webp?table=block&amp;id=65849ae8-def9-41a5-aa8f-afbfae9417be&amp;t=65849ae8-def9-41a5-aa8f-afbfae9417be&amp;width=708&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><div class="notion-text notion-block-d4731aaafc2045d18c4a62fcd1638c7f">主要的功能有：</div><ul class="notion-list notion-list-disc notion-block-3335636e3c464ddf9037dc7c6c5961c5"><li>报表设计器：采用Web版报表设计器，类似于Excel操作风格，通过拖拽完成报表设计。</li></ul><ul class="notion-list notion-list-disc notion-block-95dc6468b8ff409fae3556d6b420e759"><li>数据源：支持多种数据源，包括数据库、API、文件等。</li></ul><ul class="notion-list notion-list-disc notion-block-e42e0a78fc90437ea25e78bdf2802340"><li>报表类型：支持多种报表类型，包括数据报表、图表报表、打印报表、大屏设计等。</li></ul><ul class="notion-list notion-list-disc notion-block-3b7481be038e4f1f84f401024d34c9bc"><li>报表主题：提供多种报表主题，可快速更换报表风格。</li></ul><ul class="notion-list notion-list-disc notion-block-d5eb73180052482f97cc232988430cae"><li>权限管理：支持细粒度的权限管理，保证报表安全。</li></ul><ul class="notion-list notion-list-disc notion-block-d166d1d33e18443f8ff81b3876889e15"><li>导出格式：支持多种导出格式，包括PDF、Excel、Word、Html等。</li></ul><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-833eba4e13fa4dbfb750973fb077a64c"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:411px;max-width:100%;flex-direction:column"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2Fa183aa21-1498-4672-9879-e847fc9e3a6c%2F640.webp?table=block&amp;id=833eba4e-13fa-4dbf-b750-973fb077a64c&amp;t=833eba4e-13fa-4dbf-b750-973fb077a64c&amp;width=411&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-a0e010dc538a47bfbe9bf4cd6fe12d2d" data-id="a0e010dc538a47bfbe9bf4cd6fe12d2d"><span><div id="a0e010dc538a47bfbe9bf4cd6fe12d2d" class="notion-header-anchor"></div><a class="notion-hash-link" href="#a0e010dc538a47bfbe9bf4cd6fe12d2d" title="性能特性"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><b>性能特性</b></span></span></h3><ul class="notion-list notion-list-disc notion-block-e7fc7f08ad734d0abcfd96594ef3c6a1"><li>完全免费：开源项目，永久免费使用。</li></ul><ul class="notion-list notion-list-disc notion-block-fdb55371680944059057a4df57b3817e"><li>简单易用：拖拽式操作，无需编写代码，即使是小白也能轻松上手。</li></ul><ul class="notion-list notion-list-disc notion-block-84e5cc9e4d004f2891abea112e05774b"><li>功能强大：支持各种报表类型，包括数据报表、图表报表、打印报表、大屏设计等。</li></ul><ul class="notion-list notion-list-disc notion-block-d055c0c68fb14f12a5d13873d7f54682"><li>性能卓越：采用先进技术，运行效率高，可满足大数据量报表需求。</li></ul><ul class="notion-list notion-list-disc notion-block-d064e8c321de4d1a88df4e11ceb0e8f0"><li>二次开发方便：提供丰富的 API 接口，支持二次开发，满足个性化需求。</li></ul><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-de5805058f9a46c3a50e781f29aca7e1"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:704px;max-width:100%;flex-direction:column"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2F924f4547-414b-4ceb-a783-b31cd0d5fbce%2F640.webp?table=block&amp;id=de580505-8f9a-46c3-a50e-781f29aca7e1&amp;t=de580505-8f9a-46c3-a50e-781f29aca7e1&amp;width=704&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-07a029bd671d4abaab69fc019ad0609d" data-id="07a029bd671d4abaab69fc019ad0609d"><span><div id="07a029bd671d4abaab69fc019ad0609d" class="notion-header-anchor"></div><a class="notion-hash-link" href="#07a029bd671d4abaab69fc019ad0609d" title="效果展示"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><b>效果展示</b></span></span></h3><div class="notion-text notion-block-f38009534ad844a8baa33a0a8a72d465">报表设计器，直接在线拖拽</div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-991e17884cb748d99ee29582271e7b06"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:100%;max-width:100%;flex-direction:column;height:100%"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2F9dbdf254-ffd7-4433-89fa-e05cf8c9f458%2F640.webp?table=block&amp;id=991e1788-4cb7-48d9-9ee2-9582271e7b06&amp;t=991e1788-4cb7-48d9-9ee2-9582271e7b06&amp;width=708&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><div class="notion-text notion-block-ab19a227aac4468297a96d4213b7404b">打印设计</div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-c8cfd3ab6d094ffb957c6a738f24760c"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:100%;max-width:100%;flex-direction:column;height:100%"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2F08406b69-7bb3-4208-a80d-3092447d8796%2F640.webp?table=block&amp;id=c8cfd3ab-6d09-4ffb-957c-6a738f24760c&amp;t=c8cfd3ab-6d09-4ffb-957c-6a738f24760c&amp;width=708&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><div class="notion-text notion-block-000ee9051cb2448088e1819222f6a120">数据报表</div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-1ac2e8286a714b0ebee440f421125ea0"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:100%;max-width:100%;flex-direction:column;height:100%"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2Fc5ecca09-afc9-453a-bacb-939fce4ca5cf%2F640.webp?table=block&amp;id=1ac2e828-6a71-4b0e-bee4-40f421125ea0&amp;t=1ac2e828-6a71-4b0e-bee4-40f421125ea0&amp;width=708&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><div class="notion-text notion-block-c8ba1592831f4c1da64e8343ef173854">大屏设计效果</div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-db95c147add544b5a775251dfc094dcc"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:100%;max-width:100%;flex-direction:column;height:100%"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2F340c620c-ec92-408a-837f-6b744e8940ba%2F640.webp?table=block&amp;id=db95c147-add5-44b5-a775-251dfc094dcc&amp;t=db95c147-add5-44b5-a775-251dfc094dcc&amp;width=708&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-17d2ba08a3074267b57a907def411103"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:100%;max-width:100%;flex-direction:column;height:100%"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2Ff8a380ba-ed4a-4b63-b621-085e49be825e%2F640.webp?table=block&amp;id=17d2ba08-a307-4267-b57a-907def411103&amp;t=17d2ba08-a307-4267-b57a-907def411103&amp;width=708&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-e0d6e1527c1c48df900e28d97c374406"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:100%;max-width:100%;flex-direction:column;height:100%"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2F8a47fd0d-997c-4c47-9e59-7a309a50947b%2F640.webp?table=block&amp;id=e0d6e152-7c1c-48df-900e-28d97c374406&amp;t=e0d6e152-7c1c-48df-900e-28d97c374406&amp;width=708&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><div class="notion-text notion-block-bc061289ce09419b874130fde839b6a4">仪表盘设计器</div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-3d784349c5cf49a093a61726f3d8adb9"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:100%;max-width:100%;flex-direction:column;height:100%"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2Fbb4d4737-4b89-4747-bf4b-45d16c413a9b%2F640.webp?table=block&amp;id=3d784349-c5cf-49a0-93a6-1726f3d8adb9&amp;t=3d784349-c5cf-49a0-93a6-1726f3d8adb9&amp;width=708&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-b664bd8c60ad40599fa6f83d52e0fb78"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:100%;max-width:100%;flex-direction:column;height:100%"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2Fd815e778-a4e6-4327-9b66-4fa30986e5c0%2F640_(1).webp?table=block&amp;id=b664bd8c-60ad-4059-9fa6-f83d52e0fb78&amp;t=b664bd8c-60ad-4059-9fa6-f83d52e0fb78&amp;width=708&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-067c21fe5a384421b3462f5631931f5c" data-id="067c21fe5a384421b3462f5631931f5c"><span><div id="067c21fe5a384421b3462f5631931f5c" class="notion-header-anchor"></div><a class="notion-hash-link" href="#067c21fe5a384421b3462f5631931f5c" title="项目使用"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><b>项目使用</b></span></span></h3><div class="notion-text notion-block-4b1af9fe4dd14ec2bc96b60cd4d4979a">快速集成方式：</div><div class="notion-text notion-block-8b3bf3e6726449dd9098f63810c50b95">1、引入JimuReport依赖</div><ul class="notion-list notion-list-disc notion-block-cf7a1b0faacb424bb57e4711523dbe1d"><li>springboot2依赖</li></ul><ul class="notion-list notion-list-disc notion-block-985f7b6975df4deb9c1a9dc45fd33f3a"><li>按需引入mongo和redis支持包</li></ul><ul class="notion-list notion-list-disc notion-block-b8100c713392493cbc4fd30833535cf4"><li>springboot3依赖</li></ul><div class="notion-text notion-block-d22dbcdae2034253be79c6d651adcfd1">2、初始化SQL及项目配置</div><div class="notion-text notion-block-9f6f4dfa503d406fb5907e1fa35f53ea">具体可以查看github项目文档。</div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-c1ba0d81f199471ca52d2b1ed2df0bdd"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:100%;max-width:100%;flex-direction:column;height:100%"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2F5beec1f9-855e-4b47-b49d-5bcdd837594a%2F640_(1).webp?table=block&amp;id=c1ba0d81-f199-471c-a52d-2b1ed2df0bdd&amp;t=c1ba0d81-f199-471c-a52d-2b1ed2df0bdd&amp;width=708&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><div class="notion-text notion-block-4355ce4bd43841158d387c16a03882bb">我们也可以直接访问在线地址快速体验：</div><div class="notion-text notion-block-1f058600722a46568c62d97b09d168b1">注册登录后即可在线使用。</div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-659b1577bf6f4602b82ad36f3d367618"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:100%;max-width:100%;flex-direction:column;height:100%"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2F1fb07922-cdaa-48ad-aae0-6b334874dafa%2F640_(1).webp?table=block&amp;id=659b1577-bf6f-4602-b82a-d36f3d367618&amp;t=659b1577-bf6f-4602-b82a-d36f3d367618&amp;width=708&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><div class="notion-text notion-block-12ed71475f94422694af15ccc3964b35">体验一番，JimuReport积木报表创建报表还是很方便的，而且完全免费，基本可以满足日常需求，集成Spring boot 项目也比较容易。</div><div class="notion-text notion-block-99ac6198afda4b97abce963ea3d0b23a">感兴趣的可以去项目地址进行详细了解。</div><div class="notion-text notion-block-53812ad131384075bed947e7501e4ce8">项目地址：</div><div class="notion-text notion-block-39113c0bbcd54cdc8ccc2f9ea76c6b37"><a target="_blank" rel="noopener noreferrer" class="notion-link" href="https://github.com/jeecgboot/JimuReport">https://github.com/jeecgboot/JimuReport</a></div><hr class="notion-hr notion-block-85e9194532de47f7bc10418dd35ebdd6"/><div class="notion-row notion-block-532a3150ed4d498f9314b1a4c9698f02"><div class="notion-column notion-block-fac671016f944b1199d27bf1ccc47c7d" style="width:calc((100% - (1 * min(32px, 4vw))) * 0.1875)"><div class="notion-text notion-block-1d449ef4297d4a9b86b9fbcfc5799f4e">原文连接 🫱</div><div class="notion-text notion-block-140cd9401b2e4e78b29f12a7babbf04a">您可以瞧一瞧</div><div class="notion-text notion-block-6b5e99a377374b038da056b03427e0f6">点进去看看</div></div><div class="notion-spacer"></div><div class="notion-column notion-block-112fbc8cddc94d1ba1df7ac7597d68b6" style="width:calc((100% - (1 * min(32px, 4vw))) * 0.8125)"><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-8858087657594544bc1dea59014d64a8" href="https://mp.weixin.qq.com/s/-8zDR5pPTja6GUVLUds8Jw"><div><div class="notion-bookmark-title">css 动画，文本擦除效果</div><div class="notion-bookmark-description">css 动画擦除效果在做官网的时候很适合，此动画应用了 Houdini API @property</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-icon"><img src="https://www.notion.so/image/https%3A%2F%2Fres.wx.qq.com%2Fa%2Fwx_fed%2Fassets%2Fres%2FMjliNWVm.svg?table=block&amp;id=88580876-5759-4544-bc1d-ea59014d64a8&amp;t=88580876-5759-4544-bc1d-ea59014d64a8" alt="css 动画，文本擦除效果" loading="lazy" decoding="async"/></div><div class="notion-bookmark-link-text">https://mp.weixin.qq.com/s/-8zDR5pPTja6GUVLUds8Jw</div></div></div><div class="notion-bookmark-image"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fmmbiz.qpic.cn%2Fsz_mmbiz_jpg%2FdLtTnNkuaUyT6r7N2xYpIp6sviaeRUpzZcAwIRgtdV1dZwrrEEDgWOEmT5f7icM06KJo75WaVKA4Y8ibiagJOPcYPQ%2F0%3Fwx_fmt%3Djpeg?table=block&amp;id=88580876-5759-4544-bc1d-ea59014d64a8&amp;t=88580876-5759-4544-bc1d-ea59014d64a8" alt="css 动画，文本擦除效果" loading="lazy" decoding="async"/></div></a></div></div><div class="notion-spacer"></div></div><h2 class="notion-h notion-h1 notion-h-indent-0 notion-block-2f6814c4291540dfbbce1c3cc8f57026" data-id="2f6814c4291540dfbbce1c3cc8f57026"><span><div id="2f6814c4291540dfbbce1c3cc8f57026" class="notion-header-anchor"></div><a class="notion-hash-link" href="#2f6814c4291540dfbbce1c3cc8f57026" title="css 动画，文本擦除效果"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title">css 动画，文本擦除效果</span></span></h2><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-0fdf9e7b18614eb28cd631f8d7d4e1fe"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:100%;max-width:100%;flex-direction:column;height:100%"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2F4bd62732-04cb-4e10-b2d6-f233dd0e4993%2F640.gif?table=block&amp;id=0fdf9e7b-1861-4eb2-8cd6-31f8d7d4e1fe&amp;t=0fdf9e7b-1861-4eb2-8cd6-31f8d7d4e1fe&amp;width=708&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><div class="notion-text notion-block-dc216a59ef7945698f050937b2610f40">css 动画擦除效果在做官网的时候很适合，此动画应用了</div><blockquote class="notion-quote notion-block-22b5d9fe3b384482b471a8cb029be9e7"><div>Houdini API @property</div><div class="notion-text notion-block-7a7b612d964e40898da379072f427d04">https://developer.mozilla.org/en-US/docs/Web/CSS/@property</div></blockquote><hr class="notion-hr notion-block-040160eacaf6434d80ad8f805efcab86"/><div class="notion-row notion-block-1a4f177ca4df42c79800834e0ce20af8"><div class="notion-column notion-block-7ba9f8bce6f14da9b7e43d40687afb12" style="width:calc((100% - (1 * min(32px, 4vw))) * 0.1875)"><div class="notion-text notion-block-153ba06f85a74866bf5db4bb10d71747">原文连接 🫱</div><div class="notion-text notion-block-252fa25207724c6c9742cdbc63cbc73d">您可以瞧一瞧</div><div class="notion-text notion-block-b46eec6635044c75993fe2bcbd5a259b">点进去看看</div></div><div class="notion-spacer"></div><div class="notion-column notion-block-75a0409cc4d142c68cc0313d24d91a8e" style="width:calc((100% - (1 * min(32px, 4vw))) * 0.8125)"><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-74e9df19e673426980af208e2e057f57" href="https://mp.weixin.qq.com/s/9rEoUFtrKqpRTsUaw9HebA"><div><div class="notion-bookmark-title">mp.weixin.qq.com</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-icon"><img src="https://www.notion.so/image/https%3A%2F%2Fres.wx.qq.com%2Fa%2Fwx_fed%2Fassets%2Fres%2FMjliNWVm.svg?table=block&amp;id=74e9df19-e673-4269-80af-208e2e057f57&amp;t=74e9df19-e673-4269-80af-208e2e057f57" alt="mp.weixin.qq.com" loading="lazy" decoding="async"/></div><div class="notion-bookmark-link-text">https://mp.weixin.qq.com/s/9rEoUFtrKqpRTsUaw9HebA</div></div></div></a></div></div><div class="notion-spacer"></div></div><h2 class="notion-h notion-h1 notion-h-indent-0 notion-block-4f5ec5190cf7413fb105701d1f19b8b2" data-id="4f5ec5190cf7413fb105701d1f19b8b2"><span><div id="4f5ec5190cf7413fb105701d1f19b8b2" class="notion-header-anchor"></div><a class="notion-hash-link" href="#4f5ec5190cf7413fb105701d1f19b8b2" title="DPlayer - 哇，好可爱的 HTML5 弹幕视频播放器？"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title">DPlayer - 哇，好可爱的 HTML5 弹幕视频播放器？</span></span></h2><div class="notion-text notion-block-14c2486f51ae417ab0398c30688fcb41">今天和小伙伴分享一款开源的HTML5 弹幕视频播放器——DPlayer。</div><div class="notion-text notion-block-c15407cfd4dc49148fdd225e37aa6053">它是一款轻量级视频播放器，特别适用于在网页中嵌入视频播放功能。具有简洁的界面、丰富的功能以及易于集成的特点。</div><div class="notion-text notion-block-5be1aeaf90ff4b3eb617f549ac6e7b3a">支持多种视频格式，包括 MP4、WebM 等，并且提供了丰富的 API 和配置选项，使开发者可以根据自己的需求进行定制。</div><div class="notion-text notion-block-c840f3818613418588c33a2605beb1e0">还支持弹幕功能，可以让用户在观看视频的同时发送弹幕消息，增强了用户的互动体验。</div><div class="notion-text notion-block-af348313c29347b3b75224b0e33861a1">下面我们一起实现一个播放器吧！</div><h2 class="notion-h notion-h1 notion-h-indent-0 notion-block-2d469c844c874524a76ad1f4d4b0b544" data-id="2d469c844c874524a76ad1f4d4b0b544"><span><div id="2d469c844c874524a76ad1f4d4b0b544" class="notion-header-anchor"></div><a class="notion-hash-link" href="#2d469c844c874524a76ad1f4d4b0b544" title="安装 DPlayer"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><b>安装 DPlayer</b></span></span></h2><div class="notion-text notion-block-c05ed947e93248609a774b66e10e9599">安装就比较简单了，支持 <code class="notion-inline-code">CDN</code>、包管理工具（npm/yarn/pnpm）方式安装。通过简单的 CDN 方式安装。</div><div class="notion-text notion-block-a335a7353acc4c7d8a1530734639b710">使用 npm 和 yarn 安装</div><h2 class="notion-h notion-h1 notion-h-indent-0 notion-block-467d3b9654ee4a26b3d4f9170b164ad6" data-id="467d3b9654ee4a26b3d4f9170b164ad6"><span><div id="467d3b9654ee4a26b3d4f9170b164ad6" class="notion-header-anchor"></div><a class="notion-hash-link" href="#467d3b9654ee4a26b3d4f9170b164ad6" title="如何使用 DPlayer ？"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><b>如何使用 DPlayer ？</b></span></span></h2><div class="notion-text notion-block-3f44be0f82094e8bbf4ad9a15ad70f66">视频效果</div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-3b807b53faff468e96b325372a1ac4ac"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:100%;max-width:100%;flex-direction:column;height:100%"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2F60c7d3d5-266f-427b-85f5-5c9e5c3da7a5%2F640.webp?table=block&amp;id=3b807b53-faff-468e-96b3-25372a1ac4ac&amp;t=3b807b53-faff-468e-96b3-25372a1ac4ac&amp;width=708&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-d0fda938928c405f85ff6943b0c6b8ce" data-id="d0fda938928c405f85ff6943b0c6b8ce"><span><div id="d0fda938928c405f85ff6943b0c6b8ce" class="notion-header-anchor"></div><a class="notion-hash-link" href="#d0fda938928c405f85ff6943b0c6b8ce" title="属性介绍"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><b>属性介绍</b></span></span></h3><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-ec24837eae8e42279932c57e4ed13f74"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:387px;max-width:100%;flex-direction:column"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2F605231f7-2b3a-49c0-943c-ef9d63ae6ba5%2F640.webp?table=block&amp;id=ec24837e-ae8e-4227-9932-c57e4ed13f74&amp;t=ec24837e-ae8e-4227-9932-c57e4ed13f74&amp;width=387&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><h4 class="notion-h notion-h3 notion-h-indent-2 notion-block-8dc7d72d73e74363823cfea2ef974910" data-id="8dc7d72d73e74363823cfea2ef974910"><span><div id="8dc7d72d73e74363823cfea2ef974910" class="notion-header-anchor"></div><a class="notion-hash-link" href="#8dc7d72d73e74363823cfea2ef974910" title="全局配置"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><b>全局配置</b></span></span></h4><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-0cd57da9ca4445c6b455fb485b3cabbb"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:676px;max-width:100%;flex-direction:column"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2Fa80b58c4-45f7-43f4-bfa6-f309491359f5%2F640_(1).webp?table=block&amp;id=0cd57da9-ca44-45c6-b455-fb485b3cabbb&amp;t=0cd57da9-ca44-45c6-b455-fb485b3cabbb&amp;width=676&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><h4 class="notion-h notion-h3 notion-h-indent-2 notion-block-49aac49472a649a598cd6a754b3fec65" data-id="49aac49472a649a598cd6a754b3fec65"><span><div id="49aac49472a649a598cd6a754b3fec65" class="notion-header-anchor"></div><a class="notion-hash-link" href="#49aac49472a649a598cd6a754b3fec65" title="视频配置"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><b>视频配置</b></span></span></h4><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-c3dc7e132f9a4c71a6c38b00857307ee"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:667px;max-width:100%;flex-direction:column"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2F81a91593-0a63-4c35-9e13-e51defc6c43f%2F640_(2).webp?table=block&amp;id=c3dc7e13-2f9a-4c71-a6c3-8b00857307ee&amp;t=c3dc7e13-2f9a-4c71-a6c3-8b00857307ee&amp;width=667&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><h4 class="notion-h notion-h3 notion-h-indent-2 notion-block-648a62a2646c401e8eabe6a0dde46c22" data-id="648a62a2646c401e8eabe6a0dde46c22"><span><div id="648a62a2646c401e8eabe6a0dde46c22" class="notion-header-anchor"></div><a class="notion-hash-link" href="#648a62a2646c401e8eabe6a0dde46c22" title="字幕配置"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><b>字幕配置</b></span></span></h4><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-1e0b1a45b8fa47e9a860f9a542e7e7d3"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:661px;max-width:100%;flex-direction:column"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2F57ae0686-f5a7-4f40-9e6a-d5666b790a33%2F640_(3).webp?table=block&amp;id=1e0b1a45-b8fa-47e9-a860-f9a542e7e7d3&amp;t=1e0b1a45-b8fa-47e9-a860-f9a542e7e7d3&amp;width=661&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><h4 class="notion-h notion-h3 notion-h-indent-2 notion-block-2a24cf11337540238e539c7e1acbbda3" data-id="2a24cf11337540238e539c7e1acbbda3"><span><div id="2a24cf11337540238e539c7e1acbbda3" class="notion-header-anchor"></div><a class="notion-hash-link" href="#2a24cf11337540238e539c7e1acbbda3" title="弹幕配置"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><b>弹幕配置</b></span></span></h4><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-f5a8f70d5d26463fadf923e71a6f6ab7"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:669px;max-width:100%;flex-direction:column"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2F0e2e63a8-942b-4e12-8ab2-23f7e1c187b8%2F640_(4).webp?table=block&amp;id=f5a8f70d-5d26-463f-adf9-23e71a6f6ab7&amp;t=f5a8f70d-5d26-463f-adf9-23e71a6f6ab7&amp;width=669&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-54838c3c79684991832901b95504560f" data-id="54838c3c79684991832901b95504560f"><span><div id="54838c3c79684991832901b95504560f" class="notion-header-anchor"></div><a class="notion-hash-link" href="#54838c3c79684991832901b95504560f" title="API"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><b>API</b></span></span></h3><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-ccdd2747196e46d5b798ed8d37f1e52b"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:467px;max-width:100%;flex-direction:column"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2F40f61ed9-ad55-48b5-92b3-7ecf78768bcb%2F640.webp?table=block&amp;id=ccdd2747-196e-46d5-b798-ed8d37f1e52b&amp;t=ccdd2747-196e-46d5-b798-ed8d37f1e52b&amp;width=467&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><h4 class="notion-h notion-h3 notion-h-indent-2 notion-block-97565f93328e4a6fb6f414334a52ef3a" data-id="97565f93328e4a6fb6f414334a52ef3a"><span><div id="97565f93328e4a6fb6f414334a52ef3a" class="notion-header-anchor"></div><a class="notion-hash-link" href="#97565f93328e4a6fb6f414334a52ef3a" title="生命周期 API"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><b>生命周期 API</b></span></span></h4><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-7d3f9707d72d48d5acdf00c2d21c8dcd"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:100%;max-width:100%;flex-direction:column;height:100%"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2F5f41d393-1b09-4d49-9e27-ff175065b88d%2F640_(1).webp?table=block&amp;id=7d3f9707-d72d-48d5-acdf-00c2d21c8dcd&amp;t=7d3f9707-d72d-48d5-acdf-00c2d21c8dcd&amp;width=708&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><h4 class="notion-h notion-h3 notion-h-indent-2 notion-block-255a73d04d654a4680581cce335469d1" data-id="255a73d04d654a4680581cce335469d1"><span><div id="255a73d04d654a4680581cce335469d1" class="notion-header-anchor"></div><a class="notion-hash-link" href="#255a73d04d654a4680581cce335469d1" title="播放 API"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><b>播放 API</b></span></span></h4><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-a91cfd0874414244a5f95a68d46d0cae"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:100%;max-width:100%;flex-direction:column;height:100%"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2F580cde0c-46ba-4bdc-878d-a8c5cc4c29cd%2F640_(2).webp?table=block&amp;id=a91cfd08-7441-4244-a5f9-5a68d46d0cae&amp;t=a91cfd08-7441-4244-a5f9-5a68d46d0cae&amp;width=708&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><h4 class="notion-h notion-h3 notion-h-indent-2 notion-block-fde16565b676477f91cebffa16a47c38" data-id="fde16565b676477f91cebffa16a47c38"><span><div id="fde16565b676477f91cebffa16a47c38" class="notion-header-anchor"></div><a class="notion-hash-link" href="#fde16565b676477f91cebffa16a47c38" title="弹幕 API"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><b>弹幕 API</b></span></span></h4><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-40ad2450ccd54a77931ad033bfa35a06"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:100%;max-width:100%;flex-direction:column;height:100%"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2F9127c644-3418-41b3-9620-b3180a7d7daa%2F640_(3).webp?table=block&amp;id=40ad2450-ccd5-4a77-931a-d033bfa35a06&amp;t=40ad2450-ccd5-4a77-931a-d033bfa35a06&amp;width=708&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><h4 class="notion-h notion-h3 notion-h-indent-2 notion-block-1f8912076c6c49c297335e97f8d3df1b" data-id="1f8912076c6c49c297335e97f8d3df1b"><span><div id="1f8912076c6c49c297335e97f8d3df1b" class="notion-header-anchor"></div><a class="notion-hash-link" href="#1f8912076c6c49c297335e97f8d3df1b" title="状态 API"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><b>状态 API</b></span></span></h4><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-06cdded983d5451e953349ea7db35a39"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:100%;max-width:100%;flex-direction:column;height:100%"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2F83a5beed-5588-4c15-9116-89e8fc1a7c05%2F640_(4).webp?table=block&amp;id=06cdded9-83d5-451e-9533-49ea7db35a39&amp;t=06cdded9-83d5-451e-9533-49ea7db35a39&amp;width=708&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><h4 class="notion-h notion-h3 notion-h-indent-2 notion-block-de570d2943b84449981da5cb425fd274" data-id="de570d2943b84449981da5cb425fd274"><span><div id="de570d2943b84449981da5cb425fd274" class="notion-header-anchor"></div><a class="notion-hash-link" href="#de570d2943b84449981da5cb425fd274" title="全屏 API"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><b>全屏 API</b></span></span></h4><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-86743e0ba4c748f1adb60cfbaa250a37"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:100%;max-width:100%;flex-direction:column;height:100%"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2Fb7e370ab-4c51-4fe7-acb3-5f698bf3f296%2F640_(5).webp?table=block&amp;id=86743e0b-a4c7-48f1-adb6-0cfbaa250a37&amp;t=86743e0b-a4c7-48f1-adb6-0cfbaa250a37&amp;width=708&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-7f6f3d3b2f7f4776841eb131b95a0af8" data-id="7f6f3d3b2f7f4776841eb131b95a0af8"><span><div id="7f6f3d3b2f7f4776841eb131b95a0af8" class="notion-header-anchor"></div><a class="notion-hash-link" href="#7f6f3d3b2f7f4776841eb131b95a0af8" title="事件"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><b>事件</b></span></span></h3><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-6c8c0b18469b42d09d6689803d2c7634"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:603px;max-width:100%;flex-direction:column"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2F6279a6f0-1397-4d35-a080-2af0ea098857%2F640.webp?table=block&amp;id=6c8c0b18-469b-42d0-9d66-89803d2c7634&amp;t=6c8c0b18-469b-42d0-9d66-89803d2c7634&amp;width=603&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><h2 class="notion-h notion-h1 notion-h-indent-0 notion-block-c291861d9de04322bc1003859b7b0233" data-id="c291861d9de04322bc1003859b7b0233"><span><div id="c291861d9de04322bc1003859b7b0233" class="notion-header-anchor"></div><a class="notion-hash-link" href="#c291861d9de04322bc1003859b7b0233" title="拓展"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><b>拓展</b></span></span></h2><div class="notion-text notion-block-d998222a32ac4b48b4af5eaad663ac04">其他同类型的开源 HTML5 播放器</div><h4 class="notion-h notion-h3 notion-h-indent-1 notion-block-4b2e0b24ecf04d85829fc8b22f596850" data-id="4b2e0b24ecf04d85829fc8b22f596850"><span><div id="4b2e0b24ecf04d85829fc8b22f596850" class="notion-header-anchor"></div><a class="notion-hash-link" href="#4b2e0b24ecf04d85829fc8b22f596850" title="Video.js 36.9K"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><b>Video.js 36.9K</b></span></span></h4><div class="notion-text notion-block-55760417781b48cf8f0d9ac3efd539fa">Video.js是一个流行的开源HTML5视频播放器，提供丰富的定制选项、易用的API和插件系统，支持多种视频格式，适用于在网页中嵌入各种类型的视频内容。</div><h4 class="notion-h notion-h3 notion-h-indent-1 notion-block-9ee1d0c3429047529887b7487610e942" data-id="9ee1d0c3429047529887b7487610e942"><span><div id="9ee1d0c3429047529887b7487610e942" class="notion-header-anchor"></div><a class="notion-hash-link" href="#9ee1d0c3429047529887b7487610e942" title="mediaElement.js 8.1K"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><b>mediaElement.js 8.1K</b></span></span></h4><div class="notion-text notion-block-6c7cdd37d23340bfad3d6f9451d3b8a7">MediaElement.js是一个开源的HTML5视频和音频播放器库，提供跨浏览器支持、可定制皮肤和控件、响应式设计和丰富的JavaScript API。</div><h4 class="notion-h notion-h3 notion-h-indent-1 notion-block-480cf4a54dda49a6af340ae7d57ae8ff" data-id="480cf4a54dda49a6af340ae7d57ae8ff"><span><div id="480cf4a54dda49a6af340ae7d57ae8ff" class="notion-header-anchor"></div><a class="notion-hash-link" href="#480cf4a54dda49a6af340ae7d57ae8ff" title="xgplayer 7.5K"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><b>xgplayer 7.5K</b></span></span></h4><div class="notion-text notion-block-d080b8a2add04504be21b878a10a91c0">由字节跳动开源的 Web 视频播放器。它基于组件化的原则设计了独立的、可拆分的 UI 组件。除了在 UI 层面上的灵活性，它在功能上也有大胆的改进：它摆脱了对视频加载、缓冲和格式支持的依赖。特别是在处理 mp4 格式时，它可以进行分段加载，即使不支持流式传输的 mp4 格式也能实现无缝切换、加载控制和节省流量。西瓜播放器还集成了对 FLV、HLS 和 Dash 格式的点播和直播支持。</div><hr class="notion-hr notion-block-744975184a7442008e08ce10400c9968"/><div class="notion-row notion-block-994f5b9c665d4382ba58f51b932b7a30"><div class="notion-column notion-block-ba048efb550147bfb1bb6b78641fb055" style="width:calc((100% - (1 * min(32px, 4vw))) * 0.1875)"><div class="notion-text notion-block-c1208b41cfcf4788bacde877bf3a2e8b">原文连接 🫱</div><div class="notion-text notion-block-5aa00411caeb464ab1688a3542ad620c">您可以瞧一瞧</div><div class="notion-text notion-block-72ad72a2e0e0483bb2cb1cbf1ed9e79c">点进去看看</div></div><div class="notion-spacer"></div><div class="notion-column notion-block-b3d2c56aff9346598e133aa816e53450" style="width:calc((100% - (1 * min(32px, 4vw))) * 0.8125000000000002)"><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-d201f0c21219479db8628a599b4fb72d" href="https://mp.weixin.qq.com/s/hUuA5WMB9ZZGzZ1K9bDtkw"><div><div class="notion-bookmark-title">【布局进阶】巧用 :has &amp; drop-shadow 实现复杂布局效果</div><div class="notion-bookmark-description">最近，聊到了一个很有意思的布局效果，一起来看看如何巧妙优雅实现！</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-icon"><img src="https://www.notion.so/image/https%3A%2F%2Fres.wx.qq.com%2Fa%2Fwx_fed%2Fassets%2Fres%2FMjliNWVm.svg?table=block&amp;id=d201f0c2-1219-479d-b862-8a599b4fb72d&amp;t=d201f0c2-1219-479d-b862-8a599b4fb72d" alt="【布局进阶】巧用 :has &amp; drop-shadow 实现复杂布局效果" loading="lazy" decoding="async"/></div><div class="notion-bookmark-link-text">https://mp.weixin.qq.com/s/hUuA5WMB9ZZGzZ1K9bDtkw</div></div></div><div class="notion-bookmark-image"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fmmbiz.qpic.cn%2Fsz_mmbiz_jpg%2FSMw0rcHsoNKP49B2KGibEQKeLhoKgUouyibNo8PuM5kgE02Ue0TcVScRVEFYFQwiaRrWicv3Y73htXEdQbZ3J6HDkw%2F0%3Fwx_fmt%3Djpeg?table=block&amp;id=d201f0c2-1219-479d-b862-8a599b4fb72d&amp;t=d201f0c2-1219-479d-b862-8a599b4fb72d" alt="【布局进阶】巧用 :has &amp; drop-shadow 实现复杂布局效果" loading="lazy" decoding="async"/></div></a></div></div><div class="notion-spacer"></div></div><h2 class="notion-h notion-h1 notion-h-indent-0 notion-block-0df7f7b8563742bfab510eee55436485" data-id="0df7f7b8563742bfab510eee55436485"><span><div id="0df7f7b8563742bfab510eee55436485" class="notion-header-anchor"></div><a class="notion-hash-link" href="#0df7f7b8563742bfab510eee55436485" title="【布局进阶】巧用 :has &amp; drop-shadow 实现复杂布局效果"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><b>【布局进阶】巧用 :has &amp; drop-shadow 实现复杂布局效果</b></span></span></h2><div class="notion-text notion-block-9a4d22f6c9b04cd5aaa5e5bc5e778378">最近，群里聊到了一个很有意思的布局效果。大致效果如下所示，希望使用 CSS 实现如下所示的布局效果：</div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-e62a74ad6555483e92cf6eef383c7989"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:100%;max-width:100%;flex-direction:column;height:100%"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2F9e00cf3a-aa03-4212-ba68-0de261bd7081%2F640_(1).gif?table=block&amp;id=e62a74ad-6555-483e-92cf-6eef383c7989&amp;t=e62a74ad-6555-483e-92cf-6eef383c7989&amp;width=708&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><div class="notion-text notion-block-0ba4eecbaecc4f7e9639734815007ecc">正常而言，我们的 HTML 结构大致是如下所示：</div><div class="notion-text notion-block-c373a92f2ef44d3db0343253378111e7">对于 Hover 导航 Tab 时候的内容切换，暂且不谈。本文，我们核心想探讨的是两个点：</div><ol start="1" class="notion-list notion-list-numbered notion-block-bcf3030b31644afdb89a6056c884ee21"><li>一是对于如下所示的不规则布局，应该如何实现：</li></ol><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-84a44c6d511f4d78bd65452d670ece45"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:370px;max-width:100%;flex-direction:column"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2Feacee566-5d28-49ce-b3e4-b9810a41c854%2F640.webp?table=block&amp;id=84a44c6d-511f-4d78-bd65-452d670ece45&amp;t=84a44c6d-511f-4d78-bd65-452d670ece45&amp;width=370&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><div class="notion-text notion-block-b8abe1b069e84a0e8a8b5fdeab7e7985">并且，这里我们可能还需要给它加上阴影效果：</div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-f0a482c2dff84a468f2f2d99b0109bf9"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:358px;max-width:100%;flex-direction:column"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2Ffb47b02f-da5b-46d4-8165-a039f9720597%2F640.webp?table=block&amp;id=f0a482c2-dff8-4a46-8f2f-2d99b0109bf9&amp;t=f0a482c2-dff8-4a46-8f2f-2d99b0109bf9&amp;width=358&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><ol start="1" class="notion-list notion-list-numbered notion-block-9104875bf6744464bbacb1bdadc2b6be"><li>如何配合 Hover 动作，实现整个切换效果</li></ol><div class="notion-text notion-block-1af724f3e0e748baa1024bd6baf581d3">带着这两个问题，我们一起来尝试慢慢把这个效果实现。</div><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-3f399a38b462415fb558d4500b0f86a0" data-id="3f399a38b462415fb558d4500b0f86a0"><span><div id="3f399a38b462415fb558d4500b0f86a0" class="notion-header-anchor"></div><a class="notion-hash-link" href="#3f399a38b462415fb558d4500b0f86a0" title="借助伪元素实现不规则按钮"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><b>借助伪元素实现不规则按钮</b></span></span></h3><div class="notion-text notion-block-d2c108bcba21410e83ed2cc5bc9f9d73">首先，我们需要实现这个效果：</div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-a0115682759446dcba1c277e28898e4e"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:352px;max-width:100%;flex-direction:column"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2F4b0f3e39-8de8-4c67-8765-8282aedf7345%2F640.webp?table=block&amp;id=a0115682-7594-46dc-ba1c-277e28898e4e&amp;t=a0115682-7594-46dc-ba1c-277e28898e4e&amp;width=352&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><div class="notion-text notion-block-b526fe92b2004b3f9555af7274a9ddc7">这个，其实在很多篇文章都有提及过：</div><ul class="notion-list notion-list-disc notion-block-572533ef79fa4278be8f45560cf9d4fc"><li><b>由小见大！不规则造型按钮解决方案[1]</b></li></ul><ul class="notion-list notion-list-disc notion-block-34b6d1abe2ee48ea9ba29e593db299ed"><li><b>使用 CSS 轻松实现高频出现的各类奇形怪状按钮[2]</b></li></ul><div class="notion-text notion-block-9eede42900204aadb253970d8681ce6b">想一想，这里其实就是竖向的 Chrome 分 Tab 的效果：</div><div class="notion-text notion-block-143e06203b8445e393e0a7e4b4b1f81f">像是这样：</div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-e7ff33197bff4049b2225856d9d48e90"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:100%;max-width:100%;flex-direction:column;height:100%"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2F27bbe5bf-8b43-4ba9-995d-b968f9533d6c%2F640.webp?table=block&amp;id=e7ff3319-7bff-4049-b222-5856d9d48e90&amp;t=e7ff3319-7bff-4049-b222-5856d9d48e90&amp;width=708&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><div class="notion-text notion-block-ec3934a99c554bbb8103c8d9a2be830a">我们对这个按钮形状拆解一下，这里其实是 3 块的叠加：</div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-b6627ccd699946488e6c3c182a42717e"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:232px;max-width:100%;flex-direction:column"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2F138b8170-b0bf-4a1b-ad38-6297f43c365c%2F640_(1).webp?table=block&amp;id=b6627ccd-6999-4648-8e6c-3c182a42717e&amp;t=b6627ccd-6999-4648-8e6c-3c182a42717e&amp;width=232&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><div class="notion-text notion-block-6ecf733f67114a2abb245bd7d49986a1">只需要想清楚如何实现两侧的弧形三角即可。这里还是借助了渐变 -- <b>径向渐变</b>，其实他是这样，如下图所示，我们只需要把黑色部分替换为透明即可，使用两个伪元素即可：</div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-52c280760b7e47faa64fefeebd187b83"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:243px;max-width:100%;flex-direction:column"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2Ffb87f8e0-063f-4b28-87f7-49da76953289%2F640_(2).webp?table=block&amp;id=52c28076-0b7e-47fa-a64f-efeebd187b83&amp;t=52c28076-0b7e-47fa-a64f-efeebd187b83&amp;width=243&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><div class="notion-text notion-block-7a93bd80e99344c388d32caad4a058d2">代码如下：</div><div class="notion-text notion-block-feac05ed323149a3a363bb0419e2e873">即可得到：</div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-defc2bfbee624824a2169ab8ce6d205e"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:402px;max-width:100%;flex-direction:column"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2F5c3c298c-3709-4336-b7c1-4628d1255af6%2F640.webp?table=block&amp;id=defc2bfb-ee62-4824-a216-9ab8ce6d205e&amp;t=defc2bfb-ee62-4824-a216-9ab8ce6d205e&amp;width=402&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><div class="notion-text notion-block-0241c21f3b244e66856da2c976dd2a97">我们照葫芦画瓢，即可非常轻松的实现竖向的相同的效果，示意图如下：</div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-59d21d6b23b54a83833675d57f20b751"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:100%;max-width:100%;flex-direction:column;height:100%"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2Fcf2e3ab3-15d2-4810-9dad-b9a814d2736e%2F640.webp?table=block&amp;id=59d21d6b-23b5-4a83-8336-75d57f20b751&amp;t=59d21d6b-23b5-4a83-8336-75d57f20b751&amp;width=708&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-020aba10c05e44ee9696b7015aa6c40f" data-id="020aba10c05e44ee9696b7015aa6c40f"><span><div id="020aba10c05e44ee9696b7015aa6c40f" class="notion-header-anchor"></div><a class="notion-hash-link" href="#020aba10c05e44ee9696b7015aa6c40f" title="利用 drop-shadow 实现按钮阴影"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><b>利用 drop-shadow 实现按钮阴影</b></span></span></h3><div class="notion-text notion-block-608d1f08d2eb4a088a2e80f6463c15d0">好，接下来，我们需要给按钮添加上阴影效果，像是这样：</div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-543bdb80838e4257b9c3f3e9dc46a71a"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:330px;max-width:100%;flex-direction:column"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2Fb6df4322-613b-4c5d-b869-a31603257ef5%2F640.webp?table=block&amp;id=543bdb80-838e-4257-b9c3-f3e9dc46a71a&amp;t=543bdb80-838e-4257-b9c3-f3e9dc46a71a&amp;width=330&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><div class="notion-text notion-block-d612895a4b1342b7a23a88e4d5139761">因为使用了两个伪元素，当前单个按钮在 Hover 状态下的大致代码如下：</div><div class="notion-text notion-block-3f67a0f3412e49d1a323a535f4c24365">如果使用 <code class="notion-inline-code">box-shadow</code> 肯定是不行的，整个效果就会露馅：</div><div class="notion-text notion-block-0ec0c77092654ed9ac19578ad6dd4a99">尝试给按钮添加一个 <code class="notion-inline-code">box-shadow: 0 0 5px 0 #333</code>：</div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-ee9aaf4c08b84fb9bc030d4b1fbb4cb7"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:352px;max-width:100%;flex-direction:column"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2F7fcc2391-f1d7-4c2b-ab1f-612ca92dd7fd%2F640.webp?table=block&amp;id=ee9aaf4c-08b8-4fb9-bc03-0d4b1fbb4cb7&amp;t=ee9aaf4c-08b8-4fb9-bc03-0d4b1fbb4cb7&amp;width=352&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><div class="notion-text notion-block-8346d4cd1b6146a18efb178651a9d40a">弯曲的连接处，明显没有阴影效果，怎么解决呢？</div><div class="notion-text notion-block-b70895e23cc146989a07ae6127c6f5dd">嗯哼，老读者一定也知道，这里我们需要对整个可见部分添加阴影，需要使用 <code class="notion-inline-code">filter:drop-shadow()</code>。</div><div class="notion-text notion-block-d4c0983051254577af76624451254d2a"><code class="notion-inline-code">drop-shadow()</code> 滤镜的作用用于创建一个符合元素（图像）本身形状（alpha 通道）的阴影。其中，最为常见的技巧，就是利用它生成不规则图形的阴影。</div><div class="notion-text notion-block-b54eab8c4e364a47b8b9606f0bc45b05">因此，我们把上述的 <code class="notion-inline-code">box-shadow</code> 替换成：<code class="notion-inline-code">filter: drop-shadow(0 0 5px #ddd)</code>：</div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-bc846f9c919342fdbf46a5e2fd17c3e4"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:346px;max-width:100%;flex-direction:column"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2Fe6592264-d5d3-42a6-ba5f-c189f7aced2e%2F640.webp?table=block&amp;id=bc846f9c-9193-42fd-bf46-a5e2fd17c3e4&amp;t=bc846f9c-9193-42fd-bf46-a5e2fd17c3e4&amp;width=346&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><div class="notion-text notion-block-9f98f5064574459b80a2f8619bb20873">这样，我们就实现了基于单个不规则按钮的阴影效果。</div><div class="notion-text notion-block-246257f2562e473387bc4ecd49478eff">但是，显然事情还没有结束。</div><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-9393fb297f6443ea9a3e60afa71dc9f0" data-id="9393fb297f6443ea9a3e60afa71dc9f0"><span><div id="9393fb297f6443ea9a3e60afa71dc9f0" class="notion-header-anchor"></div><a class="notion-hash-link" href="#9393fb297f6443ea9a3e60afa71dc9f0" title="修改布局结构，再借助利用 drop-shadow 实现统一阴影"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><b>修改布局结构，再借助利用 drop-shadow 实现统一阴影</b></span></span></h3><div class="notion-text notion-block-f59e0cf56e9141928bd8048e5a802c47">记得我们上面提到过的 HTML 的布局吗？正常而言，右侧的主体内容和左侧的导航，结构是分离的：</div><div class="notion-text notion-block-52dc97ef85134a3a9951cda19fc1aaf7">因此，这里最为麻烦的地方在于，<b>左侧按钮的阴影，需要和右侧的主体内容连在一起！</b>，所以当我们给右侧的 <code class="notion-inline-code">.g-main</code> 也添加上相同的 <code class="notion-inline-code">filter:drop-shadow()</code> 时，整个效果会变得非常奇怪：</div><div class="notion-text notion-block-e9206c106c7f47dba08a2c53dd930dd3">无论层级谁在上，整体阴影的展示都会瑕疵：</div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-3dfdb218ac194a5f8e72fc36a835c4a1"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:100%;max-width:100%;flex-direction:column;height:100%"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2F607029fc-d391-4690-a6d0-78ae6e66a857%2F640.webp?table=block&amp;id=3dfdb218-ac19-4a5f-8e72-fc36a835c4a1&amp;t=3dfdb218-ac19-4a5f-8e72-fc36a835c4a1&amp;width=708&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><div class="notion-text notion-block-ed61779053bd4fb684750d3af44673e5">所以，如果想要实现整个元素的阴影是一整个的整体的效果，我们就不得不另辟蹊径。</div><div class="notion-text notion-block-774aa8e925e949b2b5c7a4a52ff182d6">这里，我们的思路如下：</div><ol start="1" class="notion-list notion-list-numbered notion-block-7feaf700008041debde5b31e5c641fc1"><li>可以尝试在 <code class="notion-inline-code">.g-main</code> 中，添加一组与 <code class="notion-inline-code">.g-nav</code> 相同的结构，负责样式层面的展示</li></ol><ol start="2" class="notion-list notion-list-numbered notion-block-5c7be6ff299b44a68b5d99d33630c222"><li>把新增的结构，利用绝对定位，让其与实际的导航位置重叠</li></ol><ol start="3" class="notion-list notion-list-numbered notion-block-93218ac929cf48cb8f36152c05434afa"><li>在原本的 <code class="notion-inline-code">.g-nav</code> 中，通过 <code class="notion-inline-code">:has()</code> 伪类，传递实时的 Hover 状态</li></ol><div class="notion-text notion-block-7f2287a16e0e40c091c4884c4fc2b7e5">基于此，我们需要改造一下我们的结构：</div><div class="notion-text notion-block-a061d347b54d42afbb61275a50e4937c">仔细看上面的结构，我们多了一组 <code class="notion-inline-code">.g-stauts</code> 结构，放置在了 <code class="notion-inline-code">.g-main</code> 之下。其 li 个数与实际的导航 <code class="notion-inline-code">.g-nav</code> 保持一致，并且高宽大小都是一模一样的。</div><div class="notion-text notion-block-7cee5aff78b545ea9a5de7344f149eac">并且，可以利用绝对定位，让其完全叠加在 <code class="notion-inline-code">.g-nav</code> 的位置上。</div><div class="notion-text notion-block-fcb238b27e06491daaefab60ec9f6960">然后，我们把上述类 Chrome Tab 样式的不规则按钮结构的 CSS 代码结构，都赋给 <code class="notion-inline-code">.g-status</code> 下的 li。</div><div class="notion-text notion-block-d992fd3a84e04d8a8f47616f20ea438d">此时，由于不规则按钮结构和右侧的主体内容结构，其实是在一个父 div 之下，所以，我们只需要给 <code class="notion-inline-code">.g-main</code> 元素添加 <code class="notion-inline-code">filter: drop-shadow()</code>，就可以实现一整个整体的阴影效果：</div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-c27119c75f41494997e47555e5b82c46"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:100%;max-width:100%;flex-direction:column;height:100%"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2Fa73a726d-48a2-4814-98f2-17229b20f8db%2F640.webp?table=block&amp;id=c27119c7-5f41-4949-97e4-7555e5b82c46&amp;t=c27119c7-5f41-4949-97e4-7555e5b82c46&amp;width=708&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><div class="notion-text notion-block-632b08b74c6b42f0829c049e2cf28be5">最后，我们利用 <code class="notion-inline-code">:has()</code> 伪类，传递实时的 Hover 状态，把内外的结构连接起来。</div><div class="notion-text notion-block-635bb39bf3ef4852a411ec4572f42a22">最为核心的代码如下：</div><div class="notion-text notion-block-07c14b15567e4eb99b642dd597efe499">什么意思呢？解释一下：</div><ol start="1" class="notion-list notion-list-numbered notion-block-256af11b1e4a4a80ab38b248abe85cb0"><li>事先把每一个 Tab 被 Hover 时的样式，都写在了 <code class="notion-inline-code">.g-stauts</code> 中，并且再提醒一下，这个结构是在 <code class="notion-inline-code">.g-main</code> 之下的。然后，默认设置隐藏即可；</li></ol><ol start="2" class="notion-list notion-list-numbered notion-block-538d26b919de4f439692bd62e0eb6789"><li>实际触发 Hover 动画效果，是正常的 <code class="notion-inline-code">.g-nav</code> 下的一个一个的 li 结构；</li></ol><ol start="3" class="notion-list notion-list-numbered notion-block-83aa7c99fdb74f2992d57d1c63d0aa09"><li>当 <code class="notion-inline-code">.g-nav</code> 下的一个一个的 li 被 Hover 时，我们通过 <code class="notion-inline-code">:has()</code> 伪类，能够拿到此事件，并且根据当前是第几个元素被 hover，对应的控制实际在 <code class="notion-inline-code">.g-main</code> 下的结构进行样式的展示；</li></ol><blockquote class="notion-quote notion-block-32e1a743ef2f4fc291b31f136dd1f89d"><div>不太了解的 :has() 伪类的小伙伴，可以先读一读这篇文章 -- 浅谈逻辑选择器 is、where、not、has[3]，此伪类的诞生，填补了在之前 CSS 选择器中，没有父选择器的空缺。让我们能够在父元素节点上，根据子元素的状态变化，做出样式的调整。</div></blockquote><div class="notion-text notion-block-e6aff4f3c5af4806b281305fe06864fa">这样，我们就最终实现了我们文章一开始的效果：</div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-d97124fc54c94931a02243cbbbd8b618"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:100%;max-width:100%;flex-direction:column;height:100%"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2Fc5e8f130-5d78-4fc5-af54-16258f8a22b4%2F640_(1).gif?table=block&amp;id=d97124fc-54c9-4931-a022-43cbbbd8b618&amp;t=d97124fc-54c9-4931-a022-43cbbbd8b618&amp;width=708&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><div class="notion-text notion-block-c0b07ac338b74e6085411bbcf64f4541">文章可能有部分内容没有阐述的很清晰，完整的代码其实行数非常之少，对文章内容还不太理解的建议戳进 DEMO 中看看。</div><div class="notion-text notion-block-600fc3660488429586afa9b37e878559">完整的 DEMO 效果：<b>CodePen Demo -- Tab Hover Effect[4]</b></div><div class="notion-text notion-block-dfe2626e2ade416e9b5fdc60fcfb6acb">有小伙伴会有疑问，为什么不直接在 <code class="notion-inline-code">.g-nav</code> 导航结构和 <code class="notion-inline-code">.g-main</code> 结构的父节点直接添加 <code class="notion-inline-code">drop-shadow()</code>，不是也可以实现一样的效果吗？</div><div class="notion-text notion-block-b4c01879d18d49f0a06b91d5c8cd3ae9">是的，对于本文贴出的代码效果，是可以实现一样的效果。但是，实际业务中，<code class="notion-inline-code">.g-nav</code> 会更复杂，它们的共同父元素下也可能还有其他元素，实际情况远比本文贴出来的结构复杂，因此借助多一层虚拟 ul，实际上是更好的解法。</div><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-5d8143e8ae594afe8e3c10b99b97087f" data-id="5d8143e8ae594afe8e3c10b99b97087f"><span><div id="5d8143e8ae594afe8e3c10b99b97087f" class="notion-header-anchor"></div><a class="notion-hash-link" href="#5d8143e8ae594afe8e3c10b99b97087f" title="最后"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><b>最后</b></span></span></h3><div class="notion-text notion-block-2764d72657784675a2e3707cf149b698">好了，本文到此结束，希望本文对你有所帮助 :)</div><div class="notion-text notion-block-21a356ffda08484b9a1b05227922d1f8">更多精彩 CSS 技术文章汇总在本文作者的 <b>Github -- iCSS[5]</b> ，持续更新，欢迎点个 star 订阅收藏。</div><div class="notion-text notion-block-2308a6f57b8e4a0da6e0329c37bc06d0"><b>参考资料</b></div><div class="notion-text notion-block-83ff01f25fe742f18b4c099ff0393033">[1] 由小见大！不规则造型按钮解决方案: <em>https://github.com/chokcoco/iCSS/issues/224</em></div><div class="notion-text notion-block-278107baf5b642e2a4d56cf41bbb6199">[2] 使用 CSS 轻松实现高频出现的各类奇形怪状按钮: <em>https://github.com/chokcoco/iCSS/issues/152</em></div><div class="notion-text notion-block-8efb38db70284249bdfc46f04c352589">[3] 浅谈逻辑选择器 is、where、not、has: <em>https://github.com/chokcoco/iCSS/issues/181</em></div><div class="notion-text notion-block-940d26f7837946e28b4959990187b881">[4] CodePen Demo -- Tab Hover Effect: <em>https://codepen.io/Chokcoco/pen/oNONwdM?editors=0100</em></div><div class="notion-text notion-block-567be34d6fc74c89bd270aa30baf9b59">[5] Github -- iCSS: <em>https://github.com/chokcoco/iCSS</em></div></main></div>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[【特效】我是如何拿到博客好看的特效的]]></title>
            <link>https://blog.vixcitycc.top//article/我是如何拿到博客好看的特效的</link>
            <guid>https://blog.vixcitycc.top//article/我是如何拿到博客好看的特效的</guid>
            <pubDate>Sun, 05 May 2024 00:00:00 GMT</pubDate>
            <description><![CDATA[我是如何拿到博客好看的特效的]]></description>
            <content:encoded><![CDATA[<div id="notion-article" class="mx-auto overflow-hidden "><main class="notion light-mode notion-page notion-block-415e6f9e844b4768b767278b0481fb0a"><div class="notion-viewport"></div><div class="notion-collection-page-properties"></div><h2 class="notion-h notion-h1 notion-h-indent-0 notion-block-938ce668caf94312a0ab200486e9fed1" data-id="938ce668caf94312a0ab200486e9fed1"><span><div id="938ce668caf94312a0ab200486e9fed1" class="notion-header-anchor"></div><a class="notion-hash-link" href="#938ce668caf94312a0ab200486e9fed1" title="我是如拿到博客好看的特效的"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title">我是如拿到博客好看的特效的</span></span></h2><div class="notion-text notion-block-2cad4e34e89144988330aa8f88515e4e">大家也可以看到，我的博客里面华丽呼哨的特效非常多</div><div class="notion-text notion-block-0c5d45a11d2a4a1783ae4d97e7ea9b47">首先这肯定归功于一个开源的Notion博客建站程序，请看下方链接👇</div><a target="_blank" rel="noopener noreferrer" href="https://github.com/tangly1024/NotionNext" class="notion-external notion-external-block notion-row notion-block-9842390127814a4ebead0674016bb7ef"><div class="notion-external-image"><svg viewBox="0 0 260 260"><g><path d="M128.00106,0 C57.3172926,0 0,57.3066942 0,128.00106 C0,184.555281 36.6761997,232.535542 87.534937,249.460899 C93.9320223,250.645779 96.280588,246.684165 96.280588,243.303333 C96.280588,240.251045 96.1618878,230.167899 96.106777,219.472176 C60.4967585,227.215235 52.9826207,204.369712 52.9826207,204.369712 C47.1599584,189.574598 38.770408,185.640538 38.770408,185.640538 C27.1568785,177.696113 39.6458206,177.859325 39.6458206,177.859325 C52.4993419,178.762293 59.267365,191.04987 59.267365,191.04987 C70.6837675,210.618423 89.2115753,204.961093 96.5158685,201.690482 C97.6647155,193.417512 100.981959,187.77078 104.642583,184.574357 C76.211799,181.33766 46.324819,170.362144 46.324819,121.315702 C46.324819,107.340889 51.3250588,95.9223682 59.5132437,86.9583937 C58.1842268,83.7344152 53.8029229,70.715562 60.7532354,53.0843636 C60.7532354,53.0843636 71.5019501,49.6441813 95.9626412,66.2049595 C106.172967,63.368876 117.123047,61.9465949 128.00106,61.8978432 C138.879073,61.9465949 149.837632,63.368876 160.067033,66.2049595 C184.49805,49.6441813 195.231926,53.0843636 195.231926,53.0843636 C202.199197,70.715562 197.815773,83.7344152 196.486756,86.9583937 C204.694018,95.9223682 209.660343,107.340889 209.660343,121.315702 C209.660343,170.478725 179.716133,181.303747 151.213281,184.472614 C155.80443,188.444828 159.895342,196.234518 159.895342,208.176593 C159.895342,225.303317 159.746968,239.087361 159.746968,243.303333 C159.746968,246.709601 162.05102,250.70089 168.53925,249.443941 C219.370432,232.499507 256,184.536204 256,128.00106 C256,57.3066942 198.691187,0 128.00106,0 Z M47.9405593,182.340212 C47.6586465,182.976105 46.6581745,183.166873 45.7467277,182.730227 C44.8183235,182.312656 44.2968914,181.445722 44.5978808,180.80771 C44.8734344,180.152739 45.876026,179.97045 46.8023103,180.409216 C47.7328342,180.826786 48.2627451,181.702199 47.9405593,182.340212 Z M54.2367892,187.958254 C53.6263318,188.524199 52.4329723,188.261363 51.6232682,187.366874 C50.7860088,186.474504 50.6291553,185.281144 51.2480912,184.70672 C51.8776254,184.140775 53.0349512,184.405731 53.8743302,185.298101 C54.7115892,186.201069 54.8748019,187.38595 54.2367892,187.958254 Z M58.5562413,195.146347 C57.7719732,195.691096 56.4895886,195.180261 55.6968417,194.042013 C54.9125733,192.903764 54.9125733,191.538713 55.713799,190.991845 C56.5086651,190.444977 57.7719732,190.936735 58.5753181,192.066505 C59.3574669,193.22383 59.3574669,194.58888 58.5562413,195.146347 Z M65.8613592,203.471174 C65.1597571,204.244846 63.6654083,204.03712 62.5716717,202.981538 C61.4524999,201.94927 61.1409122,200.484596 61.8446341,199.710926 C62.5547146,198.935137 64.0575422,199.15346 65.1597571,200.200564 C66.2704506,201.230712 66.6095936,202.705984 65.8613592,203.471174 Z M75.3025151,206.281542 C74.9930474,207.284134 73.553809,207.739857 72.1039724,207.313809 C70.6562556,206.875043 69.7087748,205.700761 70.0012857,204.687571 C70.302275,203.678621 71.7478721,203.20382 73.2083069,203.659543 C74.6539041,204.09619 75.6035048,205.261994 75.3025151,206.281542 Z M86.046947,207.473627 C86.0829806,208.529209 84.8535871,209.404622 83.3316829,209.4237 C81.8013,209.457614 80.563428,208.603398 80.5464708,207.564772 C80.5464708,206.498591 81.7483088,205.631657 83.2786917,205.606221 C84.8005962,205.576546 86.046947,206.424403 86.046947,207.473627 Z M96.6021471,207.069023 C96.7844366,208.099171 95.7267341,209.156872 94.215428,209.438785 C92.7295577,209.710099 91.3539086,209.074206 91.1652603,208.052538 C90.9808515,206.996955 92.0576306,205.939253 93.5413813,205.66582 C95.054807,205.402984 96.4092596,206.021919 96.6021471,207.069023 Z" fill="#161614"></path></g></svg></div><div class="notion-external-description"><div class="notion-external-title">NotionNext</div><div class="notion-external-block-desc">tangly1024<span> • </span>Updated May 5, 2024</div></div></a><div class="notion-text notion-block-5f931813a2b745249176410b44113b24">这个程序可以通过Notion构建博客，十分的好用</div><div class="notion-text notion-block-8adc9372cb5740f79d827ce9978338b0">所以我找到的博客的特效也经常会往里面添加，构建特效</div><div class="notion-text notion-block-852c42c86c6a46a883995f404c6bdd77">话不多说，直接上干货</div><div class="notion-text notion-block-cc543da52d214573b7260e3e3497ef6c">我就说我最近找到的一个好看的特效为例，粒子转圈圈的效果</div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-47f185af4ce2414b87ab68f67126319b"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:288px;max-width:100%;flex-direction:column"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2F1a6ac958-02ec-4d8b-915d-e62d616cea09%2FSnipaste_2024-05-05_13-59-01.jpg?table=block&amp;id=47f185af-4ce2-414b-87ab-68f67126319b&amp;t=47f185af-4ce2-414b-87ab-68f67126319b&amp;width=288&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-91ccd62e34ba4ccfaa34ac2c1aa50693" data-id="91ccd62e34ba4ccfaa34ac2c1aa50693"><span><div id="91ccd62e34ba4ccfaa34ac2c1aa50693" class="notion-header-anchor"></div><a class="notion-hash-link" href="#91ccd62e34ba4ccfaa34ac2c1aa50693" title="第一步：找到特效"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title">第一步：找到特效</span></span></h3><div class="notion-text notion-block-2b0622dcaa714ddcad64c28ec2d04ac2">我之所以找到这个效果呢，是因为我最近需要在页面上做一个类似思维导图效果</div><div class="notion-text notion-block-8fe9f463feb24625a298cd89640dcc7f">所以我就在网上寻找相关的插件库</div><div class="notion-text notion-block-f6a26839c1d64e2ab275fbcf98c49d80">后来就搜索到了博客园的这个网站👇</div><div class="notion-row"><a target="_blank" rel="noopener noreferrer" class="notion-bookmark notion-block-5dc34fccedff4c6bb2b1910db76f3384" href="https://www.cnblogs.com/shuiche/p/17568301.html"><div><div class="notion-bookmark-title">vue绘制思维导图 - 水车 - 博客园</div><div class="notion-bookmark-description">## 前言 在做web的思维导图功能时，搜索了一些开源项目，在这里整理记录一下 ## 正文 ### vue-power-tree &amp;gt; **vue3** &amp;gt; github: [https://github.com/yj-liuzepeng/vue-power-tree](https://g</div><div class="notion-bookmark-link"><div class="notion-bookmark-link-icon"><img src="https://www.notion.so/image/https%3A%2F%2Fassets.cnblogs.com%2Ffavicon.svg%3Fv%3D2?table=block&amp;id=5dc34fcc-edff-4c6b-b2b1-910db76f3384&amp;t=5dc34fcc-edff-4c6b-b2b1-910db76f3384" alt="vue绘制思维导图 - 水车 - 博客园" loading="lazy" decoding="async"/></div><div class="notion-bookmark-link-text">https://www.cnblogs.com/shuiche/p/17568301.html</div></div></div></a></div><div class="notion-text notion-block-73ede217692d4c6cbaabe87e1e978bb7">第一眼便关注到了鼠标跟随的特效，感觉非常不错</div><div class="notion-text notion-block-8b33ef4ad1084c65ad5c942ec71e1e80">于是乎，我便开始寻找他的特效的效果是怎么来的</div><div class="notion-text notion-block-aad3c0e55647476590d9f3e57ec5f29a">首先，这种粒子效果一般都是canvas绘制的，可能会有少量是由DOM来绘制的，但是这种情况比较少，而且点一下Element就可以看出来的，这个就暂且不做讨论了</div><div class="notion-text notion-block-7c4fd508fd72468abe40987fbd7b228a">我们直接开始翻找canvas</div><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-be87d72a710b45a98a64f30067acc29f" data-id="be87d72a710b45a98a64f30067acc29f"><span><div id="be87d72a710b45a98a64f30067acc29f" class="notion-header-anchor"></div><a class="notion-hash-link" href="#be87d72a710b45a98a64f30067acc29f" title="第二步：找到对应的Canvas节点"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title">第二步：找到对应的Canvas节点</span></span></h3><div class="notion-text notion-block-316e135e9a94426d82ddb190f44418ac">我们打开控制台，F12，找到Elements，搜索一下canvas</div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-3cd65b0cc6364adcb85ae064c633faad"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:504px;max-width:100%;flex-direction:column"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2Fcbbca4ef-314c-4792-bdd2-34e9ae2aa86f%2FSnipaste_2024-05-05_13-59-01.jpg?table=block&amp;id=3cd65b0c-c636-4adc-b85a-e064c633faad&amp;t=3cd65b0c-c636-4adc-b85a-e064c633faad&amp;width=504&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><div class="notion-text notion-block-780e43a4ffae4a5e8c0791b90b7d0a1b">发现他只有一个结果，我们找到这个结果，找到它的id，然后我们去找找他的JS</div><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-609d066e90804c6e91184e845df5c6f9" data-id="609d066e90804c6e91184e845df5c6f9"><span><div id="609d066e90804c6e91184e845df5c6f9" class="notion-header-anchor"></div><a class="notion-hash-link" href="#609d066e90804c6e91184e845df5c6f9" title="第三步：找到他的JS"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title">第三步：找到他的JS</span></span></h3><div class="notion-text notion-block-ff5419168ad640ce98c14c481c2675ca">这个没办法，我们一个一个找过来，一般的话，id是固定死的，所以我们每打开一个JS，就去搜索他的id的名称</div><div class="notion-text notion-block-8cca5997061c402a947bbe3346ebfb61">我们慢慢找，发现在他的边上有一个script标签。上面标着mouse.min.js，右击，open in new tab，意为新标签页打开</div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-3d12590598e640218e4d74ab5b0d0cd4"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:502px;max-width:100%;flex-direction:column"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2F8e3c7796-4f00-4417-b13d-4fc5250adccf%2FUntitled.png?table=block&amp;id=3d125905-98e6-4021-8e4d-74ab5b0d0cd4&amp;t=3d125905-98e6-4021-8e4d-74ab5b0d0cd4&amp;width=502&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><div class="notion-text notion-block-6c78242a786f4496a8c287adb2d3fb89">ctrl + f 搜索id的名字，shuicheCanvas，发现确实挺多地方有的，那么就差不多可以说明就这个了</div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-797e59198c5247bf9c82b226d3f2b27c"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:100%;max-width:100%;flex-direction:column;height:100%"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2F36cda941-7db5-4379-8d1f-affa08e65b33%2FUntitled.png?table=block&amp;id=797e5919-8c52-47bf-9c82-b226d3f2b27c&amp;t=797e5919-8c52-47bf-9c82-b226d3f2b27c&amp;width=1920&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><div class="notion-text notion-block-42c66e0c0e934bc3ac7ed8cb28aca191">这个时候我们把他复制到自己的HTML文件中，发现他就只是一个启动程序，并没有告诉我们怎么使用这个函数</div><div class="notion-text notion-block-90ea170a2c914bf4809a25886a93687a">所以我们继续往下找，发现了一个$.shuicheMouse的启动函数，于是可以断定，这个肯定就是入口文件</div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-1dbfbf21871442abb39aabe0d8d9bf44"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:499px;max-width:100%;flex-direction:column"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2F0c503a5a-d33e-4500-9b18-f4bd2cbdc6b6%2FSnipaste_2024-05-05_13-59-01.jpg?table=block&amp;id=1dbfbf21-8714-42ab-b39a-abe0d8d9bf44&amp;t=1dbfbf21-8714-42ab-b39a-abe0d8d9bf44&amp;width=499&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><div class="notion-text notion-block-345bc04950da498f85c63febde7adb36">我们把他挪到自己的html文件里面</div><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-fc9eb65019224b269352b1524473676f" data-id="fc9eb65019224b269352b1524473676f"><span><div id="fc9eb65019224b269352b1524473676f" class="notion-header-anchor"></div><a class="notion-hash-link" href="#fc9eb65019224b269352b1524473676f" title="第四步：修改代码"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title">第四步：修改代码</span></span></h3><div class="notion-text notion-block-c3f85ea74c08475fb106b11fad4cbfcd">还有一个就是这个的函数是$大头的，所以大概率是jquery的文件了</div><div class="notion-text notion-block-d81cc58f78e34f9e8098003fc9d86fc2">所以我们要引入jquery的cdn，就用博客里面的同款版本就行，刚刚找JS的代码的时候，我们也是有发现过的</div><div class="notion-text notion-block-a5d067753372401f8f573ab25731d4d4">这个就是我们需要的代码了</div><div class="notion-text notion-block-f0408163a1454d28abb36d50f2663f53">接下来我要移植到NotionBlog的项目配置上</div><div class="notion-text notion-block-bcc30a197aeb43e88fffbb8ca3c6c446">因为jquery是直接操作Dom节点的库，而我们的项目是用react写的</div><div class="notion-text notion-block-27fcba034f6d4b9fbc8ccb35f98fa517">所以我们还得改版</div><div class="notion-text notion-block-f62d0131d0794921b8628bb0d66da069">我们先把他的jquery的东西扒下来</div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-4d1b7812381c4254932acf63eebc3464"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:559px;max-width:100%;flex-direction:column"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2Ffe73f7b6-75b2-4aed-aaf5-8a5534376a3c%2FUntitled.png?table=block&amp;id=4d1b7812-381c-4254-932a-cf63eebc3464&amp;t=4d1b7812-381c-4254-932a-cf63eebc3464&amp;width=559&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><div class="notion-text notion-block-009882719f3a4240bac079d64904fd3a">这一段代码是往jquery里面添加方法，所以我们先动这一段代码</div><div class="notion-text notion-block-1eca4ade58d349c493216d47fbb745b0">由于他这里使用的是P，所以我们找到大写的P，改它！！！冲冲冲</div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-141def61b6274607aefcb9d4f80938e2"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:100%;max-width:100%;flex-direction:column;height:100%"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2Fb7b9ca5d-ae42-4924-92bf-74c48bdc7816%2FUntitled.png?table=block&amp;id=141def61-b627-4607-aefc-b9d4f80938e2&amp;t=141def61-b627-4607-aefc-b9d4f80938e2&amp;width=708&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><div class="notion-text notion-block-27e362db0d044b29a6fe35efe5edabb9">这里的P.extend的意思是jquery里面的，合并两个对象，然后创建一个节点，往body里面插入</div><div class="notion-text notion-block-27bba59cfd874f17b4ede30d8a8ed04d">这个可以使用原生的写法，因为这个只是插件，并没有与业务挂钩，所以我们可以不用react的写法</div><div class="notion-text notion-block-c2ec165af333454c83b54bf8b87b8d30">因为extend是合并函数，所以我们可以模拟实现一下，以下就是这几句话转为原生的JS写法</div><div class="notion-text notion-block-caf824f8c7454af891b76188fd4f98c4">接下来就是继续找P的代码，这里有一个r = P(”#shuicheCanvas”)</div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-ada9b5499b8b4921a3968d1dcb0277b9"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:255px;max-width:100%;flex-direction:column"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2F9e42a694-d084-4c2d-a5c8-851579a3200e%2FUntitled.png?table=block&amp;id=ada9b549-9b8b-4921-a396-8d1dcb0277b9&amp;t=ada9b549-9b8b-4921-a396-8d1dcb0277b9&amp;width=255&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><div class="notion-text notion-block-23c8bc63ddf34455b73e1eb0bafbea3b">我们给他用document.getElementById(&quot;shuicheCanvas&quot;)来代替，</div><div class="notion-text notion-block-190a7833e95d479b8c042ccec66a9a68">这时候我们发现和上面的i = document.getElementById(&quot;shuicheCanvas&quot;)是一样的，所以我们这个r就可以删除了</div><div class="notion-text notion-block-802d09703a274bc2833f7b2a84006a4e">删除了r肯定是会有问题的，所以我们就看看是什么问题，打开浏览器的控制台，发现这么一个报错</div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-e51be488436447fa8dd4e6ad131abeb9"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:364px;max-width:100%;flex-direction:column"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2F7cd4461a-fd9c-4708-862f-46033bdde10a%2FUntitled.png?table=block&amp;id=e51be488-4364-47fa-8dd4-e6ad131abeb9&amp;t=e51be488-4364-47fa-8dd4-e6ad131abeb9&amp;width=364&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><div class="notion-text notion-block-0ffadc4200cf4273a186df378cc74236">在源码里面是 r.offset().left 有问题，r找不到了，但是r.offset().left 是jquery对象里面的写法，这怎么办呢</div><div class="notion-text notion-block-aac5e2e110474addbccb90d8ae8b05c4">于是我们就自己在模拟一个函数</div><div class="notion-text notion-block-ef8210da64674fb680950e545e274871">然后我们继续改，这些jquery封装的时间，我们全部改成原生的事件，这个比较简单就不赘述了</div><figure class="notion-asset-wrapper notion-asset-wrapper-image notion-block-e2aa370440b14faba866d5354987b795"><div style="position:relative;display:flex;justify-content:center;align-self:center;width:100%;max-width:100%;flex-direction:column;height:100%"><img style="object-fit:cover" src="https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fe5578092-1f40-41da-a780-31013e1c7cb8%2F8070c92a-d6fa-4778-a75d-67d600190812%2FUntitled.png?table=block&amp;id=e2aa3704-40b1-4fab-a866-d5354987b795&amp;t=e2aa3704-40b1-4fab-a866-d5354987b795&amp;width=757&amp;cache=v2" alt="notion image" loading="lazy" decoding="async"/></div></figure><div class="notion-text notion-block-505c2a4dda8a4b50a1e12a8dd522a5d8">继续往下搜，发现他这里的type为3的时候，这块还是有个P</div><div class="notion-text notion-block-6808564a681744f39bf20efb4cd676b5">我们继续用刚刚上面的那个写法，就可以完美改成原生的了</div><div class="notion-text notion-block-03727afc9fb842ce96f9a3fb828018f3">这时候就全部改好了，那最开始的注册的写法也可以不用了</div><div class="notion-text notion-block-5e8a10cbf8bf42ecb7b7d2559f2d1d73">最后我们再给他包到一个函数里面，再通过这个函数的调用，直接生成一个canvas节点就可以了</div><div class="notion-text notion-block-1faf7f6ee7e544a1be00a77916ae64ac">以下是不用jquery的写法源代码</div><h3 class="notion-h notion-h2 notion-h-indent-1 notion-block-f26f0794db1040f8b21a584d0ff1671d" data-id="f26f0794db1040f8b21a584d0ff1671d"><span><div id="f26f0794db1040f8b21a584d0ff1671d" class="notion-header-anchor"></div><a class="notion-hash-link" href="#f26f0794db1040f8b21a584d0ff1671d" title="完结撒花~ 🌸🌸🌸🌸"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title">完结撒花~ 🌸🌸🌸🌸</span></span></h3><div class="notion-text notion-block-db2341448b974ef7b0a16e25e0782734">以上就是整个拿到别人博客好看的特效的一个小例子了，觉得有用的小伙伴们可以关注一下我的博客哦，多来看看，会有其他你们需要的东西的，也欢迎分享给你们的小伙伴看看哦</div></main></div>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[【AI】来自ChatGPT（一）]]></title>
            <link>https://blog.vixcitycc.top//article/来自ChatGPT（一）</link>
            <guid>https://blog.vixcitycc.top//article/来自ChatGPT（一）</guid>
            <pubDate>Thu, 01 Jun 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[来自ChatGPT（一）]]></description>
            <content:encoded><![CDATA[<div id="notion-article" class="mx-auto overflow-hidden "><main class="notion light-mode notion-page notion-block-b11b931ec9164d799a1c197acade8b5e"><div class="notion-viewport"></div><div class="notion-collection-page-properties"></div><h3 class="notion-h notion-h2 notion-h-indent-0 notion-block-4ea16c8156ba449e8c2d9d07844aa48d" data-id="4ea16c8156ba449e8c2d9d07844aa48d"><span><div id="4ea16c8156ba449e8c2d9d07844aa48d" class="notion-header-anchor"></div><a class="notion-hash-link" href="#4ea16c8156ba449e8c2d9d07844aa48d" title="来自ChatGPT"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title">来自ChatGPT</span></span></h3><div class="notion-text notion-block-3488931c2e8f48e085329d4a2f6ae03a">泡芙可以登录ChatGPT<div class="notion-text-children"><ul class="notion-list notion-list-disc notion-block-d715ca2468e044158984075a57cb744d"><li>前提是你要有一个账号</li></ul></div></div><div class="notion-text notion-block-211442cab56246c88f8e98b34dee221c">解决ChatGPT 1020 问题<div class="notion-text-children"><ul class="notion-list notion-list-disc notion-block-95f7706079a8444ba178cf8aa9a8ea95"><li><a target="_blank" rel="noopener noreferrer" class="notion-link" href="https://zhuanlan.zhihu.com/p/608541446?utm_id=0">原因请看这里</a></li></ul><ul class="notion-list notion-list-disc notion-block-9443a72eabc4480ca990e04097016082"><li>解决方案，不要用亚马逊的服务器做代理即可解决 - 泡芙可以登录</li></ul></div></div><div class="notion-blank notion-block-3e28352394344d6fa2b8798be52ea6ed"> </div><div class="notion-text notion-block-cc7d6ac2d10f41ccb1e812fea8680cd1">作为 AI，我不能建议您在工作时间摸鱼。但是，如果您有一些空闲时间，可以尝试以下前端项目：</div><ol start="1" class="notion-list notion-list-numbered notion-block-3f8f1d86b83e4a64969986df1953c103"><li>制作一个响应式网站：使用 HTML、CSS 和 JavaScript 制作一个适应不同设备的响应式网站，这可以提高您的前端技能。</li></ol><ol start="2" class="notion-list notion-list-numbered notion-block-439b4a2d76ce427b9cc3c17ec5cacf00"><li>制作一个简单的游戏：使用 HTML、CSS 和 JavaScript 制作一个简单的游戏，比如俄罗斯方块、扫雷等。</li></ol><ol start="3" class="notion-list notion-list-numbered notion-block-7451fccbf2294bb99fc74fac0328f549"><li>制作一个博客网站：使用 HTML、CSS 和 JavaScript 制作一个博客网站，可以练习您的布局和设计技能。</li></ol><ol start="4" class="notion-list notion-list-numbered notion-block-db98cecbc5cc4bc98f63157b74dfaf31"><li>制作一个在线简历：使用 HTML、CSS 和 JavaScript 制作一个在线简历，可以展示您的技能和经验。</li></ol><div class="notion-text notion-block-1b4cbc1e73174356b9f84583f65e3db2">请注意，这些项目仅供在空闲时间进行，不应影响您的工作任务。</div><div class="notion-blank notion-block-4320b54e4c8c412e8b76d0334e854859"> </div><div class="notion-text notion-block-8914317f3dfc4612a6bacff54a079cd2">高效沟通的关键在于清晰明确地表达自己的意思，同时能够聆听对方的想法和意见。以下是一些提高沟通效率的方法：</div><ol start="1" class="notion-list notion-list-numbered notion-block-338b872a7ccf49ddb6381de8868c67fb"><li>确定沟通目的：在开始沟通前，明确自己想要传达的信息和目的。</li></ol><ol start="2" class="notion-list notion-list-numbered notion-block-b4f59b60a3424f658c229f24c02f87ab"><li>用简单明了的语言表达：使用简单、明了的语言，避免使用专业术语或复杂的词汇。</li></ol><ol start="3" class="notion-list notion-list-numbered notion-block-f835020ec8ef4ff1b90cf8c364bc89a9"><li>注重语调和肢体语言：语调和肢体语言能够传达更多的信息，让对方更容易理解你的意思。</li></ol><ol start="4" class="notion-list notion-list-numbered notion-block-228c03cb899143bda4d36ed7e096c920"><li>聆听并回应：聆听对方的意见和想法，并回应他们的观点和问题。</li></ol><ol start="5" class="notion-list notion-list-numbered notion-block-24a1b6e208bd4cf495d1bb306672bbf8"><li>表达尊重：尊重对方的观点和意见，避免使用攻击性的语言。</li></ol><ol start="6" class="notion-list notion-list-numbered notion-block-dc1e5ae6abff47ce92783186d672decb"><li>确认理解：在结束沟通前，确认对方是否理解了你的意思，以及你是否理解了对方的想法。</li></ol><ol start="7" class="notion-list notion-list-numbered notion-block-2a88ae69f78546d7ab4102ac9d6c9ff3"><li>及时解决问题：在沟通过程中出现问题时，及时解决问题，避免问题扩大化。</li></ol><div class="notion-text notion-block-d6f4294cac284869b6581bf3e6413e75">通过以上方法，能够提高沟通效率，避免沟通误解和冲突。</div><div class="notion-blank notion-block-bdc77d98ebac4cd786a4c8364c2a4e72"> </div><div class="notion-text notion-block-45d1217960374865ad4373907cf594f8">变得幽默需要一定的天赋和技巧，但也可以透过一些方法来提高自己的幽默感：</div><ol start="1" class="notion-list notion-list-numbered notion-block-0523740f143d4d0389fe84789710d66a"><li>学习观察：观察周围的人和事，发现其中的趣味和笑点。</li></ol><ol start="2" class="notion-list notion-list-numbered notion-block-0835d17bd55641e1b719086b8640449b"><li>练习讲故事：讲故事是提高幽默感的好方法，可以从身边的事情或者自己的经历中寻找素材，讲述时可以加入一些幽默元素。</li></ol><ol start="3" class="notion-list notion-list-numbered notion-block-8a65f51f9b7e455eb4178d141c3a16e2"><li>学习幽默语言：学习一些幽默的语言，如俚语、双关语、谐音等，可以在交流中更容易地发挥幽默感。</li></ol><ol start="4" class="notion-list notion-list-numbered notion-block-6e55e84680b7453487fb82c16619bf8c"><li>不怕尝试：不要害怕尝试，尝试在不同的场合和人群中表现自己的幽默，不断积累经验和技巧。</li></ol><ol start="5" class="notion-list notion-list-numbered notion-block-985313afd1f1444991bccf684a5b4951"><li>多看幽默作品：多看一些幽默的电影、电视剧、书籍等，可以帮助提高自己的幽默感。</li></ol><div class="notion-blank notion-block-5c05031b70b24d7eb66d4f41eeca301f"> </div><div class="notion-text notion-block-8870e280c75f4f428807f904ccd03197">如何改变内向的性格</div><ol start="1" class="notion-list notion-list-numbered notion-block-daed3917b7eb4643bef7f97316f4ff59"><li>意识到自己的内向性格：首先，你需要意识到自己是一个内向的人。这意味着你需要承认自己的弱点，但不要让这些弱点限制你的成长和发展。</li></ol><ol start="2" class="notion-list notion-list-numbered notion-block-73f10f69c0e247d899585c86a7d5cd6d"><li>设定目标：你需要设定一个目标，例如参加社交活动、结交新朋友、在工作场所更主动地表达自己的意见等。</li></ol><ol start="3" class="notion-list notion-list-numbered notion-block-74461fec68284181a51de106d6cc3b0f"><li>练习：练习是变得外向的关键。你可以通过参加社交活动、与陌生人交谈、在工作场所更主动地表达自己的意见等方式来练习。</li></ol><ol start="4" class="notion-list notion-list-numbered notion-block-4e8feea4ea92488f80bfb403ce390a8f"><li>学会倾听：不要总是关注自己的话题，学会倾听别人的意见和想法。这样可以帮助你更好地与人交流，增强自己的社交技能。</li></ol><ol start="5" class="notion-list notion-list-numbered notion-block-777c0f6036ac496eb0b1e013ff9acce1"><li>建立信心：建立自信是变得外向的关键。你可以通过尝试新事物、接受挑战、克服恐惧等方式来增强自信心。</li></ol><ol start="6" class="notion-list notion-list-numbered notion-block-8366acc0469f460187811ca0552e6a28"><li>寻求支持：如果你感到困惑或不知道从哪里开始，寻求支持是一个好主意。你可以寻求朋友、家人、同事或专业人士的帮助。</li></ol><div class="notion-blank notion-block-ac2639b89fea4b0685324590b38b41d0"> </div><div class="notion-text notion-block-05020fdab37f45eb9bac2f308609c3aa">如何学习摄影</div><ol start="1" class="notion-list notion-list-numbered notion-block-cb2c9f3bdad74ee996f1891b441dd7ee"><li>熟悉相机：首先要了解相机的各种功能和操作方法，学会如何使用不同的镜头和设置不同的曝光参数。</li></ol><ol start="2" class="notion-list notion-list-numbered notion-block-4c841a74fc0d4b49a26503aaa207334b"><li>学习构图：构图是摄影中最基本的要素之一，包括对于景物的选择、角度的选择、主体的安排等等。</li></ol><ol start="3" class="notion-list notion-list-numbered notion-block-830bd74ce7bf429aacbe524905d7591b"><li>熟悉光线：光线是摄影中最重要的元素之一，不同的光线可以产生不同的效果。因此，要学会如何利用光线来拍摄照片。</li></ol><ol start="4" class="notion-list notion-list-numbered notion-block-45e83e75994e438c99c89e9414f0552b"><li>持续练习：摄影需要不断的练习和实践，持续地拍摄照片可以让你不断地提升自己的技能和经验。</li></ol><ol start="5" class="notion-list notion-list-numbered notion-block-724b3d14fbbf449d891679e835b26b18"><li>学习欣赏：学习欣赏其他摄影师的作品可以让你更好地理解摄影的艺术和技巧，同时也可以为你的拍摄提供灵感。</li></ol><ol start="6" class="notion-list notion-list-numbered notion-block-d90a0ed5d321490a951016537c45a3e1"><li>参加培训课程：参加摄影培训课程可以让你更深入地学习摄影知识和技巧，同时也可以结交更多的摄影爱好者，分享经验和技巧。</li></ol><div class="notion-blank notion-block-b1d624698aca491598976543170649e0"> </div><div class="notion-text notion-block-dfc83f7b48a94ec9898b4ad5d0778dc6">学习英语</div><div class="notion-text notion-block-a5f918efc06641779868c5b66b7e77ca">目标1: 提高听力技能</div><ul class="notion-list notion-list-disc notion-block-917899718a90407aa14920000f42e380"><li>每周至少听一小时的英语材料，包括英语电影、英语广播、英语播客等。</li></ul><ul class="notion-list notion-list-disc notion-block-109c6cbf853f4424907dc023063136f8"><li>使用在线资源或应用程序进行听力练习，例如英语听力练习网站或应用。</li></ul><ul class="notion-list notion-list-disc notion-block-0c31409b92864e5ebe1ceb8fded44bdf"><li>记录听力练习中遇到的困难，并查找解决方法，例如寻求解释或字幕辅助。</li></ul><div class="notion-text notion-block-b8ef3419e48143749b2ab2dfea0aeab8">目标2: 扩展词汇量</div><ul class="notion-list notion-list-disc notion-block-cc93a408731e4dd290787281196fed76"><li>每天学习5个新的英语单词或短语，记录下来并进行复习。</li></ul><ul class="notion-list notion-list-disc notion-block-e30ed3c1b54c4b38a4028465db23a203"><li>阅读英语材料，如新闻文章、博客、书籍等，注重理解并学习新的词汇。</li></ul><ul class="notion-list notion-list-disc notion-block-0357441f71064ff3a632b796e930fb57"><li>制作词汇卡片或使用在线词汇学习工具进行复习和记忆。</li></ul><div class="notion-text notion-block-71ae514ba8174d4f9a699a6422fa93e1">目标3: 提高口语表达能力</div><ul class="notion-list notion-list-disc notion-block-91be5a4a26b94860a7229c03d696d400"><li>每周参加至少一次英语口语交流活动，可以是线上或线下的英语角、语言交换会议等。</li></ul><ul class="notion-list notion-list-disc notion-block-65c5057e3c96405caa63ee7a55c820b3"><li>在每次口语练习后，记录下来并反思自己的口语表达中的错误和改进空间。</li></ul><ul class="notion-list notion-list-disc notion-block-3693da35c8d049bbb8dc6c72cde95d91"><li>寻找英语母语人士或其他学习伙伴进行口语对练，定期进行口语练习。</li></ul><div class="notion-text notion-block-7d5456726ba040a38a33ecf124e8cd9a">目标4: 提升写作能力</div><ul class="notion-list notion-list-disc notion-block-85653cbaa53e4a269c8a85ea34e89c69"><li>每周写一篇英语日记、文章或短文，注重语法和表达准确性。</li></ul><ul class="notion-list notion-list-disc notion-block-f4d92d18a8214e7fbb527005cf26159f"><li>阅读英语写作范文，学习优秀的写作技巧和表达方式。</li></ul><ul class="notion-list notion-list-disc notion-block-64595a3d0db046719b18a4706724225b"><li>请英语老师或母语人士给予写作作品的反馈和建议，并进行改进。</li></ul><div class="notion-text notion-block-2ee5670d7cd44f22894ab1b5553d7fc8">目标5: 加强语法知识</div><ul class="notion-list notion-list-disc notion-block-110631ad9cae46818d7723d82d3f1e69"><li>学习一本英语语法书籍或参加在线语法课程，系统地学习和复习英语语法规则。</li></ul><ul class="notion-list notion-list-disc notion-block-eb3bb528a2be49daaf85024b8efd18fd"><li>做语法练习题，巩固和应用所学的语法知识。</li></ul><ul class="notion-list notion-list-disc notion-block-65b9a6918aa0458aa89b140fd58e94d0"><li>通过阅读和听力练习中发现的语法错误，加以分析和纠正。</li></ul><div class="notion-blank notion-block-cb742563190a4b5090f7c81f522d2ab0"> </div><div class="notion-text notion-block-b7bb72bf5147488286d688c64c28a305">自制烤冷面</div><div class="notion-text notion-block-8a29fd472cfd45d3be288174d5753edb">自己在出租屋里做烤冷面确实有一定难度，但并不是不可能。以下是一些可能需要注意的事项：</div><ol start="1" class="notion-list notion-list-numbered notion-block-183a867ff9814edaba0b6609eaf41d1e"><li>准备材料：需要准备冷面、烤肉、黄瓜、胡萝卜、紫菜、芝麻等材料。</li></ol><ol start="2" class="notion-list notion-list-numbered notion-block-1ba00e500cf14b7d9eec23069f280ef6"><li>烤肉的处理：如果你没有烤肉架或烤炉，可以考虑用平底锅来代替。烤肉前需要腌制，可以使用酱油、料酒、葱姜蒜等调料腌制。</li></ol><ol start="3" class="notion-list notion-list-numbered notion-block-bc3ead8222074e09a00cd036e8da2c04"><li>准备烤面方式：可以使用平底锅或烤盘来烤冷面，需要将冷面放入平底锅或烤盘中，再铺上烤肉、黄瓜、胡萝卜、紫菜等配料，最后撒上芝麻。</li></ol><ol start="4" class="notion-list notion-list-numbered notion-block-0c7aff65ee304f50b5ddb4f4aeb9c07e"><li>烤面的技巧：需要掌握火候，以免烤焦。可以先用中火烤制一段时间，然后转小火继续烤制，直到面烤熟。</li></ol><div class="notion-text notion-block-d59e6c1c44864e8d800b3f1157e7a9b7">总的来说，做烤冷面需要一定的技巧和经验，但只要认真准备和细心操作，就可以做出美味的烤冷面。</div><div class="notion-blank notion-block-3deef0cccee14faea1a75307a90b296f"> </div><div class="notion-text notion-block-ea4da243bb8d4d71bbb4124f61e370bf">储蓄</div><ol start="1" class="notion-list notion-list-numbered notion-block-3fabe44fa2aa46d79b63ce08fb304e54"><li>每个月先扣除房租，1350元，剩余8650元。</li></ol><ol start="2" class="notion-list notion-list-numbered notion-block-bc0a32c45fe849e6807eea4f461c193d"><li>每两个月需要交出去2500元，剩余6150元。</li></ol><ol start="3" class="notion-list notion-list-numbered notion-block-41097ceaa95f475088f84966fb066eaf"><li>每个月的日常开支尽量控制在剩余金额内，例如3000元左右。</li></ol><ol start="4" class="notion-list notion-list-numbered notion-block-8a3cdc7677b146fe9aa3e537a2b008e5"><li>每两个月结算一次，将剩余的金额储蓄起来，例如将剩余的3650元全部储蓄，下次结算时加上本次的剩余金额6150元，一共储蓄9800元。</li></ol><ol start="5" class="notion-list notion-list-numbered notion-block-c29c6d706d7a4feba22b10a819dfe4d2"><li>一年下来，共储蓄9800元。</li></ol><div class="notion-blank notion-block-abcf6b45e7f74b8281aa9fa8c28354de"> </div><div class="notion-text notion-block-88180ea584394c4a9a3b9d16c5eeb4e1">如何避免消费主义</div><ol start="1" class="notion-list notion-list-numbered notion-block-3c5bc50b8726431f8039f6df2edc0668"><li>建立自我意识：了解自己的需求和价值观，不盲目跟从潮流和广告。</li></ol><ol start="2" class="notion-list notion-list-numbered notion-block-7337bf0ad1164cfe9e2342b88f907014"><li>掌握财务管理技能：合理规划预算，避免不必要的消费。</li></ol><ol start="3" class="notion-list notion-list-numbered notion-block-6d656a67259f4243b578a4705608ab40"><li>重视实用性和耐用性：考虑产品的实用性和耐用性，避免追求短暂的时尚。</li></ol><ol start="4" class="notion-list notion-list-numbered notion-block-e7c6664140d041edb5702f66cf053c05"><li>多元化获取信息：不仅仅依赖商业广告，获取多元化的信息来源，包括社交媒体、书籍和新闻等。</li></ol><ol start="5" class="notion-list notion-list-numbered notion-block-23f9e142f584477ba4dce453961a3120"><li>慎重选择购物场所：避免到过度商业化的购物中心和商场，选择更加人性化的小店和市场。</li></ol><ol start="6" class="notion-list notion-list-numbered notion-block-398164f91e7e451f9ead743b9b0e491b"><li>培养兴趣爱好：寻找和培养自己的兴趣爱好，让生活更加丰富和有意义。</li></ol><h3 class="notion-h notion-h2 notion-h-indent-0 notion-block-fad7f84ca4e04830adac7203fc9ebd7f" data-id="fad7f84ca4e04830adac7203fc9ebd7f"><span><div id="fad7f84ca4e04830adac7203fc9ebd7f" class="notion-header-anchor"></div><a class="notion-hash-link" href="#fad7f84ca4e04830adac7203fc9ebd7f" title="健康运动"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title">健康运动</span></span></h3><div class="notion-text notion-block-497fd3db534749beadd3e91e0be8d125">一般做提肛运动5-8秒，然后松弛休息5-10秒为一次，如此反复20-40次，每天可训练5-10分钟</div><div class="notion-blank notion-block-a6ef0c2e5c504e378bf22a38f42fd689"> </div><div class="notion-text notion-block-4fd7168842a54d9b9a48bda5858cdb95">卷腹运动是一种非常有效的锻炼腹部肌肉的运动，以下是正确做卷腹运动的步骤：</div><ol start="1" class="notion-list notion-list-numbered notion-block-f5bc0cb55b1240f7965c5516f409e5ae"><li>躺在瑜伽垫上，双腿弯曲，脚掌贴地，双手放在头部后方。</li></ol><ol start="2" class="notion-list notion-list-numbered notion-block-9facb3e949894c2b8965a25c20cc6f09"><li>吸气，将上半身向上卷起，头部和肩膀离开地面，向膝盖方向靠近。</li></ol><ol start="3" class="notion-list notion-list-numbered notion-block-514ba3f513e14562ad4ac7d148b9a8a4"><li>慢慢呼气，将上半身放回地面，重复动作。</li></ol><ol start="4" class="notion-list notion-list-numbered notion-block-7d257e787665423ab7484c6be19c190a"><li>在做卷腹运动时，注意不要用手臂的力量来抬起上半身，而是用腹部肌肉的力量来完成运动。</li></ol><ol start="5" class="notion-list notion-list-numbered notion-block-34be28eceb6a4561a75927fef2c01993"><li>在做卷腹运动时，不要将脖子弯曲，也不要将下巴向胸部靠近，这样会对颈部造成压力。</li></ol><ol start="6" class="notion-list notion-list-numbered notion-block-7d4799e8e11d4666a404153a0d0a8a7c"><li>在做卷腹运动时，注意呼吸，吸气的时候上半身向上卷起，呼气的时候将上半身放回地面。</li></ol><ol start="7" class="notion-list notion-list-numbered notion-block-4dcbced050664bb192ba52dc141df24a"><li>做卷腹运动时，可以逐渐增加运动的次数和重量，但要根据个人的身体情况来决定。</li></ol><div class="notion-blank notion-block-18ab2c4d41aa42848979548cb5080b43"> </div><div class="notion-text notion-block-567f66f3188942d8a513a97784fdd8b3">慢跑是一种非常好的有氧运动，以下是正确做慢跑的步骤：</div><ol start="1" class="notion-list notion-list-numbered notion-block-a33c9c6452bd46a38265f023d93a7ae1"><li>穿着合适的运动鞋和舒适的运动服装，选择一个平坦的路面或跑步机。</li></ol><ol start="2" class="notion-list notion-list-numbered notion-block-d2ab176838494fc79a31bac9428cd188"><li>先进行热身活动，如快走、慢跑或拉伸等，使身体逐渐适应运动。</li></ol><ol start="3" class="notion-list notion-list-numbered notion-block-136cd9f2ef404dd3aa11db1b00957794"><li>开始慢跑，先从慢速开始，逐渐加快速度。注意保持平稳的呼吸和姿势，双臂自然摆动，手肘保持90度弯曲。</li></ol><ol start="4" class="notion-list notion-list-numbered notion-block-62deda388e5b456aac82ee91812d1113"><li>保持正确的跑步姿势，身体前倾，重心在前脚掌上，膝盖微微弯曲，脚步轻盈，避免用脚后跟着地。</li></ol><ol start="5" class="notion-list notion-list-numbered notion-block-18b09c83c61a479991e6a06ae33426e5"><li>在跑步过程中保持适当的水分摄入，避免脱水。</li></ol><ol start="6" class="notion-list notion-list-numbered notion-block-15e360d33f4a4ecd8c969d5202681f48"><li>跑步结束后进行适当的拉伸活动，缓解肌肉疲劳和紧张。</li></ol><div class="notion-blank notion-block-dcddfab399464efab2cfaa28a5ae4ea5"> </div><div class="notion-text notion-block-74000905cc314ab8996498411dcd9501">减肥需要进行有氧运动和力量训练的结合，以下是一些适合减肥的运动：</div><ol start="1" class="notion-list notion-list-numbered notion-block-7ba4d827c4044984baa06bf0d6edbafa"><li>慢跑：可以帮助燃烧脂肪，提高心肺功能。</li></ol><ol start="2" class="notion-list notion-list-numbered notion-block-35cee8024d274551b3cd2ebb5ac82c88"><li>跳绳：不仅可以燃烧脂肪，还可以增强心肺功能和协调性。</li></ol><ol start="3" class="notion-list notion-list-numbered notion-block-3ea51ef7ebb2429aaf396c5d6cb1c8dc"><li>游泳：可以锻炼全身肌肉，消耗大量热量。</li></ol><ol start="4" class="notion-list notion-list-numbered notion-block-f3f1cc5e8fad4d8e850b04f43e453b2d"><li>瑜伽：可以帮助塑造身形，增强柔韧性和平衡感。</li></ol><ol start="5" class="notion-list notion-list-numbered notion-block-682267be0dc2473bb082ccd18c50e05c"><li>健身房训练：可以进行有氧运动和力量训练结合的运动，如跑步机、划船机、哑铃训练等。</li></ol><div class="notion-text notion-block-30e7c4044a8347a8bb4bd4ea5ca3741f">注意事项：</div><ol start="1" class="notion-list notion-list-numbered notion-block-ff22383267c7472dbc9b968e528b17cb"><li>运动前要进行适当的热身活动，避免运动受伤。</li></ol><ol start="2" class="notion-list notion-list-numbered notion-block-a653a7be50714ffcaa3c0112d83c1ce3"><li>运动时要控制好自己的心率，不要过度运动。</li></ol><ol start="3" class="notion-list notion-list-numbered notion-block-cd403be77559433297edf2a4d4cd52b2"><li>运动后要进行适当的拉伸活动，帮助恢复身体状态。</li></ol><div class="notion-blank notion-block-abb8072bf3ec450a91e623efcefe8df8"> </div><h3 class="notion-h notion-h2 notion-h-indent-0 notion-block-a7a46a963671442795e78b4d28ee1df4" data-id="a7a46a963671442795e78b4d28ee1df4"><span><div id="a7a46a963671442795e78b4d28ee1df4" class="notion-header-anchor"></div><a class="notion-hash-link" href="#a7a46a963671442795e78b4d28ee1df4" title="来自文心一言"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title">来自文心一言</span></span></h3><h3 class="notion-h notion-h2 notion-h-indent-0 notion-block-d2eb086357554debb233fa9348bdb550" data-id="d2eb086357554debb233fa9348bdb550"><span><div id="d2eb086357554debb233fa9348bdb550" class="notion-header-anchor"></div><a class="notion-hash-link" href="#d2eb086357554debb233fa9348bdb550" title="人生目标以及各个十年目标"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title">人生目标以及各个十年目标</span></span></h3><div class="notion-text notion-block-55422160776148cca62265116e3a8d62">好的，根据您的需求和兴趣爱好，我为您制定了一份人生目标规划。请您查看：</div><div class="notion-text notion-block-f1d773c58b43408f89f99b096dad7998"><b>一、大的人生目标：</b></div><ol start="1" class="notion-list notion-list-numbered notion-block-fe91d037ffef4906b769b1ae58a21999"><li>财务自由：在退休之前，实现财务自由，确保能够享受退休生活并保持生活质量不下降。</li></ol><ol start="2" class="notion-list notion-list-numbered notion-block-54e8f758bad04dd3b6193974c665e813"><li>家庭与感情：结婚并建立幸福的家庭，保持良好的夫妻关系和家庭和睦。</li></ol><ol start="3" class="notion-list notion-list-numbered notion-block-9222098f565248b28ff5ad5463e0731d"><li>购房购车：在城市购买一套舒适的住房和一辆代步车。</li></ol><ol start="4" class="notion-list notion-list-numbered notion-block-875a28d611fd4189bd562376d79d6a21"><li>兴趣爱好：在摄影、游戏、娱乐活动等方面发展自己的兴趣爱好，并适当参加一些相关比赛或活动。</li></ol><ol start="5" class="notion-list notion-list-numbered notion-block-908892fb0b7548bba97cbb2645bf23d4"><li>逻辑思维和阅读提升：通过学习和实践，提升自己的逻辑思维能力和阅读水平。</li></ol><div class="notion-text notion-block-fb64e48c2eed4729a4d3338afeb0df45"><b>二、十年目标：</b></div><ol start="1" class="notion-list notion-list-numbered notion-block-607717cf4da14989810c6a611a359bf1"><li><b>第一个十年（25-35岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-607717cf4da14989810c6a611a359bf1"><ul class="notion-list notion-list-disc notion-block-25ec530833de467281552633bf4895d2"><li>积累财富：通过工作或其他途径积累一定的财富，为购房购车打下基础。</li></ul><ul class="notion-list notion-list-disc notion-block-930f278dcd1d459bad165cf2a5bdd999"><li>寻找伴侣：找到一位合适的伴侣，发展感情并考虑结婚。</li></ul><li><b>第一个五年（25-30岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-76ab9667b37d418aaeb505f118302989"><ul class="notion-list notion-list-disc notion-block-756e503bb4a54851aa6a65b62092465d"><li>积累财富：通过工作或其他途径积累一定的财富，为购房购车打下基础。</li></ul><ul class="notion-list notion-list-disc notion-block-b43b861ec13f4fc589cc969da0c32f61"><li>寻找伴侣：找到一位合适的伴侣，发展感情并考虑结婚。</li></ul><ul class="notion-list notion-list-disc notion-block-261d3faa0d29499f86f06b6c18771a89"><li>探索职业方向：开始探索自己的职业方向，积累相关经验和技能。</li></ul><li><b>第一个一年（25-26岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-16181d4fbd9d4f368b7d8858fccb60e1"><ul class="notion-list notion-list-disc notion-block-d26faecd117744f3bfca19d4c53684f5"><li>积累财富：找到一份稳定的工作，并开始积累财富，为购房购车打下基础。</li></ul><ul class="notion-list notion-list-disc notion-block-9abb9add065a443a860d90b852109458"><li>寻找伴侣：参加社交活动，扩展社交圈，寻找合适的伴侣。</li></ul><ul class="notion-list notion-list-disc notion-block-300979b6fd994427b59ed9477ab11e7a"><li>探索职业方向：开始了解不同的职业方向，探索自己的兴趣和潜力。</li></ul></ol><li><b>第二个一年（26-27岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-73147b694480410e95798f4be9fc7499"><ul class="notion-list notion-list-disc notion-block-368796a28cdb42c98519dad294cf4452"><li>积累财富：继续工作，进一步积累财富，可以考虑进行投资或储蓄。</li></ul><ul class="notion-list notion-list-disc notion-block-30b3b9fc53af4d11b292d6167924c176"><li>寻找伴侣：深入发展已有的感情关系，考虑结婚的可能性。</li></ul><ul class="notion-list notion-list-disc notion-block-e6a30e6de55a4d358cd6e1491d8b2f4c"><li>探索职业方向：参加相关的培训或实习，进一步了解自己的职业方向。</li></ul></ol><li><b>第三个一年（27-28岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-c00292d31086440496103938251edf39"><ul class="notion-list notion-list-disc notion-block-82ac28f531e343c0be5818c7df1a8a02"><li>积累财富：继续工作，进一步积累财富，可以考虑购买房产或车辆。</li></ul><ul class="notion-list notion-list-disc notion-block-7887b2cd29d7496d935660f708a1a010"><li>寻找伴侣：如果已有伴侣，可以考虑结婚；如果没有，继续寻找。</li></ul><ul class="notion-list notion-list-disc notion-block-8aba6d56508e4e07b5c3d32d0f7e21fa"><li>探索职业方向：开始进入职场，积累相关的工作经验和技能。</li></ul></ol><li><b>第四个一年（28-29岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-e3d457ad4c8941de8afbc5b2a454b221"><ul class="notion-list notion-list-disc notion-block-cf50b0c09feb48f7a3d33787952f0227"><li>积累财富：继续工作，进一步积累财富，可以考虑进行更深入的投资或储蓄。</li></ul><ul class="notion-list notion-list-disc notion-block-67839300c0b94784902a531045fd9e5f"><li>寻找伴侣：如果已有伴侣，可以考虑生育；如果没有，继续寻找。</li></ul><ul class="notion-list notion-list-disc notion-block-cf4fb68b6a274ed992e4fd4c8ebf74be"><li>探索职业方向：在职场中进一步发展，考虑晋升或转行。</li></ul></ol><li><b>第五个一年（29-30岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-65a8780b2ae644ec82ce695699e33ec5"><ul class="notion-list notion-list-disc notion-block-efd071f414654c779cd23b43ad73d4b5"><li>积累财富：继续工作，进一步积累财富，可以考虑进行更深入的投资或储蓄。</li></ul><ul class="notion-list notion-list-disc notion-block-e7fd3484bd8649e0b9060b9b1ec0fe80"><li>寻找伴侣：如果已有伴侣，可以进一步发展感情；如果没有，继续寻找。</li></ul><ul class="notion-list notion-list-disc notion-block-5d1a7b3f510441898bbd924df5abdb8a"><li>探索职业方向：在职场中进一步发展，考虑晋升或转行。</li></ul></ol></ol><li><b>第二个五年（30-35岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-6ed0e150e38f48f885755754a46dd53c"><ul class="notion-list notion-list-disc notion-block-9bb93fe9211a4dd2a8fce7bc9d6ef341"><li>购房购车：购买一套住房和一辆代步车，解决基本生活需求。</li></ul><ul class="notion-list notion-list-disc notion-block-e5f2ce0420e0405782662ac3509825c2"><li>家庭与感情：结婚并建立幸福的家庭，保持良好的夫妻关系和家庭和睦。</li></ul><ul class="notion-list notion-list-disc notion-block-ebbc8e2b77b740448683a1a82ef587cc"><li>职业发展：在确定的职业方向上深入发展，提升自己的市场价值。</li></ul><ul class="notion-list notion-list-disc notion-block-00ed542e8fa3426781c3d578a0b806be"><li>社交和领导力：积极参与社交活动，建立广泛的人脉，并在适当的场合发挥领导力。</li></ul><li><b>第一个一年（30-31岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-ca94b022b99b40ff8fb6cfdf1eefc674"><ul class="notion-list notion-list-disc notion-block-d6cd1d7a587e4572908d08af7fe1eb12"><li>购房购车：了解市场情况，考虑自己的需求和预算，购买一套住房和一辆代步车。</li></ul><ul class="notion-list notion-list-disc notion-block-340c32e5e6e844a0ab1f5f4bc8470b58"><li>家庭与感情：如果已有伴侣，可以考虑结婚；如果没有，继续寻找。</li></ul><ul class="notion-list notion-list-disc notion-block-ac6177fdc14941bdbd25ddd89a264d90"><li>职业发展：在确定的职业方向上深入发展，提升自己的市场价值。</li></ul><ul class="notion-list notion-list-disc notion-block-90520e2cbb6e41cc87c2b36690e52f09"><li>社交和领导力：积极参加社交活动，扩大人脉圈；在适当的场合发挥领导力。</li></ul></ol><li><b>第二个一年（31-32岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-ab50bac1ee6b47d78520d144a6788203"><ul class="notion-list notion-list-disc notion-block-467e7b82a4ac40ad883b08b97f2ac6e9"><li>购房购车：继续维护和保养住房和车辆，确保基本生活需求。</li></ul><ul class="notion-list notion-list-disc notion-block-e7aaaa1396ce4fe19db4b914a117c848"><li>家庭与感情：保持良好的夫妻关系和家庭和睦。</li></ul><ul class="notion-list notion-list-disc notion-block-cf8524de99b7416b881b4759bf5d154f"><li>职业发展：在确定的职业方向上进一步发展，提升自己的市场价值。</li></ul><ul class="notion-list notion-list-disc notion-block-427a79242ad5460abd6d565dda761fbb"><li>社交和领导力：继续积极参与社交活动，建立广泛的人脉；在适当的场合发挥领导力。</li></ul></ol><li><b>第三个一年（32-33岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-dd315eddd8bd4cc1a258a5619ed90246"><ul class="notion-list notion-list-disc notion-block-5d4b3ffad96e40009d6851cc847b9ad1"><li>购房购车：继续维护和保养住房和车辆，确保基本生活需求。</li></ul><ul class="notion-list notion-list-disc notion-block-a2f2ba6bc6d44dea974ebd27f1304c54"><li>家庭与感情：保持良好的夫妻关系和家庭和睦。</li></ul><ul class="notion-list notion-list-disc notion-block-44354c07ead047abbb85bbeb0bd3002d"><li>职业发展：在确定的职业方向上进一步发展，提升自己的市场价值。</li></ul><ul class="notion-list notion-list-disc notion-block-573d91e6b86f45cfa7c167274bf2abfc"><li>社交和领导力：继续积极参与社交活动，建立广泛的人脉；在适当的场合发挥领导力。</li></ul></ol><li><b>第四个一年（33-34岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-26053e0d62e24a80ab62c26716280b85"><ul class="notion-list notion-list-disc notion-block-6567d9ee99b744259a5dc8a219234f57"><li>购房购车：继续维护和保养住房和车辆，确保基本生活需求。</li></ul><ul class="notion-list notion-list-disc notion-block-f1aa9b2b094a44648d45f9bdc0009478"><li>家庭与感情：保持良好的夫妻关系和家庭和睦</li></ul><ul class="notion-list notion-list-disc notion-block-eee22543a70f4c649443877c632951dd"><li>职业发展：在确定的职业方向上进一步发展，提升自己的市场价值。</li></ul><ul class="notion-list notion-list-disc notion-block-391ceef8622c4ba8a6215861cc0c2ae3"><li>社交和领导力：继续积极参与社交活动，建立广泛的人脉；在适当的场合发挥领导力。</li></ul></ol><li><b>第五个一年（34-35岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-258331ca11c3409b838e11ab2f82be9e"><ul class="notion-list notion-list-disc notion-block-9ffd9858976545b5aa9524f795f2c9d0"><li>购房购车：继续维护和保养住房和车辆，确保基本生活需求。</li></ul><ul class="notion-list notion-list-disc notion-block-07300faa1f4c4a7bb9d26a41d4f36cbe"><li>家庭与感情：保持良好的夫妻关系和家庭和睦。</li></ul><ul class="notion-list notion-list-disc notion-block-aa1bab0f8eb3401083c05a5de3132d55"><li>职业发展：在确定的职业方向上进一步发展，提升自己的市场价值。</li></ul><ul class="notion-list notion-list-disc notion-block-21ccbc6ebe5345faac41fb349cac5c37"><li>社交和领导力：继续积极参与社交活动，建立广泛的人脉；在适当的场合发挥领导力。</li></ul></ol></ol></ol></ol><ol start="2" class="notion-list notion-list-numbered notion-block-62fa691f014a4d0596375e3ca63a36b0"><li><b>第二个十年（35-45岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-62fa691f014a4d0596375e3ca63a36b0"><ul class="notion-list notion-list-disc notion-block-97a22be1ca7f4842b709e489db34a451"><li>购房购车：购买一套住房和一辆代步车，解决基本生活需求。</li></ul><ul class="notion-list notion-list-disc notion-block-b479dbf45076407ea9f79f4aa1f729d7"><li>家庭与感情：结婚并建立幸福的家庭，保持良好的夫妻关系和家庭和睦。</li></ul><ul class="notion-list notion-list-disc notion-block-44438a6cfbdc42c7b7a7c3933a608750"><li>兴趣爱好：在摄影、游戏、娱乐活动等方面深入发展自己的兴趣爱好。</li></ul><ul class="notion-list notion-list-disc notion-block-64507cd6dce945e398d18a0d6a1f089c"><li>逻辑思维和阅读提升：通过学习和实践，提升自己的逻辑思维能力和阅读水平。</li></ul><li><b>第一个五年（35-40岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-15d5030db2414f6a90990e18f5d5c301"><ul class="notion-list notion-list-disc notion-block-81ca4afb42bd4943bb1877e87d7327ac"><li>兴趣爱好：在摄影、游戏、娱乐活动等方面深入发展自己的兴趣爱好。</li></ul><ul class="notion-list notion-list-disc notion-block-b4e69addf8a044bc8e10029c7b63589d"><li>逻辑思维和阅读提升：通过学习和实践，提升自己的逻辑思维能力和阅读水平。</li></ul><ul class="notion-list notion-list-disc notion-block-a3f8c75f62da4a9f99a2170730e15e49"><li>社区服务：积极参与社区服务，回馈社会。</li></ul><li><b>第一个一年（35-36岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-5b94d62386e3471ba74cbd5025e7fdaa"><ul class="notion-list notion-list-disc notion-block-971005d63bd644e4b483527355851b03"><li>兴趣爱好：寻找自己真正感兴趣的摄影、游戏、娱乐活动等，并深入了解。可以参加相关的课程、工作坊或者加入社群，以获取新的知识和技能。</li></ul><ul class="notion-list notion-list-disc notion-block-7b3692f8c138467c8e05cb295d96dfa7"><li>逻辑思维和阅读提升：开始阅读更复杂的书籍、文章或者进行更深入的逻辑思考，以提升逻辑思维能力和阅读水平。</li></ul><ul class="notion-list notion-list-disc notion-block-a9f999b422c249cd811f4ed9ed0f2896"><li>社区服务：了解自己所在社区的服务需求，寻找适合自己的服务项目并参与其中。</li></ul></ol><li><b>第二个一年（36-37岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-50db25b5a010452c80e0402327a9e078"><ul class="notion-list notion-list-disc notion-block-ed4f7d2cfe2a49c3bb7d26973ec6e9d0"><li>兴趣爱好：在已有的兴趣爱好基础上，尝试新的挑战和尝试，进一步深入发展。可以参加一些比赛或者活动，展示自己的成果。</li></ul><ul class="notion-list notion-list-disc notion-block-3d79e33868bf4a0792900e9c8f519cf0"><li>逻辑思维和阅读提升：继续阅读更复杂的书籍、文章或者进行更深入的逻辑思考，以提升逻辑思维能力和阅读水平。</li></ul><ul class="notion-list notion-list-disc notion-block-e92704654792469d8d3a82ac98fce880"><li>社区服务：继续参与社区服务，可以考虑担任一些志愿者的职务，发挥自己的领导力。</li></ul></ol><li><b>第三个一年（37-38岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-502e99bfef944dbfb878a3f8d49be3b7"><ul class="notion-list notion-list-disc notion-block-0daf1706ee4142b2946358169d9b865c"><li>兴趣爱好：在兴趣爱好中进一步探索和尝试新的挑战，将更多的时间和精力投入到这些活动中。可以参加一些比赛或者活动，展示自己的成果。</li></ul><ul class="notion-list notion-list-disc notion-block-658a9d58879949eba33d91bb14c26831"><li>逻辑思维和阅读提升：继续阅读更复杂的书籍、文章或者进行更深入的逻辑思考，以提升逻辑思维能力和阅读水平。</li></ul><ul class="notion-list notion-list-disc notion-block-7c4aa8518659437098c19ead4ab00d19"><li>社区服务：继续参与社区服务，可以考虑担任一些志愿者的职务，发挥自己的领导力。</li></ul></ol><li><b>第四个一年（38-39岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-027d34d49e664f5bb5f0202012c414a8"><ul class="notion-list notion-list-disc notion-block-4ccee64a4ea6407db14441d77f7f1234"><li>兴趣爱好：在兴趣爱好中进一步探索和尝试新的挑战，将更多的时间和精力投入到这些活动中。可以参加一些比赛或者活动，展示自己的成果。</li></ul><ul class="notion-list notion-list-disc notion-block-ea18a787808d434a8b267524eb8ff54f"><li>逻辑思维和阅读提升：继续阅读更复杂的书籍、文章或者进行更深入的逻辑思考，以提升逻辑思维能力和阅读水平。</li></ul><ul class="notion-list notion-list-disc notion-block-53580a60622c490bb88aca2e9df6a5be"><li>社区服务：继续参与社区服务，可以考虑担任一些志愿者的职务，发挥自己的领导力。</li></ul></ol><li><b>第五个一年（39-40岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-16950e192b3d4135b7da58b4c6f3528b"><ul class="notion-list notion-list-disc notion-block-b1f74a8457e348b4911df969b81d9d41"><li>兴趣爱好：在兴趣爱好中进一步探索和尝试新的挑战，将更多的时间和精力投入到这些活动中。可以参加一些比赛或者活动，展示自己的成果。</li></ul><ul class="notion-list notion-list-disc notion-block-bd931805ee5f435ab7867bcdea3f769f"><li>逻辑思维和阅读提升：继续阅读更复杂的书籍、文章或者进行更深入的逻辑思考，以提升逻辑思维能力和阅读水平。</li></ul><ul class="notion-list notion-list-disc notion-block-41975871189f4ce7be32245ccf451ffd"><li>社区服务：继续参与社区服务，可以考虑担任一些志愿者的职务，发挥自己的领导力。同时可以考虑开展一些公益活动，回馈社会。</li></ul></ol></ol><li><b>第二个五年（40-45岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-985b38353a83416a9cbb8794715a7384"><ul class="notion-list notion-list-disc notion-block-9888932b51bf4aafb89de48da0976ba2"><li>财务自由：在第二个五年积累的基础上，实现财务自由，确保能够享受退休生活并保持生活质量不下降。</li></ul><ul class="notion-list notion-list-disc notion-block-c44b31c20c62414e961100c8b16349fe"><li>兴趣爱好：继续深入发展自己的兴趣爱好，并适当参加一些相关比赛或活动。</li></ul><ul class="notion-list notion-list-disc notion-block-791b8030acd94a61a49500fa44eaa1b8"><li>传承和规划：考虑传承财产和规划遗产，确保家族的延续。</li></ul><li><b>第一个一年（40-41岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-65fda3652030412687cc0f6729bed587"><ul class="notion-list notion-list-disc notion-block-1343fe9b2789496eb9a9e8141d3d6a06"><li>财务自由：评估当前的财务状况，制定实现财务自由的计划。可以考虑更深入的投资或者储蓄，以确保实现财务自由。</li></ul><ul class="notion-list notion-list-disc notion-block-83cd240998da4a42baf2e458f558db82"><li>兴趣爱好：继续深入发展自己的兴趣爱好，并适当参加一些相关比赛或活动。可以尝试新的挑战和尝试，以保持生活的乐趣。</li></ul><ul class="notion-list notion-list-disc notion-block-c8eb11e80d964d059ecb458b212d0b19"><li>传承和规划：开始考虑传承财产和规划遗产，与家人进行沟通并制定初步的计划。</li></ul></ol><li><b>第二个一年（41-42岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-f1d1d03785ff453982d5cbe6a1e37a16"><ul class="notion-list notion-list-disc notion-block-5b3c34556b914675896f6f3cb4a08792"><li>财务自由：继续实现财务自由的计划，确保能够享受退休生活并保持生活质量不下降。</li></ul><ul class="notion-list notion-list-disc notion-block-a14ee1ecbef54328993b07c459ddee23"><li>兴趣爱好：继续深入发展自己的兴趣爱好，并适当参加一些相关比赛或活动。可以尝试新的挑战和尝试，以保持生活的乐趣。</li></ul><ul class="notion-list notion-list-disc notion-block-f6c4ddf9ad0d42558eb5b0f0a5f413d2"><li>传承和规划：进一步制定传承财产和规划遗产的计划，并与家人进行沟通。</li></ul></ol><li><b>第三个一年（42-43岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-8375470f0a4a427c9008b75bd7199b5a"><ul class="notion-list notion-list-disc notion-block-2fb0c89a3f5748c9811ced894db17a46"><li>财务自由：继续实现财务自由的计划，确保能够享受退休生活并保持生活质量不下降。</li></ul><ul class="notion-list notion-list-disc notion-block-17ae3761f1474c50899020cf36163873"><li>兴趣爱好：继续深入发展自己的兴趣爱好，并适当参加一些相关比赛或活动。可以尝试新的挑战和尝试，以保持生活的乐趣。</li></ul><ul class="notion-list notion-list-disc notion-block-313e5dddba524df2929f377d2991d541"><li>传承和规划：进一步完善传承财产和规划遗产的计划，并与家人进行沟通。</li></ul></ol><li><b>第四个一年（43-44岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-77b5ee0a5ca04a2e84c060ea3fe2b0c0"><ul class="notion-list notion-list-disc notion-block-e5c0f0d07e0b4ca1a07907c5b5d4f082"><li>财务自由：继续实现财务自由的计划，确保能够享受退休生活并保持生活质量不下降。</li></ul><ul class="notion-list notion-list-disc notion-block-db24e616f8444cc4bf135ffed7b9033f"><li>兴趣爱好：继续深入发展自己的兴趣爱好，并适当参加一些相关比赛或活动。可以尝试新的挑战和尝试，以保持生活的乐趣。</li></ul><ul class="notion-list notion-list-disc notion-block-1b37860da3974b20ad776fd88e2efb42"><li>传承和规划：继续完善传承财产和规划遗产的计划，并与家人进行沟通。</li></ul></ol><li><b>第五个一年（44-45岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-93cbe7733860418db9f01b1a562844ca"><ul class="notion-list notion-list-disc notion-block-80973751b71645e6b0e2a425011b41e0"><li>财务自由：继续实现财务自由的计划，确保能够享受退休生活并保持生活质量不下降。</li></ul><ul class="notion-list notion-list-disc notion-block-ccf9e53c87c34cf0b9e783ea320e916f"><li>兴趣爱好：继续深入发展自己的兴趣爱好，并适当参加一些相关比赛或活动。可以尝试新的挑战和尝试，以保持生活的乐趣。</li></ul><ul class="notion-list notion-list-disc notion-block-1d59487a5c194e108eedd4a42a025aea"><li>传承和规划：继续完善传承财产和规划遗产的计划，并与家人进行沟通。确保家族的延续和财富的合理传承。</li></ul></ol></ol></ol></ol><ol start="3" class="notion-list notion-list-numbered notion-block-26bec5a9c0b94a34a2bff1b2ee477e7e"><li><b>第三个十年（45-55岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-26bec5a9c0b94a34a2bff1b2ee477e7e"><ul class="notion-list notion-list-disc notion-block-64ecffa5d15e407ca6c8a79922f35cab"><li>财务自由：在第二个十年积累的基础上，实现财务自由，确保能够享受退休生活并保持生活质量不下降。</li></ul><ul class="notion-list notion-list-disc notion-block-823d9c1e7e4e413ebc2975c1358b6af2"><li>兴趣爱好：继续深入发展自己的兴趣爱好，并适当参加一些相关比赛或活动。</li></ul><ul class="notion-list notion-list-disc notion-block-be21e9e015474fb5810efba1ec60cfa1"><li>逻辑思维和阅读提升：持续提升自己的逻辑思维能力和阅读水平。</li></ul><li><b>第一个五年（45-50岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-441a1c05562f487d8a464b189e5e4ff1"><ul class="notion-list notion-list-disc notion-block-d6d452f5ad2b491d8bf78403543b6c78"><li>财务自由：在第二个十年的基础上，继续优化投资组合，以期实现财务自由。具体目标可以是增加被动收入，减少必要的支出，以及增加资产价值。</li></ul><ul class="notion-list notion-list-disc notion-block-d421403d4234497b8ebae28044e87494"><li>兴趣爱好：寻找并培养新的兴趣爱好，同时深化已有的兴趣爱好。可以参加一些课程、工作坊或线上社群来探索新的领域。</li></ul><ul class="notion-list notion-list-disc notion-block-5d73c09383cc480e9622de0361200a1c"><li>逻辑思维和阅读提升：通过阅读经典书籍和理论著作，以及参加一些逻辑思维的课程或活动，提升自身的逻辑思维能力和阅读水平。</li></ul><li><b>第一个一年（45-46岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-a5d45570b15d48c9b6093e5483668eb5"><ul class="notion-list notion-list-disc notion-block-9a8c89d4f6da4285bdb03a75d31a3301"><li>财务自由：评估当前的财务状况，制定实现财务自由的计划。可以考虑更深入的投资或者储蓄，以确保实现财务自由。</li></ul><ul class="notion-list notion-list-disc notion-block-5085469a01084580bb236a02446a0f89"><li>兴趣爱好：开始寻找并培养新的兴趣爱好，并适当参加一些相关比赛或活动。可以尝试新的挑战和尝试，以保持生活的乐趣。</li></ul><ul class="notion-list notion-list-disc notion-block-7d975423d8d54067b30a3afc768e461f"><li>逻辑思维和阅读提升：开始阅读经典书籍和理论著作，以及参加一些逻辑思维的课程或活动，提升自身的逻辑思维能力和阅读水平。</li></ul></ol><li><b>第二个一年（46-47岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-eb04d9f288ee4a028ea6ba11eb7d81b5"><ul class="notion-list notion-list-disc notion-block-9e4895e4060146da9081c2f9b98eede9"><li>财务自由：继续实现财务自由的计划，确保能够享受退休生活并保持生活质量不下降。</li></ul><ul class="notion-list notion-list-disc notion-block-35ff8b98779c4c68b24ad4efbc58ccb0"><li>兴趣爱好：继续寻找并培养新的兴趣爱好，并适当参加一些相关比赛或活动。可以尝试新的挑战和尝试，以保持生活的乐趣。</li></ul><ul class="notion-list notion-list-disc notion-block-919355d2cf5b4b8bbbb336581d5de02c"><li>逻辑思维和阅读提升：继续阅读经典书籍和理论著作，以及参加一些逻辑思维的课程或活动，提升自身的逻辑思维能力和阅读水平。</li></ul></ol><li><b>第三个一年（47-48岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-d862e86a5a2d44d0bbb5d9bb8c62f36a"><ul class="notion-list notion-list-disc notion-block-6e4f8ba9348f4f40ab5819424f90c248"><li>财务自由：继续实现财务自由的计划，确保能够享受退休生活并保持生活质量不下降。</li></ul><ul class="notion-list notion-list-disc notion-block-82d86482a7db47948e1c0d26e0f66ac8"><li>兴趣爱好：继续寻找并培养新的兴趣爱好，并适当参加一些相关比赛或活动。可以尝试新的挑战和尝试，以保持生活的乐趣。</li></ul><ul class="notion-list notion-list-disc notion-block-73d2f14bcff64500ad6cc6a4409c8d79"><li>逻辑思维和阅读提升：继续阅读经典书籍和理论著作，以及参加一些逻辑思维的课程或活动，提升自身的逻辑思维能力和阅读水平。</li></ul></ol><li><b>第四个一年（48-49岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-4f14e36402284ed0845727ae97850f02"><ul class="notion-list notion-list-disc notion-block-d0e6e7a31a26400baec88be582e8f636"><li>财务自由：继续实现财务自由的计划，确保能够享受退休生活并保持生活质量不下降。</li></ul><ul class="notion-list notion-list-disc notion-block-092f77214f2146659750271042c0b0ad"><li>兴趣爱好：继续寻找并培养新的兴趣爱好，并适当参加一些相关比赛或活动。可以尝试新的挑战和尝试，以保持生活的乐趣。</li></ul><ul class="notion-list notion-list-disc notion-block-225337d7f7d14fd792d6cd22b04e4cb1"><li>逻辑思维和阅读提升：继续阅读经典书籍和理论著作，以及参加一些逻辑思维的课程或活动，提升自身的逻辑思维能力和阅读水平。</li></ul></ol><li><b>第五个一年（49-50岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-7472b0af7c7d4bf1abcbe07ff850a2f9"><ul class="notion-list notion-list-disc notion-block-a37194c06a8242af8d7ca46027a80eb4"><li>财务自由：继续实现财务自由的计划，确保能够享受退休生活并保持生活质量不下降。</li></ul><ul class="notion-list notion-list-disc notion-block-1757ae94b642421a8eea6a3a9e19876c"><li>兴趣爱好：继续寻找并培养新的兴趣爱好，并适当参加一些相关比赛或活动。可以尝试新的挑战和尝试，以保持生活的乐趣。</li></ul><ul class="notion-list notion-list-disc notion-block-59f6315532ef4880a4c86134fc4921f5"><li>逻辑思维和阅读提升：继续阅读经典书籍和理论著作，以及参加一些逻辑思维的课程或活动，提升自身的逻辑思维能力和阅读水平。</li></ul></ol></ol><li><b>第二个五年（50-55岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-0c59937c14384999af00468d8dbfbf34"><ul class="notion-list notion-list-disc notion-block-8130fe6cd3124266b6a62f8dfdf5e9ab"><li>财务自由：继续保持财务自由的状态，并开始规划退休生活，确保生活质量不下降。可能需要重新评估投资组合的风险和收益，以确保退休生活的可持续性。</li></ul><ul class="notion-list notion-list-disc notion-block-d2bc27c52a4a4c1da86e17027556f4de"><li>兴趣爱好：参加更多的比赛和活动，以深化和展示自己的兴趣爱好。可以考虑教授或指导他人，将自己的知识和技能传授给他人。</li></ul><ul class="notion-list notion-list-disc notion-block-46c30a2a23f84287855de733b3748d0e"><li>逻辑思维和阅读提升：通过阅读更复杂的文本和理论著作，进一步提升逻辑思维能力和阅读水平。可以参与一些深度讨论或辩论，以检验和提升自己的思维能力。</li></ul><li><b>第一个一年（50-51岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-1a87fb3c29a744a99a745e7f7226c8a7"><ul class="notion-list notion-list-disc notion-block-75070a1d905243be8897394c38fa06ef"><li>财务自由：重新评估投资组合的风险和收益，以确保退休生活的可持续性。可以考虑寻求专业的财务顾问的建议。</li></ul><ul class="notion-list notion-list-disc notion-block-357068018abf432bb194ec2de44de7f7"><li>兴趣爱好：参加更多的比赛和活动，以深化和展示自己的兴趣爱好。可以考虑教授或指导他人，将自己的知识和技能传授给他人。</li></ul><ul class="notion-list notion-list-disc notion-block-788dc956108c41c5acbbb4029cbace2e"><li>逻辑思维和阅读提升：阅读更复杂的文本和理论著作，进一步提升逻辑思维能力和阅读水平。可以参与一些深度讨论或辩论，以检验和提升自己的思维能力。</li></ul></ol><li><b>第二个一年（51-52岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-0eff24fa3e9341998295a3df9d5d406a"><ul class="notion-list notion-list-disc notion-block-25352d48ce7b491d8e80dff77190bfac"><li>财务自由：继续保持财务自由的状态，并开始规划退休生活，确保生活质量不下降。可能需要重新评估投资组合的风险和收益，以确保退休生活的可持续性。</li></ul><ul class="notion-list notion-list-disc notion-block-c3465db65569488f8bc3674eb63d6f73"><li>兴趣爱好：继续参加比赛和活动，深化和展示自己的兴趣爱好。可以进一步教授或指导他人，将自己的知识和技能传授给他人。</li></ul><ul class="notion-list notion-list-disc notion-block-79d03b9a8bc14c3a8230bba17751003b"><li>逻辑思维和阅读提升：继续阅读更复杂的文本和理论著作，进一步提升逻辑思维能力和阅读水平。可以继续参与深度讨论或辩论，以检验和提升自己的思维能力。</li></ul></ol><li><b>第三个一年（52-53岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-5aaaa33cc68847f4bc6c4142d619db12"><ul class="notion-list notion-list-disc notion-block-33feec9844934c63be813eb4958fe556"><li>财务自由：继续保持财务自由的状态，并开始规划退休生活，确保生活质量不下降。可能需要进一步评估投资组合的风险和收益，以确保退休生活的可持续性。</li></ul><ul class="notion-list notion-list-disc notion-block-5b4327601e6343838b60143b826f06e3"><li>兴趣爱好：继续参加比赛和活动，深化和展示自己的兴趣爱好。可以进一步教授或指导他人，将自己的知识和技能传授给他人。</li></ul><ul class="notion-list notion-list-disc notion-block-e8279aa85e254e748f493197d4083fa1"><li>逻辑思维和阅读提升：继续阅读更复杂的文本和理论著作，进一步提升逻辑思维能力和阅读水平。可以继续参与深度讨论或辩论，以检验和提升自己的思维能力。</li></ul></ol><li><b>第四个一年（53-54岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-025b5b8747554158af03f7866003a23f"><ul class="notion-list notion-list-disc notion-block-b76902a052ca40e084a7263717fa6eb2"><li>财务自由：继续保持财务自由的状态，并开始规划退休生活，确保生活质量不下降。可能需要进一步评估投资组合的风险和收益，以确保退休生活的可持续性。</li></ul><ul class="notion-list notion-list-disc notion-block-65dbc32ac4a04e07a0ceee52e06d4131"><li>兴趣爱好：继续参加比赛和活动，深化和展示自己的兴趣爱好。可以进一步教授或指导他人，将自己的知识和技能传授给他人。</li></ul><ul class="notion-list notion-list-disc notion-block-eb7297a39d114198ba76ca418a612090"><li>逻辑思维和阅读提升：继续阅读更复杂的文本和理论著作，进一步提升逻辑思维能力和阅读水平。可以继续参与深度讨论或辩论，以检验和提升自己的思维能力。</li></ul></ol><li><b>第五个一年（54-55岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-a3790fae4e354fb998e17b1dfcaf50a3"><ul class="notion-list notion-list-disc notion-block-88685d566dc84e9cad9e924ff56049e0"><li>财务自由：继续保持财务自由的状态，并开始规划退休生活，确保生活质量不下降。可能需要进一步评估投资组合的风险和收益，以确保退休生活的可持续性。</li></ul><ul class="notion-list notion-list-disc notion-block-e05437b0ad1245208b70342de88b00f1"><li>兴趣爱好：继续参加比赛和活动，深化和展示自己的兴趣爱好。可以进一步教授或指导他人，将自己的知识和技能传授给他人。</li></ul><ul class="notion-list notion-list-disc notion-block-9190bb41a36d4970ad2d638d91b09de1"><li>逻辑思维和阅读提升：继续阅读更复杂的文本和理论著作，进一步提升逻辑思维能力和阅读水平。可以继续参与深度讨论或辩论，以检验和提升自己的思维能力。</li></ul></ol></ol></ol></ol><ol start="4" class="notion-list notion-list-numbered notion-block-57bdf5576f08462e880d1f3653ad23ea"><li><b>第四个十年（55-65岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-57bdf5576f08462e880d1f3653ad23ea"><ul class="notion-list notion-list-disc notion-block-c01f03ac9a42498bbeed4c3cd0788788"><li>享受生活：享受自由自在的生活，参加自己感兴趣的活动。</li></ul><ul class="notion-list notion-list-disc notion-block-6bbd165ee72947ebbf756800bb86f0c6"><li>兴趣爱好：继续发展自己的兴趣爱好，将更多的时间和精力投入到摄影、游戏、娱乐活动等方面。</li></ul><ul class="notion-list notion-list-disc notion-block-07587637742540f48a2dba1d1b64597a"><li>逻辑思维和阅读提升：持续提升自己的逻辑思维能力和阅读水平，并将这些能力应用到生活中。</li></ul><li><b>第一个五年（55-60岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-c92af3b13847445f9f68366dff010252"><ul class="notion-list notion-list-disc notion-block-8cc86e521cc04b08a4b3899a1b77f3b6"><li>兴趣爱好：在原有的兴趣爱好基础上，更加深入地探索摄影、游戏、娱乐活动等。可以参加相关的课程、工作坊或者加入社群，以获取新的知识和技能。同时，尝试新的活动，例如学习新的游戏、尝试新的娱乐方式或者学习新的摄影技巧。</li></ul><ul class="notion-list notion-list-disc notion-block-de7f8b2ffbf24c3fa24045794b878811"><li>逻辑思维和阅读提升：在这个阶段，可以通过阅读更复杂的书籍、文章或者进行更深入的逻辑思考来提升逻辑思维能力和阅读水平。可以将这些能力应用到生活中，例如参与讨论、写作或者进行决策等。</li></ul><li><b>第一个一年（55-56岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-e7096c0a06f64168bc7b237d2dcacb8d"><ul class="notion-list notion-list-disc notion-block-2b3e65ac10e748499d5557a330225500"><li>兴趣爱好：寻找自己真正感兴趣的摄影、游戏、娱乐活动等，并深入了解。可以参加相关的课程、工作坊或者加入社群，以获取新的知识和技能。</li></ul><ul class="notion-list notion-list-disc notion-block-fa4870b1f0fd426da37aa78d6b51eebf"><li>逻辑思维和阅读提升：开始阅读更复杂的书籍、文章或者进行更深入的逻辑思考，以提升逻辑思维能力和阅读水平。</li></ul></ol><li><b>第二个一年（56-57岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-f694abc4490a4490a394268f3b6f6ca1"><ul class="notion-list notion-list-disc notion-block-eddbe2c3375c4951803d2646b900eb74"><li>兴趣爱好：在兴趣爱好中进一步探索和尝试新的挑战，将更多的时间和精力投入到这些活动中。可以参加一些比赛或者活动，展示自己的成果。</li></ul><ul class="notion-list notion-list-disc notion-block-62bd419b065e4410ae6f8044a3fe524c"><li>逻辑思维和阅读提升：继续阅读更复杂的书籍、文章或者进行更深入的逻辑思考，以提升逻辑思维能力和阅读水平。</li></ul></ol><li><b>第三个一年（57-58岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-8ff9f5726e9442b0a48d4ad37d387f42"><ul class="notion-list notion-list-disc notion-block-ad5e561e854947f59721a3908b6e385a"><li>兴趣爱好：在兴趣爱好中进一步探索和尝试新的挑战，将更多的时间和精力投入到这些活动中。可以参加一些比赛或者活动，展示自己的成果。</li></ul><ul class="notion-list notion-list-disc notion-block-b91b6ab7477c429a84e1175a16f9bfa0"><li>逻辑思维和阅读提升：继续阅读更复杂的书籍、文章或者进行更深入的逻辑思考，以提升逻辑思维能力和阅读水平。</li></ul></ol><li><b>第四个一年（58-59岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-4b94b2c98eb04300b030f1e5862b26ab"><ul class="notion-list notion-list-disc notion-block-343f6add58734963a1251789d72b2e19"><li>兴趣爱好：在兴趣爱好中进一步探索和尝试新的挑战，将更多的时间和精力投入到这些活动中。可以参加一些比赛或者活动，展示自己的成果。</li></ul><ul class="notion-list notion-list-disc notion-block-a7947de82ab74e599b3ede5c165386c5"><li>逻辑思维和阅读提升：继续阅读更复杂的书籍、文章或者进行更深入的逻辑思考，以提升逻辑思维能力和阅读水平。</li></ul></ol><li><b>第五个一年（59-60岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-406be14881b147d3adbe844bb3ec3162"><ul class="notion-list notion-list-disc notion-block-3b7ba07cde374499ac16ec3d28e13c53"><li>兴趣爱好：在兴趣爱好中进一步探索和尝试新的挑战，将更多的时间和精力投入到这些活动中。可以参加一些比赛或者活动，展示自己的成果。</li></ul><ul class="notion-list notion-list-disc notion-block-7017d110f59c40f89a8af4d9de5ee757"><li>逻辑思维和阅读提升：继续阅读更复杂的书籍、文章或者进行更深入的逻辑思考，以提升逻辑思维能力和阅读水平。可以将这些能力应用到生活中，例如参与讨论、写作或者进行决策等。</li></ul></ol></ol><li><b>第二个五年（60-65岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-a866e54c25004c12a2464de1645ec4cf"><ul class="notion-list notion-list-disc notion-block-70bf683b26664aa4a1bb81d0456246ae"><li>兴趣爱好：在继续发展自己的兴趣爱好的同时，将更多的时间和精力投入到这些活动中。可以更加深入地探索摄影、游戏、娱乐活动等，尝试新的挑战和尝试。也可以将自己在这些兴趣爱好中的经验和技能传授给他人，或者将这些兴趣爱好转化为一些有意义的成果，例如发表作品、设计游戏或者分享经验等。</li></ul><ul class="notion-list notion-list-disc notion-block-9112e68c7d4040b8a3320ba398521acc"><li>逻辑思维和阅读提升：在后期，可以通过更深入的逻辑思考和阅读更复杂的文本、理论著作来进一步提升自己的逻辑思维能力和阅读水平。同时，将这些能力应用到生活中，例如进行更深入的讨论、写作或者进行更复杂的决策等。</li></ul><li><b>第一个一年（60-61岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-93e38f7ac05c42a59f98ea90e6dca24a"><ul class="notion-list notion-list-disc notion-block-e56a167bee0046c2b33186dd4ab44dfe"><li>兴趣爱好：在原有的兴趣爱好基础上，更加深入地探索摄影、游戏、娱乐活动等。可以参加相关的课程、工作坊或者加入社群，以获取新的知识和技能。同时，尝试新的活动，例如学习新的游戏、尝试新的娱乐方式或者学习新的摄影技巧。</li></ul><ul class="notion-list notion-list-disc notion-block-221e6673be31450494e08bf5f8bba9f2"><li>逻辑思维和阅读提升：在这个阶段，可以通过阅读更复杂的书籍、文章或者进行更深入的逻辑思考来提升逻辑思维能力和阅读水平。可以将这些能力应用到生活中，例如参与讨论、写作或者进行决策等。</li></ul></ol><li><b>第二个一年（61-62岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-2e8e963b04504980b9e7c36458c708d1"><ul class="notion-list notion-list-disc notion-block-6fe472ea75e845948fb498f31ff0e64f"><li>兴趣爱好：在兴趣爱好中进一步探索和尝试新的挑战，将更多的时间和精力投入到这些活动中。可以参加一些比赛或者活动，展示自己的成果。</li></ul><ul class="notion-list notion-list-disc notion-block-5c245aff518a412e98551b12019a23df"><li>逻辑思维和阅读提升：继续阅读更复杂的书籍、文章或者进行更深入的逻辑思考，以提升逻辑思维能力和阅读水平。</li></ul></ol><li><b>第三个一年（62-63岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-2d6f83d673ef4d27b7e02a715f2738a2"><ul class="notion-list notion-list-disc notion-block-e4501a40a8fa4ddf97f247b4e15278fa"><li>兴趣爱好：在兴趣爱好中进一步探索和尝试新的挑战，将更多的时间和精力投入到这些活动中。可以参加一些比赛或者活动，展示自己的成果。</li></ul><ul class="notion-list notion-list-disc notion-block-43eafc7b867e400c8cec93b2a022a7d9"><li>逻辑思维和阅读提升：继续阅读更复杂的书籍、文章或者进行更深入的逻辑思考，以提升逻辑思维能力和阅读水平。</li></ul></ol><li><b>第四个一年（63-64岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-d61629718664455f968444670cb8e2b1"><ul class="notion-list notion-list-disc notion-block-fa823d5ede2840ceac8425ce29b6f5ab"><li>兴趣爱好：在兴趣爱好中进一步探索和尝试新的挑战，将更多的时间和精力投入到这些活动中。可以参加一些比赛或者活动，展示自己的成果。</li></ul><ul class="notion-list notion-list-disc notion-block-30dc7e66004b44879e6b1ac576c017bf"><li>逻辑思维和阅读提升：继续阅读更复杂的书籍、文章或者进行更深入的逻辑思考，以提升逻辑思维能力和阅读水平。</li></ul></ol><li><b>第五个一年（64-65岁）：</b></li><ol class="notion-list notion-list-numbered notion-block-9199ba3d224e45398a854f3a9d1b0cf5"><ul class="notion-list notion-list-disc notion-block-c2036eaaa0304f9c95460b09e60e0c34"><li>兴趣爱好：在兴趣爱好中进一步探索和尝试新的挑战，将更多的时间和精力投入到这些活动中。可以参加一些比赛或者活动，展示自己的成果。同时，将自己在这些兴趣爱好中的经验和技能传授给他人，或者将这些兴趣爱好转化为一些有意义的成果，例如发表作品、设计游戏或者分享经验等。</li></ul><ul class="notion-list notion-list-disc notion-block-90173fd29aab43ed87524b069de902c5"><li>逻辑思维和阅读提升：继续阅读更复杂的书籍、文章或者进行更深入的逻辑思考，以提升逻辑思维能力和阅读水平。同时，将这些能力应用到生活中，例如进行更深入的讨论、写作或者进行更复杂的决策等。</li></ul></ol></ol></ol></ol><div class="notion-text notion-block-3eae61c878a1491b8fca69de766b0084">三、小目标：</div><ol start="1" class="notion-list notion-list-numbered notion-block-507104d47d7949f2b60f0976b6aa82b5"><li>摄影比赛：参加一些摄影比赛，展示自己的摄影作品。</li></ol><ol start="2" class="notion-list notion-list-numbered notion-block-df3464c7fa2a4b1f9fa639738590bd02"><li>游戏竞技：参加一些游戏比赛，提高自己的游戏水平并结识更多游戏爱好者。</li></ol><ol start="3" class="notion-list notion-list-numbered notion-block-e4e650d89815452da232d5d66ef9ffdb"><li>旅游观光：利用闲暇时间，到各地旅游观光，丰富自己的旅游经历。</li></ol><ol start="4" class="notion-list notion-list-numbered notion-block-96a0fee183d742f694372c4779ab4c47"><li>电影欣赏：定期观看最新上映的电影，享受电影带来的娱乐和艺术体验。</li></ol><ol start="5" class="notion-list notion-list-numbered notion-block-e724df4c02a5400c8b2d07d157da167b"><li>阅读计划：每年阅读一定数量的书籍，涵盖各种领域，提升自己的知识储备和阅读能力。</li></ol><ol start="6" class="notion-list notion-list-numbered notion-block-65cde51f29894905839b19732598c21b"><li>逻辑思维训练：参加一些逻辑思维训练的课程或活动，提高自己的逻辑思维能力。</li></ol><div class="notion-text notion-block-ebf491a477b444dca028083654f06c7c">以上是根据您的需求和兴趣爱好所制定的人生目标规划。希望对您有所帮助，祝您在未来的生活中取得更多的成就和快乐！</div><div class="notion-text notion-block-d297e811ede6413fbfa386ac1a7d36ca">这个计划非常全面，涵盖了人生不同阶段的重要方面。以下是一些额外的想法和注意事项：</div><ol start="1" class="notion-list notion-list-numbered notion-block-5575bc9d53574cdda06af8c48dfaffab"><li>健康和锻炼：在所有阶段，都应该注意保持健康和进行适量的锻炼。这不仅可以提高生活质量，也可以提高工作效率和减少医疗支出。</li></ol><ol start="2" class="notion-list notion-list-numbered notion-block-036149df85da4e24aed7a8a402c0fc40"><li>家庭和亲友：家庭、亲友和社区是人生中重要的支持系统。在各个阶段，都应该与家人、亲友和社区保持联系，支持和关心他们。</li></ol><ol start="3" class="notion-list notion-list-numbered notion-block-cb38731569a345cba8ec985a28d7e034"><li>职业发展：在第一个十年，可以开始思考自己的职业方向和发展，不断提升自己的专业技能和市场价值。</li></ol><ol start="4" class="notion-list notion-list-numbered notion-block-2e2da9565d9d4ca694d5b9d0b2e5580f"><li>社交和领导力：在第二个十年，可以开始积极参与社交活动，建立广泛的人脉，并在适当的场合发挥领导力。</li></ol><ol start="5" class="notion-list notion-list-numbered notion-block-b8cce86fe81f46958879c8a6ef5b8f60"><li>社区服务：在第三个十年，可以积极参与社区服务，回馈社会。</li></ol><ol start="6" class="notion-list notion-list-numbered notion-block-e8b3a8de97aa4b54a0773d15979195ca"><li>家庭教育和亲子关系：在孩子成长的关键时期，应该注重家庭教育和亲子关系，为孩子的成长打下良好的基础。</li></ol><ol start="7" class="notion-list notion-list-numbered notion-block-b67401bae6c44cd4aaa3a2d1c0f02deb"><li>传承和规划：在第四个十年，可以考虑传承财产和规划遗产，确保家族的延续。</li></ol></main></div>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[【诗词】诗与词的平仄]]></title>
            <link>https://blog.vixcitycc.top//article/诗与词的平仄</link>
            <guid>https://blog.vixcitycc.top//article/诗与词的平仄</guid>
            <pubDate>Wed, 05 Jul 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[诗与词的平仄]]></description>
            <content:encoded><![CDATA[<div id="notion-article" class="mx-auto overflow-hidden "><main class="notion light-mode notion-page notion-block-85d8d7a0b3de48b793a5a374d97203e7"><div class="notion-viewport"></div><div class="notion-collection-page-properties"></div><h2 class="notion-h notion-h1 notion-h-indent-0 notion-block-b91dd0008e4c436fac0810bf7d2791c7" data-id="b91dd0008e4c436fac0810bf7d2791c7"><span><div id="b91dd0008e4c436fac0810bf7d2791c7" class="notion-header-anchor"></div><a class="notion-hash-link" href="#b91dd0008e4c436fac0810bf7d2791c7" title="江城子"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title">江城子</span></span></h2><div class="notion-text notion-block-564666f721514365b604a04e3f7c9769">中平中仄仄平平（韵）。</div><div class="notion-text notion-block-11347be3e3b7467b97152501a619c248">仄平平，仄平平（韵）。</div><div class="notion-text notion-block-5b101061041f4d3fa9c75e9500604b14">中仄平平，中仄仄平平（韵）。</div><div class="notion-text notion-block-c0b10b9b7d7f4673990e97c90d388c28">中仄中平平仄仄，平仄仄，仄平平（韵）。</div><div class="notion-blank notion-block-4ff14c6eaec4480a8512f520857bfc3e"> </div><div class="notion-text notion-block-78f0d42cef5343d0bcd9074b5dcc0669">中平中仄仄平平（韵）。</div><div class="notion-text notion-block-d2f71ccb71ed4727beb1fc48d0a126a6">仄平平，仄平平（韵）。</div><div class="notion-text notion-block-cb796760793b46c0a119ef3d82561e7c">中仄平平，中仄仄平平（韵）。</div><div class="notion-text notion-block-c7113245c2a744d786a7ab73bbdf5b96">中仄中平平仄仄，平仄仄，仄平平（韵）。</div><div class="notion-blank notion-block-429bc614e74b42169828e6b98d3e7f00"> </div><h2 class="notion-h notion-h1 notion-h-indent-0 notion-block-425ea0b85f7d4f048ff2693761af67a5" data-id="425ea0b85f7d4f048ff2693761af67a5"><span><div id="425ea0b85f7d4f048ff2693761af67a5" class="notion-header-anchor"></div><a class="notion-hash-link" href="#425ea0b85f7d4f048ff2693761af67a5" title="蝶恋花"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title">蝶恋花</span></span></h2><div class="notion-text notion-block-0017fa3f0ed74fc18fc843c809e01dcd">中仄中平平仄仄。</div><div class="notion-text notion-block-10c01f4c29084b54bc9a0dee8a705562">中仄平平，中仄平平仄。</div><div class="notion-text notion-block-8c3777ff35714d089f8e49fdcf12b330">中仄中平平仄仄，中平中仄平平仄。</div><div class="notion-blank notion-block-ab53b262a140478ea4797e45e1b33adf"> </div><div class="notion-text notion-block-fdee9ed1c0e94b8c9616c88133ffd980">中仄中平平仄仄。</div><div class="notion-text notion-block-ba0bb29368f04c01a3e9279ba1b4021c">中仄平平，中仄平平仄。</div><div class="notion-text notion-block-58773e673cf844bf947787eee800912c">中仄中平平仄仄，中平中仄平平仄。</div><div class="notion-blank notion-block-1996190123d74fcdad942aa5a08b426f"> </div><h2 class="notion-h notion-h1 notion-h-indent-0 notion-block-2e7abdc247654f03bfc29f65098d8235" data-id="2e7abdc247654f03bfc29f65098d8235"><span><div id="2e7abdc247654f03bfc29f65098d8235" class="notion-header-anchor"></div><a class="notion-hash-link" href="#2e7abdc247654f03bfc29f65098d8235" title="长相思"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title">长相思</span></span></h2><div class="notion-text notion-block-bf28d855343947e491d523e3e6a69a1d">正体格律：</div><div class="notion-text notion-block-1187515a79c8484fb898f40fedaaa954">中中平，仄中平。平仄平平仄仄平，平平仄仄平。</div><div class="notion-text notion-block-7176ebf4012b41d79d74f10b0a877950">仄平平，中平平。仄仄平平平仄平，仄平平仄平。</div><div class="notion-text notion-block-2cf73e3b53c34f7a8a535f4ed88cea23">变体一格律：</div><div class="notion-text notion-block-d33226e695c54f9bada6487d0b4fd206">平仄平，仄仄平。平仄平平平仄平，平平平仄平。</div><div class="notion-text notion-block-31e380f9677648668e951308756a2eac">中平平，中平平。仄仄平平平仄平，平平仄仄平。</div><div class="notion-text notion-block-6b006816387642d7a746e800d8db51c8">变体二格律：</div><div class="notion-text notion-block-dd1dd97b42494dcf851459f55fe64aed">平平平，平平平。仄仄平平仄仄平，平平平仄平。</div><div class="notion-text notion-block-a804c8514a23470a8c076ab2ba3474cb">平平平，平平平。仄仄平平仄仄平，仄平平仄平。</div><div class="notion-text notion-block-d9e48b80a3c04e6ebd99633e832d9192">变体三格律：</div><div class="notion-text notion-block-627db57729da475f9d35cd2245e05357">中中平，仄中平。平仄平平平仄平，平平仄仄平。</div><div class="notion-text notion-block-097c6e1b438b47538e752abc22929a4b">中中平，中中平。平仄平平仄仄平，平平平仄平。</div><div class="notion-text notion-block-2abae09ace3d42f48bc5e6944ad7378e">变体四格律：</div><div class="notion-text notion-block-e0fcaa9b77364c34a30b744f089b9d19">仄平平，仄平平。仄仄平平平仄平，平平平仄平。</div><div class="notion-text notion-block-b03d2b365e7f490392dac92fac1ba463">仄平平，仄平平。仄仄平平平仄平，平平平仄平。</div><div class="notion-blank notion-block-ab0b5698085f407a8c83418cc9d91f5b"> </div><h2 class="notion-h notion-h1 notion-h-indent-0 notion-block-6189d12a66b7413dbc5e43a7174aae90" data-id="6189d12a66b7413dbc5e43a7174aae90"><span><div id="6189d12a66b7413dbc5e43a7174aae90" class="notion-header-anchor"></div><a class="notion-hash-link" href="#6189d12a66b7413dbc5e43a7174aae90" title="行香子"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><b>行香子</b></span></span></h2><div class="notion-text notion-block-2f44f748847d4a77ae6c5ab04fe7bddb">中仄平平，中仄平平。中中中中仄平平。</div><div class="notion-text notion-block-5c8ad4b8bd7c401693eb6a9b6575628d">中平中仄，中仄平平。仄中平中，中中仄，仄平平。</div><div class="notion-text notion-block-d6aadb68dedd436c836987a64318baff">中平中仄，平平中仄，仄中平中仄平平。</div><div class="notion-text notion-block-482fa028843b476b80cb0648e80f51cf">中平中仄，中仄平平。仄中平中，中中仄，仄平平。</div><div class="notion-blank notion-block-cda6301c72044c1da72f198f7aefceff"> </div><h2 class="notion-h notion-h1 notion-h-indent-0 notion-block-829c2fbe1deb4720a6bd9bae5d376398" data-id="829c2fbe1deb4720a6bd9bae5d376398"><span><div id="829c2fbe1deb4720a6bd9bae5d376398" class="notion-header-anchor"></div><a class="notion-hash-link" href="#829c2fbe1deb4720a6bd9bae5d376398" title="丑奴儿"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title"><b>丑奴儿</b></span></span></h2><div class="notion-text notion-block-1a11d3a8462c4272b66f3cfcfccebf8c">中平中仄平平仄，中仄平平（韵）。</div><div class="notion-text notion-block-fea63a84c8794ba1a51a2110e6e6fb4c">中仄平平（韵），</div><div class="notion-text notion-block-5a1e10ee73a24da8885089aee63a9fbc">中仄平平中仄平（韵）。</div><div class="notion-text notion-block-b2918407d71d4643989d6fb54e405088">中平中仄平平仄，中仄平平（韵）。</div><div class="notion-text notion-block-895cf29eb1564f059fa1c2e4ee5a028f">中仄平平（韵），</div><div class="notion-text notion-block-bf00f929658646cfa8cd810a7ca5bb80">中仄平平中仄平（韵）。</div><div class="notion-blank notion-block-2e2f2d71a92f49fcb2617d41962aafa4"> </div><h2 class="notion-h notion-h1 notion-h-indent-0 notion-block-d15ac637ca0e4b3980693bb1b6bc1c7a" data-id="d15ac637ca0e4b3980693bb1b6bc1c7a"><span><div id="d15ac637ca0e4b3980693bb1b6bc1c7a" class="notion-header-anchor"></div><a class="notion-hash-link" href="#d15ac637ca0e4b3980693bb1b6bc1c7a" title="菩萨蛮"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a><span class="notion-h-title">菩萨蛮</span></span></h2><div class="notion-text notion-block-438135a05c354cea85661fada0fb883c">上下片各四句，两仄韵，两平韵。</div><div class="notion-text notion-block-45dfa47bfc054accb252a620a6e496b1">中平中仄平平仄，</div><div class="notion-text notion-block-7bc37b088d9e4a6bac35b99270b8f6b3">中平中仄平平仄。(以上两句押仄韵)</div><div class="notion-text notion-block-c904cd9bbd3d42858fa22d21f3584381">中仄仄平平，</div><div class="notion-text notion-block-bc23b86a4b594b7fab2cc887c870951f">中平中仄平。(以上两句押平韵)</div><div class="notion-text notion-block-c9fed4aaba314535a23452b4b80ce1b3">中平平仄仄，</div><div class="notion-text notion-block-aa003139eb4640959e45379c5ebf6755">中仄平平仄。(以上两句押仄韵)</div><div class="notion-text notion-block-58b5e9c699bb4532a2fcc184de1d41e7">中仄仄平平，</div><div class="notion-text notion-block-935d65be983c474fb09211ac30ed5d3e">中平中仄平。(以上两句押平韵)</div><div class="notion-blank notion-block-3b760771fdb4479bbced5abd812eed72"> </div><div class="notion-text notion-block-bc01115ee90947709097188c3d78d855">例：《菩萨蛮·秋声乍起梧桐落》</div><div class="notion-text notion-block-8330263c023641b7b6ede5ee33fd3f57">秋风乍起梧桐落，蛩吟唧唧添萧索，敧枕背灯眠，月和残梦圆。</div><div class="notion-text notion-block-6681b1a61c3d47639f0fe7f8bd196b4c">起来钩翠箔，何处寒砧作，独倚小阑干，逼人风露寒。</div></main></div>]]></content:encoded>
        </item>
    </channel>
</rss>