content.json

{"meta":{"title":"miaoda","subtitle":null,"description":"苗大的博客","author":"miaoda","url":"https://miaoda.fun","root":"/"},"pages":[{"title":"about","date":"2018-12-12T14:14:36.000Z","updated":"2022-02-22T02:50:37.674Z","comments":false,"path":"about/index.html","permalink":"https://miaoda.fun/about/index.html","excerpt":"","text":"[苗大MiaoDa] 与  苗大  （ MiaoDa ） 对话中... bot_ui_ini()"},{"title":"bangumi","date":"2019-02-10T13:32:48.000Z","updated":"2022-02-22T02:50:37.674Z","comments":false,"path":"bangumi/index.html","permalink":"https://miaoda.fun/bangumi/index.html","excerpt":"","text":""},{"title":"client","date":"2018-12-20T15:13:35.000Z","updated":"2022-02-22T02:50:37.674Z","comments":false,"path":"client/index.html","permalink":"https://miaoda.fun/client/index.html","excerpt":"","text":"直接下载 or 扫码下载："},{"title":"comment","date":"2018-12-20T15:13:48.000Z","updated":"2022-02-22T02:50:37.674Z","comments":true,"path":"comment/index.html","permalink":"https://miaoda.fun/comment/index.html","excerpt":"","text":"念两句诗 叙别梦、扬州一觉。 【宋代】吴文英《夜游宫·人去西楼雁杳》"},{"title":"donate","date":"2018-12-20T15:13:05.000Z","updated":"2022-02-22T02:50:37.674Z","comments":false,"path":"donate/index.html","permalink":"https://miaoda.fun/donate/index.html","excerpt":"","text":""},{"title":"lab","date":"2019-01-05T13:47:59.000Z","updated":"2022-02-22T02:50:37.674Z","comments":false,"path":"lab/index.html","permalink":"https://miaoda.fun/lab/index.html","excerpt":"","text":"sakura主题balabala"},{"title":"links","date":"2018-12-19T15:11:06.000Z","updated":"2022-02-22T02:50:37.674Z","comments":true,"path":"links/index.html","permalink":"https://miaoda.fun/links/index.html","excerpt":"","text":""},{"title":"music","date":"2018-12-20T15:14:28.000Z","updated":"2022-02-22T02:50:37.674Z","comments":false,"path":"music/index.html","permalink":"https://miaoda.fun/music/index.html","excerpt":"","text":""},{"title":"rss","date":"2018-12-20T15:09:03.000Z","updated":"2022-02-22T02:50:37.675Z","comments":true,"path":"rss/index.html","permalink":"https://miaoda.fun/rss/index.html","excerpt":"","text":""},{"title":"tags","date":"2018-12-12T14:14:16.000Z","updated":"2022-02-22T02:50:37.675Z","comments":true,"path":"tags/index.html","permalink":"https://miaoda.fun/tags/index.html","excerpt":"","text":""},{"title":"video","date":"2018-12-20T15:14:38.000Z","updated":"2022-02-22T02:50:37.675Z","comments":false,"path":"video/index.html","permalink":"https://miaoda.fun/video/index.html","excerpt":"","text":"var videos = [ { img: 'https://lain.bgm.tv/pic/cover/l/0e/1e/218971_2y351.jpg', title: '朝花夕誓——于离别之朝束起约定之花', status: '已追完', progress: 100, jp: 'さよならの朝に約束の花をかざろう', time: '放送时间: 2018-02-24 SUN.', desc: ' 住在远离尘嚣的土地，一边将每天的事情编织成名为希比欧的布，一边静静生活的伊欧夫人民。在15岁左右外表就停止成长，拥有数百年寿命的他们，被称为“离别的一族”，并被视为活着的传说。没有双亲的伊欧夫少女玛奇亚，过着被伙伴包围的平稳日子，却总感觉“孤身一人”。他们的这种日常，一瞬间就崩溃消失。追求伊欧夫的长寿之血，梅萨蒂军乘坐着名为雷纳特的古代兽发动了进攻。在绝望与混乱之中，伊欧夫的第一美女蕾莉亚被梅萨蒂带走，而玛奇亚暗恋的少年克里姆也失踪了。玛奇亚虽然总算逃脱了，却失去了伙伴和归去之地……。' }, { img : 'https://lain.bgm.tv/pic/cover/l/0e/1e/218971_2y351.jpg', title: '朝花夕誓——于离别之朝束起约定之花', status: '已追完', progress: 100, jp: 'さよならの朝に約束の花をかざろう', time: '2018-02-24 SUN.', desc: ' 住在远离尘嚣的土地，一边将每天的事情编织成名为希比欧的布，一边静静生活的伊欧夫人民。在15岁左右外表就停止成长，拥有数百年寿命的他们，被称为“离别的一族”，并被视为活着的传说。没有双亲的伊欧夫少女玛奇亚，过着被伙伴包围的平稳日子，却总感觉“孤身一人”。他们的这种日常，一瞬间就崩溃消失。追求伊欧夫的长寿之血，梅萨蒂军乘坐着名为雷纳特的古代兽发动了进攻。在绝望与混乱之中，伊欧夫的第一美女蕾莉亚被梅萨蒂带走，而玛奇亚暗恋的少年克里姆也失踪了。玛奇亚虽然总算逃脱了，却失去了伙伴和归去之地……。' } ] .should-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:95%;}.should-ellipsis-full{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;}.should-ellipsis i{position:absolute;right:24px;}.grey-text{color:#9e9e9e !important}.grey-text.text-darken-4{color:#212121 !important}html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}img{border-style:none}progress{display:inline-block;vertical-align:baseline}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}html{-webkit-box-sizing:border-box;box-sizing:border-box}*,*:before,*:after{-webkit-box-sizing:inherit;box-sizing:inherit}ul:not(.browser-default){padding-left:0;list-style-type:none}ul:not(.browser-default)>li{list-style-type:none}.card{-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2)}.hoverable{-webkit-transition:-webkit-box-shadow .25s;transition:-webkit-box-shadow .25s;transition:box-shadow .25s;transition:box-shadow .25s,-webkit-box-shadow .25s}.hoverable:hover{-webkit-box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}i{line-height:inherit}i.right{float:right;margin-left:15px}.bangumi .right{float:right !important}.material-icons{text-rendering:optimizeLegibility;-webkit-font-feature-settings:'liga';-moz-font-feature-settings:'liga';font-feature-settings:'liga'}.row{margin-left:auto;margin-right:auto;margin-bottom:20px}.row:after{content:\"\";display:table;clear:both}.row .col{float:left;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 .75rem;min-height:1px}.row .col.s12{width:100%;margin-left:auto;left:auto;right:auto}@media only screen and (min-width:601px){.row .col.m6{width:50%;margin-left:auto;left:auto;right:auto}}html{line-height:1.5;font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif;font-weight:normal;color:rgba(0,0,0,0.87)}@media only screen and (min-width:0){html{font-size:14px}}@media only screen and (min-width:992px){html{font-size:14.5px}}@media only screen and (min-width:1200px){html{font-size:15px}}.card{position:relative;margin:.5rem 0 1rem 0;background-color:#fff;-webkit-transition:-webkit-box-shadow .25s;transition:-webkit-box-shadow .25s;transition:box-shadow .25s;transition:box-shadow .25s,-webkit-box-shadow .25s;border-radius:2px}.card .card-title{font-size:24px;font-weight:300}.card .card-title.activator{cursor:pointer}.card .card-image{position:relative}.card .card-image img{display:block;border-radius:2px 2px 0 0;position:relative;left:0;right:0;top:0;bottom:0;width:100%}.card .card-content{padding:24px;border-radius:0 0 2px 2px}.card .card-content p{margin:0}.card .card-content .card-title{display:block;line-height:32px;margin-bottom:8px}.card .card-content .card-title i{line-height:32px}.card .card-reveal{padding:24px;position:absolute;background-color:#fff;width:100%;overflow-y:auto;left:0;top:100%;height:100%;z-index:3;display:none}.card .card-reveal .card-title{cursor:pointer;display:block}.waves-effect{position:relative;cursor:pointer;display:inline-block;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;vertical-align:middle;z-index:1;-webkit-transition:.3s ease-out;transition:.3s ease-out}.waves-effect img{position:relative;z-index:-1}.waves-block{display:block}::-webkit-input-placeholder{color:#d1d1d1}::-moz-placeholder{color:#d1d1d1}:-ms-input-placeholder{color:#d1d1d1}::-ms-input-placeholder{color:#d1d1d1}[type=\"radio\"]:not(:checked){position:absolute;opacity:0;pointer-events:none}[type=\"radio\"]:not(:checked)+span{position:relative;padding-left:35px;cursor:pointer;display:inline-block;height:25px;line-height:25px;font-size:1rem;-webkit-transition:.28s ease;transition:.28s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[type=\"radio\"]:not(:checked)+span:before,[type=\"radio\"]:not(:checked)+span:after{border-radius:50%}[type=\"radio\"]:not(:checked)+span:before,[type=\"radio\"]:not(:checked)+span:after{border:2px solid #5a5a5a}[type=\"radio\"]:not(:checked)+span:after{-webkit-transform:scale(0);transform:scale(0)}[type=\"checkbox\"]:not(:checked){position:absolute;opacity:0;pointer-events:none}[type=\"checkbox\"]:not(:checked):disabled+span:not(.lever):before{border:none;background-color:rgba(0,0,0,0.42)}[type=\"checkbox\"].filled-in:not(:checked)+span:not(.lever):before{width:0;height:0;border:3px solid transparent;left:6px;top:10px;-webkit-transform:rotateZ(37deg);transform:rotateZ(37deg);-webkit-transform-origin:100% 100%;transform-origin:100% 100%}[type=\"checkbox\"].filled-in:not(:checked)+span:not(.lever):after{height:20px;width:20px;background-color:transparent;border:2px solid #5a5a5a;top:0px;z-index:0}input[type=checkbox]:not(:disabled) ~ .lever:active:before,input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::before{-webkit-transform:scale(2.4);transform:scale(2.4);background-color:rgba(0,0,0,0.08)}input[type=range].focused:focus:not(.active)::-webkit-slider-thumb{-webkit-box-shadow:0 0 0 10px rgba(38,166,154,0.26);box-shadow:0 0 0 10px rgba(38,166,154,0.26)}input[type=range].focused:focus:not(.active)::-moz-range-thumb{box-shadow:0 0 0 10px rgba(38,166,154,0.26)}input[type=range].focused:focus:not(.active)::-ms-thumb{box-shadow:0 0 0 10px rgba(38,166,154,0.26)} 番组计划 这里将是永远的回忆 window.onload = function(){ videos.forEach(function(video, i){ $('#rootRow').append(` ${video.title} ${video.jp} ${video.status} ${video.title} ${video.jp} 放送时间: ${video.time} ${video.desc} ${video.status} `) }) }"},{"title":"theme-sakura","date":"2019-01-04T14:53:25.000Z","updated":"2022-02-22T02:50:37.675Z","comments":false,"path":"theme-sakura/index.html","permalink":"https://miaoda.fun/theme-sakura/index.html","excerpt":"","text":"Hexo主题Sakura修改自WordPress主题Sakura，感谢原作者Mashiro"}],"posts":[{"title":"网页设计探索","slug":"网页设计探索","date":"2022-03-03T07:30:00.000Z","updated":"2022-09-05T06:55:13.602Z","comments":true,"path":"2022/03/03/网页设计探索/","link":"","permalink":"https://miaoda.fun/2022/03/03/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1%E6%8E%A2%E7%B4%A2/","excerpt":"","text":"一、背景 背景：由于游测新官网重构的需要，项目组内无设计人员，故需进行网页设计探索 技术定位：初级 目标群体：前端开发 技术应用场景：设计网页参考文章 整体思路：常见网页设计风格，优秀网站设计参考二、常见网页设计风格 极简风 “越少，越经典“这是不少设计大师遵循的设计风格。“好的设计是尽可能少的设计”这条原则也同样适用于网页设计中。除非必要的信息，页面中每增加一个元素，都会引起用户过多的小，甚至成为用户完成目标任务的阻碍。极简设计的好处就在于它能最大化节约用户的时间成本。 无边框风 这里的边框是指任何类型的装饰性容器。通过去掉装饰性的容器，加强基本内容的设计感。提升图片质量和排版布局，从而改变整体因无装饰性容器的视觉表现。 插画风 除了使用大量图片作为背景或主体元素外，图形插画的运用也是一种很好的方式。网页Banner可以运用插画来表达网站主题，同时加上插画图标的点缀，使网页看起来清新有趣，加强网站本身的独特性。 黑板风 虽然黑板风格不是一个常见的风格，但是其经典的使用方式和延伸效果同样可以作为网页设计风格的一项选择。最常见的运用方式就是将黑板作为背景元素，同时黑板本身的装饰效果使网站呈现非常时尚。许多经典的美食网站设计都采用了这种风格，除了使用黑板以外，将现实场景中的桌面运用到背景中也格外出彩。 扁平风 扁平化设计可以说是时下最常用的网页设计风格了，它弱化了材质、渐变、阴影，去除了冗余信息的图形元素、排版。这种风格设计可以使画面显得更加平滑，提升了网站内容信息的视觉层级，更加方便用户快速寻找自己需要的内容。同时扁平化的界面能更好实现不同尺寸的转化。这也是现在互联网公司较长采用的一种风格。 3D风格 这里所说的3D风格不是纯粹的使人感到身在其中的3D坏境，而是那些运用少量3D效果使整个网页显得更加灵动，通过扁平化的基础上，添加一些生动的非扁平元素，给网站带来了原本缺乏的纵深感，同时提升主体视觉吸引力。 纵向分割 习惯了一栏式的设计，将频幕一分为二甚至是多栏式的网页设计方式受到了众多用户的喜爱，在网页设计中使用新鲜的分屏式设计可以方便呈现不同的信息，创造对比。同时划分有效区域，方便用户进行快速选择和视觉聚焦。 超级头版 以往的网页设计中，轮播幻灯片的效果使用充斥着各种网站，虽然这种设计方式在许多首页上仍然适用名，但却正在失去吸引力，取而代之的是采用的核心区域元素，也就是主题的主题图或者说是超级头版，在首页上使用尺寸超大、迷人的精美Banner，而这个超级头版汇聚了对产品的精华总结，从而将网站最重要的内容展示给用户。 照片与白字搭配 严格意义上，这不算一种设计风格，但是这种方法可以帮助我们快速制作出色的Banner或者网站，通过对照片进行一些色彩叠加，同时搭配白色文案，从而形成对比，使文字更加清晰易于传达。你可以把它像公式一样记在脑子里，碰到合适的机会就可以使用。 三、优秀网站设计参考 官网类网页设计 The Cool Club 网站地址：https://thecoolclub.co推荐指数：★★★★★ 亮点：丰富的微交互，鼠标悬停特效以及留白的巧妙应用该网页点击即可一张张发牌的桥牌游戏，鼠标悬停即可触发的文字抖动特效，能够有效突出站点产品的大量留白的使用，以及其它多样的微交互，让页面内容丰富而有趣，突出其产品和网页特色的同时，以吸引用户停留，最终实现其商业价值。 学习点： 微交互结合小游戏，实现人机互动的同时，增强趣味性 2.Papazian Jewelry Display 网站地址：https://www.papazian.gr推荐指数：★★★ 亮点：吸睛的全屏视频背景和极简主义设计风格该网页采用了全屏视屏背景，动态展示其产品真正的制作流程，利用其对每一件产品的用心吸引和感染用户。而且，整款页面的色调和简约风的设计，也与视频背景搭配协调，给人以高雅时尚，低调奢华之感。而这一点与其产品（即珠宝）的特点，是非常符合的。 学习点： 利用全屏视频背景，丰富和优化界面设计，吸引用户注意 3.Draft 网站地址：https://draft.co.jp/en推荐指数：★★★亮点：不对称网格，动态文本，以及选中效果的应用该款设计工作室的网站，在页面打开时，通过动态的文本展示，吊足用户用户胃口。然后使用不对称网格，逐一展示其设计作品。 而且还为罗列的每一个设计案例添加了选中效果，能够有效的激发用户兴趣，让他们忍不住点击了解详情。 学习点： 使用不对称网格，赋予UI个性 动态展示页面文本，激发用户阅读兴趣 注意：这并不是说，设计师们就一定得使用不对称网格盲目追求独特性，采用对称的网格设计，视觉效果也是极好。4.Waaark 网站地址：https://waaark.com推荐指数：★★★★★亮点：美观炫酷的流体特效同为设计工作室类网站，本款设计也用到了不对称网格，将页面划分成了三个功能区。但却通过添加流体特效，带给用户完全不同的感受和体验，清新而充满趣味性。设计整体插画风格的应用，也是使整个页面更具视觉表现力。 学习点： 利用流体特效，丰富页面视觉展示效果流体特效日渐在网页和App界面设计中流行起来，非常值得设计师们学习和应用，从而使页面设计更加独特。 5.Mt. Cuba Center 网站地址：https://mtcubacenter.org推荐指数：★★★★ 亮点：动态文本和背景图片的完美配合该款在线景点宣传网站，不同于同类网站通过静态文本介绍和一定图片轮播的形式展示其特色，而是完美的结合动态文本和高质量的动态背景图片进行展示，让用户更加切实的了解和感受到其美景。满屏恰到好处的绿色景观图，配合文字解说，舒适直观，让人仿佛身临其境。 学习点： 使用动态图片和文字，更加高效直观的展示界面内容当然，具体设计实例中，根据需要，添加一定的图片或文字展示特效，也会让页面设计更加的炫酷吸睛。 如图，为页面文本，字体，形状或图标添加独特展示特效，以吸引用户注意。2. 电商类网页设计 1.Wanderlust and Co 网站地址：https://www.wanderlustandco.com推荐指数：★★★★亮点：多样的鼠标指针样式该款饰品网站，美观时尚，搜索，筛选和导航功能齐全。而且，还针对每一个饰品类别，配有不同的鼠标样式。当用户浏览对应的饰品类别时，就会相应的变换鼠标指针样式，实用而贴心。这一点上，是非常受其目标用户（即女性用户）喜爱的。 学习点： 根据网站产品特色，添加更多人性化设计，比如鼠标样式，文本字体，色彩配色变化等 2.Chairish 网站地址：http://thementic.com/opencart/OPC01/OPC0100013/推荐指数：★★★亮点：促销产品首页轮播，带文字图标更加简单直观地展示产品类别该款家具网页模板，采用促销产品的首页轮播设计，能够极大地吸引目标用户，促成购买的实现。而且，页面简单直观的带文字图标，对于用户更加方便快捷的查询和搜索需要的产品也是非常实用。 学习点： 首页热销或促销产品轮播，以吸引用户 利用扁平化图标，简化界面设计 3.Woodendot 网站地址：https://woodendot.com/en/推荐指数：★★★亮点：贴心的在线帮助该款电商类网页直接在其右下角添加了在线问题解答板块，及时帮助用户解决浏览过程中出现的任何问题。不需要时，也可直接隐藏收起，用户体验绝佳。 学习点： 添加专门的促销，问答以及帮助模块，优化用户体验 4.Manuel Rueda 网站地址：http://www.manuel-rueda.com推荐指数：★★★★★亮点：吸睛的视觉滚动差设计该款设计利用视觉滚动差设计，逐一展示设计师各种视频作品。用户直接滚动鼠标即可逐个查看各种优秀视频作品，如看电影一般，魅力十足，视觉效果超赞。学习点： 使用视觉滚动差设计，突出页面产品，布局和层级结构 5.Signal Boosters 网站地址：https://www.signalboosters.com推荐指数：★★★亮点：插画设计风格该款设计整体使用了插画设计风格，使整款设计美观而不失趣味性，十分特别。 学习点： 网页设计中也可应用各种插画，手绘，动漫以及复古水墨风，加深用户第一印象插画，手绘，动漫以及复古的水墨风，也是日渐流行起来的一大设计趋势，能够让整款设计极赋创意而不失趣味性，第一眼，即可吸引并留住用户，加深产品或品牌印象。 如图，这款漫画风格的网页设计，色彩丰富，美观可爱，对其目标用户极具吸引力。3. 简约风网页设计 简约风网页设计突出的特点就是：页面干净简洁，清爽舒适而不失实用性。 而近几年涌现了很多新的优秀简约风网页设计。比如： 1.Michael Villar 网站地址：http://www.michaelvillar.com推荐指数：★★★★亮点：极具怀旧特色的雪花特效该款页面设计可以说是极简主义设计风格的典型案例了。简单的黑色背景，搭配文本和图标，通过字体，尺寸以及位置变化，直观而极赋层次的展示页面内容的同时，还添加了极具怀旧情怀的雪花特效。而这一点，成为其一大设计亮点，吸引用户的同时，也增加了页面的趣味性和感染力。学习点： 添加独特的文本，图标或图片特效，优化网页设计 2.Not Your Standard 网站地址：https://notyourstandard.com推荐指数：★★★亮点：左侧导航栏设计，为用户提供周到的实时导航很多情况下，导航设计的好坏，可以说直接影响到用户浏览和使用网页的愉悦程度。而该款设计，添加了可显示和隐藏的左侧导航栏设计，用户轻松点击、滑动，即可快速查找和浏览需要的信息，有效的避免了用户突然迷失在网站内的情况，从而极大地提升用户的安全感和网站满意度。学习点： 添加实时导航设计，例如隐藏导航栏，侧边栏等，提升用户体验 3.MARK Goldstein 网站地址：http://m-goldstein.com推荐指数：★★★★亮点：渐变色彩的实时变化该款作品集页面设计除了选择渐变色来增加网页吸引力，还通过各种渐变色的循环变化，极大地增强了页面的视觉表现力。 学习点： 配色以及渐变色的应用和变换，也是增强简约风页面视觉吸引力的重要途径 Fresh Fronks 网站地址：http://freshfronks.com推荐指数：★★★★亮点：实物展示该款设计通过简约字体排版设计简单介绍产品的同时，结合产品实物，点击即可了解产品详情。简洁干净，而不失实用性和创造性。 学习点： 结合产品实物和特色进行界面设计 其他最新创意网页设计 1.Dyad 网站地址：https://dyaddemo.wordpress.com推荐指数：★★★亮点：响应式设计，高清图片与文字的完美搭配该款食谱分享网站的突出特点是其响应式设计，即页面能够能够自动根据用户设备系统，屏幕尺寸以及屏幕定向等进行调整和展示，使页面能够在各种设备友好的展示网页，从而使其更具弹性和兼容性。而且，作为美食类网站，高清图片与文字解说的绝佳搭配也使美食更加诱人，让人跃跃欲试。 学习点： 响应式设计也是网页设计的一大潮流 高清图片与文字的搭配，能使页面更具吸引力和说服力 2.Dinner for Five 网站地址：http://dff.mitsugutakahashi.com推荐指数：★★★亮点：直观清晰的文本结构层次该款作品集网站着陆页，虽然仅仅选用了文本以展示页面内容，但设计师却巧妙的通过文本字体，尺寸以及排版的不同，展现出直观清晰的页面层次结构，巧妙的避免了页面因单纯文本展示而容易出现的内容繁杂，无重点，可读性差等问题。学习点： 网页UI设计中注意视觉层次设计，让页面内容轻松层级化实际UI设计中，无论是文本、图片、视频、图标等部件的单独或结合使用，都要注意通过其尺寸，页面位置、色彩、对齐方式、排版以及布局的变换，层级化页面内容，创建更加清晰直观的页面结构层次，优化用户体验。 3.La Shop Studio 网站地址：http://lashopstudios.com/推荐指数：★★★★★亮点：交互式设计，创意的音频设计该款交互是网页设计的突出特点就是：创意的加入音频设计以快速吸引用户注意力。比如，其首页添加了简单的五线谱设计，当鼠标移动到线谱上时，线谱不仅会出现相应的波形变化，同时还会有音乐产生，就如同即兴音乐表演一般，非常有趣。 学习点： 交互式设计能够让页面更具趣味性 UI设计加入声音，让页面视觉和听觉魅力都兼具现今，网页或App UI设计不再仅仅依靠常规的视觉，越来越多的设计师通过添加各种音频设计，以带动用户的听觉，增加页面的表现力和吸引力。 4.The Glyph Studio 网站地址：http://www.theglyph.studio/#home推荐指数：★★★★亮点：3D设计和有趣的鼠标悬停特效该款交互式网页设计，用户指向页面3D圆球，即可随意旋转或拨弄该圆球。而且页面四角按钮的鼠标悬停效果也是十分有趣。 学习点： 利用3D技术展示页面内容，让其更具视觉吸引力 为页面按钮、图片或文字添加独特的悬停特效，注意微交互设计 5.Big Dropinc 网站地址：https://www.bigdropinc.com推荐指数：★★★亮点：极具视觉魅力的明亮配色该款网页设计通过明亮的配色以吸引用户注意。简约的设计风格也让页面更加直观实用。 学习点： 注意界面明亮色彩和配色的选择 四、总结 无论哪种类型，以上罗列的各种最优秀的网页设计风格或实例，都或多或少应用或体现了各种网页设计趋势，也展现了一定的网页设计技巧。希望它们能够为你带来无限灵感，从而助你创建更加优质吸睛的网页设计。 五、相关链接 https://www.mockplus.cn/example/rp - 摩客网网页模板 https://store.vuetifyjs.com/ - vuetify模板商城 https://js.design/f/EnEr6T?p=dLkqVI4iDa - 游测新官网设计网站","categories":[{"name":"前端","slug":"前端","permalink":"https://miaoda.fun/categories/%E5%89%8D%E7%AB%AF/"}],"tags":[{"name":"前端","slug":"前端","permalink":"https://miaoda.fun/tags/%E5%89%8D%E7%AB%AF/"},{"name":"设计","slug":"设计","permalink":"https://miaoda.fun/tags/%E8%AE%BE%E8%AE%A1/"}],"author":"苗大"},{"title":"Web 性能优化-CSS3 硬件加速(GPU 加速)","slug":"Web 性能优化-CSS3 硬件加速(GPU 加速)","date":"2022-03-01T07:15:00.000Z","updated":"2022-09-05T06:55:13.597Z","comments":true,"path":"2022/03/01/Web 性能优化-CSS3 硬件加速(GPU 加速)/","link":"","permalink":"https://miaoda.fun/2022/03/01/Web%20%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96-CSS3%20%E7%A1%AC%E4%BB%B6%E5%8A%A0%E9%80%9F(GPU%20%E5%8A%A0%E9%80%9F)/","excerpt":"","text":"CSS3 硬件加速简介CSS3 硬件加速又叫做 GPU 加速，是利用 GPU 进行渲染，减少 CPU 操作的一种优化方案。由于 GPU 中的 transform 等 CSS 属性不会触发 repaint，所以能大大提高网页的性能。先看个demo页面示例，左边元素的动画通过 left/top 操作位置实现，右边元素的动画通过 transform: translate 实现，你可以打开 chrome 的 “Paint flashing” 查看，绿色部分是正在 repaint 的内容。从 demo 中可以看到左边的图形在运动时外层有一圈绿色的边框，表示元素不停地 repaint，并且可以看到其运动过程中有丢帧现象，具体表现为运动不连贯，有轻微闪动。 动画与帧之前学习 flash 的时候，就知道动画是由一帧一帧的图片组成，在浏览器中也是如此。我们首先看一下，浏览器每一帧都做了什么。 JavaScript：JavaScript 实现动画效果，DOM 元素操作等。 Style（计算样式）：确定每个 DOM 元素应该应用什么 CSS 规则。 Layout（布局）：计算每个 DOM 元素在最终屏幕上显示的大小和位置。由于 web 页面的元素布局是相对的，所以其中任意一个元素的位置发生变化，都会联动的引起其他元素发生变化，这个过程叫 reflow。 Paint（绘制）：在多个层上绘制 DOM 元素的的文字、颜色、图像、边框和阴影等。 Composite（渲染层合并）：按照合理的顺序合并图层然后显示到屏幕上。动画与图层浏览器在获取 render tree（详细知识可以查看Web性能优化-页面重绘和回流（重排））后，渲染树中包含了大量的渲染元素，每一个渲染元素会被分到一个图层中，每个图层又会被加载到 GPU 形成渲染纹理。GPU 中 transform 是不会触发 repaint 的，这一点非常类似 3D 绘图功能，最终这些使用 transform 的图层都会由独立的合成器进程进行处理。过程如下：render tree -> 渲染元素 -> 图层 -> GPU 渲染 -> 浏览器复合图层 -> 生成最终的屏幕图像。TIPS: chrome devtools 中可以开启 Rendering 中的 Layer borders 查看图层纹理。其中黄色边框表示该元素有 3d 变换，表示放到一个新的复合层（composited layer）中渲染，蓝色栅格表示正常的 render layer。在文章开始给出的例子中，我们也可以开启 Layer borders，可以观察到，使用 transform: translate 动画的元素，外围有一个黄色的边框，可知其为复合层。 在 GPU 渲染的过程中，一些元素会因为符合了某些规则，而被提升为独立的层（黄色边框部分），一旦独立出来，就不会影响其它 DOM 的布局，所以我们可以利用这些规则，将经常变换的 DOM 主动提升到独立的层，那么在浏览器的一帧运行中，就可以减少 Layout 和 Paint 的时间了。创建独立图层哪些规则能让浏览器主动帮我们创建独立的层呢？6. 3D 或者透视变换（perspective，transform） 的 CSS 属性。7. 使用加速视频解码的 video 元素。8. 拥有 3D（WebGL） 上下文或者加速 2D 上下文的 canvas 元素。9. 混合插件（Flash)。10. 对自己的 opacity 做 CSS 动画或使用一个动画 webkit 变换的元素。11. 拥有加速 CSS 过滤器的元素。12. 元素有一个包含复合层的后代节点(换句话说，就是一个元素拥有一个子元素，该子元素在自己的层里)。13. 元素有一个兄弟元素在复合图层渲染，并且该兄弟元素的 z-index 较小，那这个元素也会被应用到复合图层。关于 z-index 导致的硬件加速的问题，可以查看这篇文章 CSS3硬件加速也有坑！！开启 GPU 加速CSS 中的以下几个属性能触发硬件加速：14. transform15. opacity16. filter17. will-change如果有一些元素不需要用到上述属性，但是需要触发硬件加速效果，可以使用一些小技巧来诱导浏览器开启硬件加速。 CSS.element { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); /或者/ transform: rotateZ(360deg); transform: translate3d(0, 0, 0);}注意：我在不同的资料中查到的 transform 是否能触发硬件加速的结果不同，自己测试后，发现结果是可以。要注意的问题（1）过多地开启硬件加速可能会耗费较多的内存，因此什么时候开启硬件加速，给多少元素开启硬件加速，需要用测试结果说话。（2）GPU 渲染会影响字体的抗锯齿效果。这是因为 GPU 和 CPU 具有不同的渲染机制，即使最终硬件加速停止了，文本还是会在动画期间显示得很模糊。参考文章• Increase Your Site’s Performance with Hardware-Accelerated CSS• 用CSS开启硬件加速来提高网站性能• css3硬件加速• CSS3硬件加速也有坑！！• GPU加速是什么• 使用CSS3 will-change提高页面滚动、动画等渲染性能","categories":[{"name":"前端","slug":"前端","permalink":"https://miaoda.fun/categories/%E5%89%8D%E7%AB%AF/"}],"tags":[{"name":"前端","slug":"前端","permalink":"https://miaoda.fun/tags/%E5%89%8D%E7%AB%AF/"},{"name":"技术","slug":"技术","permalink":"https://miaoda.fun/tags/%E6%8A%80%E6%9C%AF/"}],"author":"苗大"},{"title":"前端开发规范","slug":"前端开发规范","date":"2022-02-22T08:00:00.000Z","updated":"2022-09-05T06:53:42.998Z","comments":true,"path":"2022/02/22/前端开发规范/","link":"","permalink":"https://miaoda.fun/2022/02/22/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/","excerpt":"","text":"规范目的 为提高团队协作效率 便于后期添加功能及优化维护 输出高质量的文档命名规范 为了让大家书写可维护的代码，而不是一次性的代码 让团队当中其他人看你的代码能一目了然 甚至一段时间时候后你再看你某个时候写的代码也能看 普通变量命名规范 命名方法 ：驼峰命名法 命名规范 ： 命名必须是跟需求的内容相关的词，比如说我想申明一个变量，用来表示我的学校，那么我们可以这样定义const mySchool = “我的学校”; 命名是复数的时候需要加s,比如说我想申明一个数组，表示很多人的名字，那么我们可以这样定义const names = new Array(); 常量 命名方法 : 全部大写 命名规范 : 使用大写字母和下划线来组合命名，下划线用以分割单词。const MAX_COUNT = 10const URL = ‘https://www.baidu.com/' 组件命名规范 官方文档推荐及使用遵循规则： PascalCase (单词首字母大写命名)是最通用的声明约定 kebab-case (短横线分隔命名) 是最通用的使用约定 组件名应该始终是多个单词的，根组件 App 除外 有意义的名词、简短、具有可读性 命名遵循 PascalCase 约定 公用组件以 Abcd (公司名缩写简称) 开头，如（AbcdDatePicker,AbcdTable） 页面内部组件以组件模块名简写为开头，Item 为结尾，如（StaffBenchToChargeItem，StaffBenchAppNotArrItem） 使用遵循 kebab-case 约定 在页面中使用组件需要前后闭合，并以短线分隔，如（，） 导入及注册组件时，遵循 PascalCase 约定 同时还需要注意：必须符合自定义元素规范: 切勿使用保留字。 method 方法命名命名规范 驼峰式命名，统一使用动词或者动词+名词形式//badgo、nextPage、show、open、login // goodjumpPage、openCarInfoDialog 请求数据方法，以 data 结尾//badtakeData、confirmData、getList、postForm // goodgetListData、postFormData init、refresh 单词除外 尽量使用常用单词开头（set、get、go、can、has、is） 附： 函数方法常用的动词: get 获取/set 设置, add 增加/remove 删除 create 创建/destory 移除 start 启动/stop 停止 open 打开/close 关闭, read 读取/write 写入 load 载入/save 保存, create 创建/destroy 销毁 begin 开始/end 结束, backup 备份/restore 恢复 import 导入/export 导出, split 分割/merge 合并 inject 注入/extract 提取, attach 附着/detach 脱离 bind 绑定/separate 分离, view 查看/browse 浏览 edit 编辑/modify 修改, select 选取/mark 标记 copy 复制/paste 粘贴, undo 撤销/redo 重做 insert 插入/delete 移除, add 加入/append 添加 clean 清理/clear 清除, index 索引/sort 排序 find 查找/search 搜索, increase 增加/decrease 减少 play 播放/pause 暂停, launch 启动/run 运行 compile 编译/execute 执行, debug 调试/trace 跟踪 observe 观察/listen 监听, build 构建/publish 发布 input 输入/output 输出, encode 编码/decode 解码 encrypt 加密/decrypt 解密, compress 压缩/decompress 解压缩 pack 打包/unpack 解包, parse 解析/emit 生成 connect 连接/disconnect 断开, send 发送/receive 接收 download 下载/upload 上传, refresh 刷新/synchronize 同步 update 更新/revert 复原, lock 锁定/unlock 解锁 check out 签出/check in 签入, submit 提交/commit 交付 push 推/pull 拉, expand 展开/collapse 折叠 begin 起始/end 结束, start 开始/finish 完成 enter 进入/exit 退出, abort 放弃/quit 离开 obsolete 废弃/depreciate 废旧, collect 收集/aggregate 聚集 views 下的文件命名 只有一个文件的情况下不会出现文件夹，而是直接放在 views 目录下面，如 index.vue 尽量是名词,且使用驼峰命名法 开头的单词就是所属模块名字（workbenchIndex、workbenchList、workbenchEdit） 名字至少两个单词（good: workbenchIndex）（bad:workbench） props 命名 在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板中应该始终使用 kebab-case props: { 'greeting-text': String } props: { greetingText: String } 例外情况 作用域不大临时变量可以简写，比如：str，num，bol，obj，fun，arr。 循环变量可以简写，比如：i，j，k 等。结构化规范 目录文件夹及子文件规范 以下统一管理处均对应相应模块 以下全局文件文件均以 index.js 导出，并在 main.js 中导入 以下临时文件，在使用后，接口已经有了，发版后清除src 源码目录|– api 接口，统一管理|– assets 静态资源，统一管理|– components 公用组件，全局文件|– filters 过滤器，全局工具|– icons 图标，全局资源|– datas 模拟数据，临时存放|– lib 外部引用的插件存放及修改文件|– mock 模拟接口，临时存放|– router 路由，统一管理|– store vuex, 统一管理|– views 视图目录| |– staffWorkbench 视图模块名| |– |– staffWorkbench.vue 模块入口页面| |– |– indexComponents 模块页面级组件文件夹| |– |– components 模块通用组件文件夹 vue 文件基本结构 <template> <div> <!--必须在div中编写页面--> </div> </template> <script> export default { components : { }, data () { return { } }, mounted() { }， methods: { } } </script> <!--声明语言，并且添加scoped--> <style lang="scss" scoped> </style> 多个特性的元素规范 多个特性的元素应该分多行撰写，每个特性一行。(增强更易读) <!-- bad --> <img src="https://vuejs.org/images/logo.png" alt="Vue Logo"> <my-component foo="a" bar="b" baz="c"></my-component> <!-- good --> <img src="https://vuejs.org/images/logo.png" alt="Vue Logo" > <my-component foo="a" bar="b" baz="c" > </my-component> 元素特性的顺序 原生属性放前面，指令放后面 如下所示： class id,ref name data-* src, for, type, href,value,max-length,max,min,pattern title, alt，placeholder aria-*, role required,readonly,disabled is v-for key v-if v-else-if v-else v-show v-cloak v-pre v-once v-model v-bind,: v-on,@ v-html v-text 组件选项顺序 如下所示： components props data computed created mounted metods filter watch 注释规范 代码注释在一个项目的后期维护中显的尤为重要，所以我们要为每一个被复用的组件编写组件使用说明，为组件中每一个方法编写方法说明务必添加注释列表 公共组件使用说明 各组件中重要函数或者类说明 复杂的业务逻辑处理说明 特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的 hack、使用了某种算法或思路等需要进行注释描述 多重 if 判断语句 注释块必须以/（至少两个星号）开头/ 单行注释使用// 单行注释 注释单独一行，不要在代码后的同一行内加注释。例如： //bad var name ="abc"; // 姓名 //good // 姓名 var name = "abc"; 多行注释 //组件使用说明，和调用说明 /** * 组件名称 * @module 组件存放位置 * @desc 组件描述 * @author 组件作者 * @date 2017年12月05日17:22:43 * @param {Object} [title] - 参数说明 * @param {String} [columns] - 参数说明 * @example 调用示例 * <hbTable :title="title" :columns="columns" :tableData="tableData"></hbTable> **/ 编码规范 优秀的项目源码，即使是多人开发，看代码也如出一人之手。统一的编码规范，可使代码更易于阅读，易于理解，易于维护。尽量按照 ESLint 格式要求编写代码 源码风格 使用 ES6 风格编码 定义变量使用 let ,定义常量使用 const 静态字符串一律使用单引号或反引号，动态字符串使用反引号```vue// badconst a = ‘foobar’const b = ‘foo’ + a + ‘bar’ // acceptable const c = foobar // good const a = ‘foobar’ const b = foo${a}bar const c = ‘foobar’ 3. 解构赋值 - 数组成员对变量赋值时，优先使用解构赋值 // 数组解构赋值 const arr = [1, 2, 3, 4] // bad const first = arr[0] const second = arr[1] // good const [first, second] = arr - 函数的参数如果是对象的成员，优先使用解构赋值 // 对象解构赋值 // bad function getFullName(user) { const firstName = user.firstName const lastName = user.lastName } // good function getFullName(obj) { const { firstName, lastName } = obj } // best function getFullName({ firstName, lastName }) {} 4. 拷贝数组 使用扩展运算符（...）拷贝数组。 const items = [1, 2, 3, 4, 5] // bad const itemsCopy = items // good const itemsCopy = [...items] 5. 箭头函数 需要使用函数表达式的场合，尽量用箭头函数代替。因为这样更简洁，而且绑定了 this ```vue // bad const self = this; const boundMethod = function(...params) { return method.apply(self, params); } // acceptable const boundMethod = method.bind(this); // best const boundMethod = (...params) => method.apply(this, params); 模块 如果模块只有一个输出值，就使用 export default，如果模块有多个输出值，就不使用 export default，export default 与普通的 export 不要同时使用 // bad import * as myObject from './importModule' // good import myObject from './importModule' 如果模块默认输出一个函数，函数名的首字母应该小写。 function makeStyleGuide() { } export default makeStyleGuide; 如果模块默认输出一个对象，对象名的首字母应该大写。 const StyleGuide = { es6: { } }; export default StyleGuide; 指令规范 指令有缩写一律采用缩写形式```vue// badv-bind:class=”{‘show-left’：true}”v-on:click=”getListData” // good :class=”{‘show-left’：true}” @click=”getListData” 2. v-for 循环必须加上 key 属性，在整个 for 循环中 key 需要唯一 ```vue <!-- good --> <ul> <li v-for="todo in todos" :key="todo.id"> {{ todo.text }} </li> </ul> <!-- bad --> <ul> <li v-for="todo in todos"> {{ todo.text }} </li> </ul> 避免 v-if 和 v-for 同时用在一个元素上（性能问题）以下为两种解决方案： 将数据替换为一个计算属性，让其返回过滤后的列表 computed: { activeUsers: function () { return this.users.filter(function (user) { return user.isActive }) } } 将 v-if 移动至容器元素上 (比如 ul, ol) Props 规范 Props 定义应该尽量详细// bad 这样做只有开发原型系统时可以接受props: [‘status’] // goodprops: { status: { type: String, required: true, validator: function (value) { return [ ‘syncing’, ‘synced’, ‘version-conflict’, ‘error’ ].indexOf(value) !== -1 } }} 其他 避免 this.$parent 调试信息 console.log() debugger 使用完及时删除 除了三目运算，if,else 等禁止简写// badif (true) alert(name);console.log(name); // bad if (true) alert(name); console.log(name) // good if (true) { alert(name); } console.log(name); CSS 规范通用规范 统一使用”-“连字符 省略值为 0 时的单位// badpadding-bottom: 0px;margin: 0em; // good padding-bottom: 0; margin: 0; 如果 CSS 可以做到，就不要使用 JS 建议并适当缩写值，提高可读性，特殊情况除外“建议并适当”是因为缩写总是会包含一系列的值，而有时候我们并不希望设置某一值，反而造成了麻烦，那么这时候你可以不缩写，而是分开写。当然，在一切可以缩写的情况下，请务必缩写，它最大的好处就是节省了字节，便于维护，并使阅读更加一目了然。// bad.box{ border-top-style: none; font-family: palatino, georgia, serif; font-size: 100%; line-height: 1.6; padding-bottom: 2em; padding-left: 1em; padding-right: 1em; padding-top: 0;} // good .box{ border-top: 0; font: 100%/1.6 palatino, georgia, serif; padding: 0 1em 2em; } 声明应该按照下表的顺序左到右，从上到下无法复制加载中的内容// bad.box { font-family: ‘Arial’, sans-serif; border: 3px solid #ddd; left: 30%; position: absolute; text-transform: uppercase; background-color: #eee; right: 30%; isplay: block; font-size: 1.5rem; overflow: hidden; padding: 1em; margin: 1em;} // good .box { display: block; position: absolute; left: 30%; right: 30%; overflow: hidden; margin: 1em; padding: 1em; background-color: #eee; border: 3px solid #ddd; font-family: ‘Arial’, sans-serif; font-size: 1.5rem; text-transform: uppercase; } 元素选择器应该避免在 scoped 中出现官方文档说明：在 scoped 样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的。 分类的命名方法使用单个字母加上”-“为前缀布局（grid）（.g-）；模块（module）（.m-）；元件（unit）（.u-）；功能（function）（.f-）；皮肤（skin）（.s-）；状态（.z-）。 统一语义理解和命名布局（.g-） td {white-space:pre-wrap;border:1px solid #dee0e3;}语义命名简写文档docdoc头部headhd主体bodybd尾部footft主栏mainmn主栏子容器maincmnc侧栏sidesd侧栏子容器sidecsdc盒容器wrap/boxwrap/box 模块（.m-）、元件（.u-）无法复制加载中的内容功能（.f-）无法复制加载中的内容皮肤（.s-）无法复制加载中的内容状态（.z-）无法复制加载中的内容 sass 规范 当使用 Sass 的嵌套功能的时候，重要的是有一个明确的嵌套顺序，以下内容是一个 SCSS 块应具有的顺序。 当前选择器的样式属性 父级选择器的伪类选择器 (:first-letter, :hover, :active etc) 伪类元素 (:before and :after) 父级选择器的声明样式 (.selected, .active, .enlarged etc.) 用 Sass 的上下文媒体查询 子选择器作为最后的部分.product-teaser {// 1. Style attributesdisplay: inline-block;padding: 1rem;background-color: whitesmoke;color: grey; // 2. Pseudo selectors with parent selector &:hover { color: black; } // 3. Pseudo elements with parent selector &:before { content: ""; display: block; border-top: 1px solid grey; } &:after { content: ""; display: block; border-top: 1px solid grey; } // 4. State classes with parent selector &.active { background-color: pink; color: red; // 4.2. Pseuso selector in state class selector &:hover { color: darkred; } } // 5. Contextual media queries @media screen and (max-width: 640px) { display: block; font-size: 2em; } // 6. Sub selectors > .content > .title { font-size: 1.2em; // 6.5. Contextual media queries in sub selector @media screen and (max-width: 640px) { letter-spacing: 0.2em; text-transform: uppercase; } } } 特殊规范 对用页面级组件样式，应该是有作用域的 对于公用组件或者全局组件库，我们应该更倾向于选用基于 class 的 BEM 策略 // bad // good // good .c-Button { border: none; border-radius: 2px; } .c-Button--close { background-color: red; } 参考 风格指南 更好的css方案 前端js规范文档","categories":[{"name":"前端","slug":"前端","permalink":"https://miaoda.fun/categories/%E5%89%8D%E7%AB%AF/"}],"tags":[{"name":"前端","slug":"前端","permalink":"https://miaoda.fun/tags/%E5%89%8D%E7%AB%AF/"},{"name":"技术","slug":"技术","permalink":"https://miaoda.fun/tags/%E6%8A%80%E6%9C%AF/"}],"author":"苗大"},{"title":"angular 页面内跳转(锚点定位被顶部固定导航栏遮住)踩坑记录","slug":"angular 页面内跳转(锚点定位被顶部固定导航栏遮住)踩坑记录","date":"2021-08-27T06:00:00.000Z","updated":"2022-08-30T06:35:54.701Z","comments":true,"path":"2021/08/27/angular 页面内跳转(锚点定位被顶部固定导航栏遮住)踩坑记录/","link":"","permalink":"https://miaoda.fun/2021/08/27/angular%20%E9%A1%B5%E9%9D%A2%E5%86%85%E8%B7%B3%E8%BD%AC(%E9%94%9A%E7%82%B9%E5%AE%9A%E4%BD%8D%E8%A2%AB%E9%A1%B6%E9%83%A8%E5%9B%BA%E5%AE%9A%E5%AF%BC%E8%88%AA%E6%A0%8F%E9%81%AE%E4%BD%8F)%E8%B8%A9%E5%9D%91%E8%AE%B0%E5%BD%95/","excerpt":"","text":"前言：angular页面内跳转，需求是按钮点击后跳转到对应名字标题的位置，标题已设置同名id，且跳转位置不能被顶部固定导航栏遮住。一开始是用a标签href跳转，标题css加了:target伪类（《锚点定位被顶部固定导航栏遮住的解决方案》文章中的方法4）完美解决，但是后来由于路由前加了服务标识区分(xxx-frontend-web)，像这样: http://localhost:4200/xxx-frontend-web/#/home#我是标题 导致了a标签跳转失效，a标签的只能跳到http://localhost:4200/home#我是标题，其实也可以在所有a标签href里加服务区分标识，但是，这种方法还是太蠢了。。。然后找到的方法是用js原生的scrollIntoView，配合在标题css上加一个padding-top:140px（那篇文章的方法2），凑合解决。 const element = document.querySelector('#' + id); if (element) { element.scrollIntoView({ behavior: 'smooth' }); // 路由跳转(让url也加上#id) const _path = this.getUrlRelativePath(); this.router.navigate([_path], { fragment: id }); } 没过几天，开始做面包屑，发现面包屑正好被标题的padding挡住按不到。。。看来还是得找替代方法 解决方法1终于在stackoverflow上大佬的回答里找到了不用加padding的解决方案： const element = document.querySelector('#' + id); if (element) { const yOffset = -140; const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset; window.scrollTo({top: y, behavior: 'smooth'}); // 路由跳转(让url也加上#id) const _path = this.getUrlRelativePath(); this.router.navigate([_path], { fragment: id }); } 解决方法2在查询过程中发现angular Api中有页面内滚动的方法：ViewportScroller，试了一下发现比原生js的更好用： //需要先在构造时候引入 constructor(private _vps: ViewportScroller) {} //然后方法中即可直接调用： // 设置滚动偏差([x,y], 此处y是header高度) this._vps.setOffset([0, 140]); // 滚动到id位置 this._vps.scrollToAnchor(id); // 路由跳转 const _path = this.getUrlRelativePath(); this.router.navigate([_path], { fragment: id }); 2021/8/30 更新 解决方法2改解决方法2中的setOffset可以在Angular引入Router时的初始化参数里设置： @NgModule({ imports: [ RouterModule.forRoot(routes, { scrollPositionRestoration: 'enabled', anchorScrolling: 'enabled', scrollOffset: [0, 0], }) ] }) 1、scrollPositionRestoration 可能的选项有： disabled：什么也不做（当前默认）； top：导航后自动回到页面顶部； enabled：（后退时）恢复到原始位置或（前进时）基于 anchorScrolling 选项的元素位置（否则置顶）； 2、anchorScrolling 可能的选项有： disabled：什么也不做（当前默认）； enabled：跳转到当前 Fragment 对应元素的位置（如果有的话）； 3、scrollOffset 用于设定置顶的位置。 参考资料&鸣谢： 锚点定位被顶部固定导航栏遮住的解决方案 js解决方案(stackoverflow上大佬的回答) angular Api - ViewportScroller Angular 路由切换后页面返回顶部","categories":[{"name":"前端","slug":"前端","permalink":"https://miaoda.fun/categories/%E5%89%8D%E7%AB%AF/"}],"tags":[{"name":"前端","slug":"前端","permalink":"https://miaoda.fun/tags/%E5%89%8D%E7%AB%AF/"},{"name":"angular","slug":"angular","permalink":"https://miaoda.fun/tags/angular/"},{"name":"技术","slug":"技术","permalink":"https://miaoda.fun/tags/%E6%8A%80%E6%9C%AF/"}],"author":"苗大"},{"title":"angular调用百度地图api踩坑记录","slug":"angular调用百度地图api踩坑记录","date":"2021-08-16T05:30:00.000Z","updated":"2022-08-30T06:35:54.713Z","comments":true,"path":"2021/08/16/angular调用百度地图api踩坑记录/","link":"","permalink":"https://miaoda.fun/2021/08/16/angular%E8%B0%83%E7%94%A8%E7%99%BE%E5%BA%A6%E5%9C%B0%E5%9B%BEapi%E8%B8%A9%E5%9D%91%E8%AE%B0%E5%BD%95/","excerpt":"","text":"前言：跳过踩坑碎碎念，直接看使用方法 根据百度地图api示例，调用地图需要先引入js: <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> 之后才能进行各种api调用，但angular直接调用互联网的js，需要利用angular-cli.json的script属性或者直接在index.html中引入js，这种全局调用的方式并不是笔者想要的。 于是就去搜索了各种angular异步调用js方法，在StackOverFlow一篇问答：angular如何动态加载外部js 里有介绍说用system.js或者scriptjs工具来加载，笔者尝试了scriptjs加载的方法，发现运行时提示警告： depends on 'scriptjs'. CommonJS or AMD dependencies can cause optimization bailouts. StackOverFlow上类似问题的解释是：When you use a dependency that is packaged with CommonJS, it can result in larger slower applications看来这种方式也不是很好，会导致打包后的程序更慢更大，于是笔者就想到直接找别人写好的轮子岂不是更快，最后在GitHub上找到angular-baidu-maps，看到下面调用代码大喜： import { AbmModule } from 'angular-baidu-maps'; @NgModule({ imports: [ BrowserModule, AbmModule.forRoot({ apiKey: '' // app key为必选项 }) ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } 看起来很好用，这就开整！ 安装&升级Angular12踩坑根据上面GitHub的README.md可以很快安装成功，但当笔者调用时候却报了提示angular版本不兼容，查了下发现，插件是angular12版本，而项目用的却是angular11，咨询了项目负责人后获得了升级许可，升级完终于可以调用成功了，但却发现之前PrimeNG的css样式都失效了，去官网看了下才发现原来，PrimeNG 12之后css改为primeflex3.0，于是又是一番折腾，终于把样式改正常了，虽然运行终端log里一直有大量的下面这种警告： assets/css/style-blessed.scss - Warning: Css Minimizer Plugin: > assets/css/style-blessed.scss:2700:1: warning: Expected identifier but found "." 2700 │ .social-icon { ╵ ^ 查了下应该是css压缩转换相关的问题，但是试了各种方法依然没能解决，虽然不影响运行和打包，但还是挺烦人的，如果有大佬有好的解决办法，希望可以留言告诉笔者，万分感谢！ 正式使用需求： 添加大量自定义标签； 点击自定义标签显示信息窗； 获取用户定位并显示； 添加大量自定义标签需要使用到BMapLib.MarkerClusterer类，这个类是另外加载的，所以我们要在app.module.ts引用时在AbmModule的libraries里添加上： //baidu map AbmModule.forRoot({ apiKey: '你的apiKey', libraries: [ '//api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js', '//api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js', ], }), 接着在调用api的组件里添加定义： declare const BMapLib: any; 之后如果你之前已经写好标签数组(markers)就可以像这样直接调用了： new BMapLib.MarkerClusterer(map, {markers: markers}) 我们这里先从创建自定义标签开始： // 创建一个包含经纬度的点 const point = new BMap.Point(lng, lat); // 创建一个自定义图标，包含图片路径和一个包含宽高的Size对象 const myIcon = new BMap.Icon( '/img/map/marker_icon.png', new BMap.Size(iconWidth, iconHeight) ); // 创建标注 const marker = new BMap.Marker(point, { icon: myIcon }); // 设置标注标题 marker.setTitle(name); 于是一个自定义标注完成了，之后只要将标注用MarkerClusterer聚合： // 写在循环内，将所有标注放到一个数组里 markers.push(marker) // 标注导入聚合 const markerClusterer = new BMapLib.MarkerClusterer(map, {markers: markers}) // 聚合点样式（和标注类似，多了一个聚合后文字的颜色） const polymerizationStyles = [ { url: '/img/map/cluster_icon.png', size: new BMap.Size(clusterIconWidth, clusterIconHeight), textColor: #FFF, }, ]; // 设置超过几个点开始聚合 markerClusterer.setMinClusterSize(2); // 调用样式 markerClusterer.setStyles(polymerizationStyles); 到这里，信息窗就完成了，下面开始获取用户定位 点击自定义标签显示信息窗信息框添加本身比较简单，可以用js原始的添加删除事件方法，我这里为了统一管理事件用了 rxjs： // 引入rxjs相关函数 import { Subscription, fromEvent, merge } from 'rxjs'; // 定义一个订阅器 subscription: Subscription; 下面代码是写在创建marker的循环里的： // 信息框内容 const info_html = `<div><span>我是信息窗信息</span></div>`; // 点击标注显示信息窗（） const markerEvent = fromEvent(marker, 'click').pipe( tap((e) => marker.openInfoWindow(new BMap.InfoWindow(info_html))) ); // 事件和marker一样用一个数组聚合 events.push(markerEvent); 之后在循环外面将事件聚合和发布： // merge聚合全部点击事件, 再通一发布 this.subscription = merge(...events).subscribe(); 这样我们就能在ngOnDestroy()里轻松销毁所有事件： ngOnDestroy(): void { // 销毁事件 this.subscription.unsubscribe(); } 到这里，大量自定义标签的添加就完成了，下面开始添加信息窗 获取用户定位并显示获取用户定位我们需要用到BMap的Geolocation方法： // 定位所需的成功状态 declare const BMAP_STATUS_SUCCESS: any; // 获取当前位置经纬度 const geolocation = new BMap.Geolocation(); // 为了在下面匿名函数内调用到组件对象 const _this = this; geolocation.getCurrentPosition(function (r) { if (this.getStatus() == BMAP_STATUS_SUCCESS) { console.log('您的位置：' + r.point.lng + ',' + r.point.lat); //自定义定位标识（和marker一样） const myCurIcon = new BMap.Icon( '/img/map/cluster_icon.png', new BMap.Size(curIconWidth, curIconHeight) ); // 创建当前位置标注 const curMarker = new BMap.Marker(r.point, { icon: myCurIcon }); curMarker.setTitle(curIconTitle); //将当前位置标注添加到地图 map.addOverlay(curMarker); // 这里的curLat和curLng是需要输出到父组件的 // @Output() curLat = new EventEmitter<string>(); _this.curLat.emit(r.point.lat); _this.curLng.emit(r.point.lng); } else { console.log('failed' + this.getStatus()); alert('获取当前位置失败，请开启定位权限！'); } }); 这样就能拿到用户的定位并显示了，父组件拿到定位后也可以进行调用百度计算路径的网址： /** * 参数说明： * mode：出行方式，这里用的是开车 - driving * region：地域，这里的是西安（似乎随便填一个就行 * origin：起始地经纬度，这里传入了子组件传来的经纬度 * destination：终点经纬度 */ <a [href]="'http://api.map.baidu.com/direction?mode=driving&output=html&region=%E8%A5%BF%E5%AE%89%E2%80%8B&origin=' + curLat + ',' + curLng + '&destination=' + lat + ',' + lng" target="_blank" > 2021/8/27 更新 获取当前位置经纬度方法2由于需求增加，需要在加载百度页面的其他页面也要获取到当前位置经纬度，于是搜寻了下js原生的获取方法： ngOnInit() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition((p) => { const { latitude, longitude } = p.coords; console.log('latitude, longitude: ' , latitude, longitude); }); } } 这个方法简单，而且可以直接在初始化时候调用，不用等待百度地图相关api的启用。 参考资料&鸣谢： 百度地图api angular-baidu-maps rxjs","categories":[{"name":"前端","slug":"前端","permalink":"https://miaoda.fun/categories/%E5%89%8D%E7%AB%AF/"}],"tags":[{"name":"前端","slug":"前端","permalink":"https://miaoda.fun/tags/%E5%89%8D%E7%AB%AF/"},{"name":"angular","slug":"angular","permalink":"https://miaoda.fun/tags/angular/"},{"name":"技术","slug":"技术","permalink":"https://miaoda.fun/tags/%E6%8A%80%E6%9C%AF/"}],"author":"苗大"},{"title":"jQuery-input输入验证","slug":"jQuery-input输入验证","date":"2020-10-30T07:00:00.000Z","updated":"2022-08-30T06:35:54.722Z","comments":true,"path":"2020/10/30/jQuery-input输入验证/","link":"","permalink":"https://miaoda.fun/2020/10/30/jQuery-input%E8%BE%93%E5%85%A5%E9%AA%8C%E8%AF%81/","excerpt":"","text":"前言：原先直接引用inputmask.js来做输入验证，但后来发现它和 onkeyup 事件有相同的 bug，在中文输入法状态下，输入汉字之后直接回车，会直接输入字母。于是就需要寻找替代品，一开始找到了 oninput 事件，但使用了一会儿发现也存在 bug，当先输入一些字符时再切换中文输入法输入，之前输入的字符会消失相应的字符数量。最后只能自己写共通方法来进行验证。 共通方法:/** * 输入验证共通 * @param selector 选择器 * @param reg 正则表达式 * @param endFunc 输入结束后的验证方法 * @param endParam endFunc方法的参数 * @param onblurStr 离开input框操作的方法名（字符串） */ function inputValidation(selector, reg, endFunc, endParam, onblurStr) { var isInputZh = false; var search = document.querySelectorAll(selector); $.each(search, function (i, item) { item.addEventListener('compositionstart', function (e) { isInputZh = true; }, false); item.addEventListener('compositionend', function (e) { isInputZh = false; validate(item, reg); if (endFunc !== undefined) { endFunc(item, endParam); } }, false); item.addEventListener('input', function (e) { if (isInputZh) return; validate(item, reg); if (endFunc !== undefined) { endFunc(item, endParam); } }, false); if (onblurStr !== undefined) { $(item).attr("onblur", onblurStr + "(this)"); } }); function validate(valDom, reg) { var domVal = $(valDom).val(); $(valDom).val(domVal.match(reg)); } } 一些验证的辅助方法：/** * 数字设置最大值，并去除开头0 * @param item dom对象 * @param max 最大值（可为空） */ function validateNumMax(item, max) { var _this = $(item); if (_this.val().match(/^0\\d+/)) { _this.val(_this.val().substr(1)); } if (max !== undefined && (Number(_this.val()) > max)) { _this.val(max); } } /** * 去除数字末尾的小数点 * @param item dom对象 */ function validateRemovePoint(item) { var _this = $(item); var _thisVal = _this.val(); if (_thisVal.match(/\\d*\\.$/)) { _this.val(_thisVal.substr(0, _thisVal.length - 1)); } } /** * 验证邮箱格式 * @param item dom对象 */ function isEmail(item) { var strEmail = $(item).val(); strEmail = strEmail.trim(); $(item).val(strEmail); if (strEmail != '') { if (strEmail.search(/^\\w+((-\\w+)|(\\.\\w+))*\\@[A-Za-z0-9]+((\\.|-)[A-Za-z0-9]+)*\\.[A-Za-z0-9]+$/) != -1) { return true; } else { $(item).focus(); $(item).val(''); alert("邮箱格式不对"); } } } 调用共通方法（Class名沿用之前inputmask）：//只能英文或数字(3位) inputValidation(".letterNum-inputmask", /[a-zA-Z0-9]{1,3}/); //只能英文或数字(2位) inputValidation(".letterNum-inputmask2", /[a-zA-Z0-9]{1,2}/); //只能英文或数字 inputValidation(".letterNumOnly-inputmask", /[a-zA-Z0-9]+/); //只能输入整数 inputValidation(".level-inputmask", /^\\d+/); //只能输入0-100的整数 inputValidation(".hundred-inputmask", /^\\d+/, validateNumMax, 100); //只能输入0~1的数，两位小数 inputValidation(".scoreDecimal-inputmask", /[0-9]+\\.?[0-9]{0,2}/, validateNumMax, 1, "validateRemovePoint"); //只能输入两位小数的数字 inputValidation(".decimalTwo-inputmask", /[0-9]+\\.?[0-9]{0,2}/, validateNumMax, undefined, "validateRemovePoint"); //只能输入一位小数的数字 inputValidation(".decimalOne-inputmask", /[0-9]+\\.?[0-9]?/, validateNumMax, undefined, "validateRemovePoint"); //可小数的数字 inputValidation(".decimal-inputmask", /[0-9]+\\.?[0-9]*/, validateNumMax, undefined, "validateRemovePoint"); //email inputValidation(".email-inputmask", /^[.a-zA-Z0-9_-]+@?[.a-zA-Z0-9_-]*/,undefined,undefined,"isEmail"); 参考资料： 如何在HTML中限制input 输入框只能输入纯数字 input 事件兼容处理以及中文输入法优化","categories":[{"name":"前端","slug":"前端","permalink":"https://miaoda.fun/categories/%E5%89%8D%E7%AB%AF/"}],"tags":[{"name":"前端","slug":"前端","permalink":"https://miaoda.fun/tags/%E5%89%8D%E7%AB%AF/"},{"name":"技术","slug":"技术","permalink":"https://miaoda.fun/tags/%E6%8A%80%E6%9C%AF/"}],"author":"苗大"},{"title":"Hexo-Theme-Sakura","slug":"Hexo-Theme-Sakura","date":"2020-08-12T14:16:01.000Z","updated":"2022-08-30T06:38:30.206Z","comments":true,"path":"2020/08/12/Hexo-Theme-Sakura/","link":"","permalink":"https://miaoda.fun/2020/08/12/Hexo-Theme-Sakura/","excerpt":"","text":"hexo-theme-sakura主题 English document 基于WordPress主题Sakura修改成Hexo的主题。 正在开发中…… 主题特性 首页大屏视频 首页随机封面 图片懒加载 valine评论 fancy-box相册 pjax支持，音乐不间断 aplayer音乐播放器 多级导航菜单（按现在大部分hexo主题来说，这也算是个特性了） 1、搭建Hexo并生成静态页面0 . 环境配置这个我度娘都能搜到，重复一遍意义不大，这里只提供需要的软件名称和命令 ① 需要安装：Node.js , Git，Notepad++（方便编辑）② 需要准备：Github账号③ 安装后检查（在CMD中）node -v //检查node版本 npm -v //检查npm版本 git --version //检查git版本 出现版本号则为安装成功。 1 . 基本准备(1) GitHub PagesGitHub Pages国内速度不理想 使用其他静态页面服务请先跳转至 加速优化 部分 ①新建一个GitHub仓库，名为 |USERNAME|.github.io (|USERNAME|为你的GitHub用户名），勾选 初始化README（即Initualize this repository with README），创建仓库②进入仓库的设置界面（Settings），找到GitHub Pages一栏，将Source中的 None 改为 master branch(2) Hexo①安装在任意位置新建一个文件夹作为你的博客文件夹（这里博客文件夹以\\Blog代替），在\\Blog中右键，点击 Git Bash Here，输入以下内容 npm i hexo-cli -g //安装Hexo hexo -v //验证安装 hexo init //初始化\\Blog文件夹 npm install //安装基本组件 ②预览hexo g //生成静态页面 hexo s //打开本地服务器 进入浏览器访问 localhost:4000 你可以进入你的Hexo博客页面 然后按 Ctrl + C 停止服务器，Hexo的基本搭建完毕 2 . 简单配置与连接(1)载入主题hexo-Sakura主题载入方式：直接覆盖到博客根目录 其他主题请参照制作者自述或其他教程 你可以再用 hexo g && hexo s 检查主题是否生效 (2)连接到GitHub打开Git Bash，键入： git config --global user.name "Username" //Username更换为你的GitHub用户名 git config --global user.email "Email" //Email更换为你的GitHub注册邮箱 SSH Key生成： ssh-keygen -t rsa -C "Email" //生成 cat ~/.ssh/id_rsa.pub //查看 将生成的 以ssh-rsa开头的字符完整复制，在你的GitHub中，右上角头像下面点击 Settings - SSH and GPG keys ，新建一个SSH Key，名称任意，将你剪贴板内以ssh-rsa开头的字符整个粘贴进去，保存退出。 验证： 键入 ssh -T git@github.com若出现的信息有 Hi Username（你的用户名）即为配置成功 P.S. 这个地方注意，以后用到本地SSH的时候，均可使用此密钥，无需重置或新建。 (3) GitHub Pages的部署① 配置文件修改在 \\Blog_config.yml 中，找到 deploy: 一栏，直接改为： deploy: type: git repository: https://github.com/Username/|USERNAME|.github.io branch: master保存退出。 ② 自定义域名若已购买域名（可不备案），可在 \\Blog\\Source\\ 中创建文件 CNAME （无后缀名） 右键编辑，改为你的自定义域名，然后在你的域名DNS解析中添加一个CNAME记录，地址为|USERNAME|.github.io 若未购买域名，可将CNAME中写 |USERNAME|.github.io作为访问域名 ③ 部署在 \\Blog 中右键，Git Bash Here，键入 hexo g //生成静态页面 hexo d //部署到GitHub 完成后在浏览器中输入你的域名，正常访问即部署完成 ④ 前期部署异常的解决方案检查上述操作是否全部执行，检查各种路径和地址有没有写错，再尝试执行 npm install 等 终极解决方案：重复上述步骤，从头开始 2、主题配置博客根目录下的_config配置站点 # Site title: 你的站点名 subtitle: description: 站点简介 keywords: author: 作者名 language: zh-cn timezone: 部署 deploy: type: git repo: github: 你的github仓库地址 # coding: 你的coding仓库地址 branch: master 备份 （使用hexo b发布备份到远程仓库） backup: type: git message: backup my blog of https://honjun.github.io/ repository: # 你的github仓库地址,备份分支名 （建议新建backup分支） github: https://github.com/honjun/honjun.github.io.git,backup # coding: https://git.coding.net/hojun/hojun.git,backup 主题目录下的_config配置其中标明【改】的是需要修改部门，标明【选】是可改可不改，标明【非】是不用改的部分 # site name # 站点名 【改】 prefixName: さくら荘その siteName: hojun # favicon and site master avatar # 站点的favicon和头像 输入图片路径（下面的配置是都是cdn的相对路径，没有cdn请填写完整路径，建议使用jsdeliver搭建一个cdn啦，先去下载我的cdn替换下图片就行了，简单方便~）【改】 favicon: /images/favicon.ico avatar: /img/custom/avatar.jpg # 站点url 【改】 url: https://sakura.hojun.cn # 站点介绍（或者说是个人签名）【改】 description: Live your life with passion! With some drive! # 站点cdn，没有就为空 【改】 若是cdn为空，一些图片地址就要填完整地址了，比如之前avatar就要填https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/custom/avatar.jpg cdn: https://cdn.jsdelivr.net/gh/honjun/cdn@1.6 # 开启pjax 【选】 pjax: 1 # 站点首页的公告信息 【改】 notice: hexo-Sakura主题已经开源，目前正在开发中... # 懒加载的加载中图片 【选】 lazyloadImg: https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/loader/orange.progress-bar-stripe-loader.svg # 站点菜单配置 【选】 menus: 首页: { path: /, fa: fa-fort-awesome faa-shake } 归档: { path: /archives, fa: fa-archive faa-shake, submenus: { 技术: {path: /categories/技术/, fa: fa-code }, 生活: {path: /categories/生活/, fa: fa-file-text-o }, 资源: {path: /categories/资源/, fa: fa-cloud-download }, 随想: {path: /categories/随想/, fa: fa-commenting-o }, 转载: {path: /categories/转载/, fa: fa-book } } } 清单: { path: javascript:;, fa: fa-list-ul faa-vertical, submenus: { 书单: {path: /tags/悦读/, fa: fa-th-list faa-bounce }, 番组: {path: /bangumi/, fa: fa-film faa-vertical }, 歌单: {path: /music/, fa: fa-headphones }, 图集: {path: /tags/图集/, fa: fa-photo } } } 留言板: { path: /comment/, fa: fa-pencil-square-o faa-tada } 友人帐: { path: /links/, fa: fa-link faa-shake } 赞赏: { path: /donate/, fa: fa-heart faa-pulse } 关于: { path: /, fa: fa-leaf faa-wrench , submenus: { 我？: {path: /about/, fa: fa-meetup}, 主题: {path: /theme-sakura/, fa: iconfont icon-sakura }, Lab: {path: /lab/, fa: fa-cogs }, } } 客户端: { path: /client/, fa: fa-android faa-vertical } RSS: { path: /atom.xml, fa: fa-rss faa-pulse } # Home page sort type: -1: newer first，1: older first. 【非】 homePageSortType: -1 # Home page article shown number) 【非】 homeArticleShown: 10 # 背景图片 【选】 bgn: 8 # startdash面板 url, title, desc img 【改】 startdash: - {url: /theme-sakura/, title: Sakura, desc: 本站 hexo 主题, img: /img/startdash/sakura.md.png} - {url: http://space.bilibili.com/271849279, title: Bilibili, desc: 博主的b站视频, img: /img/startdash/bilibili.jpg} - {url: /, title: hojun的万事屋, desc: 技术服务, img: /img/startdash/wangshiwu.jpg} # your site build time or founded date # 你的站点建立日期 【改】 siteBuildingTime: 07/17/2018 # 社交按钮(social) url, img PC端配置 【改】 social: github: {url: http://github.com/honjun, img: /img/social/github.png} sina: {url: http://weibo.com/mashirozx?is_all=1, img: /img/social/sina.png} wangyiyun: {url: http://weibo.com/mashirozx?is_all=1, img: /img/social/wangyiyun.png} zhihu: {url: http://weibo.com/mashirozx?is_all=1, img: /img/social/zhihu.png} email: {url: http://weibo.com/mashirozx?is_all=1, img: /img/social/email.svg} wechat: {url: /#, qrcode: /img/custom/wechat.jpg, img: /img/social/wechat.png} # 社交按钮(msocial) url, img 移动端配置 【改】 msocial: github: {url: http://github.com/honjun, fa: fa-github, color: 333} weibo: {url: http://weibo.com/mashirozx?is_all=1, fa: fa-weibo, color: dd4b39} qq: {url: https://wpa.qq.com/msgrd?v=3&uin=954655431&site=qq&menu=yes, fa: fa-qq, color: 25c6fe} # 赞赏二维码（其中wechatSQ是赞赏单页面的赞赏码图片）【改】 donate: alipay: /img/custom/donate/AliPayQR.jpg wechat: /img/custom/donate/WeChanQR.jpg wechatSQ: /img/custom/donate/WeChanSQ.jpg # 首页视频地址为https://cdn.jsdelivr.net/gh/honjun/hojun@1.2/Unbroken.mp4，配置如下 【改】 movies: url: https://cdn.jsdelivr.net/gh/honjun/hojun@1.2 # 多个视频用逗号隔开，随机获取。支持的格式目前已知MP4,Flv。其他的可以试下，不保证有用 name: Unbroken.mp4 # 左下角aplayer播放器配置 主要改id和server这两项，修改详见[aplayer文档] 【改】 aplayer: id: 2660651585 server: netease type: playlist fixed: true mini: false autoplay: false loop: all order: random preload: auto volume: 0.7 mutex: true # Valine评论配置【改】 valine: true v_appId: GyC3NzMvd0hT9Yyd2hYIC0MN-gzGzoHsz v_appKey: mgOpfzbkHYqU92CV4IDlAUHQ 分类页和标签页配置分类页标签页配置项在\\themes\\Sakura\\languages\\zh-cn.yml里。新增一个分类或标签最好加下哦，当然嫌麻烦可以直接使用一张默认图片（可以改主题或者直接把404图片替换下，征求下意见要不要给这个在配置文件中加个开关，可以issue或群里提出来），现在是没设置的话会使用那种倒立小狗404哦。 #category # 按分类名创建 技术: #中文标题 zh: 野生技术协会 # 英文标题 en: Geek – Only for Love # 封面图片 img: https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/banner/coding.jpg 生活: zh: 生活 en: live img: https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/banner/writing.jpg #tag # 标签名即是标题 悦读: # 封面图片 img: https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/banner/reading.jpg 单页面封面配置如留言板页面页面，位于source下的comment下，打开index.md如下： --- title: comment date: 2018-12-20 23:13:48 keywords: 留言板 description: comments: true # 在这里配置单页面头部图片，自定义替换哦~ photos: https://cdn.jsdelivr.net/gh/honjun/cdn@1.4/img/banner/comment.jpg --- 单页面配置番组计划页 （请直接在下载后的文件中改，下面的添加了注释可能会有些影响）--- layout: bangumi title: bangumi comments: false date: 2019-02-10 21:32:48 keywords: description: bangumis: # 番组图片 - img: https://lain.bgm.tv/pic/cover/l/0e/1e/218971_2y351.jpg # 番组名 title: 朝花夕誓——于离别之朝束起约定之花 # 追番状态 （追番ing/已追完） status: 已追完 # 追番进度 progress: 100 # 番剧日文名称 jp: さよならの朝に約束の花をかざろう # 放送时间 time: 放送时间: 2018-02-24 SUN. # 番剧介绍 desc: 住在远离尘嚣的土地，一边将每天的事情编织成名为希比欧的布，一边静静生活的伊欧夫人民。在15岁左右外表就停止成长，拥有数百年寿命的他们，被称为“离别的一族”，并被视为活着的传说。没有双亲的伊欧夫少女玛奇亚，过着被伙伴包围的平稳日子，却总感觉“孤身一人”。他们的这种日常，一瞬间就崩溃消失。追求伊欧夫的长寿之血，梅萨蒂军乘坐着名为雷纳特的古代兽发动了进攻。在绝望与混乱之中，伊欧夫的第一美女蕾莉亚被梅萨蒂带走，而玛奇亚暗恋的少年克里姆也失踪了。玛奇亚虽然总算逃脱了，却失去了伙伴和归去之地……。 - img: https://lain.bgm.tv/pic/cover/l/0e/1e/218971_2y351.jpg title: 朝花夕誓——于离别之朝束起约定之花 status: 已追完 progress: 50 jp: さよならの朝に約束の花をかざろう time: 放送时间: 2018-02-24 SUN. desc: 住在远离尘嚣的土地，一边将每天的事情编织成名为希比欧的布，一边静静生活的伊欧夫人民。在15岁左右外表就停止成长，拥有数百年寿命的他们，被称为“离别的一族”，并被视为活着的传说。没有双亲的伊欧夫少女玛奇亚，过着被伙伴包围的平稳日子，却总感觉“孤身一人”。他们的这种日常，一瞬间就崩溃消失。追求伊欧夫的长寿之血，梅萨蒂军乘坐着名为雷纳特的古代兽发动了进攻。在绝望与混乱之中，伊欧夫的第一美女蕾莉亚被梅萨蒂带走，而玛奇亚暗恋的少年克里姆也失踪了。玛奇亚虽然总算逃脱了，却失去了伙伴和归去之地……。 --- 友链页 （请直接在下载后的文件中改，下面的添加了注释可能会有些影响）--- layout: links title: links # 创建日期，可以改下 date: 2018-12-19 23:11:06 # 图片上的标题，自定义修改 keywords: 友人帐 description: # true/false 开启/关闭评论 comments: true # 页面头部图片，自定义修改 photos: https://cdn.jsdelivr.net/gh/honjun/cdn@1.4/img/banner/links.jpg # 友链配置 links: # 类型分组 - group: 个人项目 # 类型简介 desc: 充分说明这家伙是条咸鱼 < (￣︶￣)> items: # 友链链接 - url: https://shino.cc/fgvf # 友链头像 img: https://cloud.moezx.cc/Picture/svg/landscape/fields.svg # 友链站点名 name: Google # 友链介绍 下面雷同 desc: Google 镜像 - url: https://shino.cc/fgvf img: https://cloud.moezx.cc/Picture/svg/landscape/fields.svg name: Google desc: Google 镜像 # 类型分组... - group: 小伙伴们 desc: 欢迎交换友链 ꉂ(ˊᗜˋ) items: - url: https://shino.cc/fgvf img: https://cloud.moezx.cc/Picture/svg/landscape/fields.svg name: Google desc: Google 镜像 - url: https://shino.cc/fgvf img: https://cloud.moezx.cc/Picture/svg/landscape/fields.svg name: Google desc: Google 镜像 --- 写文章配置主题集成了个人插件hexo-tag-bili和hexo-tag-fancybox_img。其中hexo-tag-bili用来在文章或单页面中插入B站外链视频，使用语法如下： {% bili video_id [page] %} 详细使用教程详见hexo-tag-bili。 hexo-tag-fancybox_img用来在文章或单页面中图片，使用语法如下： {% fb_img src [caption] %} 详细使用教程详见hexo-tag-fancybox_img To be continued…","categories":[{"name":"前端","slug":"前端","permalink":"https://miaoda.fun/categories/%E5%89%8D%E7%AB%AF/"}],"tags":[{"name":"web","slug":"web","permalink":"https://miaoda.fun/tags/web/"},{"name":"悦读","slug":"悦读","permalink":"https://miaoda.fun/tags/%E6%82%A6%E8%AF%BB/"}],"author":"苗大"},{"title":"获取质数算法：埃拉托斯特尼筛法","slug":"获取质数算法：埃拉托斯特尼筛法","date":"2020-08-11T07:00:00.000Z","updated":"2022-08-30T06:35:54.716Z","comments":true,"path":"2020/08/11/获取质数算法：埃拉托斯特尼筛法/","link":"","permalink":"https://miaoda.fun/2020/08/11/%E8%8E%B7%E5%8F%96%E8%B4%A8%E6%95%B0%E7%AE%97%E6%B3%95%EF%BC%9A%E5%9F%83%E6%8B%89%E6%89%98%E6%96%AF%E7%89%B9%E5%B0%BC%E7%AD%9B%E6%B3%95/","excerpt":"","text":"埃拉托斯特尼筛法本算法的核心思想是：给出要筛选数值的范围 n，找出 √𝑛 以内的素数 p1, p2…, p𝑘。先用 2 去筛，即把 2 留下，把 2 的倍数剔除掉；再用下一个素数，也就是 3 筛，把 3 留下，把 3 的倍数剔除掉；接下去用下一个素数 5 筛，把 5 留下，把 5 的倍数剔除掉；不断重复下去…… 如下图所示： 下面是本算法的实现代码： const primesList = function(n) { let list = []; let signs = new Uint8Array(n); for (let i = 2; i < n; i++) { if (!signs[i - 1]) { list.push(i); for (let j = i * i; j <= n; j += i) { signs[j - 1] = true; } } } return list; }; let result = primesList(100); console.log("list: " + result); console.log("count: " + result.length); 时间复杂度：O(n * loglog n) 空间复杂度：O(n) 参考资料： 埃拉托斯特尼筛法 — 维基百科","categories":[{"name":"算法","slug":"算法","permalink":"https://miaoda.fun/categories/%E7%AE%97%E6%B3%95/"}],"tags":[{"name":"技术","slug":"技术","permalink":"https://miaoda.fun/tags/%E6%8A%80%E6%9C%AF/"},{"name":"算法","slug":"算法","permalink":"https://miaoda.fun/tags/%E7%AE%97%E6%B3%95/"}],"author":"苗大"}],"categories":[{"name":"前端","slug":"前端","permalink":"https://miaoda.fun/categories/%E5%89%8D%E7%AB%AF/"},{"name":"算法","slug":"算法","permalink":"https://miaoda.fun/categories/%E7%AE%97%E6%B3%95/"}],"tags":[{"name":"前端","slug":"前端","permalink":"https://miaoda.fun/tags/%E5%89%8D%E7%AB%AF/"},{"name":"设计","slug":"设计","permalink":"https://miaoda.fun/tags/%E8%AE%BE%E8%AE%A1/"},{"name":"技术","slug":"技术","permalink":"https://miaoda.fun/tags/%E6%8A%80%E6%9C%AF/"},{"name":"angular","slug":"angular","permalink":"https://miaoda.fun/tags/angular/"},{"name":"web","slug":"web","permalink":"https://miaoda.fun/tags/web/"},{"name":"悦读","slug":"悦读","permalink":"https://miaoda.fun/tags/%E6%82%A6%E8%AF%BB/"},{"name":"算法","slug":"算法","permalink":"https://miaoda.fun/tags/%E7%AE%97%E6%B3%95/"}]}