-
Notifications
You must be signed in to change notification settings - Fork 2
/
atom.xml
1 lines (1 loc) · 141 KB
/
atom.xml
1
<?xml version="1.0" encoding="utf-8"?><feed xmlns="https://www.w3.org/2005/Atom"><title>CC的部落格</title><icon>https://jsd.onmicrosoft.cn/gh/ccknbc-backup/cdn/logo/CC.png</icon><description>CC的部落格，CC康纳百川的小窝，与你分享二三事</description><subtitle>CC康纳百川</subtitle><link href="https://blog.ccknbc.cc/atom.xml" rel="self"/><link href="https://blog.ccknbc.cc/"/><updated>2023-09-10T15:00:00.000Z</updated><id>https://blog.ccknbc.cc/</id><author><name>CC康纳百川</name></author><generator uri="https://blog.ccknbc.cc/">CC的部落格</generator><copyright>Copyright © 2020-present CC康纳百川 All rights reserved.</copyright><entry><title>你的公共电视</title><link href="https://blog.ccknbc.cc/posts/about-pts/"/><id>https://blog.ccknbc.cc/posts/about-pts/</id><published>2022-08-07T05:16:00.000Z</published><updated>2023-09-10T15:00:00.000Z</updated><content type="html"><![CDATA[<p>查看本文<a href="https://www.yuque.com/ccknbc/blog/35/"><strong>语雀</strong></a>版本【首发】，自动同步更新至<a href="https://blog.ccknbc.cc/posts/about-pts/"><strong>CC 的部落格</strong></a>！</p><p>作为一个大陆人，时常希望有一个独立于官媒的非自媒体存在，你可能会提到傲娇的“六公主”；而这次，我想和大家聊一聊这个台湾媒体中特别的存在【公共电视】</p><h2 id="关于公视">关于公视<a class="fa-solid fa-hashtag" href="#关于公视"></a></h2><h3 id="公视使命">公视使命<a class="fa-solid fa-hashtag" href="#公视使命"></a></h3><p>“公共电视”是一种电视制度， 在传播学理上有其定义与任务。</p><p>它必须有自己的频道、 自己的电台、 有自己的节目政策， 所有的播出都是为了服务公众， 提供公众必须的资讯为主要功能。</p><p>因此， 公视和宣导政令的国家电视不同， 和以广告、收视率好坏来取决节目内容的商业电视不同。</p><p>公视属于全体民众， 不专为政府或某一政党服务； 不以营利为目的， 也不受商业或利益团体左右， 公共电视，顾名思义， 是接收全民付託， 以服务公共利益为宗旨的电视媒体。</p><blockquote><p>那【公视】与 【台视】【华视】【民视】【中视】等带有明显倾向色彩的电视台有什么不同呢？台湾虽然本土面积不大，但却拥有者 300 多家电视台，在这里开电视台，真的就是靠财团砸钱。你或许知道【中视】与【中天】的老板是同一个，没错就是“旺旺”，因此你可以经常看到记者手持两家电视台的麦克风，一条新闻两台播，这样比较省钱啦，而因为具有明显的亲中色彩，两家在岛内的收视率或许并没有那么高，【中天新闻台】也只是被迫改为网络播出。</p></blockquote><blockquote><p>台湾公广集团有：公共电视，PTS Taiwan (English)，公视台语台，中华电视公司，客家电视台</p></blockquote><p>那你也就可以理解为什么【公视】经常称呼【华视】为友台，一开始我们有提到过，它并不在乎自己的收视率，因此不论你何时切到公视，都是没有广告的，这与其他频道是一个明显的区别；那上面提到过运营一家电视台真的很烧钱，公视为什么每年还有那么多自制剧，资金链从哪来？</p><h3 id="经费来源">经费来源<a class="fa-solid fa-hashtag" href="#经费来源"></a></h3><p>世界上其他国家也有公共媒体，不同于 NHK, BBC，公民需要每年像这些公共媒体强制性缴纳费用，公视经费主要来源有以下</p><blockquote><ol><li><p>公视基金会第一年得到的政府捐赠 为十二亿元新台币， 自筹款为三亿元。依据公共电视法， 政府捐赠的金额逐年递减百分之十， 至第六年以后应为第一年政府编列预算 金额的百分之五十， 因此公视自筹款负担将逐年大幅增加， 对一个肩负使命的非营利电视台而言， 无疑是一个高难度的挑战。为避免过于倚赖政府捐赠， 以增加公视财务独立性，在作法上有：</p></li><li><p>企业赞助：由公、私立机构或企业团体提供经费，赞助播出之时段或节目。“企业赞助”不同于一般广告赞助，受限于电视台的基本规范，不得促销特定商品或服务、不与节目题材有任何关联或暗示、不参与任何节目制播过程等，因此能够独立自主， 避免伴随经费而来的干预。公视节目品质精緻、立意良善， 受到许多公、私立机构、企业予以肯定，并提供经费赞助， 成为公视制作精緻节目的重要支柱。</p></li><li><p>个人捐赠：成立“公视之友”会员制度，希望汇集来自民间的力量，成为公共电视在民间的重要基础。“公视之友”认同本会理念 并以捐款的方式赞助公视，公视除制作精良的节目外， 以《公视之友》月刊做为与“公视之友”沟通的桥樑，此外亦提供“公视之友”适当的回馈，如购买本会相关产品享有折扣优惠、不定期举办专题讲座等。同时， 举办文化、教育、残障等公益活动时，邀请“公视之友”担任志工， 让公共电视提倡的理念落实到生活中。</p></li><li><p>其它财源：公视拥有各类型精緻的节目为基础，利于开发各项公共电视文化事业活动，如促销与节目相关之录影带、 图书资料、教材及副产品等， 将节目资源再利用，延伸节目的制作价值。此外， 公视摄影棚、剪辑、音效等设备，在法规允许的范围内，行有馀力时， 予以出租，供其它传播公司、大学相关科系 付费使用，以合理的租金做为硬体维护费用。公视开播以来， 积极争取企业赞助，并以节目行销、 设备出租的方式获取经费； 公共电视更透过一步一脚印的 地方巡迴服务、 各项媒体的宣传及社会大众的推荐，使“公视之友”人数迅速成长，这正代表公视的理念与品质受到肯定， 成为公视往前迈进的最大动力。</p></li></ol></blockquote><p>算下来，台湾人每年向公视提供 35 新台币的支持，因此每位台湾人都是公视的“干爸/干妈”下表是世界各地常见公共媒体</p><table><thead><tr><th><a href="http://www.pts.org.tw/"><img src="https://cdn.nlark.com/yuque/0/2022/gif/8391407/1659851509511-61e1689b-fedb-48dd-8a3e-5584f76d2f8f.gif#averageHue=%23c5daee&clientId=u68230c1f-8621-4&errorMessage=unknown%20error&from=paste&id=ud7826af0&originHeight=60&originWidth=120&originalType=url&ratio=1&rotation=0&showTitle=false&status=error&style=none&taskId=u863e0496-17b8-4aab-adb5-a92ac1684d9&title=" alt="" loading="lazy"></a></th><th>中国台湾公共電視台</th></tr></thead><tbody><tr><td><a href="http://www.bbc.com/"><img src="https://cdn.nlark.com/yuque/0/2022/gif/8391407/1659851509002-d19431c2-e660-404a-abd7-3b6263b2e451.gif#averageHue=%237c7c7c&clientId=u68230c1f-8621-4&errorMessage=unknown%20error&from=paste&id=u16940023&originHeight=40&originWidth=74&originalType=url&ratio=1&rotation=0&showTitle=false&status=error&style=none&taskId=ue895c7a1-07e2-48c5-95e0-0942cf3016c&title=" alt="" loading="lazy"></a></td><td>英國公共電視台</td></tr><tr><td><a href="http://www.pbs.org/"><img src="https://cdn.nlark.com/yuque/0/2022/gif/8391407/1659851509013-0a7fe7eb-9b1c-44cc-a6e3-02799fe76a66.gif#averageHue=%230967cd&clientId=u68230c1f-8621-4&errorMessage=unknown%20error&from=paste&id=u78819db4&originHeight=60&originWidth=120&originalType=url&ratio=1&rotation=0&showTitle=false&status=error&style=none&taskId=uabc13ab0-63e4-4176-bd0f-b4cbf66a8cf&title=" alt="" loading="lazy"></a></td><td>美國公共電視台</td></tr><tr><td><a href="http://www.nhk.or.jp/"><img src="https://cdn.nlark.com/yuque/0/2022/gif/8391407/1659851509043-65a1e1fb-3125-48eb-a3e6-ea3f8fdd5ba3.gif#averageHue=%23c5da95&clientId=u68230c1f-8621-4&errorMessage=unknown%20error&from=paste&id=ub107c86f&originHeight=60&originWidth=120&originalType=url&ratio=1&rotation=0&showTitle=false&status=error&style=none&taskId=u33a9cc16-6f99-4410-9a39-9d1f60fdabe&title=" alt="" loading="lazy"></a></td><td>日本 NHK 公共電視台</td></tr><tr><td><a href="http://www.francetv.fr/"><img src="https://cdn.nlark.com/yuque/0/2022/jpeg/8391407/1659851509506-a272ecd4-0c13-4dd1-bc47-7119a1f03e88.jpeg#averageHue=%23e5e5e5&clientId=u68230c1f-8621-4&errorMessage=unknown%20error&from=paste&id=u4d56a694&originHeight=60&originWidth=120&originalType=url&ratio=1&rotation=0&showTitle=false&status=error&style=none&taskId=u2776f34d-413d-4771-aa92-524afbce040&title=" alt="" loading="lazy"></a></td><td>法國公共電視台 <a href="http://Francetv.fr">Francetv.fr</a></td></tr><tr><td><a href="http://www.arte.tv/fr"><img src="https://cdn.nlark.com/yuque/0/2022/gif/8391407/1659851510166-fee1b7fe-673b-419b-a97a-a7bac4fdd271.gif#averageHue=%238a331d&clientId=u68230c1f-8621-4&errorMessage=unknown%20error&from=paste&id=u7f5fc25a&originHeight=28&originWidth=93&originalType=url&ratio=1&rotation=0&showTitle=false&status=error&style=none&taskId=ua1770ccc-02d6-4601-af51-acbcea62a83&title=" alt="" loading="lazy"></a></td><td>法國公共電視台 ARTE</td></tr><tr><td><a href="http://www.france24.com/en/"><img src="https://cdn.nlark.com/yuque/0/2022/jpeg/8391407/1659851510205-981cb5f1-3299-4a84-a954-e149aeb4b595.jpeg#averageHue=%23f7fef6&clientId=u68230c1f-8621-4&errorMessage=unknown%20error&from=paste&id=u9c52082d&originHeight=60&originWidth=120&originalType=url&ratio=1&rotation=0&showTitle=false&status=error&style=none&taskId=u98edd381-7ece-443c-abca-b31a01a08fe&title=" alt="" loading="lazy"></a></td><td>法國公共電視台 法國法蘭西 24</td></tr><tr><td><a href="http://www.cbc.ca/"><img src="https://cdn.nlark.com/yuque/0/2022/gif/8391407/1659851510320-229a2050-2cc6-4a05-9ca1-6c8b0cbd631f.gif#averageHue=%23cc8843&clientId=u68230c1f-8621-4&errorMessage=unknown%20error&from=paste&id=ud69bb585&originHeight=46&originWidth=120&originalType=url&ratio=1&rotation=0&showTitle=false&status=error&style=none&taskId=u9fec2be0-f439-4577-b79f-358ae49ff34&title=" alt="" loading="lazy"></a></td><td>加拿大公共電視台</td></tr><tr><td><a href="http://www.abc.net.au/"><img src="https://cdn.nlark.com/yuque/0/2022/gif/8391407/1659851510644-a877159e-a93f-41a3-9dcb-a0bb2a1e2233.gif#averageHue=%23828282&clientId=u68230c1f-8621-4&errorMessage=unknown%20error&from=paste&id=ud5708765&originHeight=46&originWidth=120&originalType=url&ratio=1&rotation=0&showTitle=false&status=error&style=none&taskId=u50bc7cb6-422b-4619-9149-6af4332b322&title=" alt="" loading="lazy"></a></td><td>澳洲公共電視台</td></tr><tr><td><a href="http://www.zdf.de/"><img src="https://cdn.nlark.com/yuque/0/2022/gif/8391407/1659851510912-5c7b1b4f-8c75-49c0-b4ca-180c5517c447.gif#averageHue=%23f2f3f2&clientId=u68230c1f-8621-4&errorMessage=unknown%20error&from=paste&id=ue551ba0e&originHeight=46&originWidth=101&originalType=url&ratio=1&rotation=0&showTitle=false&status=error&style=none&taskId=ue643163f-e0d0-4dde-a30c-27c3967765f&title=" alt="" loading="lazy"></a></td><td>德國公共電視台</td></tr><tr><td><a href="http://www.sbs.com.au/"><img src="https://cdn.nlark.com/yuque/0/2022/gif/8391407/1659851511381-0b7abf90-6756-47fc-be55-1fcae143fff9.gif#averageHue=%230d0d0d&clientId=u68230c1f-8621-4&errorMessage=unknown%20error&from=paste&id=u807baf13&originHeight=60&originWidth=120&originalType=url&ratio=1&rotation=0&showTitle=false&status=error&style=none&taskId=u02649372-76fd-4eaa-b1d0-d179343662e&title=" alt="" loading="lazy"></a></td><td>澳洲公共電視台(SBS)</td></tr><tr><td><a href="http://www.tv2.dk/"><img src="https://cdn.nlark.com/yuque/0/2022/gif/8391407/1659851511397-0dafc502-269f-4965-a17c-3018fe7c6d7a.gif#averageHue=%23828282&clientId=u68230c1f-8621-4&errorMessage=unknown%20error&from=paste&id=u84350c8a&originHeight=45&originWidth=60&originalType=url&ratio=1&rotation=0&showTitle=false&status=error&style=none&taskId=u35ab29fb-c9c5-4c37-b7ef-7795704f26d&title=" alt="" loading="lazy"></a></td><td>丹麥公共電視台</td></tr><tr><td><a href="http://www.rtve.es/"><img src="https://cdn.nlark.com/yuque/0/2022/gif/8391407/1659851511519-3220b61a-6412-40ae-8a96-2fdeb75674e0.gif#averageHue=%23babebd&clientId=u68230c1f-8621-4&errorMessage=unknown%20error&from=paste&id=u5c35c6e0&originHeight=49&originWidth=120&originalType=url&ratio=1&rotation=0&showTitle=false&status=error&style=none&taskId=uda3cb088-96ce-49e4-b3aa-e954698f46a&title=" alt="" loading="lazy"></a></td><td>西班牙公共電視台</td></tr><tr><td><a href="http://www.nrk.no/"><img src="https://cdn.nlark.com/yuque/0/2022/gif/8391407/1659851511759-d6321403-2193-4b9e-949a-22c2cf07e963.gif#averageHue=%236a6a6a&clientId=u68230c1f-8621-4&errorMessage=unknown%20error&from=paste&id=ua2908ea5&originHeight=40&originWidth=120&originalType=url&ratio=1&rotation=0&showTitle=false&status=error&style=none&taskId=u1c9bc8de-5dd5-49fd-97bc-7826561c48c&title=" alt="" loading="lazy"></a></td><td>挪威公共電視台</td></tr><tr><td><a href="http://www.svt.se/"><img src="https://cdn.nlark.com/yuque/0/2022/gif/8391407/1659851511997-9f0afbb9-360a-4ab1-b837-dea7e5f015cc.gif#averageHue=%23cdcdcd&clientId=u68230c1f-8621-4&errorMessage=unknown%20error&from=paste&id=ubce3455b&originHeight=30&originWidth=120&originalType=url&ratio=1&rotation=0&showTitle=false&status=error&style=none&taskId=uf52c997b-dece-48a4-88bd-3b005c57f82&title=" alt="" loading="lazy"></a></td><td>瑞典公共電視台</td></tr><tr><td><a href="http://www.yle.fi/"><img src="https://cdn.nlark.com/yuque/0/2022/gif/8391407/1659851512548-bf7d9c3e-b680-4e9f-857f-7d9bc44bb27e.gif#averageHue=%23dce967&clientId=u68230c1f-8621-4&errorMessage=unknown%20error&from=paste&id=u164d3d17&originHeight=54&originWidth=78&originalType=url&ratio=1&rotation=0&showTitle=false&status=error&style=none&taskId=ua8d9b5dd-f98d-4782-a732-1f32abb1b2f&title=" alt="" loading="lazy"></a></td><td>芬蘭公共電視台</td></tr></tbody></table><h3 id="创办历史">创办历史<a class="fa-solid fa-hashtag" href="#创办历史"></a></h3><div class="timeline green"><div class='timeline-item headline'><div class='timeline-item-title'><div class='item-circle'><p>公视建台历史</p></div></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>1980年</p></div></div><div class='timeline-item-content'><p>当时的行政院长孙运璿先生提出公共电视台的主张。他说，今天不做，明天会后悔。</p></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>1983年</p></div></div><div class='timeline-item-content'><p>新闻局提出公视节目制作中心计划草案，但因经费过高、人力庞大而搁置。</p></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>1984年</p></div></div><div class='timeline-item-content'><p>新闻局设立公共电视制播小组，向三家无线电视台徵用时段播出。</p></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>1986年</p></div></div><div class='timeline-item-content'><p>公共电视节目制作的任务，转由财团法人广电基金下设的公共电视节目制播组负责， 广电基金所制作的节目，仍然没有专属频道播出，在三台借用的时段经常被调动，影响观众收视权益。</p></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>1991年</p></div></div><div class='timeline-item-content'><p>行政院核定公共电视台筹备委员会设置点，公视筹委会正式运作。公视筹委会委託七位学者专家组成公共电视法草案立法小组，并经过缜密的研议，提出公共电视法草案。</p></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>1993年</p></div></div><div class='timeline-item-content'><p>行政院将公共电视法送交立法院审查。</p></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>1996年9月</p></div></div><div class='timeline-item-content'><p>一群关心公共电视的学术文化界人士 ，组成公共媒体催生联盟，结合各界支持公共电视的力量， 以促使公视法通过。</p></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>1997年5月31日</p></div></div><div class='timeline-item-content'><p>经由民间锲而不捨的游说及 立法院密集的政党协商， 公视法惊险过关，完成三读。</p></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>1998年1月</p></div></div><div class='timeline-item-content'><p>第一届公共电视董监事十八位人选经立法院推举的提名审查委员会审议通过。三月，董监事召开第一次会议，选出吴丰山先生为董事长， 贺德芬女士为常务监事。</p></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>1998年7月1日</p></div></div><div class='timeline-item-content'><p>财团法人公共电视文化事业基金会 正式成立，公共电视台并于同日开播，完成长达十八年的建台历程。</p><p>公视的未来有很长的路要走， 许多困难与险阻有待我们一一克服，而您正站在公视成长的时间轴上，见证改造省内媒体环境的长期奋战， 公视盼与您携手，共同为打造媒体的美丽新“视”界努力！</p></div></div></div><blockquote><p>公视已在 2018 年走过了 20 个年头，而“看见更好的未来”是时代赋予它的新使命，此外公视还是全台第一家试验 4K 播出的电视台</p></blockquote><h3 id="制播理念">制播理念<a class="fa-solid fa-hashtag" href="#制播理念"></a></h3><p>以多元的视野、多样的风貌和 高品质的专业制作来服务公众， 促进教育文化发展， 是全世界公共电视节目共同的特色， 也是公视奋力追求的目标。在节目规划上，公视秉持以下九大理念：</p><ol><li>真心关爱儿童的成长</li><li>尊重各族群的需求</li><li>关怀弱势团体与文化</li><li>呈现表演艺术的生命力</li><li>重视台湾生态保育</li><li>纪录台湾社会变迁及人文风貌</li><li>亲近民众的生活</li><li>展现文学之美</li><li>掌握社会脉动、开拓国际视野</li></ol><p>公视节目不以单一节目吸引大量观众， 而是透过整体节目表的安排，由多元样貌的节目来满足不同族群， 或不同爱好者的特殊需求。为了向民众提供 有别于商业逻辑的更佳选择， 公视的节目制作涵盖下列目标：提供全民终身学习的管道。增进人民对新闻事件和公共事务的瞭解，善尽媒体监督政府的第四权责任。提供重要议题和观念的分析和解释。提供人民对台湾和他国丰富文化、 历史的认知， 并培养本土关怀和国际视野。增进国际社会对台湾风土人情的瞭解。使人民接触多元的表演艺术。提供各种社会团体如少数民族、弱势团体，公平参与的机会与表达艺术和政治上的意见空间。播映和典藏重要的影视经典作品。</p><blockquote><p>因为有《公共电视法》的庇护，公视在这些年里是有制播许多优秀节目的，这里不再一一列出，光是看“广播电视金钟奖”入围获奖名单都可以知道。</p></blockquote><h3 id="公开透明">公开透明<a class="fa-solid fa-hashtag" href="#公开透明"></a></h3><p>这是公共媒体一个显著的特征，因为这个媒体是属于人民，服务人民的，并受到人们监督。所有相关信息，均可在官网查询到，不过仍然要遵循 CC 创用规则哦。</p><h2 id="频道">频道<a class="fa-solid fa-hashtag" href="#频道"></a></h2><p><img src="https://cdn.nlark.com/yuque/0/2022/jpeg/8391407/1659854675184-80b01ffc-5878-405d-a25b-522b62350b0c.jpeg#averageHue=%23fefefc&clientId=u68230c1f-8621-4&errorMessage=unknown%20error&from=paste&id=JVyyS&originHeight=46&originWidth=142&originalType=url&ratio=1&rotation=0&showTitle=false&status=error&style=none&taskId=u9b5b999b-625b-46e0-b8d0-8fac71f0ee6&title=" alt="" loading="lazy"><strong>公视主频</strong>是台湾的公共电视媒体——公共电视台（公视）的主频道，一般称呼为“公共电视”或简称为“公视”（部分节目预告片尾将本频道称呼为“公视频道”）。内容为综合台形式，特色是比其他无线台（台视、中视、华视、民视）更重视公共服务节目及弱势族群（儿童、老人、原住民族等）节目。中央气象局发布海上台风警报期间，公视主频道会在每整点前数分钟固定录影转播中央气象局台风动态说明会，也会在画面左侧开启滚动字幕报导台风最新动态及台风警报范围。公视的台标在节目播完后会由半透明变成“彩色”。2012 年 6 月 30 日中午起，无线电视数字化后定频于 26 频道。2016 年 6 月 8 日，NCC 通过公视换照和营运计划变更案；自 7 月 6 日起升级 HD 讯号播出，和客家电视台、原住民族电视台并列第四个主频道升级为高清讯号的电视台。2020 年 6 月 1 日，公视主频改为 24 小时全日播出，收播时间改为每月第 1 个周四 02:00~06:00。<a href="https://taigi.pts.org.tw/"><img src="https://cdn.nlark.com/yuque/0/2022/jpeg/8391407/1659854675734-dbdf71bf-3caa-4cfe-9bfd-7755ac6c586d.jpeg#averageHue=%23fefefb&clientId=u68230c1f-8621-4&errorMessage=unknown%20error&from=paste&id=SdEmx&originHeight=46&originWidth=190&originalType=url&ratio=1&rotation=0&showTitle=false&status=error&style=none&taskId=ueb9dc3dc-5830-4256-9972-5d325437973&title=" alt="" loading="lazy"></a><strong>公视台语台</strong>（台湾话：Kong-sī Tâi-gí-tâi）是台湾公共电视台旗下的电视频道之一，前身为 2004 年 7 月 1 日开播的“Dimo TV”、以及 2012 年 10 月 1 日更名的“公视 2 台”，2019 年 7 月 1 日改为现名，为台湾第一个以全台语播出的公共性电视频道。<a href="http://pts_3.pts.org.tw/"><img src="https://cdn.nlark.com/yuque/0/2022/jpeg/8391407/1659854675002-8f4532cf-6167-4ec2-8140-d9b5dd83f207.jpeg#averageHue=%23fdfefe&clientId=u68230c1f-8621-4&errorMessage=unknown%20error&from=paste&id=zNVDH&originHeight=46&originWidth=142&originalType=url&ratio=1&rotation=0&showTitle=false&status=error&style=none&taskId=uc1c03dd7-a80b-4b13-82de-48a8d6ca884&title=" alt="" loading="lazy"></a><strong>公视 3 台</strong>是公共电视文化事业基金会旗下的一个电视频道，也是台湾第一个高清电视频道。由公视接受行政院新闻局“公共广电与文化创意、数字电视发展两年计划”补助建置经营。2008 年 5 月 15 日睌上 8 点起开始试播，第一个播出的节目为连续剧《美味关系》。2012 年 7 月 24 日正式开播，节目内容则以外国电影、戏曲、文化艺术和体育赛事等为主。创台之初的频道名称为“HiHD”，“Hi”是“招呼”、“迎接”之意，“HD”是“High Definition”（高清）之意。2012 年 8 月 31 日起，频道名称由“HiHD”更改为“公视 HD”。2016 年 7 月 6 日凌晨两点起更名为“公视 3 台”，定位为体育赛事、艺文、各国剧集的频道。</p><h2 id="Taiwan">Taiwan+<a class="fa-solid fa-hashtag" href="#Taiwan"></a></h2><p><img src="https://cdn.nlark.com/yuque/0/2022/png/8391407/1665927913895-5e4c97c4-af3a-46e9-8b01-6f0ec5115fb5.png#averageHue=%23010100&clientId=u9391db9f-8e90-4&errorMessage=unknown%20error&from=paste&id=u795e6e6c&originHeight=100&originWidth=330&originalType=url&ratio=1&rotation=0&showTitle=false&size=6603&status=error&style=none&taskId=ufc563df7-9345-4f8c-835b-b6ec8a14fe0&title=" alt="image.png" loading="lazy">为什么要把<strong>Taiwan+<strong>分离出来说，是因为</strong>TaiwanPlus</strong>开播于 2022 年 10 月 3 日，而他的开台历程与公视有着密不可分的关系。</p><p><strong>Taiwan+</strong>（中文：<strong>台湾+</strong>），又称<strong>TaiwanPlus</strong>，为<a href="https://zh.wikipedia.org/wiki/%E5%BD%B1%E9%9F%B3%E4%B8%B2%E6%B5%81">影音串流</a><a href="https://zh.wikipedia.org/wiki/%E5%B9%B3%E5%8F%B0">平台</a>。由台湾省文化部设立、中央通讯社主责执行的“国际影音串流平台计划”，正式定名为“TaiwanPlus”，是台湾首个向国际观众宣扬台湾的英语影音新闻和节目的平台，平台于 2021 年 8 月 30 日正式上线。2022 年 6 月 9 日，平台由<a href="https://zh.wikipedia.org/wiki/%E5%85%AC%E5%85%B1%E9%9B%BB%E8%A6%96%E6%96%87%E5%8C%96%E4%BA%8B%E6%A5%AD%E5%9F%BA%E9%87%91%E6%9C%83">公共电视文化事业基金会</a>经营，并于 10 月 3 日开播电视频道。</p><p>中央社称，TaiwanPlus 是台湾有史以来最大的台湾视讯平台，目的是将台湾的节目、新闻和故事带到全世界，内容设定包括严肃的新闻议题、软性的文化及艺术主题。TaiwanPlus 旨在发出台湾的声音，向英语世界提供区域事件和问题的多媒体报导。 <a href="https://zh.wikipedia.org/wiki/%E8%B7%AF%E9%80%8F%E7%A4%BE">路透社</a>则报导，TaiwanPlus 成立时，正值中国大陆积极透过英语媒界，尤其是透过<a href="https://zh.wikipedia.org/wiki/%E4%B8%AD%E5%9C%8B%E7%92%B0%E7%90%83%E9%9B%BB%E8%A6%96%E7%B6%B2">中国环球电视网</a>(CGTN)，向外界传播其观点，并同时在打压台湾的国际空间。</p><div class="timeline blue"><div class='timeline-item headline'><div class='timeline-item-title'><div class='item-circle'><p>TaiwanPlus建台历史</p></div></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>2020年7月</p></div></div><div class='timeline-item-content'><p>台湾省文化部便开始委托公视建置英语网络影音平台，规划国际数位传播发展计划，向世界宣告台湾的经验与价值。这个名叫“国际传播数位计划”的前导计划耗资 10 亿元新台币，原计划 2021 年上线，涵盖新闻、节目、专题、纪录片等内容。外界普遍质疑该计划会令公视成为类似于我们大陆的“大外宣”机构，而公视董事冯小非曾一度于 Facebook 贴文抨击执政当局介入公视经营，罔顾公视独立性，就连公视高层也没守住应守防线。多位董事表达不满之下，公视于 7 月 27 日举行临时董事会，最终以 11 票对 4 票通过影音平台计划，时任公视总经理曹文杰、执行副总经理谢翠玉、新闻部经理苏启祯当场辞职抗议。最终，文化部于 29 日宣布终止有关“国际影音平台”委托案，但会另寻执行方式，力争次年 1 月 1 日开播。</p></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>2021年5月</p></div></div><div class='timeline-item-content'><p>该计划最终由中央社承接，正式定名为“TaiwanPlus”由福斯传媒集团亚洲区执行副总裁暨大中华区董事总经理蔡秋安担任执行长。</p></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>2021年8月30日</p></div></div><div class='timeline-item-content'><p>TaiwanPlus 影音串流平台正式上线时，也将由台湾戏剧“斯卡罗”打头阵，同步抢先在海外地区独家首播。</p></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>2022年6月9日</p></div></div><div class='timeline-item-content'><p>TaiwanPlus 与中央社合约到期后，由公视经营。</p></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>2022年8月17日</p></div></div><div class='timeline-item-content'><p>NCC 核准公视新增“TaiwanPlus”服务，以传统的电视频道形式开播，同时于其他电视平台上架，9 月 8 日起于无线数位频号 CH7 进行频道讯号测试，预计于 10 月 3 日开播。</p></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>2022年9月14日</p></div></div><div class='timeline-item-content'><p>中华电信 MOD 新增“TaiwanPlus”频道，于 10 月 3 日免订阅上架。定频于 558 台。</p></div></div><div class='timeline-item'><div class='timeline-item-title'><div class='item-circle'><p>2022年10月3日</p></div></div><div class='timeline-item-content'><p>正式开台。</p></div></div></div><p>台湾省民众最不能接受的是，参与 Taiwan Plus 平台视觉识别系统设计的 JL Design 公司，同样也接了我们的官方媒体<a href="https://zh.wikipedia.org/wiki/%E4%B8%AD%E5%9C%8B%E4%B8%AD%E5%A4%AE%E9%9B%BB%E8%A6%96%E5%8F%B0">中国中央电视台</a>旗下<a href="https://zh.wikipedia.org/wiki/%E4%B8%AD%E5%9C%8B%E4%B8%AD%E5%A4%AE%E9%9B%BB%E8%A6%96%E5%8F%B0%E7%B4%80%E9%8C%84%E9%A0%BB%E9%81%93">中国中央电视台纪录频道</a>和<a href="https://zh.wikipedia.org/wiki/%E4%B8%AD%E5%9B%BD%E7%8E%AF%E7%90%83%E7%94%B5%E8%A7%86%E7%BD%91%E7%BA%AA%E5%BD%95%E9%A2%91%E9%81%93">中国环球电视网纪录频道</a>的频道包装设计。2022 年 2 月，外媒驻台记者 Sam Reynolds 发现，TaiwanPlus 影音平台流量少得可怜，实在未能达到“宣扬台湾”效果。<a href="https://zh.wikipedia.org/wiki/%E5%8F%B0%E7%81%A3%E6%B0%91%E7%9C%BE%E9%BB%A8_(2019%E5%B9%B4)">民众党</a>对此批评，该平台无助于把台湾特色行销到世界。Taiwan Plus 软开台(Soft launch)一年后，Taiwan Plus App 下载约十二万次，相较当初设定百万人次，达成率仅一成多，引起<a href="https://zh.wikipedia.org/wiki/%E4%B8%AD%E5%9C%8B%E5%9C%8B%E6%B0%91%E9%BB%A8">国民党</a>立委<a href="https://zh.wikipedia.org/wiki/%E8%90%AC%E7%BE%8E%E7%8E%B2">万美玲</a>质疑。国民党立委<a href="https://zh.wikipedia.org/wiki/%E6%9E%97%E5%A5%95%E8%8F%AF">林奕华</a>和<a href="https://zh.wikipedia.org/wiki/%E9%84%AD%E6%AD%A3%E9%88%90">郑正钤</a>亦抨击，TaiwanPlus 的电视频道没有法源依据，“都是政府主导，要什么就要什么，没法源就要硬干”。</p><h2 id="公视转型之路">公视转型之路<a class="fa-solid fa-hashtag" href="#公视转型之路"></a></h2><p>本部分为后续更新，“公视+”串流影音平台已于 2023 年 7 月 26 日完成改版升级，这在公视的 2023 计划之中，可以看到公视的野心很大，又或者是说数位平台对传统媒体的冲击，使之压力倍增。</p><p><strong>首先我们来看一下 23 年的变化</strong></p><h3 id="公广愿景">公广愿景<a class="fa-solid fa-hashtag" href="#公广愿景"></a></h3><p>感动台湾民众、跃动国际</p><h3 id="公广使命">公广使命<a class="fa-solid fa-hashtag" href="#公广使命"></a></h3><ol><li>因应数字挑战，开展多平台公共服务。</li><li>推动永续创新，带动影视音产业发展。</li><li>提供高品质、可信赖信息，引领优质信息生态。</li><li>制作高共鸣、受喜爱内容，共创台湾人日常美好。</li><li>在地深耕，扣紧台湾脉动，促进公民社会发展。</li><li>服务弱势，推展终身学习，丰富多元文化。</li><li>连结国际，传递台湾价值。</li></ol><h3 id="公广三年目标">公广三年目标<a class="fa-solid fa-hashtag" href="#公广三年目标"></a></h3><ol><li>推动公共电视法完成修法，奠定公广集团发展所需之法制基础。</li><li>加速数字转型，公视+成为台湾人最常使用的本土 OTT 影音平台。</li><li>完成阶段性组织再造，强化经营效能及数位管理机制。</li><li>树立新闻生态标竿，公广集团的频道及平台成为各收视族群最信赖的媒体品牌。</li><li>扮演影视产业活水，公广集团带动台湾影视产业走出新路，耀眼国际。</li><li>平衡台湾区域发展，公广集团南部制作中心成为南台湾影视产业发展的关键基地。</li><li>提升多元族群服务，其中台语台与客家台成为多元文化数字服务的第一品牌。</li><li>建构国际传播网络，TaiwanPlus 成为具国际影响力的媒体品牌。</li></ol><h3 id="策略方针">策略方针<a class="fa-solid fa-hashtag" href="#策略方针"></a></h3><ol><li>凝聚并提出本会关于公视法修法意见，营造修法的有利环境与社会支持。</li><li>开拓财源、整合资源，挹注内容产制，包括发展异业/同业多型态策略合作模式，引导产业资金进场。</li><li>强化集团成员彼此之间的策略合作与资源整合，发挥集团整合综效。</li><li>开发本土 IP，创造多元应用。</li><li>制作具台湾特色之科普、媒体素养等教育性节目，建立儿童与青少年学习领域的领导地位。</li><li>争取提高台语台、客家台经费，强化其数字服务，并提升内容产制的质量。</li><li>强化制播多语言、多族群新闻与节目，展现公共媒体的多元价值与公共性优势。</li><li>推动数字优先、员工为本的组织改造及教育训练，并扩大数字内容及服务的资源配置。</li><li>增加公广集团新闻资讯产制的资源投入，特别是数字服务的经费与人力。</li><li>扩大公视+平台规模，以多元、动态的营运模式，扩大平台触及率与影响力。</li><li>强化 PeoPo 公民新闻平台的社区连结，成为地方公共利益资讯的枢纽。</li><li>深化公众参与，开展内容产制、决策咨询的线上参与机制。</li><li>扩大与全球公共媒体的交流，互相取经，并发展合作关系。</li><li>顺应世界局势变化，制播相关节目提升台湾人之国际观。</li></ol><h3 id="升级公视-平台-开展数位优先行动">升级公视+平台 开展数位优先行动<a class="fa-solid fa-hashtag" href="#升级公视-平台-开展数位优先行动"></a></h3><ol><li>成立数字内容部，内容制作以多元平台运用出发</li></ol><p>2023 年公视强调数字优先，进行组织改造，成立数字内容部，晋用专业人才，使节目内容可以触达到更多不同的观众。 公视自许不再只是电视台，而将自我定位为内容提供者，节目制作之初，就要为各种不同的平台设计不同的应用方式与内容。</p><ol start="2"><li>展开数字优先行动，公视节目于公视+首播</li></ol><p>公视拥有在地内容的共鸣点优势，每年更新 3,000 小时串流影音任意选，以成为台湾人最常使用的本土 OTT 平台为目标，规划提供五大类型内容：（1） 戏剧影集：收录历年公视自制之单元剧与影集，不管是 1998 年周杰伦的「百里香煎鱼 | 学生剧展》或是 2023 年安心亚的「牛车来去」，巨星偶像云集都在公视+。（2） 纪录片：长期关怀台湾文化并关注世界趋势，从网红文化（为寂寞在唱歌| 公视纪实）到ㄧ带ㄧ路对台湾的影响（被偷走的国家 | 公视主题之夜 show），公视+ 让你更了解我们的世界。（3） 儿童与青少年：全亚洲第一个为儿童举办的电视电影影展之《国际儿童影展》已于 3 月上线策展，并以儿童情绪及家庭」及「战争中的儿童」为主题展出来自世界各地的精彩作品。 本系列全网免费，适合合家观赏。（4） 生活新知：老牌深度行脚节目「浩克漫游第五季」即将上线，且于中午 12：00 点上架优先频道播出。（5） 人文艺术：举凡传统戏曲、歌舞剧、舞台剧、实验剧场、古典交响乐，公视+ 提供最全方位的艺文演出。</p><ol start="3"><li>公视+改版服务升级，多萤收看不错过任何精彩时刻</li></ol><p>2023 年公视+改版，采行以下混合型营运模式 ：（1） 免费内容为主力，活化公视片库，价值再利用，同时网罗在地化内容。（2） 增加 SVOD（Subscription Video on Demand）订阅制随选视讯方案，提升用户黏着度。（3） 增加多国字幕功能，扩大服务更多受众。（4） 增加 TV APP 开发，提供家用电视 4K 投放服务。</p><h3 id="2022-年度报告">2022 年度报告<a class="fa-solid fa-hashtag" href="#2022-年度报告"></a></h3><p>那今年 CC 发现公视各大网站均做了升级，体验良好，图片转为 webp，新闻网引入 PWA 等等，可以看到公视在数位平台的投入，也侧面反映了数字化确实对传统媒体是一种挑战。另外公视也在加强国际合作，特别是泰国和其他东南亚国家，也可看到《天生一对》在公视播出，《我的婆婆怎么那么可爱》泰语版在泰国公视播出等等。此外扩大东南亚语新闻内容与服务，将越南语新闻、印尼语新闻、泰语新闻由原每日每语 5 分钟增加至 10 分钟，并全面转型为主播播报型态。并不定期制作网路版新闻论坛，深度讨论新住民、移工相关时事。另外对于儿少类节目也加大制播投入，总之，可以看出公视想透过新闻、节目与活动接轨国际。另外 CC 查看了 2022 年年报告，看到透过协调、资源整合、效果极大化，公广集团绝对拥有台湾即战力最强的新闻团队。不管是公视主频，台语台，还是 TaiwanPlus（华视新闻资讯台除外，毕竟 97.23%的事件都在播新闻），制播时长新闻事实依旧遥遥领先，客家台因为要服务更针对性的群体，所以生活资讯类占大头，当然这些数据都完美体现了公广媒体的存在价值。<img src="https://cdn.nlark.com/yuque/0/2023/png/8391407/1694356494360-c1b3618d-ef49-4e03-a497-39bbf1e66332.png#averageHue=%23f5e8d2&clientId=ub7a3789c-0750-4&from=paste&height=595&id=u016d656d&originHeight=744&originWidth=1648&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=211534&status=done&style=none&taskId=ub0cd1dc4-b5c3-433e-8be5-e08eeede11b&title=&width=1318.4" alt="image.png" loading="lazy"><img src="https://cdn.nlark.com/yuque/0/2023/png/8391407/1694357083384-a6ec37db-953a-4ade-be3e-b16887d72718.png#averageHue=%23f7d5ba&clientId=ub7a3789c-0750-4&from=paste&height=550&id=u019ce202&originHeight=687&originWidth=1691&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=202041&status=done&style=none&taskId=u16121eda-5a59-40e3-9bf8-36cf20ea36d&title=&width=1352.8" alt="image.png" loading="lazy"><img src="https://cdn.nlark.com/yuque/0/2023/png/8391407/1694356989518-668a5293-cc11-428e-aed3-d063af24f7b2.png#averageHue=%23f5eaad&clientId=ub7a3789c-0750-4&from=paste&height=570&id=ua188a4cd&originHeight=712&originWidth=1714&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=154280&status=done&style=none&taskId=u3e50e3fb-4f41-4854-a9bc-ac2d8c60fa6&title=&width=1371.2" alt="image.png" loading="lazy"><img src="https://cdn.nlark.com/yuque/0/2023/png/8391407/1694357196469-d0416c3e-b5d1-4f71-b271-bb8c4e29180d.png#averageHue=%23dac398&clientId=ub7a3789c-0750-4&from=paste&height=598&id=ucd86d3dc&originHeight=747&originWidth=747&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=130542&status=done&style=none&taskId=ub8ff99a7-1b82-4e52-b7c3-719ccd3d5f7&title=&width=597.6" alt="image.png" loading="lazy"></p><h2 id="我的观点">我的观点<a class="fa-solid fa-hashtag" href="#我的观点"></a></h2><blockquote><p>时至今日，如果站在台湾的角度看问题，公视真的做到了它该做的吗？</p></blockquote><p>答案是确实做到了，从历年来制播表现与获奖记录，公视人为台湾电视留下了很多优秀的节目</p><p>我记得前两年，在台语台开台的时候，对 2003 年的戏剧《后山日先照》做了修复，张美瑶确实让我为之流泪；这样的例子很多，《一把青》，《你的孩子不是你的孩子》，《我们与恶的距离》，《生死接线员》，《噬罪者》等优秀的电视剧；《公视电影院，《公视人生剧展》，《学生剧展》，《新创电影》，《听听看》，《有话好说》等一系列节目均出自公视，他会给很多新人机会，也造就了经典，“水果奶奶”应该是许多人的回忆。</p><p>另外公视的频道包装也是很好看的，算是很有风格的 ID</p><blockquote><p>如果不被政党介入，那么也就不会有“公视门”事件？</p></blockquote><p>这个东西很难讲，我一个没参加过什么选举的人也不太好说，但有一点，公视确实会受执政党影响，而公视董事会是否能坚持住底线，又或者说公视法能不能保护公视不被外部势力侵入这个需要进一步观察。</p><blockquote><p>如果它绿了，它真的还算中立吗？</p></blockquote><p>从各个节目来看，台湾媒体一直是开放自由的状态，不论你是何种立场，均可以畅所欲言，允许不同的声音才有进步</p><p>而你看公视新闻会与其他台会感觉有明显差异，首先英语，越南语，泰语，台语，手语等新闻的播出是一种创新的国际化尝试，新闻内容也不局限于鸡毛蒜皮的小事，主播在播报时也不太会有个人立场的介入，因此算得上中规中矩。</p><blockquote><p>大陆是否有会有全国性的公共媒体？</p></blockquote><p>我觉得不太好说，至少目前这个阶段我觉得先把节目分级制度搞定比较重要，不要一刀切，允许更多的创作自由才有更多优秀的作品。我一直相信我们大陆的电影，电视或者综艺都可以做的更好，只是目前限制条件过多受到影响较大。</p><hr><p>最后，希望两岸早日完成和平统一，落叶归根！</p>]]></content><summary type="html">作为一个大陆人，时常希望有一个独立于官媒的非自媒体存在，而这次，我想和大家聊一聊这个台湾媒体中特别的存在【公共电视】（更新公视数位转型部分）</summary><category term="台湾" scheme="https://blog.ccknbc.cc/categories/%E5%8F%B0%E6%B9%BE/"/><category term="台湾" scheme="https://blog.ccknbc.cc/tags/%E5%8F%B0%E6%B9%BE/"/><comments>https://blog.ccknbc.cc/posts/about-pts/#post-comment</comments></entry><entry><title>Hexo浏览器定向推送文章更新</title><link href="https://blog.ccknbc.cc/posts/hexo-webpushr-notification/"/><id>https://blog.ccknbc.cc/posts/hexo-webpushr-notification/</id><published>2022-10-04T16:00:00.000Z</published><updated>2023-08-29T05:05:00.000Z</updated><content type="html"><![CDATA[<p>查看本文<a href="https://www.yuque.com/ccknbc/blog/37/"><strong>语雀</strong></a>版本【首发】，自动同步更新至<a href="https://blog.ccknbc.cc/posts/hexo-webpushr-notification/"><strong>CC 的部落格</strong></a>！</p><p>两年前，我刚开始使用<code>Hexo</code>的时候，写了一篇文章<a href="https://blog.ccknbc.cc/posts/implementation-of-simple-browser-update-push/">简单浏览器更新推送的实现</a>，最近登录<a href="https://www.webpushr.com/">webpushr</a>控制台，发现其支持按话题<code>topic</code>指定推送了，而原来的插件一直没有更新，且对个人的写作习惯不是很友好，所以对原插件进行了修改，并发布到了<code>NPM</code></p><p>欢迎大家前往<a href="/sub">订阅页面</a>选择合适的订阅方式，关于邮件订阅，现已支持分类订阅</p><h2 id="安装">安装<a class="fa-solid fa-hashtag" href="#安装"></a></h2><p>推荐使用 <code>npm</code> 以插件形式安装</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i hexo-webpushr-notification</span><br></pre></td></tr></table></figure><h3 id="自定义修改">自定义修改<a class="fa-solid fa-hashtag" href="#自定义修改"></a></h3><p>当然你也可以自定义修改<a href="https://github.com/Rock-Candy-Tea/hexo-webpushr-notification/blob/main/webpushr.js">webpushr.js</a>文件后，再安装相关需要依赖，然后将文件放到<code>Hexo/scripts/</code>目录下即可正常运行，CC 本人亦是如此对于 0.2.0 以上版本，您只需要在 Hexo 所在目录安装 axios 即可，这样测试相较于安装 GitHub 更方便（以及欢迎 PR ）</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i axios</span><br></pre></td></tr></table></figure><h2 id="使用">使用<a class="fa-solid fa-hashtag" href="#使用"></a></h2><p>在你的 Hexo 根目录配置文件 <code>_config.yml</code>中添加如下内容，可按需配置，建议前往 <a href="https://github.com/Rock-Candy-Tea/hexo-webpushr-notification#readme">README</a> 查看最新配置</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">webpushr:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"> <span class="attr">webpushrKey:</span> <span class="string">"webpushrKey"</span></span><br><span class="line"> <span class="attr">webpushrAuthToken:</span> <span class="string">"webpushrAuthToken"</span></span><br><span class="line"> <span class="comment"># 出于安全考虑，建议将上述两个重要参数添加至系统全局环境变量，并删除或注释掉此处配置</span></span><br><span class="line"> <span class="comment"># 否则可在网页端向访问者或订阅用户发送推送 https://www.webpushr.com/api-playground</span></span><br><span class="line"> <span class="comment"># 例如GitHub Actions环境变量配置，参数名不变，密钥名自定义，可参考如下</span></span><br><span class="line"> <span class="comment"># env:</span></span><br><span class="line"> <span class="comment"># webpushrKey: ${{ secrets.WEBPUSHR_KEY }}</span></span><br><span class="line"> <span class="comment"># webpushrAuthToken: ${{ secrets.WEBPUSHR_AUTH_TOKEN }}</span></span><br><span class="line"> <span class="comment"># 如果您的仓库私有，则无需担心此问题</span></span><br><span class="line"></span><br><span class="line"> <span class="attr">trackingCode:</span> <span class="string">"trackingCode"</span></span><br><span class="line"> <span class="attr">icon:</span> <span class="string">"https://.../192.png"</span> <span class="comment"># 必须为 HTTPS 以及 192*192 png图片</span></span><br><span class="line"> <span class="comment"># auto_hide: false # 默认为 1，代表true，即自动隐藏</span></span><br><span class="line"> <span class="comment"># sort: "date" # 默认为updated，即只要最新文章更改了更新时间即推送新文章，改为date即文章第一次发布时间</span></span><br><span class="line"> <span class="comment"># delay: "0" # 延时推送，考虑到CDN缓存更新，默认定时为在 hexo d 10分钟后推送，单位为分钟（最短延时为5分钟，设置 0 则会立即推送）</span></span><br><span class="line"> <span class="comment"># expire: "15d" # 推送过期时长，默认值为7天，格式如下：'5m'代表5分钟,'5h'代表5小时, '5d'代表5天.</span></span><br><span class="line"> <span class="comment"># image: # 默认为文章封面，Front-matter 属性为'cover'(butterfly主题友好选项)，如果您没有定义默认封面或此属性，请在这里设置默认image</span></span><br><span class="line"> <span class="attr">action_buttons:</span> <span class="comment"># 如果你需要额外自定义按钮 可按照如下格式：</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">title:</span> <span class="string">阅读全文</span> <span class="comment"># 当 title 未配置时 默认值为 “前往查看”</span></span><br><span class="line"> <span class="comment"># url: # 当 url 未配置时 默认值为 最新文章链接</span></span><br><span class="line"> <span class="bullet">-</span> <span class="attr">title:</span> <span class="string">订阅页面</span></span><br><span class="line"> <span class="attr">url:</span> <span class="string">https://blog.ccknbc.cc/sub/</span></span><br><span class="line"> <span class="comment"># 当 action_buttons 未定义时也默认保留了一个“前往查看”按钮，除非设置为 false</span></span><br><span class="line"> <span class="comment"># action_buttons: false # 当设为 false 则不显示额外的按钮，因为隐藏按钮即为当前文章链接</span></span><br><span class="line"></span><br><span class="line"> <span class="comment"># 以下配置为按订阅主题推送给不同订阅用户，请按照数组形式，一一对应，具体位置请看使用文档</span></span><br><span class="line"> <span class="attr">categories:</span> [<span class="string">工作</span>, <span class="string">博客</span>, <span class="string">工具</span>, <span class="string">生活</span>, <span class="string">音乐</span>, <span class="string">学习</span>]</span><br><span class="line"> <span class="attr">segment:</span> [<span class="string">"484223"</span>, <span class="string">"484224"</span>, <span class="string">"484225"</span>, <span class="string">"484226"</span>, <span class="string">"484227"</span>, <span class="string">"484229"</span>]</span><br><span class="line"> <span class="attr">endpoint:</span> <span class="string">segment</span> <span class="comment"># 可选配置 all / segment / sid</span></span><br><span class="line"> <span class="comment"># 默认为 segment，即根据不同主题推送细分，同时配置上述选项</span></span><br><span class="line"> <span class="comment"># 例如 all，即推送至所有用户；针对本地测试，建议只推送给单个用户即自己，同时设置下方的 sid 值</span></span><br><span class="line"> <span class="comment"># 您也可以将segment 设置为 all-users 对应的ID，同样也可以实现推送至所有用户</span></span><br><span class="line"> <span class="attr">sid:</span> <span class="string">"119810055"</span> <span class="comment"># 单个用户ID 可在控制台查看 https://app.webpushr.com/subscribers</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"> <span class="comment"># 此外，在文章 Front-Matter 处</span></span><br><span class="line"> <span class="comment"># 可覆盖 auto_hide 和 expire 配置，针对需要特别提醒文章可以设置不自动隐藏及过期时间延长等操作</span></span><br><span class="line"> <span class="comment"># 以及可指定schedule参数（例如：schedule: 2022-10-01 00:00:00），定时推送</span></span><br><span class="line"> <span class="comment"># 当文章头设置 webpushr: false 时，可关闭本篇文章推送，此参数主要防止久远文章更改更新时间后自动推送</span></span><br></pre></td></tr></table></figure><ol><li>前往 webpushr 控制台获取如下参数，注册的时候可能会遇到一点困难，中国大陆用户需要科学上网来加载验证服务）</li><li>关于注册及一些具体内容，可以看之前的文章 <a href="https://blog.ccknbc.cc/posts/implementation-of-simple-browser-update-push/">简单浏览器更新推送的实现</a></li><li>依次点击 <code>Integration</code> > <code>REST API Keys</code>，即可看到你的<code>webpushrKey</code> 及 <code>webpushrAuthToken</code></li><li>依次点击 <code>Setup</code> > <code>TrackingCode</code>，可以看到如下代码</li></ol><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><!-- start webpushr tracking code --></span><br><span class="line"> <span class="language-xml"><span class="tag"><<span class="name">script</span>></span><span class="language-javascript">(<span class="keyword">function</span>(<span class="params">w,d, s, id</span>) {<span class="keyword">if</span>(<span class="title function_">typeof</span>(w.<span class="property">webpushr</span>)!==<span class="string">'undefined'</span>) <span class="keyword">return</span>;w.<span class="property">webpushr</span>=w.<span class="property">webpushr</span>||<span class="keyword">function</span>(<span class="params"></span>){(w.<span class="property">webpushr</span>.<span class="property">q</span>=w.<span class="property">webpushr</span>.<span class="property">q</span>||[]).<span class="title function_">push</span>(<span class="variable language_">arguments</span>)};<span class="keyword">var</span> js, fjs = d.<span class="title function_">getElementsByTagName</span>(s)[<span class="number">0</span>];js = d.<span class="title function_">createElement</span>(s); js.<span class="property">id</span> = id;js.<span class="property">async</span>=<span class="number">1</span>;js.<span class="property">src</span> = <span class="string">"https://cdn.webpushr.com/app.min.js"</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> fjs.<span class="property">parentNode</span>.<span class="title function_">appendChild</span>(js);}(<span class="variable language_">window</span>,<span class="variable language_">document</span>, <span class="string">'script'</span>, <span class="string">'webpushr-jssdk'</span>));</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="title function_">webpushr</span>(<span class="string">'setup'</span>,{<span class="string">'key'</span>:<span class="string">'BKOlpbdgvBCWXqXI6PtsUzobY7TLV9gwJU8bzMktrwfrSERg_xnLvbjpdw8x2GmFmi1ZcLTz0ni6OnX5MAwoM58'</span> });</span><span class="tag"></<span class="name">script</span>></span></span></span><br><span class="line"> <!-- end webpushr tracking code --></span><br></pre></td></tr></table></figure><p>最后一行<code>BKOlpbdgvBCWXqXI6PtsUzobY7TLV9gwJU8bzMktrwfrSERg_xnLvbjpdw8x2GmFmi1ZcLTz0ni6OnX5MAwoM58</code> 就是你的 <code>trackingCode</code></p><p><strong>注意</strong>：因权限问题，本地测试时(<code>hexo s</code>)可能不会显示弹窗，但如果你配置了小铃铛，小铃铛会显示</p><h2 id="额外配置">额外配置<a class="fa-solid fa-hashtag" href="#额外配置"></a></h2><p>因官方 sw 脚本注册后，我们无法注册自己的 sw 脚本，但官方提供了配置，方便我们使用 sw 的缓存，拦截请求等功能</p><p>首先在配置项中添加 <code>sw_self: true </code>配置，开启自行注册 sw（默认用户不用添加或者设为 <code>false</code>）</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">webpushr:</span></span><br><span class="line"> <span class="attr">sw_self:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure><p>另外，你还需要在你的脚本文件（例如<code>sw.js</code>）中引入</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">importScripts</span>(<span class="string">"https://cdn.webpushr.com/sw-server.min.js"</span>);</span><br></pre></td></tr></table></figure><p>完成这些你就可以自行注册你的<code>sw</code>脚本了，如果你需要了解如何编写或注册<code>service worker</code>脚本，可以参考以下文章或项目<a href="https://kmar.top/posts/73014407/">hexo-swpp</a><br><a href="https://blog.cyfan.top/p/c0af86bb.html">Service Worker</a><br><a href="https://clientworker.js.org/">clientworker</a><br><a href="https://github.com/GoogleChrome/workbox">Workbox</a></p><h2 id="自定义">自定义<a class="fa-solid fa-hashtag" href="#自定义"></a></h2><p>个人建议将控制台右上角小铃铛 🔔 里全部配置一遍以获得更好的效果</p><p>你需要自定义一些参数才可以使用根据不同主题，按照订阅者订阅话题推送功能（目前根据个人需求是这个设置，默认行为为当未匹配到对应分类时不推送文章，而不是向所有用户推送文章，当然你也可以配置目标为所有用户）</p><p>在控制台，点击<code>Setup</code>><code>Opt-In Prompt</code> ，向下滑动打开<code>Enable Topics</code>（小铃铛样式无此选项，因此推荐您使用前两种样式），并新增几个主题，对应你想推送的文章分类即可</p><p>然后点击<code>Users</code>><code>Segments</code> ，即可获取对应的<code>segment</code>关系，依次填入配置项即可</p><h2 id="工作原理">工作原理<a class="fa-solid fa-hashtag" href="#工作原理"></a></h2><p>当你运行<code>hexo generate</code>插件会在<code>public</code> 目录生成 <code>newPost.json</code> 这样一个文件. <code>newPost.json</code> 包含了一些你想推送的新文章相关信息，示例格式如下</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"title"</span><span class="punctuation">:</span> <span class="string">"Hexo浏览器定向推送文章更新"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"updated"</span><span class="punctuation">:</span> <span class="string">"2023-04-22T20:25:00+08:00"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"message"</span><span class="punctuation">:</span> <span class="string">"这一次，CC的部落格可以根据读者订阅主题定向推送了，并且实现了NPM插件化"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"target_url"</span><span class="punctuation">:</span> <span class="string">"https://blog.ccknbc.cc/posts/hexo-webpushr-notification/"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"image"</span><span class="punctuation">:</span> <span class="string">"https://pic1.afdiancdn.com/user/8a7f563c2e3811ecab5852540025c377/common/d2a947d48815ed24936a919873b97841_w1366_h768_s31.png"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"categories"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"博客"</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"schedule"</span><span class="punctuation">:</span> <span class="string">"2023-06-13T15:16:41.187Z"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"expire"</span><span class="punctuation">:</span> <span class="string">"7d"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"auto_hide"</span><span class="punctuation">:</span> <span class="string">"1"</span></span><br><span class="line"><span class="punctuation">}</span></span><br></pre></td></tr></table></figure><p>而他的来源就是我们在文章开头<code>Front-Matter</code>自定义的那些属性，而本插件针对<code>Butterfly</code>主题做了针对性修改，您也可以在您的模板文件目录下修改文章模板文件(<code>Hexo/scaffolds/post.md</code>)，主要针对性参数如下</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">date:</span></span><br><span class="line"><span class="attr">updated:</span></span><br><span class="line"><span class="attr">schedule:</span> <span class="string">对应配置项中定时推送时间</span></span><br><span class="line"><span class="attr">auto_hide:</span> <span class="string">对应配置项中是否自动隐藏</span></span><br><span class="line"><span class="attr">expire:</span> <span class="string">对应配置项中过期时间</span></span><br><span class="line"><span class="attr">categories:</span> <span class="string">文章分类</span></span><br><span class="line"><span class="attr">description:</span> <span class="string">对应配置项中message，即文章描述</span></span><br><span class="line"><span class="attr">cover:</span> <span class="string">对应配置项中image，默认选取文章封面</span></span><br></pre></td></tr></table></figure><p>如果你的主题不是采用默认的<code>date</code> <code>updated</code> 参数，记得补充，因为这是判断最新文章的依据</p><p>如果你习惯了使用截断的方式，也无需配置<code>description</code>继续使用，示例如下，注意<code><!-- more --></code></p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: Hexo使用Web Push Notification 浏览器通知推送</span><br><span class="line">tags:</span><br><span class="line"><span class="bullet"> -</span> hexo</span><br><span class="line"><span class="bullet"> -</span> 服务器推送技术</span><br><span class="line"><span class="bullet"> -</span> push notifications</span><br><span class="line">categories:</span><br><span class="line"><span class="bullet"> -</span> 开发</span><br><span class="line">comments: true</span><br><span class="line">abbrlink: 98ae9e55</span><br><span class="line"><span class="section">date: 2020-02-26 10:00:00</span></span><br><span class="line"><span class="section">---</span></span><br><span class="line"></span><br><span class="line">Web Push Notification 是怎么工作的？个人博客为什么要使用它？如何使用它？</span><br><span class="line"></span><br><span class="line"><!-- more --></span><br></pre></td></tr></table></figure><p>当执行 <code>hexo deploy</code>命令时，插件会比较在线版本和本地版本<code>newPost.json</code>中最新文章更新时间是否一致，如果不同，则插件将推送最新文章更新通知（默认为十分钟后推送）</p><p><strong>注意</strong>：如果您是第一次使用本地测试应该看到</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">INFO 无文章更新 或 为首次推送更新</span><br></pre></td></tr></table></figure><p>这是正常现象，因为此时你的网站还没有<code>newPost.json</code>这个文件，后续有更新时将正常推送，你可以先推送一次，再修改更新时间测试一次，当然建议测试目标选择自己，即 sid 选项配置</p><p>当然如果您在使用过程中有什么问题或遇到了 Bug 也欢迎随时在评论区或<a href="https://github.com/Rock-Candy-Tea/hexo-webpushr-notification/issues">issues</a>反馈，当然因为本人是菜鸡，所以有大佬 PR 最好了</p><h2 id="推送效果">推送效果<a class="fa-solid fa-hashtag" href="#推送效果"></a></h2><p>因为我是通知自动隐藏后才截图，所以大致效果如下所示<img src="https://cdn.nlark.com/yuque/0/2022/png/8391407/1664951686275-f37cb76d-34f6-40ed-94c6-9bed130d0605.png#averageHue=%23bec0b3&clientId=ub7fa2e19-f596-4&errorMessage=unknown%20error&from=paste&height=402&id=u898a4c3c&originHeight=502&originWidth=412&originalType=binary&ratio=1&rotation=0&showTitle=false&size=165943&status=error&style=none&taskId=u3d6496ee-c850-4052-978a-8c49a9055ca&title=&width=329.6" alt="image.png" loading="lazy"></p><h2 id="后续计划">后续计划<a class="fa-solid fa-hashtag" href="#后续计划"></a></h2><ul class="contains-task-list"><li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"> 兼容自定义<code>Service Work</code>的功能，因为<code>webpushr-sw.js</code>优先注册的原因，只能有一个 <code>sw</code>注册，无法注册自己编写脚本。</li><li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"> 支持参数更多的可自定义，启用或关闭。例如不延时，立即发送；不显示按钮（因为默认就是跳转到文章）等</li><li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"> 目前的判断逻辑，虽然可以根据更新时间来判断，但如果很久之前的文章翻新，只要更新时间最新，也会触发推送，主要针对 updated 方式，还没想到好的解决办法，目前就是确认需要推送才更改更新时间咯</li><li class="task-list-item"><input class="task-list-item-checkbox" disabled="" type="checkbox"> 优化代码，减少代码量</li></ul>]]></content><summary type="html">这一次，CC的部落格可以根据读者订阅主题定向推送了，并且实现了NPM插件化</summary><category term="博客" scheme="https://blog.ccknbc.cc/categories/%E5%8D%9A%E5%AE%A2/"/><category term="博客" scheme="https://blog.ccknbc.cc/tags/%E5%8D%9A%E5%AE%A2/"/><category term="工具" scheme="https://blog.ccknbc.cc/tags/%E5%B7%A5%E5%85%B7/"/><comments>https://blog.ccknbc.cc/posts/hexo-webpushr-notification/#post-comment</comments></entry><entry><title>你以为 AddThis 只是个分享工具吗？</title><link href="https://blog.ccknbc.cc/posts/the-real-addthis/"/><id>https://blog.ccknbc.cc/posts/the-real-addthis/</id><published>2021-05-15T13:00:00.000Z</published><updated>2023-06-25T12:44:00.000Z</updated><content type="html"><![CDATA[<p>本文首发在<a href="https://www.yuque.com/ccknbc/blog/26/"><strong>语雀</strong></a>，自动同步更新至<a href="https://blog.ccknbc.cc/the-real-addthis/"><strong>CC 的部落格</strong></a></p><h2 id="本文作废">本文作废<a class="fa-solid fa-hashtag" href="#本文作废"></a></h2><h2 id="Notice-of-Termination-of-AddThis-Services">Notice of Termination of AddThis Services.<a class="fa-solid fa-hashtag" href="#Notice-of-Termination-of-AddThis-Services"></a></h2><h3 id="What’s-Changing"><strong>What’s Changing?</strong><a class="fa-solid fa-hashtag" href="#What’s-Changing"></a></h3><p>As part of a periodic product portfolio review, Oracle has made the business decision to terminate all AddThis services effective as of May 31, 2023.<img src="https://cdn.nlark.com/yuque/0/2023/svg/8391407/1687697102686-a8f7d67f-e0d7-4a91-8f75-7328ced3de35.svg#clientId=ue2da133d-1f48-4&from=paste&id=u9b6a40f1&originHeight=150&originWidth=200&originalType=url&ratio=1.25&rotation=0&showTitle=false&status=done&style=none&taskId=u56108136-5207-40b8-a18a-a242b3b1260&title=" alt="" loading="lazy"></p><h3 id="Key-Dates"><strong>Key Dates</strong><a class="fa-solid fa-hashtag" href="#Key-Dates"></a></h3><p>Existing AddThis users can expect that after May 31, 2023:</p><ul><li>the user must immediately cease its use of AddThis services, and promptly remove all AddThis related code and technology from its websites;</li><li>AddThis buttons may disappear from the user’s websites;</li><li>the AddThis dashboard associated with the user’s registration for AddThis, and all support for AddThis services, will no longer be available;</li><li>all features of AddThis configured to interoperate with user’s websites, any other Oracle services, or any third-party tools and plug-ins will no longer function.</li></ul><p>Oracle thanks you for your attention and understanding in this matter, and for the many years of allowing Oracle to provide this service to you.</p><h3 id="How-Do-I-Uninstall-the-AddThis-Button"><strong>How Do I Uninstall the AddThis Button?</strong><a class="fa-solid fa-hashtag" href="#How-Do-I-Uninstall-the-AddThis-Button"></a></h3><p>If you’ve copied and pasted the code into your website, go back into the code and look for <!-- ADDTHIS BUTTON BEGIN --> and <!-- ADDTHIS BUTTON END -->, then delete these lines and any code between them. If you’ve used another method to install AddThis on your page, please contact us and we’ll be happy to help you.</p><p>总结：终止服务，主题已移除</p><h2 id="Butterfly-如何使用">Butterfly 如何使用<a class="fa-solid fa-hashtag" href="#Butterfly-如何使用"></a></h2><p>打开 <a href="https://www.addthis.com/"><strong>AddThis</strong></a> 官网，标语是 Turn your visitors into engaged customers. 听起来是个营销工具，但<a href="https://butterfly.js.org/posts/ceeb73f/#%E5%88%86%E4%BA%AB">主题集成</a>的时候选择了它，并且没有做特别说明，只是让我们找到 <code>pub-id</code> ，并没有说如何配置</p><p>实际上要想和 AddToAny 或者 sharejs 一样使用文章内分享，我们得在控制台添加 Tools，就像下图所示<img src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1621142780727-b0ba0833-f60e-4a95-bb23-2875dd54c3c2.png#averageHue=%23f4f3f3&height=719&id=ue75333d4&originHeight=719&originWidth=1036&originalType=binary&ratio=1&rotation=0&showTitle=false&size=69605&status=done&style=none&title=&width=1036" alt="image.png" loading="lazy">然后选择行内工具<img src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1621142848618-8ff7ab42-7118-4161-9da3-77319203967a.png#averageHue=%23c9c7c7&height=808&id=udf8793a9&originHeight=808&originWidth=1269&originalType=binary&ratio=1&rotation=0&showTitle=false&size=54618&status=done&style=none&title=&width=1269" alt="image.png" loading="lazy">后面样式部分就根据自己喜好和需求按钮多少，在哪些页面显示等来自行配置啦。比如我还同时选择了，自动展开分享按钮。而且他能很好的自适应，并且后台修改之后我们博客无需任何操作即可更新。<img src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1621143046263-9f6aafa6-32f0-4ff6-85e4-be1b7e375617.png#averageHue=%23ff6b57&height=56&id=uc42770eb&originHeight=56&originWidth=1020&originalType=binary&ratio=1&rotation=0&showTitle=false&size=9002&status=done&style=none&title=&width=1020" alt="image.png" loading="lazy"><img src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1621143097471-85b42c6c-3561-4348-a164-f312328a598c.png#averageHue=%23f7f2f1&height=60&id=u37bce032&originHeight=60&originWidth=457&originalType=binary&ratio=1&rotation=0&showTitle=false&size=5342&status=done&style=none&title=&width=457" alt="image.png" loading="lazy"></p><h2 id="其他工具">其他工具<a class="fa-solid fa-hashtag" href="#其他工具"></a></h2><p>但还有其他工具也很好用，比如你点进文章来之前，应该有弹窗提示你要阅读隐私政策，实际上这是链接推广工具的活用。再比如放在顶栏作为临时公告，并且都有很好的自适应人性化选择，你下滑就会收起来，上滑再弹出。同样如果你是文章页或者订阅页面，因为我配置了仅在这些页面显示，会弹出一个订阅文章更新弹窗，这里收集邮件工具派上了用场，并且与 Mailchimp 配合完成了这项工作，至于配置邮件订阅，可以查看之前的文章 <a href="/posts/add-email-subscription-to-your-hexo-blog/"><strong>为你的 Hexo 博客添加邮件订阅</strong></a> 。<img src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1621144135285-b67842b1-b8c9-47a5-bf51-5bbe3e4953d5.png#averageHue=%23373737&height=780&id=u06f3186e&originHeight=780&originWidth=422&originalType=binary&ratio=1&rotation=0&showTitle=false&size=36857&status=done&style=none&title=&width=422" alt="image.png" loading="lazy">不过为了邮件订阅，我同样整合到了 <a href="https://www.tidio.com/">Tidio</a>，详情见<a href="/sub"><strong>订阅页面</strong></a>。当然如果你也在乎其他平台的关注数量，可以使用关注按钮来实现推广效果，文章推荐和打赏这里还是建议使用主题自带的就好。此外它还配有统计分析工具（这里强烈推荐您阅读 <a href="/privacy-policy"><strong>隐私政策</strong></a>），以帮助你实现更好的内容转化。<img src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1621143646876-ecadedf5-be33-4048-a8b9-a1591f3e8fe2.png#averageHue=%23fcfbfb&height=3898&id=ufa0dc4e3&originHeight=3898&originWidth=1584&originalType=binary&ratio=1&rotation=0&showTitle=false&size=279916&status=done&style=none&title=&width=1584" alt="image.png" loading="lazy">所以结合起来正常情况下我开起了五个工具<img src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1621144000308-6da07ca0-5aad-421f-a711-ac1d00aeefd7.png#averageHue=%23fafafa&height=1004&id=uf5bf2d57&originHeight=1004&originWidth=1579&originalType=binary&ratio=1&rotation=0&showTitle=false&size=83395&status=done&style=none&title=&width=1579" alt="image.png" loading="lazy">当需要发布临时公告时，我会根据重要程度选择左下角或者顶栏<img src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1621144072301-650ffe7c-8331-4bc4-ab8e-a8870f62dce1.png#averageHue=%23fbfbfb&height=405&id=uca0d9fc5&originHeight=405&originWidth=1583&originalType=binary&ratio=1&rotation=0&showTitle=false&size=32828&status=done&style=none&title=&width=1583" alt="image.png" loading="lazy">就免费来说，他做的很不错了，相比于专门做弹窗的 <a href="https://www.poptin.com/blog/zh/create-mailchimp-pop-ups-grow-email-list/">poptin</a> 似乎更简单的与 mailchimp 集成，但毕竟术业有专攻，比弹窗肯定不如人家，不过白嫖来说已经够了，我也不用使用 snackbar 刷新 jsd 缓存来实现临时公告了。而我现在重新使用了 webpushr 来实现浏览器通知，不管是否订阅，我均可以发送公告，并可保留最近 3 条公告，然后这就涉及到了空间利用率和用户体验的问题，所以我就得考虑关闭一些小部件，比如邮件订阅弹窗（据说会影响搜索引擎权重），还有分享按钮。电脑上无所谓，手机上显得有点挤（不过可以选择根据设备或者宽度自适应是否显示），即使我放在右下角，分享按钮放在左下角。所以我在公告栏加入了邮件订阅表格，并添加链接导向订阅页，但毕竟也没人订阅，还是链接导向<a href="/sub">订阅页面</a>吧。</p>]]></content><summary type="html">本文介绍了 AddThis 的使用</summary><category term="工具" scheme="https://blog.ccknbc.cc/categories/%E5%B7%A5%E5%85%B7/"/><category term="工具" scheme="https://blog.ccknbc.cc/tags/%E5%B7%A5%E5%85%B7/"/><comments>https://blog.ccknbc.cc/posts/the-real-addthis/#post-comment</comments></entry><entry><title>2023《好好》线上演唱会</title><link href="https://blog.ccknbc.cc/posts/song-about-you-live-in-the-sky-2023/"/><id>https://blog.ccknbc.cc/posts/song-about-you-live-in-the-sky-2023/</id><published>2023-03-08T12:30:00.000Z</published><updated>2023-03-12T09:00:00.000Z</updated><content type="html"><![CDATA[<blockquote><p>版权归属 台湾 相信音乐</p></blockquote><p>刘若英X苏慧伦X丁当X白安</p><p>2023《好好》线上演唱会</p><p>Song About You live in the sky 2023</p><h2 id="歌单一览">歌单一览<a class="fa-solid fa-hashtag" href="#歌单一览"></a></h2><blockquote><p><strong>已在视频中标出</strong></p></blockquote><hr><p>苏慧伦part</p><p>0:30 鸭子</p><p>4:27 被动</p><p>8:18说话</p><p>9:09 严重</p><p>13:12说话</p><p>13:24 恋恋真言</p><p>17:17 在我生命中的每一天 feat.丁当</p><hr><p>丁当part</p><p>21:58 开头</p><p>22:39 夜猫</p><p>26:13 花火</p><p>30:18说话</p><p>31:07 猜不透</p><p>35:12说话</p><p>37:25 女字旁</p><p>41:56 我爱他</p><hr><p>白安 part</p><p>46:54 不够特别的我不要</p><p>51:41 刚好</p><p>56:01说话</p><p>56:39 是什么让我遇见这样的你</p><p>1:00:39 没有人写歌给你过吧</p><p>1:05:39 让我逃离平庸的生活</p><hr><p>刘若英 part</p><p>1:10:25 所有相爱的人啊</p><p>1:14:28 成全</p><p>1:18:57说话</p><p>1:20:55 固执</p><p>1:25:47 缩影</p><p>1:29:30 talking feat.白安</p><p>1:31:20 妈妈 feat.白安</p><p>1:35:51 后来</p><p>1:40:52 快乐天堂 feat.苏慧伦、丁当、白安</p><hr><p>女加上子 每个女子生而为好</p><p>该对自己好 该好好疼爱自己</p><p>女子女子 就是好好</p><p>好歌相伴 好上加好</p><p>《好好》线上演唱会</p><p>一场女子们的闺密音乐聚会</p><p>宜尽兴 宜微醺 宜舒心 宜走心</p><p>妳有多久没有好好跟自己说说话了？</p><p>妳有多久没有好好聆听心底声音了？</p><p>妳有多久没有好好跟好友聊聊天了？</p><p>妳有多久没有好好欣赏美好事物了？</p><p>女子，要好好去爱，更要好好爱自己。</p><p>「3月8日」是一年一度的「国际妇女节」 （International Women’s Day），提醒每个女子要爱自己，更能去爱别人、去爱这个世界。 在这个这个专属于女子的节日，刘若英X苏慧伦X丁当X白安，四个女子的美好相遇，要在38妇女节的周三夜，以音乐用心地打造出一场属于每个你的 “Lady’s Night”，你可以与你自己，也可以与好闺密们，一起好好享受、好好尽欢、好好聆听一首首动人的女子心声。</p><p>如水 如石 如光 如树</p><p>一场音乐与自然的飨宴</p><p>将美好谱写 如歌而行</p><p>当音乐遇见自然 当内心遇见自己</p><p>美的时节 好的相遇</p><p>女子女子 好好与你以歌相聚</p><p>「女」加上「子」等于「好」，「女子」加上「女子」就是「好好」，好上加好！ 「好好女声」刘若英、苏慧伦、丁当、白安，春暖花开时节献唱，，以歌相聚在《好好》线上演唱会，不仅渲染多首个人经典好歌，彼此间更有精彩的合唱新火花！ 《好好》演唱会以「女野」概念，结合「水、石、光、树」为主题，女子在自然旷野里吟唱，呈现出如水之柔美、如石之坚强、如光之魔幻、如树之实在的演唱氛围。</p><p>新的一年一切都在慢慢变好，刘若英、苏慧伦、丁当、白安，四美女子以美好歌声陪伴每个认真生活、认真爱的女子，一起告别因疫情闷久的坏坏情绪，迎接温暖美丽的好好心情</p><h2 id="流媒体平台">流媒体平台<a class="fa-solid fa-hashtag" href="#流媒体平台"></a></h2><p><a href="https://t.cn/A6CNy1Rx">QQ音乐</a> | <a href="https://t.cn/A6CodoGG">网易云音乐</a> | <a href="https://t.cn/A6CNylOl">酷狗音乐</a> | <a href="https://t.cn/A6CNylOW">酷我音乐</a> | <a href="https://t.cn/A6CKz5LV">咪咕音乐</a> | <a href="https://t.cn/A6CKz5Lq">汽水音乐</a></p>]]></content><summary type="html">刘若英X苏慧伦X丁当X白安 2023《好好》线上演唱会 Song About You live in the sky 2023</summary><category term="音乐" scheme="https://blog.ccknbc.cc/categories/%E9%9F%B3%E4%B9%90/"/><category term="台湾" scheme="https://blog.ccknbc.cc/tags/%E5%8F%B0%E6%B9%BE/"/><category term="音乐" scheme="https://blog.ccknbc.cc/tags/%E9%9F%B3%E4%B9%90/"/><comments>https://blog.ccknbc.cc/posts/song-about-you-live-in-the-sky-2023/#post-comment</comments></entry><entry><title>Hexo Butterfly Algolia 搜索的使用</title><link href="https://blog.ccknbc.cc/posts/hexo-butterfly-algolia/"/><id>https://blog.ccknbc.cc/posts/hexo-butterfly-algolia/</id><published>2021-05-11T03:00:00.000Z</published><updated>2023-02-16T11:11:40.000Z</updated><content type="html"><![CDATA[<p>本文介绍了 Hexo Butterfly 主题下 Algolia 搜索的使用</p><p>本文首发在<a href="https://www.yuque.com/ccknbc/blog/24/"><strong>语雀</strong></a>自动同步更新至<a href="https://blog.ccknbc.cc/posts/hexo-butterfly-algolia/"><strong>CC 的部落格</strong></a></p><h2 id="注册账号">注册账号<a class="fa-solid fa-hashtag" href="#注册账号"></a></h2><p>前往 <a href="https://www.algolia.com/users/sign_up">Algolia</a> 官网注册一个账号，新建 应用和 index<img src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1620791672826-3bac29b1-3f60-4be8-bdc5-7b615e72f78a.png#averageHue=%23e2f9f1&height=721&id=u2756c9ea&originHeight=721&originWidth=1469&originalType=binary&ratio=1&rotation=0&showTitle=false&size=115021&status=done&style=none&title=&width=1469" alt="image.png" loading="lazy">数据中心建议选择新加坡或香港，当然根据你自己情况而定<img src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1620791714386-d2a2ac19-edfd-4c8b-ab02-9de7b770ff21.png#averageHue=%23f5f5fa&height=771&id=uce195a9b&originHeight=771&originWidth=1204&originalType=binary&ratio=1&rotation=0&showTitle=false&size=116921&status=done&style=none&title=&width=1204" alt="image.png" loading="lazy"><img src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1620791516501-3f36941d-cf13-49aa-bdb4-e956f632283a.png#averageHue=%23e8e9f6&height=447&id=u8c5cd22c&originHeight=447&originWidth=799&originalType=binary&ratio=1&rotation=0&showTitle=false&size=23823&status=done&style=none&title=&width=799" alt="image.png" loading="lazy"></p><h2 id="安装插件">安装插件<a class="fa-solid fa-hashtag" href="#安装插件"></a></h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-algolia --save</span><br><span class="line">npm install hexo-algoliasearch --save</span><br></pre></td></tr></table></figure><p>分别是 <a href="https://github.com/oncletom/hexo-algolia">hexo-algolia</a> 和 <a href="https://github.com/LouisBarranqueiro/hexo-algoliasearch">hexo-algoliasearch</a>，他们的介绍分别为</p><blockquote><p>Index your hexo website content to Algolia Search.<br>🔎 A plugin to index posts of your Hexo blog on Algolia</p></blockquote><p>也就很明显了，如果你想要全站搜索可选择前者，如果你只想搜索文章两者兼可。但前者不能将文章内容作为索引上传（其实老版本是支持的，但因为索引大小限制，在新版本取消索引了文章内容），后者目前仍可全文上传。然后就是 HEXO 配置文件中添加以下内容，下文基本以 <code>hexo-algoliasearch</code> 为例，因为我个人认为访客只会搜文章吧（事实上是搜索根本没人用，毕竟也根本没人访问），hexo-algolia 可查看官方文档，注意配置和命令的区别</p><blockquote><p>_config.yml :</p></blockquote><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">algolia:</span></span><br><span class="line"> <span class="attr">appId:</span> <span class="string">"Z7A3XW4R2I"</span></span><br><span class="line"> <span class="attr">apiKey:</span> <span class="string">"12db1ad54372045549ef465881c17e743"</span></span><br><span class="line"> <span class="attr">adminApiKey:</span> <span class="string">"40321c7c207e7f73b63a19aa24c4761b"</span></span><br><span class="line"> <span class="attr">chunkSize:</span> <span class="number">5000</span></span><br><span class="line"> <span class="attr">indexName:</span> <span class="string">"my-hexo-blog"</span></span><br><span class="line"> <span class="attr">fields:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">content:strip:truncate,0,500</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">excerpt:strip</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">gallery</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">permalink</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">photos</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">slug</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">tags</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">title</span></span><br></pre></td></tr></table></figure><p>为了保险，识别到插件，还可以加入以下内容</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">plugins:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">hexo-algoliasearch</span></span><br></pre></td></tr></table></figure><p>去主题配置文件打开 Algolia 搜索，记得关闭本地搜索，二者只能取其一！</p><blockquote><p>_config.butterfly.yml :</p></blockquote><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Algolia search</span></span><br><span class="line"><span class="attr">algolia_search:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">hits:</span></span><br><span class="line"> <span class="attr">per_page:</span> <span class="number">3</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Local search</span></span><br><span class="line"><span class="attr">local_search:</span></span><br><span class="line"> <span class="attr">enable:</span> <span class="literal">false</span></span><br></pre></td></tr></table></figure><p>然后来看以下具体的参数配置获取方式<code>appId</code>，<code>apiKey</code>，<code>adminApiKey</code>可在 API Keys 页面获取，注意保管好你的 Admin Key，不要让其他人知道，不建议直接写在配置中<img src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1620789827112-9247b7ae-f3c9-4807-93cd-46c2b8dbb2bc.png#averageHue=%23bdceb8&height=707&id=u63248bc0&originHeight=707&originWidth=1900&originalType=binary&ratio=1&rotation=0&showTitle=false&size=115433&status=done&style=none&title=&width=1900" alt="image.png" loading="lazy"><img src="https://cdn.jsdelivr.net/gh/oncletom/hexo-algolia@main/algolia-write-key.png#id=E3NUV&originHeight=1172&originWidth=1176&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&title=" alt="" loading="lazy">对于 Windows 系统，如果你不想每次都进行设定变量操作，可以添加<code>ALGOLIA_ADMIN_API_KEY</code>到系统的环境变量中<img src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1620789745876-cbf0d411-f694-45c7-bcbd-c0987f71f718.png#averageHue=%23efeeee&height=217&id=ub7f3b987&originHeight=217&originWidth=839&originalType=binary&ratio=1&rotation=0&showTitle=false&size=13413&status=done&style=none&title=&width=839" alt="image.png" loading="lazy">而 hexo-algolia 插件环境变量名称为 <code>HEXO_ALGOLIA_INDEXING_KEY</code> 注意根据对应的文档更改，当然也可以使用命令行工具</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Windows</span></span><br><span class="line"><span class="comment">## 微软的 powershell)</span></span><br><span class="line"><span class="variable">$env</span>:ALGOLIA_ADMIN_API_KEY = <span class="string">""</span></span><br><span class="line"></span><br><span class="line"><span class="comment">## cmd</span></span><br><span class="line">建议不用 cmd，正经人不用 cmd</span><br><span class="line"></span><br><span class="line"><span class="comment"># Linux</span></span><br><span class="line"><span class="comment">## sh/bash</span></span><br><span class="line"><span class="built_in">export</span> ALGOLIA_ADMIN_API_KEY=</span><br><span class="line"></span><br><span class="line"><span class="comment">## fish</span></span><br><span class="line"><span class="built_in">set</span> -xg ALGOLIA_ADMIN_API_KEY <span class="string">""</span></span><br></pre></td></tr></table></figure><p>如果你和我一样使用的自动部署，例如 Github Actions，你可以在工作流中一开始或者对应的步骤添加环境变量，记得 Secrets 中也要添加哦</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">jobs:</span></span><br><span class="line"> <span class="attr">deploy:</span></span><br><span class="line"> <span class="attr">name:</span> <span class="string">Deploy</span> <span class="string">Hexo</span> <span class="string">Public</span> <span class="string">To</span> <span class="string">Pages</span></span><br><span class="line"> <span class="attr">runs-on:</span> <span class="string">ubuntu-latest</span></span><br><span class="line"> <span class="attr">env:</span></span><br><span class="line"> <span class="attr">TZ:</span> <span class="string">Asia/Shanghai</span></span><br><span class="line"> <span class="attr">ALGOLIA_ADMIN_API_KEY:</span> <span class="string">${{</span> <span class="string">secrets.ALGOLIA_ADMIN_API_KEY</span> <span class="string">}}</span></span><br></pre></td></tr></table></figure><p>或者使用</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">export</span> ALGOLIA_ADMIN_API_KEY=…</span><br><span class="line"><span class="built_in">export</span> HEXO_ALGOLIA_INDEXING_KEY=…</span><br></pre></td></tr></table></figure><p><code>indexName</code> 即你开始新建的索引名称<img src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1620790208902-1a6311bf-bd58-4889-9261-f2b6dd4d779e.png#averageHue=%23eaebef&height=64&id=u57f4c82d&originHeight=64&originWidth=379&originalType=binary&ratio=1&rotation=0&showTitle=false&size=5668&status=done&style=none&title=&width=379" alt="image.png" loading="lazy">其他内容保持默认即可，但对于<code>fields</code></p><h3 id="配置示例">配置示例<a class="fa-solid fa-hashtag" href="#配置示例"></a></h3><p>这里选择不截取上传全文，并且删除 html 标签，只留下有用的搜索内容</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">fields:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">content:strip</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">excerpt:strip</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">gallery</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">permalink</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">photos</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">slug</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">tags</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">title</span></span><br></pre></td></tr></table></figure><p>但对于博客来说，没人会按照 tags photos（或者 cover）来搜索吧，所以有些内容不必要上传，并如果你和我一样有多个镜像站，在不改源码（algolia.js）的情况下，不会使用 permalink 而使用 path（改源码可以使用 slug，但没必要），并且只留下必要的内容，如下所示：</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">algolia:</span></span><br><span class="line"> <span class="attr">appId:</span> <span class="string">"947RX7HP3E"</span></span><br><span class="line"> <span class="attr">apiKey:</span> <span class="string">"9114b3fa2a3307b2cc8eec7e3ae5a8ea"</span></span><br><span class="line"> <span class="attr">chunkSize:</span> <span class="number">5000</span></span><br><span class="line"> <span class="attr">indexName:</span> <span class="string">"ccknbc-blog"</span></span><br><span class="line"> <span class="attr">fields:</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">path</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">title</span></span><br><span class="line"> <span class="bullet">-</span> <span class="string">content:strip</span></span><br></pre></td></tr></table></figure><p>这样有了标题，全文内容，路径即可在不同镜像站找到对应的页面，而不是跳到主站，当然你选择跳到主站无可厚非。</p><h2 id="使用命令">使用命令<a class="fa-solid fa-hashtag" href="#使用命令"></a></h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">hexo algolia</span><br><span class="line">而在这之前还需要hexo g生成文件</span><br><span class="line">所以具体使用命令就是</span><br><span class="line">hexo cl && hexo g && hexo algolia</span><br><span class="line">或者在未安装 HEXO CLI 的情况下使用以下命令</span><br><span class="line">npm run clean && npm run build && hexo algolia -n && gulp</span><br></pre></td></tr></table></figure><h3 id="可选配置">可选配置<a class="fa-solid fa-hashtag" href="#可选配置"></a></h3><p>是否删除之前建立好的索引重新建立索引？</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">hexo algolia -n</span><br><span class="line">或者</span><br><span class="line">hexo algolia --no-clear</span><br></pre></td></tr></table></figure><p>注意查看命令行输出信息，然后去官网检查索引是否生成<img src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1620792250950-8c6c2e31-a5f4-41d3-8526-c101b88ca2f0.png#averageHue=%23bad8e7&height=676&id=u0aaf2648&originHeight=676&originWidth=1865&originalType=binary&ratio=1&rotation=0&showTitle=false&size=125864&status=done&style=none&title=&width=1865" alt="image.png" loading="lazy">事实上到这里已经可以获得下图所示的搜索效果（这是冰老师博客的效果，它使用的是 hexo-algolia，毕竟有关于我界面）<img src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1623297781030-708a3fa6-a56d-4fe0-bb45-5c3bb9081eba.png#averageHue=%23f3f6f9&clientId=uc24fb27d-4fc5-4&from=paste&id=udc02fc71&originHeight=508&originWidth=751&originalType=binary&ratio=2&rotation=0&showTitle=false&size=35158&status=done&style=none&taskId=u0178d8fc-c514-4ab9-9efb-12d94a7bcc6&title=" alt="image.png" loading="lazy"></p><h2 id="Algolia-配置">Algolia 配置<a class="fa-solid fa-hashtag" href="#Algolia-配置"></a></h2><p>这里不细节讲，你可以查阅<a href="https://community.algolia.com/instantsearch.js/v2/getting-started.html">官方文档</a>，虽然有些过时的参数，但结合 <a href="https://www.algolia.com/doc/guides/building-search-ui/upgrade-guides/js/#upgrade-from-v2-to-v3">Upgrade from v2 to v3</a> 还是勉强能用，蝴蝶已经做好了高亮标题，虽然会查询文章内容，但并不会高亮文章内容节选，我们要做的就是修改部分 js 内容，并对应的设置好 Algolia，以便按照我们要求的优先顺序展示搜索结果，而不是默认的很奇怪的排序，毕竟针对中文分词他是一个一个分不能按照英语那样，针对英文我们可以开启分词查询，驼峰查找而不是盲目的匹配整个单词，并且允许拼错字母或汉字的情况存在，这些都是一个搜索系统要考虑的问题。然后针对搜索速度，我们可以对文章内容进行切片或者属性的刻画，但 V2 所支持的功能实在太少，派的上用场的大概就是 匹配的字词内容，匹配度，匹配内容的摘录（默认 10 个字词），还有高级搜索用法的启用。<img src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1620792329244-9538543c-aafa-4a2a-a13b-a856839d99b4.png#averageHue=%23fafafc&height=490&id=u96dacffc&originHeight=490&originWidth=1526&originalType=binary&ratio=1&rotation=0&showTitle=false&size=53168&status=done&style=none&title=&width=1526" alt="image.png" loading="lazy"></p><p><img src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1620792359705-aca4db80-07ec-41b5-ba89-3e398e4832c3.png#averageHue=%23fefefe&height=286&id=u1d01bcee&originHeight=572&originWidth=1520&originalType=binary&ratio=1&rotation=0&showTitle=false&size=75266&status=done&style=none&title=&width=760" alt="image.png" loading="lazy"><img src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1620792403427-919eeaf3-beee-43b8-ba15-33d179fb7483.png#averageHue=%23fefefe&height=390&id=ua294bd74&originHeight=780&originWidth=1510&originalType=binary&ratio=1&rotation=0&showTitle=false&size=98311&status=done&style=none&title=&width=755" alt="image.png" loading="lazy"><img src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1620792429374-c10f685c-42df-4b2f-8112-b63b811686f5.png#averageHue=%23fefefe&height=815&id=u8c98eecf&originHeight=815&originWidth=1524&originalType=binary&ratio=1&rotation=0&showTitle=false&size=88864&status=done&style=none&title=&width=1524" alt="image.png" loading="lazy"><img src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1620792467160-7192cedf-ad20-4fd0-bcb2-4f7557fc904d.png#averageHue=%23fefefe&height=567&id=u6ca53735&originHeight=567&originWidth=1515&originalType=binary&ratio=1&rotation=0&showTitle=false&size=65520&status=done&style=none&title=&width=1515" alt="image.png" loading="lazy"><img src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1620792523507-460b449b-cd80-4efc-897b-898aa544d09a.png#averageHue=%23fefefe&height=592&id=u28791a5d&originHeight=1183&originWidth=1537&originalType=binary&ratio=1&rotation=0&showTitle=false&size=130557&status=done&style=none&title=&width=768.5" alt="image.png" loading="lazy"><img src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1620792559182-d559fb1a-94e4-49ad-a13a-f9848fa7f784.png#averageHue=%23fefefe&height=363&id=u5d9546e2&originHeight=725&originWidth=1511&originalType=binary&ratio=1&rotation=0&showTitle=false&size=75980&status=done&style=none&title=&width=755.5" alt="image.png" loading="lazy"><img src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1620792603109-0c127f51-0fd2-4f86-9290-1f25cf7b4deb.png#averageHue=%23fefefe&height=358&id=u1977ad48&originHeight=358&originWidth=999&originalType=binary&ratio=1&rotation=0&showTitle=false&size=26859&status=done&style=none&title=&width=999" alt="image.png" loading="lazy"><img src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1620792626661-af14bf9c-6dfb-4306-beaf-d4153095ffbf.png#averageHue=%23fefefe&height=444&id=uf6f4182f&originHeight=444&originWidth=997&originalType=binary&ratio=1&rotation=0&showTitle=false&size=27018&status=done&style=none&title=&width=997" alt="image.png" loading="lazy"><img src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1620792659190-7a5767d3-64f9-4f57-a247-1bbe65f45da5.png#averageHue=%23fefefe&height=196&id=u51baa85f&originHeight=196&originWidth=976&originalType=binary&ratio=1&rotation=0&showTitle=false&size=17315&status=done&style=none&title=&width=976" alt="image.png" loading="lazy"></p><h2 id="JS-修改">JS 修改<a class="fa-solid fa-hashtag" href="#JS-修改"></a></h2><h3 id="主题-4-0-0-以下版本">主题 4.0.0 以下版本<a class="fa-solid fa-hashtag" href="#主题-4-0-0-以下版本"></a></h3><p>到这里还没有结束，如果你这样操作就会有一个问题，假设你的访问流量很大，有很多人用搜索功能，那么免费的 1 万次搜索额度可能不够一个月的使用，需要按下<code>ENTER</code>键再执行搜索而不是实时搜索，因此可以稍作修改（blog\themes\butterfly\source\js\search\algolia.js) js 的部分内容，不想动源码的可以保存到其他与主题不冲突的路径，然后更换 CDN 地址即可主要修改以下内容，然后就是排版问题改了改位置，不喜欢的可以不改，很直白就不用过多解释了，这样就可获得和本博客一样的搜索效果了</p><figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"> search.addWidget(</span><br><span class="line"> instantsearch.widgets.searchBox({</span><br><span class="line"> container: '#algolia-search-input',</span><br><span class="line"> reset: false,</span><br><span class="line"> magnifier: false,</span><br><span class="line"><span class="addition">+ searchOnEnterKeyPressOnly: true,</span></span><br><span class="line"> placeholder: GLOBAL_CONFIG.algolia.languages.input_placeholder</span><br><span class="line"> })</span><br><span class="line"> )</span><br><span class="line"> search.addWidget(</span><br><span class="line"> instantsearch.widgets.hits({</span><br><span class="line"> container: '#algolia-hits',</span><br><span class="line"> templates: {</span><br><span class="line"> item: function (data) {</span><br><span class="line"> const link = data.permalink ? data.permalink : (GLOBAL_CONFIG.root + data.path)</span><br><span class="line"> return (</span><br><span class="line"> '<a href="' + link + '" class="algolia-hit-item-link"><b>' +</span><br><span class="line"> data._highlightResult.title.value + '</b><br>'</span><br><span class="line"><span class="addition">+ + data._snippetResult.contentStrip.value + '<br>( 匹配字词 : '</span></span><br><span class="line"><span class="addition">+ + data._highlightResult.contentStrip.matchedWords + ' ) | ( 匹配等级 : '</span></span><br><span class="line"><span class="addition">+ + data._highlightResult.contentStrip.matchLevel + ' )</a>'</span></span><br><span class="line"> )</span><br><span class="line"> },</span><br></pre></td></tr></table></figure><h3 id="主题-4-0-0-以上版本">主题 4.0.0 以上版本<a class="fa-solid fa-hashtag" href="#主题-4-0-0-以上版本"></a></h3><p>已经升级到 V4 版本，那么一些特性就可以使用了，修改内容其实差不多，只是建议对于第 87 行的页数限制，主要是为了手机上排版美观，不会转到下一行，但是这样会有一个问题，如果结果超过 5 页，那么将无法显示，最后一页代表第 5 页，所以我个人会选择删掉这个参数限制，同时合并删除了部分代码，以及使用 widget 的 powerby 组件而不是官方的 svg 代码解决方案。另外因为新版官方的每次访问网站都会有一次全局请求，这在消耗免费额度的同时，也影响网站加载的速度，所以修改默认行为为按下回车后再请求同样的部分参数发生了改变（L55-59），可以自行比对或查看<a href="https://www.algolia.com/doc/guides/building-search-ui/getting-started/js/"><strong>官方文档</strong></a>，也可以直接<a href="https://cdn.jsdelivr.net/gh/CCKNBC/ccknbc.github.io/js/search/algolia.js"><strong>引用我的</strong></a></p><p><strong>特别提一嘴</strong><strong>官方切片方式对我来说 140 个字太长了，所以如果可以接受就用官方的，不用做其他更改，但想要和我的显示方式一样，就注意配置好切片，默认是 10 个词符，毕竟有现成的切片高亮处理可以用，就没必要再来一次了</strong></p><p><img src="https://cdn.nlark.com/yuque/0/2022/png/8391407/1669548282470-47f14d26-cf31-4b01-8890-5946f68c699e.png#averageHue=%23fefefe&clientId=ued74b2b9-3a9c-4&from=paste&height=1202&id=u32ebaced&originHeight=1502&originWidth=1918&originalType=binary&ratio=1&rotation=0&showTitle=false&size=143892&status=done&style=none&taskId=u8901c9ce-eae5-4860-bc2a-9aefe3102df&title=&width=1534.4" alt="image.png" loading="lazy">另外，新版浏览器支持搜索并定位高亮处理，所以对跳转链接也做了处理，算是弥补了一点不能精准定位的缺陷，比如点击如下链接它会跳转到搜索结果对应的位置，至于前后匹配多少字符你们自行修改，但也是处于不太好用的状态，毕竟是分片还是有点奇怪，对英文来说应该是单词识别，只是中文恰巧是另一标准，单字变成了词</p><p><a href="/posts/how-to-ask-questions-the-smart-way/#:~:text=%E5%8B%BF%E6%BB%A5%E7%94%A8-,%E8%A1%A8%E6%83%85,-%E7%AC%A6%E5%8F%B7%E5%92%8C">#:~:text=勿滥用-,表情,-符号和</a></p><p><img src="https://cdn.nlark.com/yuque/0/2022/png/8391407/1669550104799-99697278-0900-4dca-aa04-65a5a2536c1d.png#averageHue=%23242322&clientId=ud07bf8a0-f34e-4&from=paste&height=718&id=uee396e9f&originHeight=898&originWidth=1348&originalType=binary&ratio=1&rotation=0&showTitle=false&size=149894&status=done&style=none&taskId=ua07a641e-1673-4136-8536-b373abc53e2&title=&width=1078.4" alt="image.png" loading="lazy"></p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">CDN:</span></span><br><span class="line"> <span class="comment"># search</span></span><br><span class="line"> <span class="attr">algolia_js:</span> <span class="string">https://cdn.jsdelivr.net/gh/CCKNBC/ccknbc.github.io/js/search/algolia.js</span></span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">window</span>.<span class="title function_">addEventListener</span>(<span class="string">"load"</span>, <span class="function">() =></span> {</span><br><span class="line"> <span class="keyword">const</span> <span class="title function_">openSearch</span> = (<span class="params"></span>) => {</span><br><span class="line"> <span class="keyword">const</span> bodyStyle = <span class="variable language_">document</span>.<span class="property">body</span>.<span class="property">style</span>;</span><br><span class="line"> bodyStyle.<span class="property">width</span> = <span class="string">"100%"</span>;</span><br><span class="line"> bodyStyle.<span class="property">overflow</span> = <span class="string">"hidden"</span>;</span><br><span class="line"> btf.<span class="title function_">animateIn</span>(<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">"search-mask"</span>), <span class="string">"to_show 0.5s"</span>);</span><br><span class="line"> btf.<span class="title function_">animateIn</span>(</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">"#algolia-search .search-dialog"</span>),</span><br><span class="line"> <span class="string">"titleScale 0.5s"</span></span><br><span class="line"> );</span><br><span class="line"> <span class="built_in">setTimeout</span>(<span class="function">() =></span> {</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">"#algolia-search .ais-SearchBox-input"</span>).<span class="title function_">focus</span>();</span><br><span class="line"> }, <span class="number">100</span>);</span><br><span class="line"></span><br><span class="line"> <span class="comment">// shortcut: ESC</span></span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">"keydown"</span>, <span class="keyword">function</span> <span class="title function_">f</span>(<span class="params">event</span>) {</span><br><span class="line"> <span class="keyword">if</span> (event.<span class="property">code</span> === <span class="string">"Escape"</span>) {</span><br><span class="line"> <span class="title function_">closeSearch</span>();</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">removeEventListener</span>(<span class="string">"keydown"</span>, f);</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"> };</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> <span class="title function_">closeSearch</span> = (<span class="params"></span>) => {</span><br><span class="line"> <span class="keyword">const</span> bodyStyle = <span class="variable language_">document</span>.<span class="property">body</span>.<span class="property">style</span>;</span><br><span class="line"> bodyStyle.<span class="property">width</span> = <span class="string">""</span>;</span><br><span class="line"> bodyStyle.<span class="property">overflow</span> = <span class="string">""</span>;</span><br><span class="line"> btf.<span class="title function_">animateOut</span>(</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">"#algolia-search .search-dialog"</span>),</span><br><span class="line"> <span class="string">"search_close .5s"</span></span><br><span class="line"> );</span><br><span class="line"> btf.<span class="title function_">animateOut</span>(<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">"search-mask"</span>), <span class="string">"to_hide 0.5s"</span>);</span><br><span class="line"> };</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> <span class="title function_">searchClickFn</span> = (<span class="params"></span>) => {</span><br><span class="line"> <span class="variable language_">document</span></span><br><span class="line"> .<span class="title function_">querySelector</span>(<span class="string">"#search-button > .search"</span>)</span><br><span class="line"> .<span class="title function_">addEventListener</span>(<span class="string">"click"</span>, openSearch);</span><br><span class="line"> };</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> <span class="title function_">searchClickFnOnce</span> = (<span class="params"></span>) => {</span><br><span class="line"> <span class="variable language_">document</span></span><br><span class="line"> .<span class="title function_">getElementById</span>(<span class="string">"search-mask"</span>)</span><br><span class="line"> .<span class="title function_">addEventListener</span>(<span class="string">"click"</span>, closeSearch);</span><br><span class="line"> <span class="variable language_">document</span></span><br><span class="line"> .<span class="title function_">querySelector</span>(<span class="string">"#algolia-search .search-close-button"</span>)</span><br><span class="line"> .<span class="title function_">addEventListener</span>(<span class="string">"click"</span>, closeSearch);</span><br><span class="line"> };</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> algolia = <span class="variable constant_">GLOBAL_CONFIG</span>.<span class="property">algolia</span>;</span><br><span class="line"> <span class="keyword">const</span> isAlgoliaValid = algolia.<span class="property">appId</span> && algolia.<span class="property">apiKey</span> && algolia.<span class="property">indexName</span>;</span><br><span class="line"> <span class="keyword">if</span> (!isAlgoliaValid) {</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">console</span>.<span class="title function_">error</span>(<span class="string">"Algolia setting is invalid!"</span>);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> search = <span class="title function_">instantsearch</span>({</span><br><span class="line"> <span class="attr">indexName</span>: algolia.<span class="property">indexName</span>,</span><br><span class="line"> <span class="attr">searchClient</span>: <span class="title function_">algoliasearch</span>(algolia.<span class="property">appId</span>, algolia.<span class="property">apiKey</span>),</span><br><span class="line"> <span class="title function_">searchFunction</span>(<span class="params">helper</span>) {</span><br><span class="line"> helper.<span class="property">state</span>.<span class="property">query</span> && helper.<span class="title function_">search</span>();</span><br><span class="line"> },</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> configure = instantsearch.<span class="property">widgets</span>.<span class="title function_">configure</span>({</span><br><span class="line"> <span class="attr">hitsPerPage</span>: algolia.<span class="property">per_page</span> || <span class="number">5</span>,</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> searchBox = instantsearch.<span class="property">widgets</span>.<span class="title function_">searchBox</span>({</span><br><span class="line"> <span class="attr">container</span>: <span class="string">"#algolia-search-input"</span>,</span><br><span class="line"> <span class="attr">showReset</span>: <span class="literal">false</span>,</span><br><span class="line"> <span class="attr">showSubmit</span>: <span class="literal">false</span>,</span><br><span class="line"> <span class="attr">searchAsYouType</span>: <span class="literal">false</span>,</span><br><span class="line"> <span class="attr">placeholder</span>: <span class="variable constant_">GLOBAL_CONFIG</span>.<span class="property">algolia</span>.<span class="property">languages</span>.<span class="property">input_placeholder</span>,</span><br><span class="line"> <span class="attr">showLoadingIndicator</span>: <span class="literal">true</span>,</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> hits = instantsearch.<span class="property">widgets</span>.<span class="title function_">hits</span>({</span><br><span class="line"> <span class="attr">container</span>: <span class="string">"#algolia-hits"</span>,</span><br><span class="line"> <span class="attr">templates</span>: {</span><br><span class="line"> <span class="title function_">item</span>(<span class="params">data</span>) {</span><br><span class="line"> <span class="keyword">const</span> link = data.<span class="property">permalink</span></span><br><span class="line"> ? data.<span class="property">permalink</span></span><br><span class="line"> : <span class="variable constant_">GLOBAL_CONFIG</span>.<span class="property">root</span> + data.<span class="property">path</span>;</span><br><span class="line"> <span class="keyword">const</span> content = data.<span class="property">_snippetResult</span>.<span class="property">contentStrip</span>.<span class="property">value</span>;</span><br><span class="line"> <span class="keyword">return</span> <span class="string">`</span></span><br><span class="line"><span class="string"> <a href="<span class="subst">${link}</span>#:~:text=<span class="subst">${content.substring(</span></span></span><br><span class="line"><span class="subst"><span class="string"> content.indexOf(<span class="string">"<mark>"</span>) - <span class="number">3</span>,</span></span></span><br><span class="line"><span class="subst"><span class="string"> content.indexOf(<span class="string">"<mark>"</span>)</span></span></span><br><span class="line"><span class="subst"><span class="string"> )}</span>-,<span class="subst">${content.substring(</span></span></span><br><span class="line"><span class="subst"><span class="string"> content.indexOf(<span class="string">"<mark>"</span>) + <span class="number">6</span>,</span></span></span><br><span class="line"><span class="subst"><span class="string"> content.indexOf(<span class="string">"</mark>"</span>)</span></span></span><br><span class="line"><span class="subst"><span class="string"> )}</span>,-<span class="subst">${content.substring(</span></span></span><br><span class="line"><span class="subst"><span class="string"> content.indexOf(<span class="string">"</mark>"</span>) + <span class="number">7</span>,</span></span></span><br><span class="line"><span class="subst"><span class="string"> content.indexOf(<span class="string">"</mark>"</span>) + <span class="number">10</span></span></span></span><br><span class="line"><span class="subst"><span class="string"> )}</span>" class="algolia-hit-item-link"></span></span><br><span class="line"><span class="string"> <b><span class="subst">${data._highlightResult.title.value || <span class="string">"no-title"</span>}</span></b></span></span><br><span class="line"><span class="string"> <br><span class="subst">${content}</span></br></span></span><br><span class="line"><span class="string"> 匹配字词: <em><mark><span class="subst">${</span></span></span><br><span class="line"><span class="subst"><span class="string"> data._highlightResult.contentStrip.matchedWords</span></span></span><br><span class="line"><span class="subst"><span class="string"> }</span></mark></em> | 匹配等级: <em><mark><span class="subst">${</span></span></span><br><span class="line"><span class="subst"><span class="string"> data._highlightResult.contentStrip.matchLevel</span></span></span><br><span class="line"><span class="subst"><span class="string"> }</span></mark></em></span></span><br><span class="line"><span class="string"> </a>`</span>;</span><br><span class="line"> },</span><br><span class="line"> <span class="attr">empty</span>: <span class="keyword">function</span> (<span class="params">data</span>) {</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <span class="string">'<div id="algolia-hits-empty">'</span> +</span><br><span class="line"> <span class="variable constant_">GLOBAL_CONFIG</span>.<span class="property">algolia</span>.<span class="property">languages</span>.<span class="property">hits_empty</span>.<span class="title function_">replace</span>(</span><br><span class="line"> <span class="regexp">/\$\{query}/</span>,</span><br><span class="line"> data.<span class="property">query</span></span><br><span class="line"> ) +</span><br><span class="line"> <span class="string">"</div>"</span></span><br><span class="line"> );</span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> stats = instantsearch.<span class="property">widgets</span>.<span class="title function_">stats</span>({</span><br><span class="line"> <span class="attr">container</span>: <span class="string">"#algolia-info > .algolia-stats"</span>,</span><br><span class="line"> <span class="attr">templates</span>: {</span><br><span class="line"> <span class="attr">text</span>: <span class="keyword">function</span> (<span class="params">data</span>) {</span><br><span class="line"> <span class="keyword">const</span> stats = <span class="variable constant_">GLOBAL_CONFIG</span>.<span class="property">algolia</span>.<span class="property">languages</span>.<span class="property">hits_stats</span></span><br><span class="line"> .<span class="title function_">replace</span>(<span class="regexp">/\$\{hits}/</span>, data.<span class="property">nbHits</span>)</span><br><span class="line"> .<span class="title function_">replace</span>(<span class="regexp">/\$\{time}/</span>, data.<span class="property">processingTimeMS</span>);</span><br><span class="line"> <span class="keyword">return</span> <span class="string">`<hr><span class="subst">${stats}</span>`</span>;</span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> powerBy = instantsearch.<span class="property">widgets</span>.<span class="title function_">poweredBy</span>({</span><br><span class="line"> <span class="attr">container</span>: <span class="string">"#algolia-info > .algolia-poweredBy"</span>,</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> pagination = instantsearch.<span class="property">widgets</span>.<span class="title function_">pagination</span>({</span><br><span class="line"> <span class="attr">container</span>: <span class="string">"#algolia-pagination"</span>,</span><br><span class="line"> <span class="attr">totalPages</span>: algolia.<span class="property">totalPages</span>,</span><br><span class="line"> <span class="attr">templates</span>: {</span><br><span class="line"> <span class="attr">first</span>: <span class="string">'<i class="fa-solid fa-angle-double-left" title="第一页"></i>'</span>,</span><br><span class="line"> <span class="attr">last</span>: <span class="string">'<i class="fa-solid fa-angle-double-right" title="最后一页"></i>'</span>,</span><br><span class="line"> <span class="attr">previous</span>: <span class="string">'<i class="fa-solid fa-angle-left" title="上一页"></i>'</span>,</span><br><span class="line"> <span class="attr">next</span>: <span class="string">'<i class="fa-solid fa-angle-right" title="下一页"></i>'</span>,</span><br><span class="line"> },</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"> search.<span class="title function_">addWidgets</span>([configure, searchBox, hits, stats, powerBy, pagination]); <span class="comment">// add the widgets to the instantsearch instance</span></span><br><span class="line"></span><br><span class="line"> search.<span class="title function_">start</span>();</span><br><span class="line"></span><br><span class="line"> <span class="title function_">searchClickFn</span>();</span><br><span class="line"> <span class="title function_">searchClickFnOnce</span>();</span><br><span class="line"></span><br><span class="line"> <span class="variable language_">window</span>.<span class="title function_">addEventListener</span>(<span class="string">"pjax:complete"</span>, <span class="function">() =></span> {</span><br><span class="line"> <span class="title function_">getComputedStyle</span>(<span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">"#algolia-search .search-dialog"</span>))</span><br><span class="line"> .<span class="property">display</span> === <span class="string">"block"</span> && <span class="title function_">closeSearch</span>();</span><br><span class="line"> <span class="title function_">searchClickFn</span>();</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"> <span class="variable language_">window</span>.<span class="property">pjax</span> &&</span><br><span class="line"> search.<span class="title function_">on</span>(<span class="string">"render"</span>, <span class="function">() =></span> {</span><br><span class="line"> <span class="variable language_">window</span>.<span class="property">pjax</span>.<span class="title function_">refresh</span>(<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">"algolia-hits"</span>));</span><br><span class="line"> });</span><br><span class="line">});</span><br></pre></td></tr></table></figure><h2 id="效果预览">效果预览<a class="fa-solid fa-hashtag" href="#效果预览"></a></h2><p><img src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1623297948979-16f7476e-0978-49ee-a667-2dc060896c88.png#averageHue=%23f2f5f8&clientId=uc24fb27d-4fc5-4&from=paste&id=ud3ca95b0&originHeight=413&originWidth=753&originalType=binary&ratio=2&rotation=0&showTitle=false&size=40542&status=done&style=none&taskId=u9d85e4b7-062e-432f-b6d8-854d2e5d2eb&title=" alt="image.png" loading="lazy">（这个是因为我修改了源码，实际上也能通过修改 JS 实现，但大多数人不会关心这些搜索小贴士）<img src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1623298049726-3cded22e-2e40-44b3-a445-d542b3bc3c80.png#averageHue=%23f2f5f9&clientId=uc24fb27d-4fc5-4&from=paste&id=u13b48f0e&originHeight=601&originWidth=750&originalType=binary&ratio=2&rotation=0&showTitle=false&size=61545&status=done&style=none&taskId=ua59892ff-66db-45b5-a905-ac97bcb7b4d&title=" alt="image.png" loading="lazy">对于中文它当作单字匹配<img src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1623298062241-b4dd37f7-aa87-485f-a394-950943e0c211.png#averageHue=%23f3f6f9&clientId=uc24fb27d-4fc5-4&from=paste&id=u8d3029fa&originHeight=498&originWidth=752&originalType=binary&ratio=2&rotation=0&showTitle=false&size=40466&status=done&style=none&taskId=uca3eae79-9718-4088-8c72-c34e98f6782&title=" alt="image.png" loading="lazy">允许拼写错误<img src="https://cdn.nlark.com/yuque/0/2021/png/8391407/1623298137784-eb2713f9-377f-4f5d-824d-a7a7b7a881c4.png#averageHue=%23f3f6f9&clientId=uc24fb27d-4fc5-4&from=paste&id=uc7968f09&originHeight=598&originWidth=750&originalType=binary&ratio=2&rotation=0&showTitle=false&size=61697&status=done&style=none&taskId=u9c8b459e-8141-46ef-9d7e-11bd8cc917f&title=" alt="image.png" loading="lazy"></p><h2 id="特别说明">特别说明<a class="fa-solid fa-hashtag" href="#特别说明"></a></h2><p>因两个月前已申请通过，本博客已切换至不限搜索次数的<a href="https://docsearch.algolia.com/"><strong>DocSearch</strong></a>！同时也加入了<a href="https://www.algolia.com/for-open-source/"><strong>开源计划</strong></a>，但因为 10DSN 太香了，虽然 instantsearch 可玩性更好，但我也只申请了 200k/月的额度（虽然可以增加），所以为了即时搜索我还是选择了白嫖，而且设定为每天自动爬取的话，省去了生成索引上传的这一步骤，节省了自动部署的时间。而且爬取到数据后，前端我并非一定要使用 docsearch 方案，用 instantsearch 配合其他插件也不是不可以。<img src="https://cdn.nlark.com/yuque/0/2023/png/8391407/1676545133728-0a8f5c54-05e9-422c-b427-21087c6b0372.png#averageHue=%23f6f6d9&clientId=udb920223-80c3-4&from=paste&height=214&id=u36c9a03d&originHeight=267&originWidth=1762&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=27690&status=done&style=none&taskId=uf09c1846-dc8c-444d-8cf5-a72ad68c85a&title=&width=1409.6" alt="image.png" loading="lazy"></p>]]></content><summary type="html">本文介绍了 Hexo Butterfly 主题下 Algolia 搜索的使用</summary><category term="工具" scheme="https://blog.ccknbc.cc/categories/%E5%B7%A5%E5%85%B7/"/><category term="工具" scheme="https://blog.ccknbc.cc/tags/%E5%B7%A5%E5%85%B7/"/><comments>https://blog.ccknbc.cc/posts/hexo-butterfly-algolia/#post-comment</comments></entry></feed>